ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-02-16 18:47:40 -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

5
Display/src/app/app.module.ts
View File

@@ -6,7 +6,7 @@ import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './components/app/app.component'; import { AppComponent } from './components/app/app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatToolbarModule, MatIconModule, MatMenuModule, MatButtonModule, MatExpansionModule, MatSelectModule, MatDatepickerModule, MatInputModule } from '@angular/material'; import { MatToolbarModule, MatIconModule, MatMenuModule, MatButtonModule, MatExpansionModule, MatSelectModule, MatDatepickerModule, MatInputModule, MatProgressSpinnerModule } from '@angular/material';
import { NavComponent } from './components/nav/nav.component'; import { NavComponent } from './components/nav/nav.component';
import { LayoutModule } from '@angular/cdk/layout'; import { LayoutModule } from '@angular/cdk/layout';
import { MatSidenavModule } from '@angular/material/sidenav'; import { MatSidenavModule } from '@angular/material/sidenav';
@@ -51,7 +51,8 @@ const config: SocketIoConfig = { url: 'http://home.kaczorzoo.net:9091', options:
MatInputModule, MatInputModule,
FormsModule, FormsModule,
ReactiveFormsModule, ReactiveFormsModule,
MatMomentDateModule MatMomentDateModule,
MatProgressSpinnerModule
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]

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

@@ -1,15 +1,13 @@
<!-- <div [hidden]="!loading" class="page-spinner"> <mat-spinner *ngIf="loading && !chart" class="content-spinner" strokeWidth="5"></mat-spinner>
<span class="spinner"></span>
</div> -->
<div class="chart-content"> <div class="chart-content">
<header class="chart-header"> <header class="chart-header">
<mat-form-field> <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-option *ngFor="let item of timeSpanItems | keyvalue" [value]="+item.key">{{ item.value }}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<span class="chart-button-spacer"></span> <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> <mat-icon>arrow_back</mat-icon>
</button> </button>
<mat-form-field *ngIf="selectedTimeSpan === timeSpans.Day"> <mat-form-field *ngIf="selectedTimeSpan === timeSpans.Day">
@@ -17,13 +15,13 @@
<mat-datepicker-toggle matSuffix [for]="picker"> <mat-datepicker-toggle matSuffix [for]="picker">
<mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon> <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
</mat-datepicker-toggle> </mat-datepicker-toggle>
<mat-datepicker #picker disabled="false"></mat-datepicker> <mat-datepicker #picker [disabled]="loading"></mat-datepicker>
</mat-form-field> </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> <mat-icon>arrow_forward</mat-icon>
</button> </button>
<span class="chart-button-spacer"></span> <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 Today
</button> </button>
</header> </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 start: moment.Moment;
let end: moment.Moment; let end: moment.Moment;
this.loading = true;
if (this.chart) {
this.chart.ref$.subscribe(o => o.showLoading());
}
switch (this.selectedTimeSpan) { switch (this.selectedTimeSpan) {
case TimeSpan.Last24Hours: { case TimeSpan.Last24Hours: {
start = moment().subtract(24, 'hour'); start = moment().subtract(24, 'hour');

6
Display/src/styles.scss
View File

@@ -7,3 +7,9 @@ body {
margin: 0; margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif; font-family: Roboto, "Helvetica Neue", sans-serif;
} }
.content-spinner {
position: absolute !important;
top: 150px;
left: calc(50% - 50px);
}