⚡ choices to add,clear and delete

src/app/config/PollConfig.ts

@@ -5,6 +5,25 @@ export interface DateOption {
     literal: string;
 }
 
+export const timeOfDay = [{literal: 'matin'},
+    {literal: 'midi'},
+    {literal: 'après-midi'},
+    {literal: 'soirée'}];
+export const defaultDates = [
+    {
+        literal: `${new Date().getDate()}-${new Date().getMonth()}-${new Date().getFullYear()}`,
+        timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}]
+    },
+    {
+        literal: `${new Date().getDate() + 1}-${new Date().getMonth()}-${new Date().getFullYear()}`,
+        timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}]
+    },
+    {
+        literal: `${new Date().getDate() + 2}-${new Date().getMonth()}-${new Date().getFullYear()}`,
+        timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}]
+    }
+];
+
 /**
  * configuration of the poll, add new fields at will
  */
@@ -17,8 +36,9 @@ export class PollConfig {
     myName = '';
     visibility = 'link_only';
     // date specific poll
-    allowSeveralHours = false;
+    allowSeveralHours = 'true';
-    dateList: DateOption[] = [];
+    dateList: DateOption[] = defaultDates; // sets of days as strings
+    timeList: DateOption[] = timeOfDay; // ranges of time expressed as strings
     answers: any = [{
         id: 0,
         text: 'réponse de démo 1'

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

@@ -1,56 +1,117 @@
 <div i18n>
-	{{"dates.title"|translate}}
+    {{"dates.title"|translate}}
 </div>
 
 <div>
-	<label for="multi_hours">
+    <label for="multi_hours">
 		<span i18n>
 			Je souhaite mettre des créneaux horaires
 		</span>
-		<select
+        <select
-			name="multi_hours"
+            name="multi_hours"
-			id="multi_hours"
+            id="multi_hours"
-			[(ngModel)]="config.allowSeveralHours"
+            [(ngModel)]="config.allowSeveralHours"
-		>
+        >
-			<option value="true">{{"dates.multiple.different"|translate}}</option>
+            <option value="true">{{"dates.multiple.different"|translate}}</option>
-			<option value="false">{{"dates.multiple.identical"|translate}}</option>
+            <option value="false">{{"dates.multiple.identical"|translate}}</option>
-		</select>
+        </select>
-		<span i18n>
+        <span i18n>
 			pour chaque journée
 		</span>
-	</label>
+    </label>
 </div>
 
 <button
-	class="btn btn-primary"
+    class="btn btn-primary"
-	(click)="addDate()"
+    (click)="addDate()"
-	i18n
+    id="add_date_button"
 >
-	{{"dates.add"|translate}}
+    {{"dates.add"|translate}}
+</button>
+<button
+    class="btn btn-primary"
+    (click)="addtime()"
+    id="add_time_button"
+>
+    {{"dates.addTime"|translate}}
+</button>
+
+<button
+    class="btn btn-warning"
+    (click)="emptyAll()"
+    id="empty_button"
+>{{"dates.empty"|translate}}
 </button>
 <div class="dates-list">
-	{{config.dateList.length}}
+    {{config.dateList.length}}
-	<span i18n>
+    <span>
 		{{"dates.count_dates"|translate}}
 	</span>
-
+    <div
-	<div
+        class="identical-dates"
-		*ngFor="let choice of config.dateList; index as id"
+        *ngIf="'false'==config.allowSeveralHours"
-		class="date-choice"
+    >
-	>
+        <div
-		<input
+            class="time-choice"
-			type="text"
+            *ngFor="let choice of config.timeList; index as id"
-			name="dateChoices[]"
+        >
-			[(ngModel)]="choice.literal"
+            <input
-		>
+                type="text"
-
+                name="timeChoices_{{id}}"
-		<button (click)="config.dateList.splice(id, 1)">X</button>
+                [(ngModel)]="choice.literal"
-	</div>
+            >
+            <button (click)="config.timeList.splice(id, 1)">X</button>
+        </div>
+    </div>
+    <hr>
+    <span>
+		{{"dates.count_dates"|translate}}
+	</span>
+    <div
+        *ngFor="let choice of config.dateList; index as id"
+        class="date-choice"
+    >
+        <input
+            type="text"
+            name="dateChoices_{{id}}"
+            [(ngModel)]="choice.literal"
+        >
+        <button
+            class="btn btn-warning"
+            (click)="config.dateList.splice(id, 1)"
+        >X
+        </button>
+        <button
+            class="btn btn-primary"
+            (click)="addTimetoDate(choice, id)"
+        > Ajouter un choix d'heure
+        </button>
+        <div
+            class="several-times"
+            *ngIf="'true'==config.allowSeveralHours"
+        >
+            <div
+                class="time-choice"
+                *ngFor="let time of choice.timeList; index as idTime"
+            >
+                <input
+                    type="text"
+                    name="dateTime_{{id}}_Choices_{{idTime}}"
+                    [(ngModel)]="time.literal"
+                >
+                <button
+                    class="btn btn-warning"
+                    (click)="config.timeList.splice(idTime, 1)"
+                >X
+                </button>
+            </div>
+        </div>
+    </div>
 </div>
 
 <a
-	[routerLink]="'/step/end'"
+    [routerLink]="'/step/end'"
-	class="btn btn-block"
+    class="btn btn-block"
 >
-	C'est parfait!
+    C'est parfait!
 </a>

src/app/pages/dates/dates.component.scss

@@ -0,0 +1,7 @@
+.several-times {
+    padding-left: 1em;
+
+    input {
+        margin-right: 1em;
+    }
+}

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

@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
 import {ConfigService} from '../../config.service';
 import {BaseComponent} from '../base-page/base.component';
 
@@ -8,7 +8,7 @@ import {BaseComponent} from '../base-page/base.component';
     styleUrls: ['./dates.component.scss']
 })
 export class DatesComponent extends BaseComponent implements OnInit {
-    constructor(public config: ConfigService) {
+    constructor(public config: ConfigService, private cd: ChangeDetectorRef) {
         super(config);
     }
 
@@ -16,6 +16,33 @@ export class DatesComponent extends BaseComponent implements OnInit {
     }
 
     addDate() {
-        this.config.dateList.push({ literal: '' });
+        this.config.dateList.push({literal: ''});
+    }
+
+    addtime() {
+        this.config.timeList.push({literal: ''});
+    }
+
+    /**
+     * add a time period to a specific date choice,
+     * focus on the new input
+     * @param config
+     * @param id
+     */
+    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 = document.querySelector(selector);
+        if (elem && elem.focus) {
+            elem.focus();
+        }
+    }
+
+    emptyAll() {
+        this.config.dateList.forEach(element => {
+            element.literal = '';
+        });
     }
 }

src/assets/i18n/fr.json

@@ -38,6 +38,8 @@
             "different": "possiblement différentes"
         },
         "add": "Ajouter une plage de dates",
