New battery interface
This commit is contained in:
parent
556146a415
commit
d31b4ae93b
@ -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,
|
||||
|
||||
@ -1,34 +1,49 @@
|
||||
<div class="p-3">
|
||||
<h1 class="mb-3">
|
||||
<mat-icon>{{batteryService.icon}}</mat-icon>
|
||||
Powerwall:
|
||||
<span *ngIf="batteryService.batteries.length" class="text-muted">{{batteryService.average * 100}}%</span>
|
||||
<span *ngIf="!batteryService.batteries.length" class="text-muted">UNKNOWN</span>
|
||||
</h1>
|
||||
<div class="w-100 mb-5" style="min-height: 400px">
|
||||
<ngx-charts-area-chart #chart1
|
||||
[results]="batteryService.chargeData"
|
||||
<div class="d-flex mb-3">
|
||||
<div class="d-flex flex-grow-1 align-items-center">
|
||||
<h3 class="mb-0 text-white">Powerwall: {{batteryService.total}} V</h3>
|
||||
</div>
|
||||
<div class="d-flex flex-grow-1 align-content-center justify-content-end">
|
||||
<mat-button-toggle-group (change)="batteryService.setRelayMode($event.value)">
|
||||
<mat-button-toggle [value]="null" checked>Auto</mat-button-toggle>
|
||||
<mat-button-toggle [value]="true">On</mat-button-toggle>
|
||||
<mat-button-toggle [value]="false">Off</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
</div>
|
||||
</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]="percentFormat"
|
||||
legendTitle="Charge"
|
||||
[legend]="!app.mobile"
|
||||
[yAxisTickFormatting]="voltFormat"
|
||||
[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"
|
||||
<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]="80"
|
||||
[yScaleMax]="50"
|
||||
[yAxisTickFormatting]="tempFormat"
|
||||
legendTitle="Temperature"
|
||||
[legend]="!app.mobile"
|
||||
[roundDomains]="true"
|
||||
></ngx-charts-area-chart>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
@ -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`
|
||||
}
|
||||
|
||||
|
||||
@ -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}});
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,12 +30,6 @@ html, body {
|
||||
background-color: #2F323A;
|
||||
}
|
||||
|
||||
.ngx-charts {
|
||||
text {
|
||||
fill: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-height{
|
||||
height: calc(100vh - 56px);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user