dates and recap side to side

src/app/config/PollConfig.ts

@@ -2,7 +2,7 @@
  * une option de date dans les sondages spéciaux
  */
 import {environment} from "../../environments/environment";
-import {defaultAnswers, defaultDates, defaultTimeOfDay} from "./defaultConfigs";
+import {defaultAnswers, otherDefaultDates, otherTimeOfDay} from "./defaultConfigs";
 
 export interface DateOption {
     timeList: any;
@@ -59,8 +59,8 @@ export class PollConfig {
     canModifyAnswers = true;// bool for the frontend selector
     whoModifiesAnswers = "everybody";// everybody, self, nobody (= just admin)
     whoCanChangeAnswers = 'everybody';// everybody, self, nobody (= just admin)
-    dateList: any = defaultDates; // sets of days as strings, config to set identical time for days in a special days poll
+    dateList: any = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll
-    timeList: any = defaultTimeOfDay; // ranges of time expressed as strings
+    timeList: any = otherTimeOfDay; // ranges of time expressed as strings
 
     answers: any = defaultAnswers;
 

src/app/config/defaultConfigs.ts

@@ -3,28 +3,67 @@ export const basicSlicesOfDay = [
     {literal: 'midi'},
     {literal: 'soir'}
 ];
-export const defaultTimeOfDay = [{
+export const otherSlicesOfDay = [
-    timeList: Object.create(basicSlicesOfDay),
+    {literal: 'aux aurores'},
+    {literal: 'au petit dej'},
+    {literal: 'au deuxième petit dej des hobbits'}
+];
+export const defaultTimeOfDay = Array.from([{
+    timeList: [...basicSlicesOfDay],
     literal: 'matin'
 },
-    {timeList: Object.create(basicSlicesOfDay), literal: 'midi'},
+    {timeList: [...basicSlicesOfDay], literal: 'midi'},
-    {timeList: Object.create(basicSlicesOfDay), literal: 'après-midi'},
+    {timeList: [...basicSlicesOfDay], literal: 'après-midi'},
-    {timeList: Object.create(basicSlicesOfDay), literal: 'soirée'}];
+    {timeList: [...basicSlicesOfDay], literal: 'soirée'}]);
+export const otherTimeOfDay = Array.from([{
+    timeList: [
+        {literal: 'aux aurores'},
+        {literal: 'au petit dej'},
+        {literal: 'au deuxième petit dej des hobbits'}
+    ],
+    literal: 'matin'
+},
+    {
+        timeList: [
+            {literal: 'matin'},
+            {literal: 'midi'},
+            {literal: 'soir'}
+        ], literal: 'midi'
+    },
+    {timeList: [...otherSlicesOfDay], literal: 'après-midi'},
+    {timeList: [...basicSlicesOfDay], literal: 'soirée'}]);
 export const defaultDates = [
     {
         literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()}`,
         date_object: new Date(),
-        timeList: Object.create(basicSlicesOfDay)
+        timeList: [...otherSlicesOfDay]
     },
     {
         literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 1}`,
         date_object: new Date(),
-        timeList: Object.create(basicSlicesOfDay)
+        timeList: [...basicSlicesOfDay]
     },
     {
         literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 2}`,
         date_object: new Date(),
-        timeList: Object.create(basicSlicesOfDay)
+        timeList: [...otherSlicesOfDay]
+    }
+];
+export const otherDefaultDates = [
+    {
+        literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()}`,
+        date_object: new Date(),
+        timeList: [...otherSlicesOfDay]
+    },
+    {
+        literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 1}`,
+        date_object: new Date(),
+        timeList: [...basicSlicesOfDay]
+    },
+    {
+        literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 2}`,
+        date_object: new Date(),
+        timeList: [...otherSlicesOfDay]
     }
 ];
 export const defaultAnswers = [{
@@ -33,7 +72,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: Object.create(basicSlicesOfDay)
+    timeList: Array.from(otherSlicesOfDay)
 },
     {
         id: 1,
@@ -41,6 +80,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() + 1}`,
         date_object: new Date(),
+        timeList: Array.from(basicSlicesOfDay)
     },
     {
         id: 2,
@@ -48,4 +88,5 @@ 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() + 2}`,
         date_object: new Date(),
+        timeList: Array.from(otherSlicesOfDay)
     }];

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

@@ -77,6 +77,8 @@
     </button >
     <hr >
 </section >
+<div class='columns' >
+    <div class='column' >
         <div class="dates-list " >
             <div class='title' >
     <span class="count-dates" >
@@ -157,6 +159,7 @@
                 *ngFor="let choice of config.dateList; index as id"
                 class="date-choice"
             >
+                {{id}})
                 <input
                     [(ngModel)]="choice.date_object"
                     name="dateChoices_{{id}}"
@@ -180,15 +183,16 @@
                     *ngIf=" 'true' === config.allowSeveralHours"
                     class="several-times"
                 >
+                    <h2 >Several hours</h2 >
                     <div
-                *ngFor="let time of choice.timeList; index as idTime"
+                        *ngFor="let timeItem of choice.timeList; index as idTime"
                         class="time-choice"
                     >
                         <input
-                    [(ngModel)]="time.date_object"
+                            [(ngModel)]="timeItem.literal"
                             name="dateTime_{{id}}_Choices_{{idTime}}"
                             id="dateTime_{{id}}_Choices_{{idTime}}"
-                    useValueAsDate
+
                             type="text"
                         >
                         <button
@@ -200,6 +204,12 @@
                 </div >
             </div >
         </div >
+    </div >
+    <div class='column' >
+        <framadate-resume ></framadate-resume >
+    </div >
+</div >
+
 <a
     [routerLink]="'/step/resume'"
     class="btn btn--full btn--primary"

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

@@ -38,12 +38,12 @@
         <i class='fa fa-clock-o' ></i >
         <span
             class='well'
-            *ngIf="true ===!!config.allowSeveralHours" >
+            *ngIf="'true' === config.allowSeveralHours" >
             {{"dates.multiple.different"|translate}}
         </span >
         <span
             class='well'
-            *ngIf="false ===!!config.allowSeveralHours" >
+            *ngIf="'false' === config.allowSeveralHours" >
             {{"dates.multiple.identical"|translate}}
         </span >
         <div
@@ -59,13 +59,15 @@
 
             <!-- 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 "
+                    *ngFor="let time of choice.timeList ; index as idTime"
                     class="time-choice"
                 >
+                    {{idTime}})
                     <i class='fa fa-square-o' ></i >
                     {{time.literal}}
                 </div >
@@ -73,13 +75,14 @@
             </div >
             <!-- CASE all dates having the same slices of the day-->
             <div
-                *ngIf="false ===!!config.allowSeveralHours"
+                *ngIf="'false' === config.allowSeveralHours"
                 class="same-times"
             >
                 <div
                     *ngFor="let time of config.timeList "
                     class="time-choice"
                 >
+                    <i class='fa fa-square-o' ></i >
                     {{time.literal}}
                 </div >
             </div >