+        "addTime": "Ajouter une plage d'heure",
+        "empty": "Vider",
         "count_dates": "choix de dates"
     },
     "choices": {

yarn.lock

@@ -309,6 +309,20 @@
     tree-kill "1.2.1"
     webpack-sources "1.3.0"
 
+"@ngx-translate/core@^11.0.1":
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/@ngx-translate/core/-/core-11.0.1.tgz#cecefad41f06368f5859dac48fec8fcc4485615f"
+  integrity sha512-nBCa1ZD9fAUY/3eskP3Lql2fNg8OMrYIej1/5GRsfcutx9tG/5fZLCv9m6UCw1aS+u4uK/vXjv1ctG/FdMvaWg==
+  dependencies:
+    tslib "^1.9.0"
+
+"@ngx-translate/http-loader@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@ngx-translate/http-loader/-/http-loader-4.0.0.tgz#8a555248ad4b7d513460fcec9da25b0447962f1d"
+  integrity sha512-x8LumqydWD7eX9yQTAVeoCM9gFUIGVTUjZqbxdAUavAA3qVnk9wCQux7iHLPXpydl8vyQmLoPQR+fFU+DUDOMA==
+  dependencies:
+    tslib "^1.9.0"
+
 "@schematics/angular@8.2.2":
   version "8.2.2"
   resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-8.2.2.tgz#ad606789a016e540facd44b81bff9aac874afb25"
@@ -362,6 +376,11 @@
   dependencies:
     "@types/jasmine" "*"
 
+"@types/marked@^0.6.5":
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-0.6.5.tgz#3cf2a56ef615dad24aaf99784ef90a9eba4e29d8"
+  integrity sha512-6kBKf64aVfx93UJrcyEZ+OBM5nGv4RLsI6sR1Ar34bpgvGVRoyTgpxn4ZmtxOM5aDTAaaznYuYUH8bUX3Nk3YA==
+
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -1521,6 +1540,15 @@ cli-width@^2.0.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
   integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=
 
+clipboard@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.4.tgz#836dafd66cf0fea5d71ce5d5b0bf6e958009112d"
+  integrity sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 cliui@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.1.0.tgz#348422dbe82d800b3022eef4f6ac10bf2e4d1b49"
@@ -1612,6 +1640,11 @@ commander@^2.11.0, commander@^2.12.1, commander@^2.20.0, commander@~2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
   integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
 
+commander@^2.19.0:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -2055,6 +2088,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
+
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -2911,6 +2949,13 @@ globby@^7.1.1:
     pify "^3.0.0"
     slash "^1.0.0"
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
+  dependencies:
+    delegate "^3.1.2"
+
 graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.2.tgz#6f0952605d0140c1cfdb138ed005775b92d67b02"
@@ -3921,6 +3966,13 @@ karma@~4.1.0:
     tmp "0.0.33"
     useragent "2.3.0"
 
+katex@^0.11.1:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.11.1.tgz#df30ca40c565c9df01a466a00d53e079e84ffaa2"
+  integrity sha512-5oANDICCTX0NqYIyAiFCCwjQ7ERu3DQG2JFHLbYOf+fXaMoH8eg/zOq5WSYJsKMi/QebW+Eh3gSM+oss1H/bww==
+  dependencies:
+    commander "^2.19.0"
+
 killable@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
@@ -4133,6 +4185,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+marked@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.7.0.tgz#b64201f051d271b1edc10a04d1ae9b74bb8e5c0e"
+  integrity sha512-c+yYdCZJQrsRjTPhUx7VKkApw9bwDkNbHUKo1ovgcfDjb2kc8rLuRbIFyXL5WOEUwzSSKo3IXpph2K6DqB/KZg==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -4420,6 +4477,17 @@ neo-async@^2.5.0, neo-async@^2.6.0:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
   integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
 
+ngx-markdown@^8.2.1:
+  version "8.2.1"
+  resolved "https://registry.yarnpkg.com/ngx-markdown/-/ngx-markdown-8.2.1.tgz#53bafde382aa69ae6787abf0d72bf63bc028105a"
+  integrity sha512-59LG8rEoOwDsZyyJckp+QDnW/c5wMaRpNkb6TWktlBVTfQKyAYHr6BuSskVbZ4y8nsj54UQg0CDFLBOfUiqOwA==
+  dependencies:
+    "@types/marked" "^0.6.5"
+    katex "^0.11.1"
+    marked "^0.7.0"
+    prismjs "^1.16.0"
+    tslib "^1.9.0"
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -5094,6 +5162,13 @@ prepend-http@^1.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
+prismjs@^1.16.0:
+  version "1.17.1"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.17.1.tgz#e669fcbd4cdd873c35102881c33b14d0d68519be"
+  integrity sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==
+  optionalDependencies:
+    clipboard "^2.0.0"
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -5700,6 +5775,11 @@ select-hose@^2.0.0:
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
   integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+  integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
+
 selenium-webdriver@3.6.0, selenium-webdriver@^3.0.1:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/selenium-webdriver/-/selenium-webdriver-3.6.0.tgz#2ba87a1662c020b8988c981ae62cb2a01298eafc"
@@ -6466,6 +6546,11 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+tiny-emitter@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 tmp@0.0.30:
   version "0.0.30"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.30.tgz#72419d4a8be7d6ce75148fd8b324e593a711c2ed"