Merge branch 'fix-dates' into 'dev'

Fix dates et intervalle #29

See merge request framasoft/framadate/funky-framadate-front!14

package.json

@@ -33,9 +33,9 @@
         "@angular/cli": "~8.2.1",
         "@angular/compiler-cli": "~8.2.0",
         "@angular/language-service": "~8.2.0",
-        "@types/node": "~8.9.4",
         "@types/jasmine": "~3.3.8",
         "@types/jasminewd2": "~2.0.3",
+        "@types/node": "~8.9.4",
         "codelyzer": "^5.0.0",
         "jasmine-core": "~3.4.0",
         "jasmine-spec-reporter": "~4.2.1",

src/app/config.service.ts

@@ -1,5 +1,7 @@
 import {Injectable} from '@angular/core';
 import {PollConfig} from './config/PollConfig';
+import {HttpClient} from "@angular/common/http";
+import {environment} from "../environments/environment";
 
 
 /**
@@ -9,9 +11,11 @@ import {PollConfig} from './config/PollConfig';
     providedIn: 'root'
 })
 export class ConfigService extends PollConfig {
+    myEmail: string;
+    myPolls: any;// list of retrieved polls from the backend api
 
 
-    constructor() {
+    constructor(public http: HttpClient) {
         super();
     }
 
@@ -19,9 +23,15 @@ export class ConfigService extends PollConfig {
         this[key] = val;
     }
 
-    sendForm() {
+    createPoll() {
         // todo
         console.log('sends the form');
-        alert('envoi de formulaire en XHR à faire');
+        alert('envoi de formulaire pour création de sondage en XHR à faire');
+        const payload = this;
+        this.http.post(`${environment.baseApiHref}/poll`, payload)
+            .subscribe(res => {
+                    console.log('res', res)
+                },
+                err => console.error('err', err))
     }
 }

src/app/config/PollConfig.ts

@@ -2,24 +2,28 @@
  * une option de date dans les sondages spéciaux
  */
 export interface DateOption {
+    timeList: any;
     literal: string;
 }
 
