👽 translate buttons

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

@@ -8,9 +8,9 @@
             {{"dates.hours_different"|translate}}
 		</span>
         <select
-            name="multi_hours"
-            id="multi_hours"
             [(ngModel)]="config.allowSeveralHours"
+            id="multi_hours"
+            name="multi_hours"
         >
             <option value="true">{{"dates.multiple.different"|translate}}</option>
             <option value="false">{{"dates.multiple.identical"|translate}}</option>
@@ -22,16 +22,16 @@
 </div>
 
 <button
-    class="btn btn-primary"
     (click)="addDate()"
+    class="btn btn-primary"
     id="add_date_button"
 >
     {{"dates.add"|translate}}
 </button>
 <button
-    class="btn btn-primary"
-    [ngClass]="{active: showDateInterval}"
     (click)="showDateInterval = !showDateInterval "
+    [ngClass]="{active: showDateInterval}"
+    class="btn btn-primary"
     id="toggle_interval_button"
 >
     {{"dates.add_interval"|translate}}
@@ -39,62 +39,65 @@
 
 
 <button
-    class="btn btn-warning"
     (click)="emptyAll()"
+    class="btn btn-warning"
     id="empty_button"
 >{{"dates.empty"|translate}}
 </button>
-<section class="date-interval" *ngIf="showDateInterval">
+<section *ngIf="showDateInterval" class="date-interval">
     <!--    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 }})
+        {{"dates.interval_propose"|translate}}
+        <input (change)="countDays()" [(ngModel)]="startDateInterval" type="date">
+        {{"dates.interval_span"|translate}}
+        <input (change)="countDays()" [(ngModel)]="endDateInterval" type="date">
     </p>
-    <button class="btn btn-block"
-            (click)="addIntervalOfDates()">
-        Ajouter ces {{intervalDays}} dates
+    <button (click)="addIntervalOfDates()"
+            class="btn btn-block">
+        {{"dates.interval_button"|translate}}
+        {{intervalDays}}
+        {{"dates.interval_button_dates"|translate}}
     </button>
     <hr>
 </section>
 <div class="dates-list">
     <span class="count-dates">
-    {{config.dateList.length}}
+    {{config.timeList.length}}
     </span>
     <span class="count-dates-txt">
-		{{"dates.count_dates"|translate}}
+		{{"dates.count_time"|translate}}
 	</span>
     <button
-        class="btn btn-primary pull-right"
-        (click)="addtime()"
-        id="add_time_button"
+        (click)="add_time()"
         *ngIf="config.allowSeveralHours=='false'"
+        class="btn btn-primary pull-right"
+        id="add_time_button"
     >
-        {{"dates.addTime"|translate}}
+        {{"dates.add_time"|translate}}
     </button>
 
     <div
-        class="identical-dates"
         *ngIf="'false'==config.allowSeveralHours"
+        class="identical-dates"
     >
         <div
-            class="time-choice"
             *ngFor="let choice of config.timeList; index as id"
+            class="time-choice"
         >
             <input
-                type="text"
-                name="timeChoices_{{id}}"
                 [(ngModel)]="choice.literal"
+                name="timeChoices_{{id}}"
+                type="text"
             >
-            <button class="btn btn-warning" (click)="config.timeList.splice(id, 1)">X</button>
+            <button (click)="config.timeList.splice(id, 1)" class="btn btn-warning">X</button>
         </div>
     </div>
     <hr>
+    <span class="count-dates">
+    {{config.dateList.length}}
+    </span>
     <span>
 		{{"dates.count_dates"|translate}}
 	</span>
@@ -103,38 +106,38 @@
         class="date-choice"
     >
         <input
-            type="date"
-            name="dateChoices_{{id}}"
             [(ngModel)]="choice.literal"
+            name="dateChoices_{{id}}"
+            type="date"
         >
         <button
-            class="btn btn-warning"
             (click)="config.dateList.splice(id, 1)"
+            class="btn btn-warning"
         >X
         </button>
         <button
+            (click)="add_timeToDate(choice, id)"
             *ngIf="config.allowSeveralHours=='true'"
             class="btn btn-primary"
-            (click)="addTimetoDate(choice, id)"
         >
             {{"dates.add_time"|translate}}
         </button>
         <div
-            class="several-times"
             *ngIf="'true'==config.allowSeveralHours"
+            class="several-times"
         >
             <div
-                class="time-choice"
                 *ngFor="let time of choice.timeList; index as idTime"
+                class="time-choice"
             >
                 <input
-                    type="text"
-                    name="dateTime_{{id}}_Choices_{{idTime}}"
                     [(ngModel)]="time.literal"
+                    name="dateTime_{{id}}_Choices_{{idTime}}"
+                    type="text"
                 >
                 <button
-                    class="btn btn-warning"
                     (click)="choice.timeList.splice(idTime, 1)"
+                    class="btn btn-warning"
                 >X
                 </button>
             </div>

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

