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

Cleaned up dashboard

Browse Source
This commit is contained in:
Zakary Timson 2019-01-01 22:53:19 -05:00
parent 181dfb86be
commit 454fe07d49
4 changed files with 31 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/battery/widget/batteryWidget.component.html
View File

@ -1,9 +1,6 @@
<div class="w-100 h-100">
<div class="d-flex align-items-center">
<div><mat-icon class="mr-2" style="font-size: 3rem; height: 3rem; width: 3rem">{{batteryService.icon}}</mat-icon> </div>
<div class="flex-grow-1">
<h1 class="d-inline mb-0">Powerwall: <span [ngClass]="{'text-success': batteryService.charging, 'text-danger': !batteryService.charging}">{{batteryService.charge | round}} V</span></h1>
<h1 class="float-right mb-0 text-muted">{{batteryService.temp | round}} °C</h1>
</div>
<mat-icon class="mr-3" style="font-size: 36px; height: 36px">{{batteryService.icon}}</mat-icon>
<h2 class="d-inline mb-0">Powerwall: <span [ngClass]="{'text-success': batteryService.charging, 'text-danger': !batteryService.charging}">{{batteryService.charge | round}} V</span></h2>
</div>
</div>

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

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

13
src/app/dashboard/dashboard.component.ts
View File

@ -10,4 +10,17 @@ export class DashboardComponent {
now = timer(0, 1000).pipe(map(() => new Date()));
constructor() { }
formatTime(date: Date) {
if(!date) return '';
let hours = date.getHours();
let minutes = date.getMinutes();
if(hours > 12) hours -= 12;
return `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}`
}
formatDate(date: Date) {
if(!date) return '';
return `${date.toDateString().substr(4, 3)} ${date.getDate()}`;
}
}

5
src/app/weather/widget/weatherWidget.component.html
View File

@ -1,9 +1,6 @@
<div class="w-100 h-100">
<h3 class="mb-0 text-center">{{weatherService.weather?.currently.summary}}</h3>
<div class="d-flex align-items-center">
<div>
<h3 class="mb-0">London, ON</h3>
<h3 class="mb-0">{{weatherService.weather?.currently.summary}}</h3>
</div>
<div><i [class]="'mt-4 wi wi-fw ' + weatherService.icon" style="font-size: 6rem"></i></div>
<div>
<div>