Some rough work on date controls for chart

Display/package-lock.json

@@ -1013,6 +1013,14 @@
         "tslib": "^1.7.1"
       }
     },
+    "@angular/material-moment-adapter": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-8.2.2.tgz",
+      "integrity": "sha512-HZYoVssNh+uon0SszUDtVTWmjah5vtEJOYVYl9BakE6dC+Z4910B+/hVQ1HfOdas5mHpjxVoYpbIoe4QG5sc5A==",
+      "requires": {
+        "tslib": "^1.7.1"
+      }
+    },
     "@angular/platform-browser": {
       "version": "8.2.8",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-8.2.8.tgz",

Display/package.json

@@ -18,6 +18,7 @@
     "@angular/core": "~8.2.4",
     "@angular/forms": "~8.2.4",
     "@angular/material": "^8.2.1",
+    "@angular/material-moment-adapter": "^8.2.2",
     "@angular/platform-browser": "~8.2.4",
     "@angular/platform-browser-dynamic": "~8.2.4",
     "@angular/router": "~8.2.4",

Display/src/app/app.module.ts

@@ -5,12 +5,13 @@ import { HttpClientModule } from '@angular/common/http';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './components/app/app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatToolbarModule, MatIconModule, MatMenuModule, MatButtonModule, MatExpansionModule } from '@angular/material';
+import { MatToolbarModule, MatIconModule, MatMenuModule, MatButtonModule, MatExpansionModule, MatSelectModule, MatDatepickerModule, MatInputModule } from '@angular/material';
 import { NavComponent } from './components/nav/nav.component';
 import { LayoutModule } from '@angular/cdk/layout';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatListModule } from '@angular/material/list';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
 
@@ -36,7 +37,7 @@ const config: SocketIoConfig = { url: 'http://home.kaczorzoo.net:9091', options:
         BrowserAnimationsModule,
         SocketIoModule.forRoot(config),
         ChartModule,
-        HttpClientModule,	
+        HttpClientModule,
         MatIconModule,
         MatButtonModule,
         MatToolbarModule,
@@ -44,7 +45,13 @@ const config: SocketIoConfig = { url: 'http://home.kaczorzoo.net:9091', options:
         LayoutModule,
         MatSidenavModule,
         MatListModule,
-        MatExpansionModule
+        MatExpansionModule,
+        MatSelectModule,
+        MatDatepickerModule,
+        MatInputModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatMomentDateModule
     ],
     providers: [],
     bootstrap: [AppComponent]

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

@@ -2,27 +2,28 @@
     <span class="spinner"></span>
 </div> -->
 <div class="chart-content">
-    <!-- <header class="chart-header">
+    <header class="chart-header">
-        <clr-dropdown class="clr-dropdown">
+        <mat-form-field>
-            <button class="btn btn-outline-primary chart-button-spacer" clrDropdownTrigger>
+            <mat-select [(value)]="selectedTimeSpan">
-                {{ timeSpanItems[selectedTimeSpan] }}
+                <mat-option *ngFor="let item of timeSpanItems | keyvalue" [value]="+item.key">{{ item.value }}</mat-option>
-                <clr-icon shape="caret down"></clr-icon>
+            </mat-select>
-            </button>
+        </mat-form-field>
-            <clr-dropdown-menu clrPosition="bottom-left" *clrIfOpen>
+        <button mat-button *ngIf="selectedTimeSpan === timeSpans.Day" (click)="handleDateArrowClick(-1)">
-                <div *ngFor="let item of timeSpanItems | keyvalue" clrDropdownItem [class.active]="+item.key === selectedTimeSpan" (click)="selectedTimeSpan = +item.key">
+            <mat-icon>arrow_back</mat-icon>
-                    {{ item.value }}
-                </div>
-            </clr-dropdown-menu>
-        </clr-dropdown>
-        <button class="btn btn-outline-primary" [hidden]="selectedTimeSpan !== timeSpans.Day" (click)="handleDateArrowClick(-1)">
-            <clr-icon shape="caret left"></clr-icon>
         </button>
-        <button class="btn btn-outline-primary chart-button-spacer" [hidden]="selectedTimeSpan !== timeSpans.Day || isSelectedDateToday()" (click)="handleDateArrowClick(1)">
+        <mat-form-field *ngIf="selectedTimeSpan === timeSpans.Day">
-            <clr-icon shape="caret right"></clr-icon>
+            <input matInput [matDatepicker]="picker" [(formControl)]="selectedDate">
+            <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-form-field>
+        <button mat-button *ngIf="selectedTimeSpan === timeSpans.Day && !isSelectedDateToday()" (click)="handleDateArrowClick(1)">
+            <mat-icon>arrow_forward</mat-icon>
         </button>
-        <button class="btn btn-outline-primary" [hidden]="selectedTimeSpan !== timeSpans.Day || isSelectedDateToday()" (click)="resetToToday()">
+        <button mat-button *ngIf="selectedTimeSpan === timeSpans.Day && !isSelectedDateToday()" (click)="resetToToday()">
             Today
         </button>
-    </header> -->
+    </header>
     <div id="chart" [chart]="chart"></div>
 </div>

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

@@ -8,6 +8,7 @@ import * as moment from 'moment';
 
 import * as Highcharts from 'highcharts';
 import HC_exporting from 'highcharts/modules/exporting';
+import { FormControl } from '@angular/forms';
 HC_exporting(Highcharts);
 
 enum TimeSpan {
@@ -29,7 +30,7 @@ export class WeatherChartsComponent implements OnInit {
 
     public timeSpanItems: { [value: number]: string } = {};
     public selectedTimeSpan: TimeSpan = TimeSpan.Last24Hours;
-    public selectedDate: Date = moment().startOf('day').toDate();
+    public selectedDate: FormControl = new FormControl({ value: moment().startOf('day').toDate(), disabled: true });
     public timeSpans: typeof TimeSpan = TimeSpan;
 
     constructor(private route: ActivatedRoute, private httpClient: HttpClient) { }
@@ -46,25 +47,25 @@ export class WeatherChartsComponent implements OnInit {
     }
 
     public handleDateArrowClick(value: number) {
-        this.selectedDate = moment(this.selectedDate).add(value, 'day').toDate();
+        this.selectedDate.setValue(moment(this.selectedDate.value).add(value, 'day').toDate());
 
         this.loadChart();
     }
 
     public isSelectedDateToday(): boolean {
-        const isToday = moment(this.selectedDate).startOf('day').isSame(moment().startOf('day'));
+        const isToday = moment(this.selectedDate.value).startOf('day').isSame(moment().startOf('day'));
 
         return isToday;
     }
 
     public resetToToday() {
-        this.selectedDate = moment().startOf('day').toDate();
+        this.selectedDate.setValue(moment().startOf('day').toDate());
 
         this.loadChart();
     }
 
     public getSelectedDateDisplayString(): string {
-        return moment(this.selectedDate).format('LL');
+        return moment(this.selectedDate.value).format('LL');
     }
 
     private loadChart() {
@@ -80,8 +81,8 @@ export class WeatherChartsComponent implements OnInit {
             }
 
             case TimeSpan.Day: {
-                start = moment(this.selectedDate).startOf('d').toDate();
+                start = moment(this.selectedDate.value).startOf('d').toDate();
-                end = moment(this.selectedDate).endOf('d').toDate();
+                end = moment(this.selectedDate.value).endOf('d').toDate();
 
                 break;
             }