@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, Inject, OnChanges, OnInit} from '@angular/core';
+import {ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core';
 import {ConfigService} from '../../config.service';
 import {BaseComponent} from '../base-page/base.component';
 import {DOCUMENT} from '@angular/common';
@@ -8,7 +8,7 @@ import {DOCUMENT} from '@angular/common';
     templateUrl: './dates.component.html',
     styleUrls: ['./dates.component.scss']
 })
-export class DatesComponent extends BaseComponent implements OnInit, OnChanges {
+export class DatesComponent extends BaseComponent implements OnInit {
     showDateInterval: boolean = true;
     startDateInterval: any;
     intervalDays: any;
@@ -22,7 +22,7 @@ export class DatesComponent extends BaseComponent implements OnInit, OnChanges {
         super(config);
     }
 
-    ngOnChanges() {
+    countDays() {
         // compute the number of days in the date interval
         if (this.endDateInterval && this.startDateInterval) {
             this.intervalDays = (this.dayDiff(this.endDateInterval, this.startDateInterval)).toFixed(0)
@@ -35,16 +35,21 @@ export class DatesComponent extends BaseComponent implements OnInit, OnChanges {
     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() {
         this.config.dateList.push({literal: '', timeList: []});
+        let selector = '[ng-reflect-name="dateChoices_' + (this.config.dateList.length - 1) + '"]';
+        this.cd.detectChanges();
+        const elem = this.document.querySelector(selector);
+        if (elem) {
+            elem.focus();
+        }
     }
 
-    addtime() {
+    addTime() {
         this.config.timeList.push({literal: '', timeList: []});
     }
 
@@ -54,7 +59,7 @@ export class DatesComponent extends BaseComponent implements OnInit, OnChanges {
      * @param date
      */
     addDaysToDate(days: number, date: Date) {
-        var date = new Date(date.valueOf());
+        date = new Date(date.valueOf());
         date.setDate(date.getDate() + days);
         return date;
     };
@@ -65,10 +70,9 @@ export class DatesComponent extends BaseComponent implements OnInit, OnChanges {
      * @param config
      * @param id
      */
-    addTimetoDate(config: any, id: number) {
+    addTimeToDate(config: any, id: number) {
         config.timeList.push({literal: ''});
         let selector = '[ng-reflect-name="dateTime_' + id + '_Choices_' + (config.timeList.length - 1) + '"]';
-        console.log('selector', selector);
         this.cd.detectChanges();
         const elem = this.document.querySelector(selector);
         if (elem) {
@@ -90,26 +94,30 @@ export class DatesComponent extends BaseComponent implements OnInit, OnChanges {
     }
 
     /**
-     * add all the dates between the start and end dates
+     * add all the dates between the start and end dates in the interval section
      */
     addIntervalOfDates() {
-        let newIntervalArray = this.getDatesInrange(this.startDateInterval, this.endDateInterval, 1);
-        console.log('newIntervalArray', newIntervalArray);
+        let newIntervalArray = this.getDatesInRange(this.startDateInterval, this.endDateInterval, 1);
 
         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);
+        this.showDateInterval = false;
 
     }
 
-    getDatesInrange(d1, d2, interval) {
+    /**
+     *
+     * @param d1
+     * @param d2
+     * @param interval
+     */
+    getDatesInRange(d1: Date, d2: Date, interval: number) {
         d1 = new Date(d1);
         d2 = new Date(d2);
-        var dates = [];
+        const dates = [];
         while (+d1 < +d2) {
             dates.push(this.formateDate(d1));
             d1.setDate(d1.getDate() + interval)
@@ -117,8 +125,12 @@ export class DatesComponent extends BaseComponent implements OnInit, OnChanges {
         return dates.slice(0)
     }
 
+    /**
+     * get the number of days between two dates
+     * @param d1
+     * @param d2
+     */
     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));
     }
 

src/assets/i18n/en.json

@@ -39,7 +39,13 @@
         },
         "add": "Add a date choice",
         "add_time": "Add a time span",
-        "count_dates": "choices of dates"
+        "count_dates": "choices of dates",
+        "count_time": "choices of hour span",
+        "add_interval": "Add a date interval",
+        "interval_propose": "I want to suggest all the dates from",
+        "interval_span": "to",
+        "interval_button": "Add these",
+        "interval_button_dates": "dates"
     },
     "choices": {
         "title": "Write the proposals",

src/assets/i18n/fr.json

@@ -42,7 +42,12 @@
         "add_time": "Ajouter une plage d'heure",
         "empty": "Vider",
         "count_dates": "choix de dates",
-        "add_interval": "Ajouter une intervalle de dates"
+        "count_time": "choix de plages horaires",
+        "add_interval": "Ajouter une intervalle de dates",
+        "interval_propose": "Je souhaite proposer pour mon sondage toutes les dates entre le",
+        "interval_span": "et le",
+        "interval_button": "Ajouter ces",
+        "interval_button_dates": "dates"
     },
     "choices": {
         "title": "Choisir les propositions",