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
Download Patch File Download Diff File Expand all files Collapse all files

32
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>
<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 class="d-flex">
<div class="pr-2 border-right border-white">
<h1 class="mb-0">{{formatDate(now | async)}}</h1>
</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 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>

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()}`;
}
}