⚡ add unique interval days

src/app/config/PollConfig.ts

@@ -15,15 +15,15 @@ export const timeOfDay = [{
     {timeList: [], literal: 'soirée'}];
 export const defaultDates = [
     {
-        literal: `${new Date().getDate()}-${new Date().getMonth()}-${new Date().getFullYear()}`,
+        literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()}`,
         timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}]
     },
     {
-        literal: `${new Date().getDate() + 1}-${new Date().getMonth()}-${new Date().getFullYear()}`,
+        literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 1}`,
         timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}]
     },
     {
-        literal: `${new Date().getDate() + 2}-${new Date().getMonth()}-${new Date().getFullYear()}`,
+        literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 2}`,
         timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}]
     }
 ];

src/app/pages/dates/dates.component.html

@@ -4,8 +4,8 @@
 
 <div>
     <label for="multi_hours">
-		<span i18n>
+		<span>
-			Je souhaite mettre des créneaux horaires
+            {{"dates.hours_different"|translate}}
 		</span>
         <select
             name="multi_hours"
@@ -16,7 +16,7 @@
             <option value="false">{{"dates.multiple.identical"|translate}}</option>
         </select>
         <span i18n>
-			pour chaque journée
+            {{"dates.hours_each_day"|translate}}
 		</span>
     </label>
 </div>
@@ -28,6 +28,14 @@
 >
     {{"dates.add"|translate}}
 </button>
+<button
+    class="btn btn-primary"
+    [ngClass]="{active: showDateInterval}"
+    (click)="showDateInterval = !showDateInterval "
+    id="toggle_interval_button"
+>
+    {{"dates.add_interval"|translate}}
+</button>
 
 
 <button
@@ -36,6 +44,24 @@
     id="empty_button"
 >{{"dates.empty"|translate}}
 </button>
+<section class="date-interval" *ngIf="showDateInterval">
+    <!--    TODO à mettre en popup-->
+    <hr>
+    <h2> {{"dates.add_interval"|translate}}</h2>
+    <p>
+        Je souhaite proposer pour mon sondage toutes les dates entre le
+        <input type="date" [(ngModel)]="startDateInterval">
+        ({{startDateInterval }})
+        et le
+        <input type="date" [(ngModel)]="endDateInterval">
+        ({{endDateInterval }})
+    </p>
+    <button class="btn btn-block"
+            (click)="addIntervalOfDates()">
+        Ajouter ces {{intervalDays}} dates
+    </button>
+    <hr>
+</section>
 <div class="dates-list">
     <span class="count-dates">
     {{config.dateList.length}}

src/app/pages/dates/dates.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core';
+import {ChangeDetectorRef, Component, Inject, OnChanges, OnInit} from '@angular/core';
 import {ConfigService} from '../../config.service';
 import {BaseComponent} from '../base-page/base.component';
 import {DOCUMENT} from '@angular/common';
@@ -8,7 +8,13 @@ import {DOCUMENT} from '@angular/common';
     templateUrl: './dates.component.html',
     styleUrls: ['./dates.component.scss']
 })
-export class DatesComponent extends BaseComponent implements OnInit {
+export class DatesComponent extends BaseComponent implements OnInit, OnChanges {
+    showDateInterval: boolean = true;
+    startDateInterval: any;
+    intervalDays: any;
+    intervalDaysDefault: number = 7;
+    endDateInterval: any;
+
     constructor(public config: ConfigService,
                 private cd: ChangeDetectorRef,
                 @Inject(DOCUMENT) private document: any
@@ -16,7 +22,22 @@ export class DatesComponent extends BaseComponent implements OnInit {
         super(config);
     }
 
+    ngOnChanges() {
+        // compute the number of days in the date interval
+        if (this.endDateInterval && this.startDateInterval) {
+            this.intervalDays = (this.dayDiff(this.endDateInterval, this.startDateInterval)).toFixed(0)
+        }
+    }
+
+    /**
+     * set the interval options
+     */
     ngOnInit() {
+        let dateCurrent = new Date();
+        const dateJson = dateCurrent.toISOString();
+        console.log('dateJson', dateJson.substring(0, 10));
+        this.startDateInterval = dateJson.substring(0, 10);
+        this.endDateInterval = this.addDaysToDate(this.intervalDaysDefault, dateCurrent).toISOString().substring(0, 10);
     }
 
     addDate() {
@@ -27,6 +48,17 @@ export class DatesComponent extends BaseComponent implements OnInit {
         this.config.timeList.push({literal: '', timeList: []});
     }
 
+    /**
+     * add some days to a date, to compute intervals
+     * @param days
+     * @param date
+     */
+    addDaysToDate(days: number, date: Date) {
+        var date = new Date(date.valueOf());
+        date.setDate(date.getDate() + days);
+        return date;
+    };
+
     /**
      * add a time period to a specific date choice,
      * focus on the new input
@@ -44,6 +76,9 @@ export class DatesComponent extends BaseComponent implements OnInit {
         }
     }
 
+    /**
+     * remove all input contents, does not reset to default
+     */
     emptyAll() {
         this.config.dateList.forEach(element => {
             element.literal = '';
@@ -53,4 +88,54 @@ export class DatesComponent extends BaseComponent implements OnInit {
             element.literal = '';
         });
     }
+
+    /**
+     * add all the dates between the start and end dates
+     */
+    addIntervalOfDates() {
+        let newIntervalArray = this.getDatesInrange(this.startDateInterval, this.endDateInterval, 1);
+        console.log('newIntervalArray', newIntervalArray);
+
+        const converted = [];
+        newIntervalArray.forEach(element => {
+            converted.push({literal: element, timeList: []});
+        });
+        this.config.dateList = [...new Set(converted)]; // add only dates that are not already present with a Set of unique items
+        console.log('converted', converted);
+        console.log('this.config.dateList', this.config.dateList);
+
+    }
+
+    getDatesInrange(d1, d2, interval) {
+        d1 = new Date(d1);
+        d2 = new Date(d2);
+        var dates = [];
+        while (+d1 < +d2) {
+            dates.push(this.formateDate(d1));
+            d1.setDate(d1.getDate() + interval)
+        }
+        return dates.slice(0)
+    }
+
+    dayDiff(d1: Date, d2: Date): Number {
+        console.log('Number(((d2.getTime()) - (d1.getTime()) / 31536000000))', Number(((d2.getTime()) - (d1.getTime()) / 31536000000)));
+        return Number(((d2.getTime()) - (d1.getTime()) / 31536000000));
+    }
+
+    /**
+     * format a date object to the date format used by the inputs of type date
+     * YYYY-MM-DD
+     * @param date
+     */
+    formateDate(date) {
+        return [
+            date.getFullYear(),
+            this.getDoubleDigits(date.getMonth() + 1),
+            this.getDoubleDigits(date.getDate()),
+        ].join('-')
+    }
+
+    getDoubleDigits(str) {
+        return ("00" + str).slice(-2);
+    }
 }

src/assets/i18n/fr.json

@@ -32,7 +32,8 @@
     },
     "dates": {
         "title": "Config spécialement pour les dates ",
-        "hours_different": "Je souhaite mettre des créneaux horaires pour chaque journée",
+        "hours_different": "Je souhaite mettre des créneaux horaires",
+        "hours_each_day": "pour chaque journée",
         "multiple": {
             "identical": "identiques",
             "different": "possiblement différentes"
@@ -40,7 +41,8 @@
         "add": "Ajouter une plage de dates",
         "add_time": "Ajouter une plage d'heure",
         "empty": "Vider",
-        "count_dates": "choix de dates"
+        "count_dates": "choix de dates",
+        "add_interval": "Ajouter une intervalle de dates"
     },
     "choices": {
         "title": "Choisir les propositions",