diff --git a/Display/package-lock.json b/Display/package-lock.json
index 54dfb2a..1e4d916 100644
--- a/Display/package-lock.json
+++ b/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",
diff --git a/Display/package.json b/Display/package.json
index d3da985..ae62d4b 100644
--- a/Display/package.json
+++ b/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",
diff --git a/Display/src/app/app.module.ts b/Display/src/app/app.module.ts
index fec0f35..aa6d5ba 100644
--- a/Display/src/app/app.module.ts
+++ b/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 { MatToolbarModule, MatIconModule, MatMenuModule, MatButtonModule, MatExpansionModule } from '@angular/material';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+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]
diff --git a/Display/src/app/components/weather/charts/weather-charts.component.html b/Display/src/app/components/weather/charts/weather-charts.component.html
index 3846ac1..2d51abf 100644
--- a/Display/src/app/components/weather/charts/weather-charts.component.html
+++ b/Display/src/app/components/weather/charts/weather-charts.component.html
@@ -2,27 +2,28 @@
-->
diff --git a/Display/src/app/components/weather/charts/weather-charts.component.ts b/Display/src/app/components/weather/charts/weather-charts.component.ts
index 568d524..19d8f4e 100644
--- a/Display/src/app/components/weather/charts/weather-charts.component.ts
+++ b/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();
- end = moment(this.selectedDate).endOf('d').toDate();
+ start = moment(this.selectedDate.value).startOf('d').toDate();
+ end = moment(this.selectedDate.value).endOf('d').toDate();
break;
}