⚡ manage dates poll type display, fix typo in add button date

src/app/config/PollConfig.ts

@@ -37,7 +37,7 @@ export class PollConfig {
     myEmail: string = "tktest@tktest.com";
     myPolls: any = [];// list of retrieved polls from the backend api
     // date specific poll, we have the choice to setup different hours (timeList) for all possible dates (dateList), or use the same hours for all dates
-    allowSeveralHours = 'false';
+    allowSeveralHours = 'true';
     // access
     visibility = 'link_only'; // visible to anyone with the link:
     voteChoices = 'only_yes'; // possible answers to a vote choice: only "yes", "yes, maybe, no"

src/app/config/defaultConfigs.ts

@@ -1,25 +1,30 @@
+export const basicSlicesOfDay = [
+    {literal: 'matin'},
+    {literal: 'midi'},
+    {literal: 'soir'}
+];
 export const defaultTimeOfDay = [{
-    timeList: [],
+    timeList: Object.create(basicSlicesOfDay),
     literal: 'matin'
 },
-    {timeList: [], literal: 'midi'},
+    {timeList: Object.create(basicSlicesOfDay), literal: 'midi'},
-    {timeList: [], literal: 'après-midi'},
+    {timeList: Object.create(basicSlicesOfDay), literal: 'après-midi'},
-    {timeList: [], literal: 'soirée'}];
+    {timeList: Object.create(basicSlicesOfDay), literal: 'soirée'}];
 export const defaultDates = [
     {
         literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()}`,
         date_object: new Date(),
-        timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}]
+        timeList: Object.create(basicSlicesOfDay)
     },
     {
         literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 1}`,
         date_object: new Date(),
-        timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}]
+        timeList: Object.create(basicSlicesOfDay)
     },
     {
         literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 2}`,
         date_object: new Date(),
-        timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}]
+        timeList: Object.create(basicSlicesOfDay)
     }
 ];
 export const defaultAnswers = [{
@@ -28,7 +33,7 @@ export const defaultAnswers = [{
     url: 'https://mastodon.cipherbliss.com/system/media_attachments/files/001/439/118/original/6fcf149bd902841b.png?1579471574',
     literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()}`,
     date_object: new Date(),
