ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-01-18 17:23:37 -05:00
Code Issues 9 Packages Projects Releases Wiki Activity

Add loading behavior

Browse Source
This commit is contained in:
Chris Kaczor
2019-10-04 17:20:25 -04:00
parent 6101cf6a76
commit 3314abfc5c
4 changed files with 21 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
Display/src/app/components/weather/charts/weather-charts.component.html
View File

@@ -1,15 +1,13 @@
<!-- <div [hidden]="!loading" class="page-spinner">
<span class="spinner"></span>
</div> -->
<mat-spinner *ngIf="loading && !chart" class="content-spinner" strokeWidth="5"></mat-spinner>
<div class="chart-content">
<header class="chart-header">
<mat-form-field>
<mat-select [(value)]="selectedTimeSpan">
<mat-select [(value)]="selectedTimeSpan" [disabled]="loading">
<mat-option *ngFor="let item of timeSpanItems | keyvalue" [value]="+item.key">{{ item.value }}</mat-option>
</mat-select>
</mat-form-field>
<span class="chart-button-spacer"></span>
<button mat-button *ngIf="selectedTimeSpan === timeSpans.Day" (click)="handleDateArrowClick(-1)">
<button mat-button *ngIf="selectedTimeSpan === timeSpans.Day" (click)="handleDateArrowClick(-1)" [disabled]="loading">
<mat-icon>arrow_back</mat-icon>
</button>
<mat-form-field *ngIf="selectedTimeSpan === timeSpans.Day">
@@ -17,13 +15,13 @@
<mat-datepicker-toggle matSuffix [for]="picker">
<mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #picker disabled="false"></mat-datepicker>
<mat-datepicker #picker [disabled]="loading"></mat-datepicker>
</mat-form-field>
<button mat-button *ngIf="selectedTimeSpan === timeSpans.Day && !isSelectedDateToday()" (click)="handleDateArrowClick(1)">
<button mat-button *ngIf="selectedTimeSpan === timeSpans.Day && !isSelectedDateToday()" (click)="handleDateArrowClick(1)" [disabled]="loading">
<mat-icon>arrow_forward</mat-icon>
</button>
<span class="chart-button-spacer"></span>
<button mat-button *ngIf="selectedTimeSpan === timeSpans.Day && !isSelectedDateToday()" (click)="resetToToday()">
<button mat-button *ngIf="selectedTimeSpan === timeSpans.Day && !isSelectedDateToday()" (click)="resetToToday()" [disabled]="loading">
Today
</button>
</header>

6
Display/src/app/components/weather/charts/weather-charts.component.ts
View File

@@ -85,6 +85,12 @@ export class WeatherChartsComponent implements OnInit {
let start: moment.Moment;
let end: moment.Moment;
this.loading = true;
if (this.chart) {
this.chart.ref$.subscribe(o => o.showLoading());
}
switch (this.selectedTimeSpan) {
case TimeSpan.Last24Hours: {
start = moment().subtract(24, 'hour');