ztimson/homefront
ztimson/homefront
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

Added fixed size to make animations smooth on desktop

Browse Source
This commit is contained in:
Zakary Timson 2019-01-01 21:23:00 -05:00
parent 88e91175e8
commit 67c7ee2156
2 changed files with 64 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/app/battery/battery.component.html
View File

@ -1,49 +1,51 @@
<div class="desktop-height p-3" style="background-color: #b52e3c !important;"> <div class="desktop-height p-3" style="background-color: #b52e3c !important;">
<div class="d-flex mb-3"> <div style="max-width: 1000px;">
<div class="d-flex flex-grow-1 align-items-center"> <div class="d-flex mb-3">
<h3 class="mb-0 text-white">Powerwall: {{batteryService.charge | round}} V</h3>
</div>
<div class="d-flex flex-grow-1 align-content-center justify-content-end">
<mat-button-toggle-group [(ngModel)]="batteryService.relayMode" (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"> <div class="d-flex flex-grow-1 align-items-center">
<h5 class="mb-0">{{battery.name}}</h5> <h3 class="mb-0 text-white">Powerwall: {{batteryService.charge | round}} V</h3>
</div> </div>
<div class="d-flex flex-grow-1 align-items-center justify-content-center"> <div class="d-flex flex-grow-1 align-content-center justify-content-end">
<button mat-button (click)="selected = i" [ngClass]="{'text-success': batteryService.charging, 'text-danger': !batteryService.charging}">{{battery.charge | round: 1}} V</button> <mat-button-toggle-group [(ngModel)]="batteryService.relayMode" (change)="batteryService.setRelayMode($event.value)">
</div> <mat-button-toggle [value]="null" checked>Auto</mat-button-toggle>
<div class="d-flex flex-grow-1 align-items-center justify-content-end text-muted"> <mat-button-toggle [value]="true">On</mat-button-toggle>
<button mat-button (click)="selected = batteryService.batteries.length + i">{{battery.temp | round}} °C</button> <mat-button-toggle [value]="false">Off</mat-button-toggle>
</mat-button-toggle-group>
</div> </div>
</div> </div>
<div *ngIf="selected == i" class="w-100" style="height: 200px"> <mat-card class="mb-2" *ngFor="let battery of batteryService.batteries; let i = index">
<ngx-charts-area-chart class="w-100 h-100" <div class="d-flex">
[results]="[{name: battery.name, series: battery.chargeHistory}]" <div class="d-flex flex-grow-1 align-items-center">
[scheme]="scheme" <h5 class="mb-0">{{battery.name}}</h5>
[yAxis]="true" </div>
[yScaleMin]="0" <div class="d-flex flex-grow-1 align-items-center justify-content-center">
[yScaleMax]="25" <button mat-button (click)="selected = i" [ngClass]="{'text-success': batteryService.charging, 'text-danger': !batteryService.charging}">{{battery.charge | round: 1}} V</button>
[yAxisTickFormatting]="voltFormat" </div>
[roundDomains]="true" <div class="d-flex flex-grow-1 align-items-center justify-content-end text-muted">
></ngx-charts-area-chart> <button mat-button (click)="selected = batteryService.batteries.length + i">{{battery.temp | round}} °C</button>
</div> </div>
<div *ngIf="selected == batteryService.batteries.length + i" class="w-100" style="height: 200px"> </div>
<ngx-charts-area-chart class="w-100 h-100" <div *ngIf="selected == i" class="w-100" style="height: 200px">
[results]="[{name: battery.name, series: battery.tempHistory}]" <ngx-charts-area-chart class="w-100 h-100"
[scheme]="scheme" [results]="[{name: battery.name, series: battery.chargeHistory}]"
[yAxis]="true" [scheme]="scheme"
[yScaleMin]="0" [yAxis]="true"
[yScaleMax]="50" [yScaleMin]="0"
[yAxisTickFormatting]="tempFormat" [yScaleMax]="25"
[roundDomains]="true" [yAxisTickFormatting]="voltFormat"
></ngx-charts-area-chart> [roundDomains]="true"
</div> ></ngx-charts-area-chart>
</mat-card> </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> </div>

36
src/app/dashboard/dashboard.component.html
View File

@ -1,22 +1,24 @@
<div class="desktop-height p-3"> <div class="desktop-height p-3">
<div> <div style="max-width: 1000px;">
<h1 class="d-inline">{{now | async | date: 'fullDate'}}</h1> <div>
<h1 class="d-inline float-right">{{now | async | date: 'mediumTime'}}</h1> <h1 class="d-inline">{{now | async | date: 'fullDate'}}</h1>
</div> <h1 class="d-inline float-right">{{now | async | date: 'mediumTime'}}</h1>
<div class="mt-3 d-flex">
<div class="flex-grow-1 pr-2">
<mat-card class="w-100 hover" routerLink="/weather">
<mat-card-content>
<weather-widget class="mx-auto"></weather-widget>
</mat-card-content>
</mat-card>
</div> </div>
<div class="flex-grow-1 pl-2"> <div class="mt-3 d-flex">
<mat-card class="w-100 hover" routerLink="/battery"> <div class="flex-grow-1 pr-2">
<mat-card-content> <mat-card class="w-100 hover" routerLink="/weather">
<battery-widget></battery-widget> <mat-card-content>
</mat-card-content> <weather-widget class="mx-auto"></weather-widget>
</mat-card> </mat-card-content>
</mat-card>
</div>
<div class="flex-grow-1 pl-2">
<mat-card class="w-100 hover" routerLink="/battery">
<mat-card-content>
<battery-widget></battery-widget>
</mat-card-content>
</mat-card>
</div>
</div> </div>
</div> </div>
</div> </div>