From 92c59b2834c3f4b9dbed1b34c16c6b4c73359ee4 Mon Sep 17 00:00:00 2001 From: Lex Zhukov Date: Wed, 12 Jul 2017 19:33:43 +0300 Subject: [PATCH] feat(dashboard): add a weather widget (#14) --- .../pages/dashboard/dashboard.component.html | 6 +- src/app/pages/dashboard/dashboard.module.ts | 2 + .../security-cameras.component.scss | 2 +- .../dashboard/weather/weather.component.html | 60 ++++++++++ .../dashboard/weather/weather.component.scss | 112 ++++++++++++++++++ .../dashboard/weather/weather.component.ts | 10 ++ 6 files changed, 186 insertions(+), 6 deletions(-) create mode 100644 src/app/pages/dashboard/weather/weather.component.html create mode 100644 src/app/pages/dashboard/weather/weather.component.scss create mode 100644 src/app/pages/dashboard/weather/weather.component.ts diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html index 519e6d6a..bf34cc60 100644 --- a/src/app/pages/dashboard/dashboard.component.html +++ b/src/app/pages/dashboard/dashboard.component.html @@ -36,11 +36,7 @@ Traffic Consumption - - - Calendar - - +
diff --git a/src/app/pages/dashboard/dashboard.module.ts b/src/app/pages/dashboard/dashboard.module.ts index 5d4d296a..c531f5f9 100644 --- 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 index 0d1e2ed9..96bec3f1 100644 --- 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 new file mode 100644 index 00000000..e61e8c42 --- /dev/null +++ b/src/app/pages/dashboard/weather/weather.component.html @@ -0,0 +1,60 @@ + + +
+ Minsk +
+
+ Mon 29 May +
+
+
+
+ 20° +
+
+ +
+
+
+
+ max + 23° +
+
+ min + 19° +
+
+ wind + 4 km/h +
+
+ hum + 87% +
+
+
+
+
+ Sun + + 17° +
+
+ Mon + + 19° +
+
+ Tue + + 22° +
+
+ Wed + + 21° +
+
+ + diff --git a/src/app/pages/dashboard/weather/weather.component.scss b/src/app/pages/dashboard/weather/weather.component.scss new file mode 100644 index 00000000..f60f6964 --- /dev/null +++ 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 new file mode 100644 index 00000000..0a02e5bf --- /dev/null +++ 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 { +}