-    timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}]
+    timeList: Object.create(basicSlicesOfDay)
 },
     {
         id: 1,

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

@@ -12,8 +12,8 @@
             id="multi_hours"
             name="multi_hours"
         >
-            <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 >
         <span i18n >
             {{"dates.hours_each_day"|translate}}
@@ -91,7 +91,7 @@
     <div class='actions' >
         <button
             (click)="addTime()"
-            *ngIf="config.allowSeveralHours=='false'"
+            *ngIf=" 'false' === config.allowSeveralHours "
             class="btn btn--primary"
             id="add_time_button"
         >
@@ -100,7 +100,7 @@
         </button >
         <button
             (click)="removeAllTimes()"
-            *ngIf="config.allowSeveralHours=='false'"
+            *ngIf=" 'false' === config.allowSeveralHours "
             class="btn btn--warning"
             id="remove_time_button"
         >
@@ -109,7 +109,7 @@
         </button >
         <button
             (click)="resetTimes()"
-            *ngIf="config.allowSeveralHours=='false'"
+            *ngIf=" 'false' === config.allowSeveralHours"
             class="btn btn--warning"
             id="reset_time_button"
         >
@@ -119,25 +119,24 @@
     </div >
 
     <div
-        *ngIf="'false'==config.allowSeveralHours"
+        *ngIf=" 'false' === config.allowSeveralHours"
         class="identical-dates"
     >
         <div
-            *ngFor="let choice of config.timeList; index as id"
+            *ngFor="let time of config.timeList; index as id"
             class="time-choice"
         >
             <label for='timeChoices_{{id}}' >
                 <i class='fa fa-clock-o' ></i >
             </label >
             <input
-                [(ngModel)]="choice.literal"
+                [(ngModel)]="time.literal"
                 name="timeChoices_{{id}}"
                 type="text"
                 id='timeChoices_{{id}}'
             >
-
             <button
-                (click)="config.timeList.splice(id, 1)"
+                (click)="time.timeList.splice(id, 1)"
                 class="btn btn-warning" ><i class="fa fa-times" ></i >
             </button >
         </div >
@@ -149,6 +148,11 @@
     <span >
 		{{"dates.count_dates"|translate}}
 	</span >
+    <button
+        class='btn btn--primary'
+        (click)='addDate()' >
+        {{"dates.add"|translate}}
+    </button >
     <div
         *ngFor="let choice of config.dateList; index as id"
         class="date-choice"
@@ -167,13 +171,13 @@
         </button >
         <button
             (click)="addTimeToDate(choice, id)"
-            *ngIf="config.allowSeveralHours=='true'"
+            *ngIf=" 'true' === config.allowSeveralHours"
             class="btn btn--primary"
         >
             {{"dates.add_time"|translate}}
         </button >
         <div
-            *ngIf="'true'==config.allowSeveralHours"
+            *ngIf=" 'true' === config.allowSeveralHours"
             class="several-times"
         >
             <div
@@ -185,7 +189,7 @@
                     name="dateTime_{{id}}_Choices_{{idTime}}"
                     id="dateTime_{{id}}_Choices_{{idTime}}"
                     useValueAsDate
-                    type="name"
+                    type="text"
                 >
                 <button
                     (click)="choice.timeList.splice(idTime, 1)"
@@ -196,7 +200,6 @@
         </div >
     </div >
 </div >
-
 <a
     [routerLink]="'/step/resume'"
     class="btn btn--full btn--primary"

src/app/pages/resume/resume.component.html

@@ -34,23 +34,53 @@
     </section >
     <section
         class='type-date'
-        *ngIf='config.pollType == "dates"' >
+        *ngIf='config.pollType !== "classic"' >
+        <i class='fa fa-clock-o' ></i >
+        <span
+            class='well'
+            *ngIf="true ===!!config.allowSeveralHours" >
+            {{"dates.multiple.different"|translate}}
+        </span >
+        <span
+            class='well'
+            *ngIf="false ===!!config.allowSeveralHours" >
+            {{"dates.multiple.identical"|translate}}
+        </span >
         <div
             *ngFor="let choice of config.dateList; index as id"
             class="date-choice"
         >
+            <div
+                class='only-one-slice'
+                *ngIf='!choice.timeList.length' >
+                <i class='fa fa-square-o' ></i >
+            </div >
             {{choice.literal}}
 
+            <!-- CASE different slices of the day-->
             <div
-                *ngIf="'true'==config.allowSeveralHours"
+                *ngIf="true ===!!config.allowSeveralHours"
                 class="several-times"
             >
                 <div
-                    *ngFor="let time of choice.timeList; index as idTime"
+                    *ngFor="let time of choice.timeList "
+                    class="time-choice"
+                >
+                    <i class='fa fa-square-o' ></i >
+                    {{time.literal}}
+                </div >
+
+            </div >
+            <!-- CASE all dates having the same slices of the day-->
+            <div
+                *ngIf="false ===!!config.allowSeveralHours"
+                class="same-times"
+            >
+                <div
+                    *ngFor="let time of config.timeList "
                     class="time-choice"
                 >
                     {{time.literal}}
-
                 </div >
             </div >
         </div >
@@ -73,7 +103,7 @@
     </a >
     <a
         *ngIf='config.pollType == "dates"'
-        [routerLink]="'/step/dates'"
+        [routerLink]="'/step/date'"
         class="prev" >
         Retour
     </a >

src/app/pages/resume/resume.component.scss

@@ -3,3 +3,7 @@
     padding: 2em;
     margin: 1em 0;
 }
+
+.time-choice {
+    margin-left: 3em;
+}

src/assets/i18n/fr.json

@@ -39,7 +39,7 @@
             "identical": "identiques",
             "different": "possiblement différents"
         },
-        "add": "Ajouter une plage de dates",
+        "add": "Ajouter une date",
         "add_time": "Ajouter une plage horaire",
         "empty": "Vider",
         "count_dates": "choix de dates",