From d31b4ae93b2320632656e01bb04e7f14e309efd8 Mon Sep 17 00:00:00 2001 From: ztimson Date: Tue, 25 Dec 2018 21:20:32 -0500 Subject: [PATCH] New battery interface --- src/app/app.module.ts | 3 +- src/app/battery/battery.component.html | 77 +++++++++++++++----------- src/app/battery/battery.component.ts | 15 ++--- src/app/battery/battery.service.ts | 30 ++++++---- src/styles.scss | 6 -- 5 files changed, 70 insertions(+), 61 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c99b399..cfcac47 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/battery/battery.component.html b/src/app/battery/battery.component.html index 10afefd..d4ad400 100644 --- a/src/app/battery/battery.component.html +++ b/src/app/battery/battery.component.html @@ -1,34 +1,49 @@
-

- {{batteryService.icon}} - Powerwall: - {{batteryService.average * 100}}% - UNKNOWN -

-
- -
-
- +
+
+

Powerwall: {{batteryService.total}} V

+
+
+ + Auto + On + Off + +
+ +
+
+
{{battery.name}}
+
+
+ +
+
+ +
+
+
+ +
+
+ +
+
diff --git a/src/app/battery/battery.component.ts b/src/app/battery/battery.component.ts index e48bda7..f2cd9d7 100644 --- a/src/app/battery/battery.component.ts +++ b/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() { - setTimeout(() => { - this.chart1.update(); - this.chart2.update(); - }, 1000); - } + ngOnInit() { } - percentFormat(val) { + voltFormat(val) { return `${val} V` } diff --git a/src/app/battery/battery.service.ts b/src/app/battery/battery.service.ts index 7e3f4a7..e445623 100644 --- a/src/app/battery/battery.service.ts +++ b/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]})); - 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}))})); + console.log(this.batteries) }); } + + setRelayMode(mode?:boolean) { + this.firestore.collection('Battery').doc('170724D').update({config: {relayMode: mode}}); + } } diff --git a/src/styles.scss b/src/styles.scss index 38acccc..35811bc 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -30,12 +30,6 @@ html, body { background-color: #2F323A; } -.ngx-charts { - text { - fill: #ffffff; - } -} - .mobile-height{ height: calc(100vh - 56px); }