-export const timeOfDay = [{literal: 'matin'},
+export const timeOfDay = [{
-    {literal: 'midi'},
+    timeList: [],
-    {literal: 'après-midi'},
+    literal: 'matin'
-    {literal: 'soirée'}];
+},
+    {timeList: [], literal: 'midi'},
+    {timeList: [], literal: 'après-midi'},
+    {timeList: [], literal: 'soirée'}];
 export const defaultDates = [
     {
-        literal: `${new Date().getDate()}-${new Date().getMonth()}-${new Date().getFullYear()}`,
+        literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()}`,
         timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}]
     },
     {
-        literal: `${new Date().getDate() + 1}-${new Date().getMonth()}-${new Date().getFullYear()}`,
+        literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 1}`,
         timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}]
     },
     {
-        literal: `${new Date().getDate() + 2}-${new Date().getMonth()}-${new Date().getFullYear()}`,
+        literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 2}`,
         timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}]
     }
 ];
@@ -34,10 +38,14 @@ export class PollConfig {
     title = '';
     description = '';
     myName = '';
-    visibility = 'link_only';
+
     // date specific poll
-    allowSeveralHours = 'true';
+    allowSeveralHours = 'false';
-    dateList: DateOption[] = defaultDates; // sets of days as strings
+    // access
+    visibility = 'link_only'; // visible to anyone with the link:
+    password = '';
+    whoCanChangeAnswers = 'everybody';// everybody, self, nobody (= just admin)
+    dateList: DateOption[] = defaultDates; // sets of days as strings, config to set identical time for days in a special days poll
     timeList: DateOption[] = timeOfDay; // ranges of time expressed as strings
     answers: any = [{
         id: 0,

src/app/config/Routes.ts

@@ -1,31 +1,34 @@
-import { KindComponent } from "../pages/kind/kind.component";
+import {KindComponent} from "../pages/kind/kind.component";
-import { DatesComponent } from "../pages/dates/dates.component";
+import {DatesComponent} from "../pages/dates/dates.component";
-import { VisibilityComponent } from "../pages/visibility/visibility.component";
+import {VisibilityComponent} from "../pages/visibility/visibility.component";
-import { ResumeComponent } from "../pages/resume/resume.component";
+import {ResumeComponent} from "../pages/resume/resume.component";
-import { PicturesComponent } from "../pages/pictures/pictures.component";
+import {PicturesComponent} from "../pages/pictures/pictures.component";
-import { EndConfirmationComponent } from "../pages/end-confirmation/end-confirmation.component";
+import {EndConfirmationComponent} from "../pages/end-confirmation/end-confirmation.component";
-import { AnswersComponent } from "../pages/answers/answers.component";
+import {AnswersComponent} from "../pages/answers/answers.component";
-import { CreateOrRetrieveComponent } from "../pages/create-or-retrieve/create-or-retrieve.component";
+import {CreateOrRetrieveComponent} from "../pages/create-or-retrieve/create-or-retrieve.component";
-import { BaseComponent } from "../pages/base-page/base.component";
+import {BaseComponent} from "../pages/base-page/base.component";
-import { HomeComponent } from "../pages/home/home.component";
+import {HomeComponent} from "../pages/home/home.component";
-import { PollGraphicComponent } from '../poll-graphic/poll-graphic.component';
+import {PollGraphicComponent} from '../poll-graphic/poll-graphic.component';
 import {VoteChoiceComponent} from "../vote-choice/vote-choice.component";
 
 /**
  * each step in the form is a component
  */
-export const Routes = [
+export const Routes =
-    { path: "", component: CreateOrRetrieveComponent },
+    [
-    { path: "home", component: HomeComponent },
+        {path: '', component: CreateOrRetrieveComponent},
-    { path: "base", component: BaseComponent },
+        {path: 'home', component: HomeComponent},
-    { path: "step/creation", component: CreateOrRetrieveComponent },
+        {path: 'base', component: BaseComponent},
-    { path: "step/date", component: DatesComponent },
+        {path: 'step/base', component: BaseComponent},
-    { path: "step/kind", component: KindComponent },
+        {path: 'step/creation', component: CreateOrRetrieveComponent},
-    { path: "step/answers", component: AnswersComponent },
+        {path: 'step/date', component: DatesComponent},
-    { path: "step/pictures", component: PicturesComponent },
+        {path: 'step/kind', component: KindComponent},
-    { path: "step/visibility", component: VisibilityComponent },
+        {path: 'step/answers', component: AnswersComponent},
-    { path: "step/resume", component: ResumeComponent },
+        {path: 'step/pictures', component: PicturesComponent},
-    { path: "step/end", component: EndConfirmationComponent },
+        {path: 'step/visibility', component: VisibilityComponent},
-    { path: "graphic/:poll", component: PollGraphicComponent },
+        {path: 'step/resume', component: ResumeComponent},
-    { path: 'votechoice', component: VoteChoiceComponent}
+        {path: 'step/end', component: EndConfirmationComponent},
-];
+        {path: 'graphic/:poll', component: PollGraphicComponent},
+        {path: 'votechoice', component: VoteChoiceComponent},
+    ]
+;

src/app/debugger/debugger.component.html

@@ -1,29 +1,29 @@
 <div class="well debug">
-	<strong>
+    <strong>
-		<h2 i18n>
+        <h2 i18n>
-			infos de debug
+            infos de debug
-		</h2>
+        </h2>
-		<span class="demo">
+        <span class="demo">
 		{{"config.demo"|translate}}
 		</span>
-	</strong>
+    </strong>
-	<ul>
+    <ul>
-		<li>
+        <li>
-			étape actuelle {{config.step}} / {{config.stepMax}}
+            étape actuelle {{config.step}} / {{config.stepMax}}
-		</li>
+        </li>
-		<li>
+        <li>
-			formulaire valide : {{formIsValid}}
+            formulaire valide : {{formIsValid}}
-		</li>
+        </li>
-		<li>
+        <li>
-			type de formulaire: {{config.pollType}}
+            type de formulaire: {{config.pollType}}
-		</li>
+        </li>
-		<li>
+        <li>
-			config:
+            config:
-			<pre>
+            <pre>
-				{{config|json}}
+				{{config.answers|json}}
 			</pre>
-		</li>
+        </li>
-	</ul>
+    </ul>
 </div>
 
 <span i18n>
@@ -62,7 +62,7 @@
 <button
     class="btn btn--primary"
     i18n
-    (click)="config.sendForm()"
+    (click)="config.createPoll()"
 >
-	Envoyer le formulaire
+    Envoyer le formulaire
 </button>

src/app/pages/create-or-retrieve/create-or-retrieve.component.html

@@ -1,55 +1,60 @@
 <section class="creation">
-	<h1>
+    <h1>
-		{{"creation.title"|translate}}
+        {{"creation.title"|translate}}
-	</h1>
+    </h1>
-	<p
+    <p
-		class="description"
+        class="description"
-		i18n
+        i18n
-	>
+    >
-		{{"config.title"|translate}}
+        {{"config.title"|translate}}
-	</p>
+    </p>
-	<div class="btn-next">
+    <div class="btn-next">
-		<a
+        <a
-			[routerLink]="'/home'"
+            [routerLink]="'/home'"
-		>
+        >
 			<span
-				class="text"
+                class="text"
-				i18n
+                i18n
-			>
+            >
 				 {{"config.letsgo"|translate}}
 			</span>
-			<span class="icon right">
+            <span class="icon right">
 				>
 			</span>
-		</a>
+        </a>
-	</div>
+    </div>
 </section>
 
 <section class="recuperation">
-	<h1>
+    <h1>
-		{{"config.find_my_polls"|translate}}
+        {{"config.find_my_polls"|translate}}
-	</h1>
+    </h1>
-	<form
+    <form
-		action="https://framadate.org/find_polls.php"
+        (ngSubmit)="findMyPollsByEmail(emailToFind.value)"
-		method="post"
+    >
-	>
+        <label
-		<label
+            class="description"
-			class="description"
+            for="email"
-			for="email"
+            i18n
-			i18n
+        >
-		>
+            {{"config.find_helper"|translate}} :
-			{{"config.find_helper"|translate}} :
+        </label>
-		</label>
+        <input
-		<input
+          #emailToFind
-			type="email"
+          type="email"
-			name="mail"
+          name="mail"
-			id="email"
+          id="email"
-			autofocus="autofocus"
+          autofocus="autofocus"
-		/>
+        />
-		<input
+        <input
-			type="submit"
+            type="submit"
-			class="btn btn-block"
+            class="btn btn-block"
-			i18n-value="'config.find_button'|translate"
+            i18n-value="'config.find_button'|translate"
-		/>
+        />
-	</form>
+    </form>
+</section>
+<section class="list-my-polls">
+    <ul class="poll-list" *ngFor="let poll of config.myPolls">
+        <li> poll</li>
+    </ul>
 </section>

src/app/pages/create-or-retrieve/create-or-retrieve.component.ts

@@ -1,19 +1,24 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {BaseComponent} from "../base-page/base.component";
 import {ConfigService} from "../../config.service";
+import {PollServiceService} from "../../services/poll-service.service";
 
 @Component({
-  selector: 'framadate-create-or-retrieve',
+    selector: 'framadate-create-or-retrieve',
-  templateUrl: './create-or-retrieve.component.html',
+    templateUrl: './create-or-retrieve.component.html',
-  styleUrls: ['./create-or-retrieve.component.scss']
+    styleUrls: ['./create-or-retrieve.component.scss']
 })
 export class CreateOrRetrieveComponent extends BaseComponent implements OnInit {
 
-    constructor(public config: ConfigService) {
+    constructor(public config: ConfigService, public pollService: PollServiceService) {
         super(config);
     }
 
     ngOnInit() {
-  }
+    }
+
+    findMyPollsByEmail(email: string) {
+        this.pollService.findPollsByEmail(email);
+    }
 
 }

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

@@ -4,66 +4,100 @@
 
 <div>
     <label for="multi_hours">
-		<span i18n>
+		<span>
-			Je souhaite mettre des créneaux horaires
+            {{"dates.hours_different"|translate}}
 		</span>
         <select
-            name="multi_hours"
-            id="multi_hours"
             [(ngModel)]="config.allowSeveralHours"
+            id="multi_hours"
+            name="multi_hours"
         >
             <option value="true">{{"dates.multiple.different"|translate}}</option>
             <option value="false">{{"dates.multiple.identical"|translate}}</option>
         </select>
         <span i18n>
-			pour chaque journée
+            {{"dates.hours_each_day"|translate}}
 		</span>
     </label>
 </div>
 
 <button
-    class="btn btn-primary"
     (click)="addDate()"
+    class="btn btn-primary"
     id="add_date_button"
 >
     {{"dates.add"|translate}}
 </button>
 <button
+    (click)="showDateInterval = !showDateInterval "
+    [ngClass]="{active: showDateInterval}"
     class="btn btn-primary"
-    (click)="addtime()"
+    id="toggle_interval_button"
-    id="add_time_button"
 >
-    {{"dates.addTime"|translate}}
+    {{"dates.add_interval"|translate}}
 </button>
 
+
 <button
-    class="btn btn-warning"
     (click)="emptyAll()"
+    class="btn btn-warning"
     id="empty_button"
 >{{"dates.empty"|translate}}
 </button>
+<section *ngIf="showDateInterval" class="date-interval">
+    <!--    TODO à mettre en popup-->
+    <hr>
+    <h2> {{"dates.add_interval"|translate}}</h2>
+    <p>
+        {{"dates.interval_propose"|translate}}
+        <input (change)="countDays()" [(ngModel)]="startDateInterval" type="date">
+        {{"dates.interval_span"|translate}}
+        <input (change)="countDays()" [(ngModel)]="endDateInterval" type="date">
+    </p>
+    <button (click)="addIntervalOfDates()"
+            class="btn btn-block">
+        {{"dates.interval_button"|translate}}
+        {{intervalDays}}
+        {{"dates.interval_button_dates"|translate}}
+    </button>
+    <hr>
+</section>
 <div class="dates-list">
-    {{config.dateList.length}}
+    <span class="count-dates">
-    <span>
+    {{config.timeList.length}}
-		{{"dates.count_dates"|translate}}
+    </span>
+    <span class="count-dates-txt">
+		{{"dates.count_time"|translate}}
 	</span>
+    <button
+        (click)="addTime()"
+        *ngIf="config.allowSeveralHours=='false'"
+        class="btn btn-primary pull-right"
+        id="add_time_button"
+    >
+        {{"dates.add_time"|translate}}
+    </button>
+
     <div
-        class="identical-dates"
         *ngIf="'false'==config.allowSeveralHours"
+        class="identical-dates"
     >
         <div
-            class="time-choice"
             *ngFor="let choice of config.timeList; index as id"
+            class="time-choice"
         >
             <input
-                type="text"
-                name="timeChoices_{{id}}"
                 [(ngModel)]="choice.literal"
+                name="timeChoices_{{id}}"
+                type="text"
             >
-            <button (click)="config.timeList.splice(id, 1)">X</button>
+            <button (click)="config.timeList.splice(id, 1)" class="btn btn-warning">X</button>
         </div>
     </div>
     <hr>
+    <span class="count-dates">
+    {{config.dateList.length}}
+    </span>
     <span>
 		{{"dates.count_dates"|translate}}
 	</span>
@@ -72,36 +106,38 @@
         class="date-choice"
     >
         <input
-            type="text"
-            name="dateChoices_{{id}}"
             [(ngModel)]="choice.literal"
+            name="dateChoices_{{id}}"
+            type="date"
         >
         <button
-            class="btn btn-warning"
             (click)="config.dateList.splice(id, 1)"
+            class="btn btn-warning"
         >X
         </button>
         <button
+            (click)="addTimeToDate(choice, id)"
+            *ngIf="config.allowSeveralHours=='true'"
             class="btn btn-primary"
-            (click)="addTimetoDate(choice, id)"
+        >
-        > Ajouter un choix d'heure
+            {{"dates.add_time"|translate}}
         </button>
         <div
-            class="several-times"
             *ngIf="'true'==config.allowSeveralHours"
+            class="several-times"
         >
             <div
-                class="time-choice"
                 *ngFor="let time of choice.timeList; index as idTime"
+                class="time-choice"
             >
                 <input
-                    type="text"
-                    name="dateTime_{{id}}_Choices_{{idTime}}"
                     [(ngModel)]="time.literal"
+                    name="dateTime_{{id}}_Choices_{{idTime}}"
+                    type="text"
                 >
                 <button
+                    (click)="choice.timeList.splice(idTime, 1)"
                     class="btn btn-warning"
-                    (click)="config.timeList.splice(idTime, 1)"
                 >X
                 </button>
             </div>

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

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

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

@@ -1,6 +1,7 @@
-import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
+import {ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core';
 import {ConfigService} from '../../config.service';
 import {BaseComponent} from '../base-page/base.component';
+import {DOCUMENT} from '@angular/common';
 
 @Component({
     selector: 'framadate-dates',
@@ -8,41 +9,145 @@ import {BaseComponent} from '../base-page/base.component';
     styleUrls: ['./dates.component.scss']
 })
 export class DatesComponent extends BaseComponent implements OnInit {
-    constructor(public config: ConfigService, private cd: ChangeDetectorRef) {
+    showDateInterval: boolean = true;
+    startDateInterval: any;
+    intervalDays: any;
+    intervalDaysDefault: number = 7;
+    endDateInterval: any;
+
+    constructor(public config: ConfigService,
+                private cd: ChangeDetectorRef,
+                @Inject(DOCUMENT) private document: any
+    ) {
         super(config);
     }
 
+    countDays() {
+        // compute the number of days in the date interval
+        if (this.endDateInterval && this.startDateInterval) {
+            this.intervalDays = (this.dayDiff(this.endDateInterval, this.startDateInterval)).toFixed(0)
+        }
+    }
+
+    /**
+     * set the interval options
+     */
     ngOnInit() {
+        let dateCurrent = new Date();
+        const dateJson = dateCurrent.toISOString();
+        this.startDateInterval = dateJson.substring(0, 10);
+        this.endDateInterval = this.addDaysToDate(this.intervalDaysDefault, dateCurrent).toISOString().substring(0, 10);
     }
 
     addDate() {
-        this.config.dateList.push({literal: ''});
+        this.config.dateList.push({literal: '', timeList: []});
+        let selector = '[ng-reflect-name="dateChoices_' + (this.config.dateList.length - 1) + '"]';
+        this.cd.detectChanges();
+        const elem = this.document.querySelector(selector);
+        if (elem) {
+            elem.focus();
+        }
     }
 
-    addtime() {
+    addTime() {
-        this.config.timeList.push({literal: ''});
+        this.config.timeList.push({literal: '', timeList: []});
     }
 
+    /**
+     * add some days to a date, to compute intervals
+     * @param days
+     * @param date
+     */
+    addDaysToDate(days: number, date: Date) {
+        date = new Date(date.valueOf());
+        date.setDate(date.getDate() + days);
+        return date;
+    };
+
     /**
      * add a time period to a specific date choice,
      * focus on the new input
      * @param config
      * @param id
      */
-    addTimetoDate(config: any, id: number) {
+    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);
+        const elem = this.document.querySelector(selector);
         if (elem) {
-            //this.elem.focus();
+            elem.focus();
         }
     }
 
+    /**
+     * remove all input contents, does not reset to default
+     */
     emptyAll() {
         this.config.dateList.forEach(element => {
             element.literal = '';
+            element.timeList = ['', '', ''];
+        });
+        this.config.timeList.forEach(element => {
+            element.literal = '';
         });
     }
+
+    /**
+     * add all the dates between the start and end dates in the interval section
+     */
+    addIntervalOfDates() {
+        let newIntervalArray = this.getDatesInRange(this.startDateInterval, this.endDateInterval, 1);
+
+        const converted = [];
+        newIntervalArray.forEach(element => {
+            converted.push({literal: element, timeList: []});
+        });
+        this.config.dateList = [...new Set(converted)]; // add only dates that are not already present with a Set of unique items
+        this.showDateInterval = false;
+
+    }
+
+    /**
+     *
+     * @param d1
+     * @param d2
+     * @param interval
+     */
+    getDatesInRange(d1: Date, d2: Date, interval: number) {
+        d1 = new Date(d1);
+        d2 = new Date(d2);
+        const dates = [];
+        while (+d1 < +d2) {
+            dates.push(this.formateDate(d1));
+            d1.setDate(d1.getDate() + interval)
+        }
+        return dates.slice(0)
+    }
+
+    /**
+     * get the number of days between two dates
+     * @param d1
+     * @param d2
+     */
+    dayDiff(d1: Date, d2: Date): Number {
+        return Number(((d2.getTime()) - (d1.getTime()) / 31536000000));
+    }
+
+    /**
+     * format a date object to the date format used by the inputs of type date
+     * YYYY-MM-DD
+     * @param date
+     */
+    formateDate(date) {
+        return [
+            date.getFullYear(),
+            this.getDoubleDigits(date.getMonth() + 1),
+            this.getDoubleDigits(date.getDate()),
+        ].join('-')
+    }
+
+    getDoubleDigits(str) {
+        return ("00" + str).slice(-2);
+    }
 }

src/app/poll-graphic/poll-graphic.component.html

@@ -3,18 +3,17 @@
     name="selector"
     autofocus="autofocus"
     [(ngModel)]="isColorblind"
-    (change)="setColorblind()"
+    (change)="toggleColorblind()"
 >
-    <option value="colorblind">
+    <option value="true">
         {{ "pollGraphic.choiceColorblind" | translate }}
     </option>
-    <option value="notColorblind">
+    <option value="false">
         {{ "pollGraphic.choiceNotColorblind" | translate }}
     </option>
 </select>
- {{ "pollGraphic.colorblindText" | translate }}
+{{ "pollGraphic.colorblindText" | translate }}
 <div>
     <canvas id="graph" width="100" height="50"></canvas>
 </div>
 
- 

src/app/poll-graphic/poll-graphic.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit } from "@angular/core";
+import {Component, OnInit} from "@angular/core";
-import { Chart } from "chart.js";
+import {Chart} from "chart.js";
 
 @Component({
     selector: "framadate-poll-graphic",
@@ -7,7 +7,7 @@ import { Chart } from "chart.js";
     styleUrls: ["./poll-graphic.component.scss"]
 })
 export class PollGraphicComponent implements OnInit {
-    isColorblind: boolean;
+    isColorblind: boolean = false;
     lineChart: Chart;
     pollData: any;
     yesList: number[] = [];
@@ -15,7 +15,9 @@ export class PollGraphicComponent implements OnInit {
     noList: number[] = [];
     nbPoll: number = 0;
     dateList: string[] = [];
-    constructor() {}
+
+    constructor() {
+    }
 
     ngOnInit() {
         var toto = {
@@ -100,11 +102,11 @@ export class PollGraphicComponent implements OnInit {
                 ]
             },
             options: {
-                legend: { display: false },
+                legend: {display: false},
                 scales: {
                     xAxes: [
                         {
-                            gridLines: { drawBorder: false, display: false },
+                            gridLines: {drawBorder: false, display: false},
                             display: false,
                             stacked: true,
                             ticks: {
@@ -116,7 +118,7 @@ export class PollGraphicComponent implements OnInit {
                     ],
                     yAxes: [
                         {
-                            gridLines: { drawBorder: true, display: false },
+                            gridLines: {drawBorder: true, display: false},
                             display: true,
                             stacked: true
                         }
@@ -126,7 +128,7 @@ export class PollGraphicComponent implements OnInit {
         });
     }
 
-    setColorblind() {
+    toggleColorblind() {
         this.isColorblind = !this.isColorblind;
     }
 
@@ -151,7 +153,7 @@ export class PollGraphicComponent implements OnInit {
 
     initPollCounter() {
         this.nbPoll++;
-        this.dateList[this.nbPoll -1] = "jeudi";
+        this.dateList[this.nbPoll - 1] = "jeudi";
         this.maybeList[this.nbPoll - 1] = 0;
         this.yesList[this.nbPoll - 1] = 0;
         this.noList[this.nbPoll - 1] = 0;

src/app/services/poll-service.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PollServiceService } from './poll-service.service';
+
+describe('PollServiceService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: PollServiceService = TestBed.get(PollServiceService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/poll-service.service.ts

@@ -0,0 +1,32 @@
+import {Injectable} from '@angular/core';
+import {ConfigService} from "../config.service";
+import {HttpClient} from "@angular/common/http";
+import {environment} from "../../environments/environment";
+
+class JsonResponse {
+    message: string;
+    data: string;
+}
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PollServiceService {
+
+    private baseHref: string = environment.baseApiHref;
+
+    constructor(private configService: ConfigService,
+                private http: HttpClient) {
+    }
+
+    findPollsByEmail(email: string) {
+        // TODO check if the person has a key to retrieve her polls
+        // If no key is found in the localstorage, ask the backend to send an email to the user
+
+        this.configService.myEmail = email;
+        this.http.get(this.baseHref + '/').subscribe(res => {
+                this.configService.myPolls = res;
+            }, err => console.error('err', err)
+        )
+    }
+}

src/app/ui/navigation/navigation.component.html

@@ -1,29 +1,32 @@
 <nav class="choices">
-	<a [routerLink]="'/step/creation'" i18n>
+    <a [routerLink]="'/step/creation'" i18n>
-		Création
+        Création
-	</a>
+    </a>
-	<a [routerLink]="'/step/date'" i18n>
+    <a [routerLink]="'/step/date'" i18n>
-		Les Dates
+        Les Dates
-	</a>
+    </a>
-	<a [routerLink]="'/step/answers'" i18>
+    <a [routerLink]="'/step/answers'" i18>
-		Réponses
+        Réponses
-	</a>
+    </a>
-	<a [routerLink]="'/step/visibility'" i18n>
+    <a [routerLink]="'/step/visibility'" i18n>
-		Visibilité
+        Visibilité
-	</a>
+    </a>
-	<a [routerLink]="'/step/base'" i18n>
+    <a [routerLink]="'/step/base'" i18n>
-		Base
+        Base
-	</a>
+    </a>
-	<a [routerLink]="'/step/pictures'" i18n>
+    <a [routerLink]="'/step/pictures'" i18n>
-		Images
+        Images
-	</a>
+    </a>
-	<a [routerLink]="'/step/resume'" i18n>
+    <a [routerLink]="'/step/resume'" i18n>
-		Résumé
+        Résumé
-	</a>
+    </a>
-	<a [routerLink]="'/step/kind'" i18n>
+    <a [routerLink]="'/step/kind'" i18n>
-		Page démo
+        Page démo
-	</a>
+    </a>
-	<a [routerLink]="'/home'" i18n>
+    <a [routerLink]="'/graphic/toto'" i18n>
-		Accueil
+        Graphique
-	</a>
+    </a>
+    <a [routerLink]="'/home'" i18n>
+        Accueil
+    </a>
 </nav>

src/assets/i18n/en.json

@@ -37,8 +37,15 @@
             "identical": "same",
             "different": "possibly different"
         },
-        "add": "Add a date range",
+        "add": "Add a date choice",
-        "count_dates": "choices of dates"
+        "add_time": "Add a time span",
+        "count_dates": "choices of dates",
+        "count_time": "choices of hour span",
+        "add_interval": "Add a date interval",
+        "interval_propose": "I want to suggest all the dates from",
+        "interval_span": "to",
+        "interval_button": "Add these",
+        "interval_button_dates": "dates"
     },
     "choices": {
         "title": "Write the proposals",

src/assets/i18n/fr.json

@@ -32,15 +32,22 @@
     },
     "dates": {
         "title": "Config spécialement pour les dates ",
-        "hours_different": "Je souhaite mettre des créneaux horaires pour chaque journée",
+        "hours_different": "Je souhaite mettre des créneaux horaires",
+        "hours_each_day": "pour chaque journée",
         "multiple": {
             "identical": "identiques",
             "different": "possiblement différentes"
         },
         "add": "Ajouter une plage de dates",
-        "addTime": "Ajouter une plage d'heure",
+        "add_time": "Ajouter une plage d'heure",
         "empty": "Vider",
-        "count_dates": "choix de dates"
+        "count_dates": "choix de dates",
+        "count_time": "choix de plages horaires",
+        "add_interval": "Ajouter une intervalle de dates",
+        "interval_propose": "Je souhaite proposer pour mon sondage toutes les dates entre le",
+        "interval_span": "et le",
+        "interval_button": "Ajouter ces",
+        "interval_button_dates": "dates"
     },
     "choices": {
         "title": "Choisir les propositions",

src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
-  production: true
+    production: true,
+    baseApiHref : 'http://127.0.0.1:8000/api/v1/'
 };

src/environments/environment.ts

@@ -3,7 +3,8 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+    production: false,
+    baseApiHref: "http://127.0.0.1:8000/api/v1/"
 };
 
 /*

yarn.lock

@@ -1452,6 +1452,29 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+chart.js@^2.8.0:
+  version "2.9.3"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.3.tgz#ae3884114dafd381bc600f5b35a189138aac1ef7"
+  integrity sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==
+  dependencies:
+    chartjs-color "^2.1.0"
+    moment "^2.10.2"
+
+chartjs-color-string@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
+  integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
+  dependencies:
+    color-name "^1.0.0"
+
+chartjs-color@^2.1.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
+  integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
+  dependencies:
+    chartjs-color-string "^0.6.0"
+    color-convert "^1.9.3"
+
 "chokidar@>=2.0.0 <4.0.0":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.0.2.tgz#0d1cd6d04eb2df0327446188cd13736a3367d681"
@@ -1606,7 +1629,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.9.0:
+color-convert@^1.9.0, color-convert@^1.9.3:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -1618,6 +1641,11 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
+color-name@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
 colors@1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
@@ -4391,6 +4419,11 @@ mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0:
   dependencies:
     minimist "0.0.8"
 
+moment@^2.10.2:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"