Display app improvements

- Add summary page
- Use common time range component

Display/src/app/components/power/charts/power-charts.component.html

@@ -1,33 +1,13 @@
 <mat-spinner *ngIf="loading && !chart" class="content-spinner" strokeWidth="5"></mat-spinner>
-<div class="chart-content">
-    <header class="chart-header">
-        <button mat-button (click)="loadChart()" [disabled]="loading">
+
+<div class="content">
+    <header class="header">
+        <button id="refresh" mat-button (click)="load()" [disabled]="loading">
             <mat-icon>refresh</mat-icon>
         </button>
-        <span class="chart-button-spacer"></span>
-        <mat-form-field>
-            <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)" [disabled]="loading">
-            <mat-icon>arrow_back</mat-icon>
-        </button>
-        <mat-form-field *ngIf="selectedTimeSpan === timeSpans.Day">
-            <input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate" disabled [max]="maxDate">
-            <mat-datepicker-toggle matSuffix [for]="picker">
-                <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
-            </mat-datepicker-toggle>
-            <mat-datepicker #picker [disabled]="loading"></mat-datepicker>
-        </mat-form-field>
-        <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()" [disabled]="loading">
-            Today
-        </button>
+
+        <app-time-range [loading]="loading" [(timeSpan)]="timeSpan" [(date)]="date"></app-time-range>
     </header>
+
     <div id="chart" [chart]="chart"></div>
 </div>

Display/src/app/components/power/charts/power-charts.component.scss

@@ -1,27 +1,19 @@
-.chart-content {
+#refresh {
+    height: 36px;
+    top: 13px;
+}
+
+.content {
     display: flex;
     flex-flow: column;
     height: 100%;
-  }
+}
 
-  #chart {
-    flex: 1 1 auto;
-  }
-
-  .chart-header {
-    background-color: rgb(250, 250, 250);
+.header {
+    display: flex;
     padding: 0 20px;
-    flex: 0 0 auto;
-  }
+}
 
-  .chart-button-spacer {
-    margin-right: 20px;
-  }
-
-  .selected:after {
-    content: "";
-    display: block;
-    margin: 0 auto;
-    width: 100%;
-    border-bottom: 1px solid #673ab7;
-  }
+#chart {
+    flex: 1 1 auto;
+}

Display/src/app/components/power/charts/power-charts.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { TimeSpan } from 'src/app/models/time-span';
 import { Chart } from 'angular-highcharts';
 import { SeriesLineOptions } from 'highcharts';
 import { HttpClient } from '@angular/common/http';
@@ -13,12 +14,6 @@ import HC_exporting from 'highcharts/modules/exporting';
 
 HC_exporting(Highcharts);
 
-enum TimeSpan {
-    Last24Hours,
-    Day,
-    Custom
-}
-
 @Component({
     selector: 'app-power-charts',
     templateUrl: './power-charts.component.html',
@@ -28,60 +23,42 @@ export class PowerChartsComponent implements OnInit {
 
     public chart: Chart;
     public loading = true;
-    public timeSpanItems: { [value: number]: string } = {};
-    public timeSpans: typeof TimeSpan = TimeSpan;
-    public maxDate: moment.Moment = moment().endOf('day');
 
-    private selectedTimeSpanValue: TimeSpan = TimeSpan.Last24Hours;
-    private selectedDateValue: moment.Moment = moment().startOf('day');
+    private timeSpanValue: TimeSpan = TimeSpan.Last24Hours;
+    private dateValue: moment.Moment = moment().startOf('day');
+
+    public get timeSpan(): TimeSpan {
+        return this.timeSpanValue;
+    }
+    public set timeSpan(value: TimeSpan) {
+        if (this.timeSpanValue === value) {
+            return;
+        }
+        this.timeSpanValue = value;
+        this.load();
+    }
+
+    public get date(): moment.Moment {
+        return this.dateValue;
+    }
+    public set date(value: moment.Moment) {
+        if (this.dateValue === value) {
+            return;
+        }
+        this.dateValue = value;
+        this.load();
+    }
 
     private timeInterval = 15;
 
     constructor(private httpClient: HttpClient) { }
 
     ngOnInit() {
-        this.timeSpanItems[TimeSpan.Last24Hours] = 'Last 24 hours';
-        this.timeSpanItems[TimeSpan.Day] = 'Day';
-
-        this.loadChart();
-    }
-
-    public get selectedTimeSpan() {
-        return this.selectedTimeSpanValue;
-    }
-
-    public set selectedTimeSpan(value) {
-        this.selectedTimeSpanValue = value;
-
-        this.loadChart();
-    }
-
-    public get selectedDate() {
-        return this.selectedDateValue;
-    }
-
-    public set selectedDate(value) {
-        this.selectedDateValue = value;
-
-        this.loadChart();
-    }
-
-    public handleDateArrowClick(value: number) {
-        this.selectedDate = moment(this.selectedDate).add(value, 'day');
-    }
-
-    public isSelectedDateToday(): boolean {
-        const isToday = moment(this.selectedDate).startOf('day').isSame(moment().startOf('day'));
-
-        return isToday;
-    }
-
-    public resetToToday() {
-        this.selectedDate = moment().startOf('day');
+        this.load();
     }
 
     public getSelectedDateDisplayString(): string {
-        return moment(this.selectedDate).format('LL');
+        return moment(this.date).format('LL');
     }
 
     private async loadPowerChart(start: moment.Moment, end: moment.Moment) {
@@ -109,15 +86,14 @@ export class PowerChartsComponent implements OnInit {
                 seriesData[2].data.push([date, dataElement.averageValue]);
             });
 
-            const title = this.selectedTimeSpan === TimeSpan.Last24Hours ? this.timeSpanItems[TimeSpan.Last24Hours] : this.getSelectedDateDisplayString();
-
             this.chart = new Chart({
                 chart: {
                     type: 'line',
-                    zoomType: 'x'
+                    zoomType: 'x',
+                    spacingTop: 20
                 },
                 title: {
-                    text: title
+                    text: ''
                 },
                 credits: {
                     enabled: true
@@ -185,7 +161,7 @@ export class PowerChartsComponent implements OnInit {
         });
     }
 
-    public loadChart() {
+    public load() {
         let start: moment.Moment;
         let end: moment.Moment;
 
@@ -195,7 +171,7 @@ export class PowerChartsComponent implements OnInit {
             this.chart.ref$.subscribe(o => o.showLoading());
         }
 
-        switch (this.selectedTimeSpan) {
+        switch (this.timeSpan) {
             case TimeSpan.Last24Hours: {
                 start = moment().subtract(24, 'hour');
                 end = moment();
@@ -204,8 +180,8 @@ export class PowerChartsComponent implements OnInit {
             }
 
             case TimeSpan.Day: {
-                start = moment(this.selectedDate).startOf('day');
-                end = moment(this.selectedDate).endOf('day');
+                start = moment(this.date).startOf('day');
+                end = moment(this.date).endOf('day');
 
                 break;
             }