Added widget for dashboard

src/app/battery/battery.service.ts

@@ -8,14 +8,15 @@ export class BatteryService {
     readonly firestore;
 
     batteries = [];
-    charge: number = 0;
-    last: Date;
+    charge: number;
+    lastCharge: number;
     relayMode?: boolean = null;
     temp: number = 0;
 
+    get charging() { return this.lastCharge < this.charge; }
+
     get icon() {
         if (!this.batteries.length) return 'battery_alert';
-        if (!this.last) return 'battery_warn';
 
         return 'battery_full';
 
@@ -45,7 +46,6 @@ export class BatteryService {
         this.firestore = firebaseApp.firestore();
         this.firestore.settings({timestampsInSnapshots: true});
         this.firestore.collection('Battery').doc('170614D').onSnapshot(snap => {
-            this.last = new Date();
             let data = snap.data();
 
             this.relayMode = data.config.relayMode || null
@@ -56,12 +56,12 @@ export class BatteryService {
                 return {
                     charge: data.modules[key][last].charge,
                     chargeHistory: data.modules[key].map((val, i) => ({name: i, value: val.charge})),
-                    charging: data.modules[key][last] > data.modules[key][last - 1],
                     name: key,
                     temp: data.modules[key][last].temp,
                     tempHistory: data.modules[key].map((val, i) => ({name: i, value: val.temp}))
                 }
             });
+            this.lastCharge = this.charge;
             this.charge = this.batteries.reduce((acc, battery) => acc + battery.charge, 0) / 2;
             this.temp = this.batteries.reduce((acc, battery) => acc + battery.temp, 0) / 4;
         });

src/app/battery/widget/widget.component.html

@@ -0,0 +1,9 @@
+<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>
+    </div>
+</div>

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

@@ -0,0 +1,13 @@
+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() { }
+}