feat(dashboard): add a weather widget (#14)

cerndb · Jul 12, 2017 · 92c59b2 · 92c59b2
1 parent 05c15bb
commit 92c59b2
Show file tree

Hide file tree

Showing 6 changed files with 186 additions and 6 deletions.
diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html
@@ -36,11 +36,7 @@
       <nga-card-header>Traffic Consumption</nga-card-header>
       <nga-card-body></nga-card-body>
     </nga-card>
-
-    <nga-card size="medium">
-      <nga-card-header>Calendar</nga-card-header>
-      <nga-card-body></nga-card-body>
-    </nga-card>
+    <ngx-weather></ngx-weather>
   </div>
 
   <div class="col-lg-6">

diff --git a/src/app/pages/dashboard/dashboard.module.ts b/src/app/pages/dashboard/dashboard.module.ts
@@ -12,6 +12,7 @@ import { TemperatureDraggerComponent } from './temperature/temperature-dragger/t
 import { TeamComponent } from './team/team.component';
 import { SecurityCamerasComponent } from './security-cameras/security-cameras.component';
 import { ElectricityComponent } from './electricity/electricity.component';
+import { WeatherComponent } from './weather/weather.component';
 
 @NgModule({
   imports: [
@@ -30,6 +31,7 @@ import { ElectricityComponent } from './electricity/electricity.component';
     TeamComponent,
     SecurityCamerasComponent,
     ElectricityComponent,
+    WeatherComponent,
   ],
 })
 export class DashboardModule { }
diff --git a/src/app/pages/dashboard/security-cameras/security-cameras.component.scss b/src/app/pages/dashboard/security-cameras/security-cameras.component.scss
@@ -72,7 +72,7 @@
       position: absolute;
       width: 100%;
       height: 210px;
-      opacity: 0.5;
+      opacity: 0.2;
       transition: 0.1s;
     }
 

diff --git a/src/app/pages/dashboard/weather/weather.component.html b/src/app/pages/dashboard/weather/weather.component.html
@@ -0,0 +1,60 @@
+<nga-card size="medium">
+  <nga-card-body>
+    <div class="location">
+      <span>Minsk</span>
+    </div>
+    <div class="date">
+      <span>Mon 29 May</span>
+    </div>
+    <div class="daily-forecast">
+      <div class="info">
+        <div class="temperature">
+          <span>20&deg;</span>
+        </div>
+        <div class="icon">
+          <i class="ion-ios-sunny-outline"></i>
+        </div>
+      </div>
+      <div class="details">
+        <div class="parameter">
+          <span class="parameter-name">max</span>
+          <span class="parameter-value">23&deg;</span>
+        </div>
+        <div class="parameter">
+          <span class="parameter-name">min</span>
+          <span class="parameter-value">19&deg;</span>
+        </div>
+        <div class="parameter">
+          <span class="parameter-name">wind</span>
+          <span class="parameter-value">4 km/h</span>
+        </div>
+        <div class="parameter">
+          <span class="parameter-name">hum</span>
+          <span class="parameter-value">87%</span>
+        </div>
+      </div>
+    </div>
+    <div class="weekly-forecast">
+      <div class="day">
+        <span class="caption">Sun</span>
+        <i class="ion-ios-cloudy-outline"></i>
+        <span class="temperature">17&deg;</span>
+      </div>
+      <div class="day">
+        <span class="caption">Mon</span>
+        <i class="ion-ios-sunny-outline"></i>
+        <span class="temperature">19&deg;</span>
+      </div>
+      <div class="day">
+        <span class="caption">Tue</span>
+        <i class="ion-ios-rainy-outline"></i>
+        <span class="temperature">22&deg;</span>
+      </div>
+      <div class="day">
+        <span class="caption">Wed</span>
+        <i class="ion-ios-partlysunny-outline"></i>
+        <span class="temperature">21&deg;</span>
+      </div>
+    </div>
+  </nga-card-body>
+</nga-card>
diff --git a/src/app/pages/dashboard/weather/weather.component.scss b/src/app/pages/dashboard/weather/weather.component.scss
@@ -0,0 +1,112 @@
+@import '../../../@theme/styles/variables';
+
+@include nga-install-component() {
+
+  nga-card {
+    nga-card-body {
+      height: 100%;
+      padding: 2rem;
+      background-image: radial-gradient(circle at 50% 50%, #423f8c, #302c6e);
+    }
+  }
+
+  .location {
+    font-family: nga-theme(font-secondary);
+    font-size: 3rem;
+    line-height: 3rem;
+    font-weight: nga-theme(font-weight-light);
+    color: nga-theme(color-fg-heading);
+  }
+
+  .date {
+    font-family: nga-theme(font-main);
+    font-size: 1.25rem;
+    line-height: 1.25rem;
+    font-weight: nga-theme(font-weight-light);
+  }
+
+  .daily-forecast {
+    display: flex;
+    flex-direction: column;
+    margin-top: -1.5rem;
+
+    .info {
+      display: flex;
+      justify-content: space-around;
+
+      .temperature {
+        font-size: 5rem;
+        font-weight: nga-theme(font-weight-bolder);
+        font-family: nga-theme(font-secondary);
+        color: nga-theme(color-fg-heading);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+
+      .icon {
+        font-size: 10rem;
+        line-height: 10rem;
+        text-shadow: 0 3px 0 #665ebd,
+                    0 4px 10px rgba(33, 7, 77, 0.5),
+                    0 2px 10px #928dff;
+      }
+    }
+
+    .details {
+      display: flex;
+      justify-content: space-around;
+
+      .parameter {
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+
+        .parameter-name {
+          font-family: nga-theme(font-main);
+          font-size: 1.25rem;
+          font-weight: nga-theme(font-weight-light);
+          line-height: 2rem;
+        }
+
+        .parameter-value {
+          font-family: nga-theme(font-secondary);
+          color: nga-theme(color-fg-heading);
+          font-weight: nga-theme(font-weight-bolder);
+        }
+      }
+    }
+  }
+
+  .weekly-forecast {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 2rem;
+
+    .day {
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+
+      .caption {
+        text-transform: uppercase;
+        font-family: nga-theme(font-secondary);
+        color: nga-theme(color-fg-heading);
+        font-weight: nga-theme(font-weight-bold);
+        font-size: 1.25rem;
+      }
+
+      i {
+        font-size: 2.5rem;
+        line-height: 2.5rem;
+      }
+
+      .temperature {
+        color: nga-theme(color-fg-heading);
+        font-family: nga-theme(font-secondary);
+        font-weight: nga-theme(font-weight-bold);
+        font-size: 1.25rem;
+      }
+    }
+  }
+}
diff --git a/src/app/pages/dashboard/weather/weather.component.ts b/src/app/pages/dashboard/weather/weather.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-weather',
+  styleUrls: ['./weather.component.scss'],
+  templateUrl: './weather.component.html',
+})
+
+export class WeatherComponent {
+}