🤡 add datetime selector

src/app/app.component.ts

@@ -15,8 +15,8 @@ import {
 } from 'hslayers-ng';
 
 import {IrrigationForecastPanelComponent} from './irrigation/irrigation-forecast-panel.component';
-import {IrrigationHistoryService} from './irrigation/irrigation-history.service';
 import {ReservoirHistoryPanelComponent} from './irrigation/reservoir-history-panel.component';
+import {ReservoirHistoryService} from './irrigation/reservoir-history.service';
 
 @Component({
   selector: 'application-root',
@@ -35,7 +35,7 @@ export class HslayersAppComponent {
     private hsPanelContainerService: HsPanelContainerService,
     private hsSidebarService: HsSidebarService,
     private hsToastService: HsToastService,
-    private irrigationHistoryService: IrrigationHistoryService
+    private reservoirHistoryService: ReservoirHistoryService
   ) {
     /* Create new button in the sidebar */
     this.hsSidebarService.buttons.push(
@@ -80,12 +80,12 @@ export class HslayersAppComponent {
     });
     const reservoirWfsLayer = new VectorLayer({
       properties: {
-        title: `Water level at ${this.irrigationHistoryService.timeStamp}`,
+        title: `Water level at ${this.reservoirHistoryService.timeStamp}`,
         base: false,
         removable: false,
         inlineLegend: true,
       },
-      source: this.irrigationHistoryService.reservoirWfsSource,
+      source: this.reservoirHistoryService.reservoirWfsSource,
     });
     /* Define the polygon's style using SLD */
     const polygonSld = `<?xml version="1.0" encoding="ISO-8859-1"?>

src/app/irrigation/irrigation.module.ts

@@ -1,4 +1,5 @@
 import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
 import {NgModule} from '@angular/core';
 
 import {HsPanelHelpersModule} from 'hslayers-ng';
@@ -8,7 +9,7 @@ import {IrrigationInfoComponent} from './irrigation-info.component';
 import {ReservoirHistoryPanelComponent} from './reservoir-history-panel.component';
 
 @NgModule({
-  imports: [CommonModule, HsPanelHelpersModule],
+  imports: [CommonModule, FormsModule, HsPanelHelpersModule],
   exports: [IrrigationInfoComponent],
   declarations: [
     IrrigationInfoComponent,

src/app/irrigation/reservoir-history-panel.component.html

@@ -3,5 +3,8 @@
   </hs-panel-header>
   <div class="card-body">
     TODO
+    <select class="form-select" [(ngModel)]="reservoirHistoryService.timeStamp" (ngModelChange)="timeChanged($event)">
+      <option *ngFor="let date of availableDates" [ngValue]="date">{{date}}</option>
+    </select>
   </div>
 </div>

src/app/irrigation/reservoir-history-panel.component.ts

@@ -7,7 +7,7 @@ import {
   HsPanelComponent,
 } from 'hslayers-ng';
 
-import {IrrigationInfoService} from './irrigation-info.service';
+import {ReservoirHistoryService} from './reservoir-history.service';
 
 @Component({
   selector: 'reservoir-history-panel',
@@ -18,14 +18,25 @@ export class ReservoirHistoryPanelComponent implements HsPanelComponent {
   data;
   name: 'history';
   viewRef: ViewRef;
+  availableDates: string[];
 
   constructor(
-    public irrigationService: IrrigationInfoService,
+    public reservoirHistoryService: ReservoirHistoryService,
     public hsLanguageService: HsLanguageService,
     public hsLayoutService: HsLayoutService
-  ) {}
+  ) {
+    this.availableDates = [
+      '2022-05-20T03:00:00Z',
+      '2022-05-20T02:00:00Z',
+      '2022-05-20T01:00:00Z',
+    ];
+  }
 
   isVisible(): boolean {
     return this.hsLayoutService.panelVisible('history');
   }
+
+  timeChanged(value: string) {
+    this.reservoirHistoryService.reservoirWfsSource.refresh();
+  }
 }

src/app/irrigation/irrigation-history.service.ts → src/app/irrigation/reservoir-history.service.ts

@@ -6,7 +6,7 @@ import {Vector as VectorSource} from 'ol/source';
 import {bbox as bboxStrategy} from 'ol/loadingstrategy';
 
 @Injectable({providedIn: 'root'})
-export class IrrigationHistoryService {
+export class ReservoirHistoryService {
   reservoirWfsSource;
   epsgCode: string;
   timeStamp: string;