fix buttons colours and manage a bit more the date form

src/app/config/defaultConfigs.ts

@@ -23,14 +23,18 @@ export const defaultAnswers = [{
     id: 0,
     text: 'réponse de démo 1',
     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()}`,
+    timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}]
 },
     {
         id: 1,
         text: 'réponse 2',
         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}`,
     },
     {
         id: 2,
         text: 'la réponse D',
         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}`,
     }];

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

@@ -23,29 +23,33 @@
 
 <button
     (click)="addDate()"
-    class="btn btn-primary"
+    class="btn btn--primary"
     id="add_date_button"
 >
+    <i class='fa fa-plus' ></i >
     {{"dates.add"|translate}}
 </button >
 <button
     (click)="showDateInterval = !showDateInterval "
     [ngClass]="{active: showDateInterval}"
-    class="btn btn-primary"
+    class="btn btn--primary"
     id="toggle_interval_button"
 >
+    <i class='fa fa-clock-o' ></i >
     {{"dates.add_interval"|translate}}
 </button >
 
 <button
     (click)="emptyAll()"
-    class="btn btn-warning"
+    class="btn btn--warning"
     id="empty_button"
->{{"dates.empty"|translate}}
+>
+    <i class='fa fa-trash' ></i >
+    {{"dates.empty"|translate}}
 </button >
 <section
     *ngIf="showDateInterval"
-    class="date-interval" >
+    class="date-interval " >
     <!--    TODO à mettre en popup-->
     <hr >
     <h2 > {{"dates.add_interval"|translate}}</h2 >
@@ -60,31 +64,38 @@
             (change)="countDays()"
             [(ngModel)]="endDateInterval"
             type="date" >
+        <br >
+
     </p >
     <button
         (click)="addIntervalOfDates()"
-        class="btn btn-block" >
+        class="btn btn-block btn--primary" >
+        <i class='fa fa-plus' ></i >
         {{"dates.interval_button"|translate}}
         {{intervalDays}}
         {{"dates.interval_button_dates"|translate}}
     </button >
     <hr >
 </section >
-<div class="dates-list" >
+<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)
 	</span >
-    <button
+        <button
-        (click)="addTime()"
+            (click)="addTime()"
-        *ngIf="config.allowSeveralHours=='false'"
+            *ngIf="config.allowSeveralHours=='false'"
-        class="btn btn-primary pull-right"
+            class="btn btn--primary pull-right"
-        id="add_time_button"
+            id="add_time_button"
-    >
+        >
-        {{"dates.add_time"|translate}}
+            <i class='fa fa-plus' ></i >
-    </button >
+            {{"dates.add_time"|translate}}
+        </button >
+    </div >
 
     <div
         *ngIf="'false'==config.allowSeveralHours"
@@ -94,19 +105,24 @@
             *ngFor="let choice 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"
                 name="timeChoices_{{id}}"
                 type="name"
+                id='timeChoices_{{id}}'
             >
+
             <button
                 (click)="config.timeList.splice(id, 1)"
-                class="btn btn-warning" >X
+                class="btn btn-warning" ><i class="fa fa-times" ></i >
             </button >
         </div >
     </div >
     <hr >
-    <span class="count-dates" >
+    <span class="count-dates title" >
     {{config.dateList.length}}
     </span >
     <span >
@@ -121,15 +137,19 @@
             name="dateChoices_{{id}}"
             type="date"
         >
+        <pre class='debug padded warning' >
+        choice.literal :
+            {{choice.literal|json}}
+        </pre >
         <button
             (click)="config.dateList.splice(id, 1)"
             class="btn btn-warning"
-        >X
+        ><i class="fa fa-times" ></i >
         </button >
         <button
             (click)="addTimeToDate(choice, id)"
             *ngIf="config.allowSeveralHours=='true'"
-            class="btn btn-primary"
+            class="btn btn--primary"
         >
             {{"dates.add_time"|translate}}
         </button >
@@ -149,7 +169,7 @@
                 <button
                     (click)="choice.timeList.splice(idTime, 1)"
                     class="btn btn-warning"
-                >X
+                ><i class="fa fa-times" ></i >
                 </button >
             </div >
         </div >

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

@@ -2,10 +2,20 @@
     padding-left: 1em;
 }
 
+.date-interval {
+    padding: 1em;
+    margin-bottom: 1em;
+}
+
+.title {
+    font-size: 1.5rem;
+}
+
 :host {
     input, button {
         + button {
             margin-left: 1em;
         }
     }
+
 }

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

@@ -2,6 +2,7 @@ import {ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core';
 import {ConfigService} from '../../services/config.service';
 import {BaseComponent} from '../base-page/base.component';
 import {DOCUMENT} from '@angular/common';
+import {MessageService} from "primeng/api";
 
 @Component({
     selector: 'framadate-dates',
@@ -17,6 +18,7 @@ export class DatesComponent extends BaseComponent implements OnInit {
 
     constructor(public config: ConfigService,
                 private cd: ChangeDetectorRef,
+                private messageService: MessageService,
                 @Inject(DOCUMENT) private document: any
     ) {
         super(config);
@@ -106,6 +108,12 @@ export class DatesComponent extends BaseComponent implements OnInit {
         this.config.dateList = [...new Set(converted)]; // add only dates that are not already present with a Set of unique items
         this.showDateInterval = false;
 
+        this.messageService.add({
+            severity: 'success',
+            summary: 'Dates ajoutées',
+            detail: `les dates ont été ajoutées aux réponses possibles`
+        });
+
     }
 
     /**

src/app/services/config.service.ts

@@ -108,7 +108,7 @@ export class ConfigService extends PollConfig {
             },
             title: this.title,
             description: this.description,
-            type: this.pollType,
+            pollType: this.pollType,
             visibility: this.visibility,
             voteChoices: this.voteChoices,
             allowSeveralHours: this.allowSeveralHours,

src/assets/scss/atoms/_buttons.scss

@@ -18,6 +18,7 @@
         }
     }
 }
+
 .clickable {
     cursor: pointer;
 }
@@ -34,17 +35,25 @@
     &--primary {
         @include btnTheme($primary_color);
     }
+
     &--semi-bold {
         font-weight: 600;
     }
+
     &--black-text {
-        color:black;
+        color: black;
-    }
-    &--purple {
-        background-color:$pale-purple;
     }
 
-    &--alert {
+    &--purple {
+        background-color: $pale-purple;
+    }
+
+    &--warning {
+        @include btnTheme($dusty-orange);
+    }
+
+    &--alert,
+    &--danger {
         @include btnTheme($red);
     }