fix(wmstime): css, wmstime datetime format, x button (#105)

* fix(wmstime): css, wmstime datetime format
infra-geo-ouverte · Nov 22, 2017 · ea895dc · ea895dc
1 parent d49a877
commit ea895dc
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 28 deletions.
diff --git a/src/lib/datasource/shared/datasources/wms-datasource.ts b/src/lib/datasource/shared/datasources/wms-datasource.ts
@@ -122,23 +122,55 @@ export class WMSDataSource
     return url;
   }
 
-  filterByDate(date: Date | [Date, Date]) {
+  reformatDateTime(value) {
+
+    const year = value.getFullYear();
+    let month = value.getMonth() + 1;
+    let day = value.getUTCDate();
+    let hour = value.getUTCHours();
+
+    if ( Number(month) < 10 ) {
+       month = '0' + month;
+    }
+
+    if ( Number(day) < 10) {
+       day = '0' + day;
+    }
+
+    if ( Number(hour) < 10) {
+       hour = '0' + hour;
+    }
+
+    return year + '-' + month + '-' + day + 'T' + hour + ':00:00Z';
+
+   }
+
+ filterByDate(date: Date | [Date, Date]) {
     let time = null;
+    let newdateform = null;
+    let newdateform_start = null;
+    let newdateform_end = null;
+
     if (Array.isArray(date)) {
       const dates = [];
       if (date[0]) {
+        newdateform_start = this.reformatDateTime(date[0]);
         dates.push(date[0]);
       }
-
       if (date[1]) {
+        newdateform_end = this.reformatDateTime(date[1]);
         dates.push(date[1]);
       }
-
-      if (dates.length === 2) {
-        time = dates.map(d => d.toISOString()).join('/');
+      if (dates.length === 2 && newdateform_start !== newdateform_end) {
+         time = newdateform_start + '/' +  newdateform_end ;
       }
+      if (newdateform_start === newdateform_end) {
+         time = newdateform_start;
+       }
+
     } else if (date) {
-      time = date.toISOString();
+      newdateform = this.reformatDateTime(date);
+      time = newdateform;
     }
 
     const params = {time: time};

diff --git a/src/lib/filter/time-filter-form/time-filter-form.component.html b/src/lib/filter/time-filter-form/time-filter-form.component.html
@@ -41,7 +41,7 @@
   </div>
 </div>
 
-<div *ngIf="style === 'slider'" class="igo-col igo-col-40 igo-col-100-m">
+<div *ngIf="style === 'slider'" class="igo-col igo-col-100 igo-col-100-m">
   <md-slider
       id="time-slider"
       tickInterval="auto"
@@ -53,7 +53,7 @@
       (input)="handleSliderDateChange($event)"
       (change)="handleSliderDateChange($event)">
   </md-slider>
-  <p>{{handleSliderTooltip()}}</p>
+  <p class="date-below">{{handleSliderTooltip()}} </p>
   <button md-icon-button color="primary" (click)="playFilter($event)">
    <md-icon>{{playIcon}}</md-icon>
   </button>

diff --git a/src/lib/filter/time-filter-form/time-filter-form.component.styl b/src/lib/filter/time-filter-form/time-filter-form.component.styl
@@ -12,17 +12,20 @@ md2-datepicker {
 md-slider >>> div.mat-slider-thumb-label {
   width: 32px;
   height: 32px;
+  margin: 0 auto;
 }
 
 md-slider >>> span.mat-slider-thumb-label-text {
     font-size:8px;
 }
 
 #time-slider {
-  width: 100%;
+  width: 70%;
+  margin: 0 auto;
 
   +media(mobile) {
-    width: 90%;
+    width: 60%;
+    margin: 0 auto;
   }
 }
 
@@ -31,4 +34,6 @@ md-slider >>> span.mat-slider-thumb-label-text {
   cursor: pointer;
 }
 
-
+.date-below {
+    margin: 0;
+}
diff --git a/src/lib/filter/time-filter-form/time-filter-form.component.ts b/src/lib/filter/time-filter-form/time-filter-form.component.ts
@@ -10,9 +10,9 @@ import { TimeFilterOptions } from '../shared';
 export class TimeFilterFormComponent {
 
   static formats = {
-    date: 'y/MM/dd',
+    date: 'y-MM-dd',
     time: 'HH:mm',
-    datetime: 'y/MM/dd HH:mm'
+    datetime: 'y-MM-dd HH:mm:ss'
   };
 
   @Input()
@@ -114,7 +114,9 @@ export class TimeFilterFormComponent {
   handleDateChange(event: any) {
     // Calendar throw handleDateChange when first selected with weird date
     if ( (event.source instanceof MdSlider) ||
-        (event.source.date === event.source.value) ) {
+        (event.source.date === event.source.value) ||
+        (event.source.value === null) ) {
+
       this.setupDateOutput();
       this.applyTypeChange();
       this.change.emit([this.startDate, this.endDate]);
@@ -222,27 +224,29 @@ export class TimeFilterFormComponent {
        this.startDate.setSeconds(-(this.step / 1000));
        this.endDate = new Date(this.startDate);
        this.endDate.setSeconds((this.step / 1000));
-    } else if (!this.isRange) {
+    } else if ((!this.isRange) && (this.date !== null)) {
       this.endDate = new Date(this.date);
       this.startDate = new Date(this.date);
-    } else {
-    this.startDate = this.startDate === undefined ? new Date(this.min) : this.startDate;
-    this.endDate = this.endDate === undefined ? new Date(this.max) : this.endDate;
-        if (this.startDate > this.endDate) {
-          this.startDate = new Date(this.endDate);
-      }
+    } else if ((this.isRange) && ((this.date !== null)  || (this.date == null))) {
+      this.startDate = this.startDate === undefined ? new Date(this.min) : this.startDate;
+      this.endDate = this.endDate === undefined ? new Date(this.max) : this.endDate;
+    } else if ((!this.isRange) && (this.date == null)) {
+      this.startDate = undefined;
+      this.endDate = undefined;
     }
   }
 
   applyTypeChange() {
     switch (this.type) {
       case 'date':
-        this.startDate.setHours(0);
-        this.startDate.setMinutes(0);
-        this.startDate.setSeconds(0);
-        this.endDate.setHours(23);
-        this.endDate.setMinutes(59);
-        this.endDate.setSeconds(59);
+        if ( this.startDate !== undefined || this.endDate !== undefined ) {
+          this.startDate.setHours(0);
+          this.startDate.setMinutes(0);
+          this.startDate.setSeconds(0);
+          this.endDate.setHours(23);
+          this.endDate.setMinutes(59);
+          this.endDate.setSeconds(59);
+        }
       break;
       case 'time':
         if (this.style === 'calendar') {
@@ -270,7 +274,7 @@ export class TimeFilterFormComponent {
           this.endDate.setSeconds(59);
         }
       break;
-      // datetime
+        // datetime
       default:
         // do nothing
     }