From 454fe07d4935823643ef48c2e35bac96f734240b Mon Sep 17 00:00:00 2001
From: Zak Timson <zaktimson@gmail.com>
Date: Tue, 1 Jan 2019 22:53:19 -0500
Subject: [PATCH] Cleaned up dashboard

---
 .../widget/batteryWidget.component.html       |  7 ++--
 src/app/dashboard/dashboard.component.html    | 32 +++++++++----------
 src/app/dashboard/dashboard.component.ts      | 13 ++++++++
 .../widget/weatherWidget.component.html       |  5 +--
 4 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/src/app/battery/widget/batteryWidget.component.html b/src/app/battery/widget/batteryWidget.component.html
index 389c1aa..ea7c69a 100644
--- a/src/app/battery/widget/batteryWidget.component.html
+++ b/src/app/battery/widget/batteryWidget.component.html
@@ -1,9 +1,6 @@
 <div class="w-100 h-100">
     <div class="d-flex align-items-center">
-        <div><mat-icon class="mr-2" style="font-size: 3rem; height: 3rem; width: 3rem">{{batteryService.icon}}</mat-icon> </div>
-        <div class="flex-grow-1">
-            <h1 class="d-inline mb-0">Powerwall: <span [ngClass]="{'text-success': batteryService.charging, 'text-danger': !batteryService.charging}">{{batteryService.charge | round}} V</span></h1>
-            <h1 class="float-right mb-0 text-muted">{{batteryService.temp | round}} °C</h1>
-        </div>
+        <mat-icon class="mr-3" style="font-size: 36px; height: 36px">{{batteryService.icon}}</mat-icon>
+        <h2 class="d-inline mb-0">Powerwall: <span [ngClass]="{'text-success': batteryService.charging, 'text-danger': !batteryService.charging}">{{batteryService.charge | round}} V</span></h2>
     </div>
 </div>
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 397b2ac..9558955 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -1,24 +1,22 @@
 <div class="desktop-height p-3">
     <div style="max-width: 1000px;">
-        <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 class="d-flex">
+            <div class="pr-2 border-right border-white">
+                <h1 class="mb-0">{{formatDate(now | async)}}</h1>
             </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 class="pl-2">
+                <h1 class="mb-0">{{formatTime(now | async)}}</h1>
             </div>
         </div>
+        <mat-card class="mt-3 w-100 hover" routerLink="/battery">
+            <mat-card-content>
+                <battery-widget></battery-widget>
+            </mat-card-content>
+        </mat-card>
+        <mat-card class="mt-3 w-100 hover" routerLink="/weather">
+            <mat-card-content>
+                <weather-widget class="mx-auto"></weather-widget>
+            </mat-card-content>
+        </mat-card>
     </div>
 </div>
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index 0df59aa..78784b4 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -10,4 +10,17 @@ export class DashboardComponent {
     now = timer(0, 1000).pipe(map(() => new Date()));
 
     constructor() { }
+
+    formatTime(date: Date) {
+        if(!date) return '';
+        let hours = date.getHours();
+        let minutes = date.getMinutes();
+        if(hours > 12) hours -= 12;
+        return `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}`
+    }
+
+    formatDate(date: Date) {
+        if(!date) return '';
+        return `${date.toDateString().substr(4, 3)} ${date.getDate()}`;
+    }
 }
diff --git a/src/app/weather/widget/weatherWidget.component.html b/src/app/weather/widget/weatherWidget.component.html
index 5614741..f806f32 100644
--- a/src/app/weather/widget/weatherWidget.component.html
+++ b/src/app/weather/widget/weatherWidget.component.html
@@ -1,9 +1,6 @@
 <div class="w-100 h-100">
+    <h3 class="mb-0 text-center">{{weatherService.weather?.currently.summary}}</h3>
     <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>