From 02807cb59a2fe4b2f0aabdcd01e3157ef0807d74 Mon Sep 17 00:00:00 2001
From: Zak Timson <zaktimson@gmail.com>
Date: Tue, 1 Jan 2019 20:51:03 -0500
Subject: [PATCH] Added weather widget

---
 src/app/app.module.ts                         |  6 ++--
 ...nent.html => batteryWidget.component.html} |  0
 .../battery/widget/batteryWidget.component.ts | 10 +++++++
 src/app/battery/widget/widget.component.ts    | 13 --------
 src/app/dashboard/dashboard.component.html    | 27 +++++++++++++----
 src/app/dashboard/dashboard.component.ts      | 18 +++++------
 .../widget/weatherWidget.component.html       | 30 +++++++++++++++++++
 .../weather/widget/weatherWidget.component.ts | 10 +++++++
 8 files changed, 83 insertions(+), 31 deletions(-)
 rename src/app/battery/widget/{widget.component.html => batteryWidget.component.html} (100%)
 create mode 100644 src/app/battery/widget/batteryWidget.component.ts
 delete mode 100644 src/app/battery/widget/widget.component.ts
 create mode 100644 src/app/weather/widget/weatherWidget.component.html
 create mode 100644 src/app/weather/widget/weatherWidget.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4e3b994..61e97a4 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -25,20 +25,22 @@ import * as firebase from 'firebase/app';
 import {ServiceWorkerModule} from '@angular/service-worker';
 import {LineChartModule, NgxChartsModule} from '@swimlane/ngx-charts';
 import {RoundPipe} from './round.pipe';
-import { WidgetComponent } from './battery/widget/widget.component';
+import {BatteryWidgetComponent} from './battery/widget/batteryWidget.component';
+import {WeatherWidgetComponent} from './weather/widget/weatherWidget.component';
 
 export const firebaseApp = firebase.initializeApp(environment.firebase);
 
 @NgModule({
     declarations: [
         AppComponent,
+        BatteryWidgetComponent,
         DashboardComponent,
         BatteryComponent,
         WeatherComponent,
         SecurityComponent,
         LoginComponent,
         RoundPipe,
-        WidgetComponent
+        WeatherWidgetComponent
     ],
     imports: [
         AppRoutingModule,
diff --git a/src/app/battery/widget/widget.component.html b/src/app/battery/widget/batteryWidget.component.html
similarity index 100%
rename from src/app/battery/widget/widget.component.html
rename to src/app/battery/widget/batteryWidget.component.html
diff --git a/src/app/battery/widget/batteryWidget.component.ts b/src/app/battery/widget/batteryWidget.component.ts
new file mode 100644
index 0000000..217a832
--- /dev/null
+++ b/src/app/battery/widget/batteryWidget.component.ts
@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+import {BatteryService} from '../battery.service';
+
+@Component({
+  selector: 'battery-widget',
+  templateUrl: './batteryWidget.component.html'
+})
+export class BatteryWidgetComponent {
+  constructor(public batteryService: BatteryService) { }
+}
diff --git a/src/app/battery/widget/widget.component.ts b/src/app/battery/widget/widget.component.ts
deleted file mode 100644
index cb831e1..0000000
--- a/src/app/battery/widget/widget.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import {BatteryService} from '../battery.service';
-
-@Component({
-  selector: 'battery-widget',
-  templateUrl: './widget.component.html'
-})
-export class WidgetComponent implements OnInit {
-
-  constructor(public batteryService: BatteryService) { }
-
-  ngOnInit() { }
-}
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 0fb098c..fe38f70 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -1,7 +1,22 @@
-<div class="p-3">
-    <mat-card class="w-100 hover" routerLink="/battery">
-        <mat-card-content>
-            <battery-widget></battery-widget>
-        </mat-card-content>
-    </mat-card>
+<div class="desktop-height p-3">
+    <div>
+        <h1 class="d-inline">{{now | async | date: 'fullDate'}}</h1>
+        <h1 class="d-inline float-right">{{now | async | date: 'mediumTime'}}</h1>
+    </div>
+    <div class="mt-3 d-flex">
+        <div class="flex-grow-1 pr-2">
+            <mat-card class="w-100 hover" routerLink="/weather">
+                <mat-card-content>
+                    <weather-widget class="mx-auto"></weather-widget>
+                </mat-card-content>
+            </mat-card>
+        </div>
+        <div class="flex-grow-1 pl-2">
+            <mat-card class="w-100 hover" routerLink="/battery">
+                <mat-card-content>
+                    <battery-widget></battery-widget>
+                </mat-card-content>
+            </mat-card>
+        </div>
+    </div>
 </div>
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index af51c7f..0df59aa 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -1,15 +1,13 @@
-import { Component, OnInit } from '@angular/core';
-import {AppComponent} from '../app.component';
+import {Component} from '@angular/core';
+import {timer} from 'rxjs';
+import {map} from 'rxjs/operators';
 
 @Component({
-  selector: 'app-dashboard',
-  templateUrl: './dashboard.component.html'
+    selector: 'app-dashboard',
+    templateUrl: './dashboard.component.html'
 })
-export class DashboardComponent implements OnInit {
-
-  constructor(private app: AppComponent) { }
-
-  ngOnInit() {
-  }
+export class DashboardComponent {
+    now = timer(0, 1000).pipe(map(() => new Date()));
 
+    constructor() { }
 }
diff --git a/src/app/weather/widget/weatherWidget.component.html b/src/app/weather/widget/weatherWidget.component.html
new file mode 100644
index 0000000..5614741
--- /dev/null
+++ b/src/app/weather/widget/weatherWidget.component.html
@@ -0,0 +1,30 @@
+<div class="w-100 h-100">
+    <div class="d-flex align-items-center">
+        <div>
+            <h3 class="mb-0">London, ON</h3>
+            <h3 class="mb-0">{{weatherService.weather?.currently.summary}}</h3>
+        </div>
+        <div><i [class]="'mt-4 wi wi-fw ' + weatherService.icon" style="font-size: 6rem"></i></div>
+        <div>
+            <div>
+                <h1 class="mb-0">{{weatherService.weather?.currently.temperature | round: 1}} °C</h1>
+            </div>
+            <div>
+                Feels Like: {{weatherService.weather?.currently.apparentTemperature | round}} °C
+            </div>
+        </div>
+        <div class="pl-3">
+            <div>
+                <mat-icon style="font-size: 18px; width: 18px; height: 18px">arrow_upward</mat-icon>
+                {{weatherService.weather?.daily.data[0].temperatureHigh | round}} °C
+            </div>
+            <div>
+                <mat-icon style="font-size: 18px; width: 18px; height: 18px">arrow_downward</mat-icon>
+                {{weatherService.weather?.daily.data[0].temperatureLow | round}} °C
+            </div>
+            <div>
+                <i class="wi wi-fw wi-umbrella"></i> {{weatherService.weather?.daily.data[0].precipProbability * 100 | round}}%
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/app/weather/widget/weatherWidget.component.ts b/src/app/weather/widget/weatherWidget.component.ts
new file mode 100644
index 0000000..132ab75
--- /dev/null
+++ b/src/app/weather/widget/weatherWidget.component.ts
@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+import {WeatherService} from '../weather.service';
+
+@Component({
+  selector: 'weather-widget',
+  templateUrl: './weatherWidget.component.html'
+})
+export class WeatherWidgetComponent {
+  constructor(public weatherService: WeatherService) { }
+}