From e61f41588068b0f6484bce0e45e50c21d1f3f47e Mon Sep 17 00:00:00 2001
From: Andreas Huber <bitbucket@lucares.de>
Date: Fri, 11 Oct 2019 17:29:14 +0200
Subject: [PATCH] add date range field

It is (again) surprisingly hard to find a decent date+time-range
picker that works with Angular. Daterangepicker, which I used with
my VueJS application does not work with Angular. I can't get the
angularized version
https://github.com/fragaria/angular-daterangepicker) to work either.
And and a native Angular date picker
(https://github.com/GNURub/ngx-daterangepicker) doesn't work either.
---
 .../visualization-page.component.html         | 32 ++++++++++++-------
 .../visualization-page.component.ts           |  2 ++
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.html b/pdb-js/src/app/visualization-page/visualization-page.component.html
index e93fcbc..729a040 100644
--- a/pdb-js/src/app/visualization-page/visualization-page.component.html
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.html
@@ -7,17 +7,12 @@
       <input matInput placeholder="Query" value="{{query}}" />
   </div>
   <div id="filters">
-    <button mat-button (click)="plot()">
-      <img src="assets/img/scatter-chart2.svg" class="icon-inline" aria-hidden="true" title="create plot" />
-      Plot
-    </button>
-    <!--
-    <button mat-button (click)="gallery()">
-      <img src="assets/img/four-squares-line.svg" class="icon-inline" aria-hidden="true" title="Create Gallery (only active if 'Split' is set)" />
-      Gallery
-    </button>
-    -->
     
+    
+    <mat-form-field>
+      <mat-label>Date Range:</mat-label>
+      <input matInput [formControl]="dateRange" />
+    </mat-form-field>
   
     <mat-form-field>
       <mat-label>Type:</mat-label>
@@ -66,7 +61,22 @@
     [(minYValue)]="minYValue"
     [(maxYValue)]="maxYValue"
    ></pdb-y-axis-range>
-  
+   
+   
+    <div>
+      <button mat-button (click)="plot()">
+        <img src="assets/img/scatter-chart2.svg" class="icon-inline" aria-hidden="true" title="create plot" />
+        Plot
+      </button>
+    
+      <!--
+      <button mat-button (click)="gallery()">
+        <img src="assets/img/four-squares-line.svg" class="icon-inline" aria-hidden="true" title="Create Gallery (only active if 'Split' is set)" />
+        Gallery
+      </button>
+      -->
+    
+    </div>
   </div>
   <div id="results"></div>
 </div>
\ No newline at end of file
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.ts b/pdb-js/src/app/visualization-page/visualization-page.component.ts
index b084cf0..700247e 100644
--- a/pdb-js/src/app/visualization-page/visualization-page.component.ts
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.ts
@@ -11,6 +11,8 @@ import { FormControl } from '@angular/forms';
 })
 export class VisualizationPageComponent implements OnInit {
   
+  dateRange = new FormControl('2019-10-05 00:00:00 - 2019-10-11 23:59:59');
+  
   availablePlotTypes = {};
   
   selectedPlotType = new FormControl('');