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
-    timeList: any = defaultTimeOfDay; // ranges of time expressed as strings
+    dateList: any = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll
+    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 = [{
-    timeList: Object.create(basicSlicesOfDay),
+export const otherSlicesOfDay = [
+    {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: [...basicSlicesOfDay], literal: 'midi'},
+    {timeList: [...basicSlicesOfDay], literal: 'après-midi'},
+    {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: Object.create(basicSlicesOfDay), literal: 'midi'},
-    {timeList: Object.create(basicSlicesOfDay), literal: 'après-midi'},
-    {timeList: Object.create(basicSlicesOfDay), literal: 'soirée'}];
+    {
+        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: [...basicSlicesOfDay]
+    },
+    {
+        literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 2}`,
+        date_object: new Date(),
+        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: 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 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,129 +77,139 @@
     </button >
     <hr >
 </section >
-<div class="dates-list " >
-    <div class='title' >
+<div class='columns' >
+    <div class='column' >
+        <div class="dates-list " >
+            <div class='title' >
     <span class="count-dates" >
     {{config.timeList.length}}
     </span >
-        <span class="count-dates-txt " >
+                <span class="count-dates-txt " >
 		{{"dates.count_time"|translate}}
-            (pour chaque jour)
+                    (pour chaque jour)
 	</span >
 
-    </div >
-    <div class='actions' >
-        <button
-            (click)="addTime()"
-            *ngIf=" 'false' === config.allowSeveralHours "
-            class="btn btn--primary"
-            id="add_time_button"
-        >
-            <i class='fa fa-plus' ></i >
-            {{"dates.add_time"|translate}}
-        </button >
-        <button
-            (click)="removeAllTimes()"
-            *ngIf=" 'false' === config.allowSeveralHours "
-            class="btn btn--warning"
-            id="remove_time_button"
-        >
-            <i class='fa fa-trash' ></i >
-            Aucune plage horaire
-        </button >
-        <button
-            (click)="resetTimes()"
-            *ngIf=" 'false' === config.allowSeveralHours"
-            class="btn btn--warning"
-            id="reset_time_button"
-        >
-            <i class='fa fa-refresh' ></i >
-            réinitialiser
-        </button >
-    </div >
+            </div >
+            <div class='actions' >
+                <button
+                    (click)="addTime()"
+                    *ngIf=" 'false' === config.allowSeveralHours "
+                    class="btn btn--primary"
+                    id="add_time_button"
+                >
+                    <i class='fa fa-plus' ></i >
+                    {{"dates.add_time"|translate}}
+                </button >
+                <button
+                    (click)="removeAllTimes()"
+                    *ngIf=" 'false' === config.allowSeveralHours "
+                    class="btn btn--warning"
+                    id="remove_time_button"
+                >
+                    <i class='fa fa-trash' ></i >
+                    Aucune plage horaire
+                </button >
+                <button
+                    (click)="resetTimes()"
+                    *ngIf=" 'false' === config.allowSeveralHours"
+                    class="btn btn--warning"
+                    id="reset_time_button"
+                >
+                    <i class='fa fa-refresh' ></i >
+                    réinitialiser
+                </button >
+            </div >
 
-    <div
-        *ngIf=" 'false' === config.allowSeveralHours"
-        class="identical-dates"
-    >
-        <div
-            *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)]="time.literal"
-                name="timeChoices_{{id}}"
-                type="text"
-                id='timeChoices_{{id}}'
+            <div
+                *ngIf=" 'false' === config.allowSeveralHours"
+                class="identical-dates"
             >
-            <button
-                (click)="time.timeList.splice(id, 1)"
-                class="btn btn-warning" ><i class="fa fa-times" ></i >
-            </button >
-        </div >
-    </div >
-    <hr >
-    <span class="count-dates title" >
+                <div
+                    *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)]="time.literal"
+                        name="timeChoices_{{id}}"
+                        type="text"
+                        id='timeChoices_{{id}}'
+                    >
+                    <button
+                        (click)="time.timeList.splice(id, 1)"
+                        class="btn btn-warning" ><i class="fa fa-times" ></i >
+                    </button >
+                </div >
+            </div >
+            <hr >
+            <span class="count-dates title" >
     {{config.dateList.length}}
     </span >
-    <span >
+            <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"
-    >
-        <input
-            [(ngModel)]="choice.date_object"
-            name="dateChoices_{{id}}"
-            id="dateChoices_{{id}}"
-            useValueAsDate
-            type="date"
-        >
-        <button
-            (click)="config.dateList.splice(id, 1)"
-            class="btn btn-warning"
-        ><i class="fa fa-times" ></i >
-        </button >
-        <button
-            (click)="addTimeToDate(choice, id)"
-            *ngIf=" 'true' === config.allowSeveralHours"
-            class="btn btn--primary"
-        >
-            {{"dates.add_time"|translate}}
-        </button >
-        <div
-            *ngIf=" 'true' === config.allowSeveralHours"
-            class="several-times"
-        >
+            <button
+                class='btn btn--primary'
+                (click)='addDate()' >
+                {{"dates.add"|translate}}
+            </button >
             <div
-                *ngFor="let time of choice.timeList; index as idTime"
-                class="time-choice"
+                *ngFor="let choice of config.dateList; index as id"
+                class="date-choice"
             >
+                {{id}})
                 <input
-                    [(ngModel)]="time.date_object"
-                    name="dateTime_{{id}}_Choices_{{idTime}}"
-                    id="dateTime_{{id}}_Choices_{{idTime}}"
+                    [(ngModel)]="choice.date_object"
+                    name="dateChoices_{{id}}"
+                    id="dateChoices_{{id}}"
                     useValueAsDate
-                    type="text"
+                    type="date"
                 >
                 <button
-                    (click)="choice.timeList.splice(idTime, 1)"
+                    (click)="config.dateList.splice(id, 1)"
                     class="btn btn-warning"
                 ><i class="fa fa-times" ></i >
                 </button >
+                <button
+                    (click)="addTimeToDate(choice, id)"
+                    *ngIf=" 'true' === config.allowSeveralHours"
+                    class="btn btn--primary"
+                >
+                    {{"dates.add_time"|translate}}
+                </button >
+                <div
+                    *ngIf=" 'true' === config.allowSeveralHours"
+                    class="several-times"
+                >
+                    <h2 >Several hours</h2 >
+                    <div
+                        *ngFor="let timeItem of choice.timeList; index as idTime"
+                        class="time-choice"
+                    >
+                        <input
+                            [(ngModel)]="timeItem.literal"
+                            name="dateTime_{{id}}_Choices_{{idTime}}"
+                            id="dateTime_{{id}}_Choices_{{idTime}}"
+
+                            type="text"
+                        >
+                        <button
+                            (click)="choice.timeList.splice(idTime, 1)"
+                            class="btn btn-warning"
+                        ><i class="fa fa-times" ></i >
+                        </button >
+                    </div >
+                </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 >