53 lines
3.0 KiB
HTML
53 lines
3.0 KiB
HTML
<div class="fill-height p-3" style="background-color: #b52e3c !important;">
|
|
<div style="max-width: 1000px;">
|
|
<h1>Powerwall: {{batteryService.charge | number : '1.1-1'}} V</h1>
|
|
<div class="d-flex align-content-center">
|
|
<div *ngIf="locked" class="mr-1">
|
|
<mat-icon>lock</mat-icon>
|
|
</div>
|
|
<div><h5>Cooling Fans</h5></div>
|
|
</div>
|
|
<mat-button-toggle-group class="mb-3" [ngModel]="batteryService.relayMode"
|
|
(change)="batteryService.setRelayMode($event.value)" [disabled]="locked">
|
|
<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 | number : '1.1-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 | number : '1.1-1'}} °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]="30"
|
|
[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>
|