Added weather widget

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,

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) { }
+}

src/app/battery/widget/widget.component.ts

@@ -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() { }
-}

src/app/dashboard/dashboard.component.html

@@ -1,7 +1,22 @@
-<div class="p-3">
+<div class="desktop-height p-3">
-    <mat-card class="w-100 hover" routerLink="/battery">
+    <div>
-        <mat-card-content>
+        <h1 class="d-inline">{{now | async | date: 'fullDate'}}</h1>
-            <battery-widget></battery-widget>
+        <h1 class="d-inline float-right">{{now | async | date: 'mediumTime'}}</h1>
-        </mat-card-content>
+    </div>
-    </mat-card>
+    <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>

src/app/dashboard/dashboard.component.ts

@@ -1,15 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import {Component} from '@angular/core';
-import {AppComponent} from '../app.component';
+import {timer} from 'rxjs';
+import {map} from 'rxjs/operators';
 
 @Component({
-  selector: 'app-dashboard',
+    selector: 'app-dashboard',
-  templateUrl: './dashboard.component.html'
+    templateUrl: './dashboard.component.html'
 })
-export class DashboardComponent implements OnInit {
+export class DashboardComponent {
-
+    now = timer(0, 1000).pipe(map(() => new Date()));
-  constructor(private app: AppComponent) { }
-
-  ngOnInit() {
-  }
 
+    constructor() { }
 }

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>

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) { }
+}