New battery interface

src/app/app.module.ts

@@ -6,7 +6,7 @@ import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {FormsModule} from '@angular/forms';
 import {
-    MatButtonModule,
+    MatButtonModule, MatButtonToggleModule,
     MatCardModule,
     MatDividerModule, MatFormFieldModule,
     MatIconModule, MatInputModule,
@@ -48,6 +48,7 @@ export const firebaseApp = firebase.initializeApp(environment.firebase);
         HttpClientModule,
         LineChartModule,
         MatButtonModule,
+        MatButtonToggleModule,
         MatCardModule,
         MatDividerModule,
         MatFormFieldModule,

src/app/battery/battery.component.html

@@ -1,34 +1,49 @@
 <div class="p-3">
-    <h1 class="mb-3">
+    <div class="d-flex mb-3">
-        <mat-icon>{{batteryService.icon}}</mat-icon>
+        <div class="d-flex flex-grow-1 align-items-center">
-        Powerwall:
+            <h3 class="mb-0 text-white">Powerwall: {{batteryService.total}} V</h3>
-        <span *ngIf="batteryService.batteries.length" class="text-muted">{{batteryService.average * 100}}%</span>
+        </div>
-        <span *ngIf="!batteryService.batteries.length" class="text-muted">UNKNOWN</span>
+        <div class="d-flex flex-grow-1 align-content-center justify-content-end">
-    </h1>
+            <mat-button-toggle-group (change)="batteryService.setRelayMode($event.value)">
-    <div class="w-100 mb-5" style="min-height: 400px">
+                <mat-button-toggle [value]="null" checked>Auto</mat-button-toggle>
-        <ngx-charts-area-chart #chart1
+                <mat-button-toggle [value]="true">On</mat-button-toggle>
-                               [results]="batteryService.chargeData"
+                <mat-button-toggle [value]="false">Off</mat-button-toggle>
-                               [scheme]="scheme"
+            </mat-button-toggle-group>
-                               [yAxis]="true"
+        </div>
-                               [yScaleMin]="0"
-                               [yScaleMax]="25"
-                               [yAxisTickFormatting]="percentFormat"
-                               legendTitle="Charge"
-                               [legend]="!app.mobile"
-                               [roundDomains]="true"
-        ></ngx-charts-area-chart>
-    </div>
-    <div class="w-100 pt-5" style="min-height: 400px">
-        <ngx-charts-area-chart #chart2
-                               [results]="batteryService.temperatureData"
-                               [scheme]="scheme"
-                               [yAxis]="true"
-                               [yScaleMin]="0"
-                               [yScaleMax]="80"
-                               [yAxisTickFormatting]="tempFormat"
-                               legendTitle="Temperature"
-                               [legend]="!app.mobile"
-                               [roundDomains]="true"
-        ></ngx-charts-area-chart>
     </div>
+    <mat-card class="mb-2" *ngFor="let battery of batteryService.batteries; let i = index">
+        <div class="d-flex">
+            <div class="d-flex flex-grow-1 align-items-center">
+                <h5 class="mb-0">{{battery.name}}</h5>
+            </div>
+            <div class="d-flex flex-grow-1 align-items-center justify-content-center">
+                <button mat-button (click)="selected = i" [ngClass]="{'text-success': battery.charging, 'text-danger': !battery.charging}">{{battery.charge | round: 1}} V</button>
+            </div>
+            <div class="d-flex flex-grow-1 align-items-center justify-content-end text-muted">
+                <button mat-button (click)="selected = batteryService.batteries.length + i">{{battery.temp | round}} °C</button>
+            </div>
+        </div>
+        <div *ngIf="selected == i" class="w-100" style="height: 200px">
+            <ngx-charts-area-chart class="w-100 h-100"
+                                   [results]="[{name: battery.name, series: battery.chargeHistory}]"
+                                   [scheme]="scheme"
+                                   [yAxis]="true"
+                                   [yScaleMin]="0"
+                                   [yScaleMax]="25"
+                                   [yAxisTickFormatting]="voltFormat"
+                                   [roundDomains]="true"
+            ></ngx-charts-area-chart>
+        </div>
+        <div *ngIf="selected == batteryService.batteries.length + i" class="w-100" style="height: 200px">
+            <ngx-charts-area-chart class="w-100 h-100"
+                                   [results]="[{name: battery.name, series: battery.tempHistory}]"
+                                   [scheme]="scheme"
+                                   [yAxis]="true"
+                                   [yScaleMin]="0"
+                                   [yScaleMax]="50"
+                                   [yAxisTickFormatting]="tempFormat"
+                                   [roundDomains]="true"
+            ></ngx-charts-area-chart>
+        </div>
+    </mat-card>
 </div>

src/app/battery/battery.component.ts

@@ -1,6 +1,5 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {BatteryService} from './battery.service';
-import {BarVerticalComponent} from '@swimlane/ngx-charts/release/bar-chart';
 import {AppComponent} from '../app.component';
 
 @Component({
@@ -8,8 +7,6 @@ import {AppComponent} from '../app.component';
     templateUrl: './battery.component.html'
 })
 export class BatteryComponent implements OnInit {
-    @ViewChild('chart1') chart1: BarVerticalComponent;
-    @ViewChild('chart2') chart2: BarVerticalComponent;
 
     scheme = {
         name: 'cool',
@@ -17,17 +14,13 @@ export class BatteryComponent implements OnInit {
         group: 'Ordinal',
         domain: ['#a8385d', '#7aa3e5', '#a27ea8', '#aae3f5', '#adcded', '#a95963', '#8796c0', '#7ed3ed', '#50abcc', '#ad6886']
     };
+    selected;
 
     constructor(public app: AppComponent, public batteryService: BatteryService) { }
 
-    ngOnInit() {
+    ngOnInit() { }
-        setTimeout(() => {
-            this.chart1.update();
-            this.chart2.update();
-        }, 1000);
-    }
 
-    percentFormat(val) {
+    voltFormat(val) {
         return `${val} V`
     }
 

src/app/battery/battery.service.ts

@@ -7,11 +7,9 @@ import {firebaseApp} from '../app.module';
 export class BatteryService {
     readonly firestore;
 
-    average = 0;
-    temperatureData = [];
-    chargeData = [];
     batteries = [];
     last: Date;
+    total: number = 0;
 
     get icon() {
         if (!this.batteries.length) return 'battery_alert';
@@ -20,9 +18,9 @@ export class BatteryService {
         return 'battery_full';
 
         let temp = 'battery';
-        //if (this.batteries.length) temp += '_charging';
+        // if (this.batteries.length) temp += '_charging';
 
-        if (this.average <= 20) {
+        /*if (this.average <= 20) {
             temp += '_20';
         } else if (this.average <= 30) {
             temp += '_30';
@@ -36,7 +34,7 @@ export class BatteryService {
             temp += '_90';
         } else if (this.average > 90) {
             temp += 'full'
-        }
+        }*/
 
         return temp;
     }
@@ -46,14 +44,22 @@ export class BatteryService {
         this.firestore.settings({timestampsInSnapshots: true});
         this.firestore.collection('Battery').doc('170724D').onSnapshot(snap => {
             this.last = new Date();
-
             let data = snap.data();
-            console.log(data);
+            this.batteries = Object.keys(data.modules).map(key => ({
+                charge: data.modules[key][0].charge,
+                chargeHistory: data.modules[key].map((val, i) => ({name: i, value: val.charge})),
+                charging: data.modules[key][0] > data.modules[key][1],
+                name: key,
+                temp: data.modules[key][0].temp,
+                tempHistory: data.modules[key].map((val, i) => ({name: i, value: val.temp}))
+            }));
+            this.total = this.batteries.reduce((acc, battery) => acc + battery.charge, 0) / 2;
 
-            this.batteries = Object.keys(data.modules).map(key => ({name: key, history: data.modules[key]}));
+            console.log(this.batteries)
-            this.average = this.batteries.reduce((acc, battery) => acc + battery.history[0].charge, 0) / this.batteries.length;
-            this.chargeData = this.batteries.map(battery => ({name: battery.name, series: battery.history.map((history, i) => ({name: i, value: history.charge}))}));
-            this.temperatureData = this.batteries.map(battery => ({name: battery.name, series: battery.history.map((history, i) => ({name: i, value: Math.round((history.temp || 0) * 10) / 10}))}));
         });
     }
+
+    setRelayMode(mode?:boolean) {
+        this.firestore.collection('Battery').doc('170724D').update({config: {relayMode: mode}});
+    }
 }

src/styles.scss

@@ -30,12 +30,6 @@ html, body {
     background-color: #2F323A;
 }
 
-.ngx-charts {
-    text {
-        fill: #ffffff;
-    }
-}
-
 .mobile-height{
     height: calc(100vh - 56px);
 }