46 lines
2.8 KiB
HTML
46 lines
2.8 KiB
HTML
<div class="desktop-height p-3" style="background-color: #b52e3c !important;">
|
|
<div style="max-width: 1000px;">
|
|
<h1 class="text-white">Powerwall: {{batteryService.charge | round}} V</h1>
|
|
<mat-button-toggle-group [ngModel]="batteryService.relayMode" (change)="batteryService.setRelayMode($event.value)"><!---->
|
|
<mat-button-toggle value="null">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>
|
|
<mat-card class="mt-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': batteryService.charging, 'text-danger': !batteryService.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>
|
|
</div>
|