From cf2a12507e053d9235d6a03f1e0569c90df82c27 Mon Sep 17 00:00:00 2001 From: Baptiste Lemoine Date: Tue, 19 Nov 2019 10:36:53 +0100 Subject: [PATCH 1/9] :bug: fix focus on date, extend the empty all button to timespans --- package.json | 2 +- src/app/config/PollConfig.ts | 14 +++++++++----- src/app/config/Routes.ts | 1 + src/app/pages/dates/dates.component.html | 1 + src/app/pages/dates/dates.component.ts | 20 ++++++++++++++------ 5 files changed, 26 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 19a49403..2ec1cff1 100644 --- a/package.json +++ b/package.json @@ -32,9 +32,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", diff --git a/src/app/config/PollConfig.ts b/src/app/config/PollConfig.ts index b21772c2..4a19e91b 100644 --- a/src/app/config/PollConfig.ts +++ b/src/app/config/PollConfig.ts @@ -2,13 +2,17 @@ * une option de date dans les sondages spéciaux */ export interface DateOption { + timeList: any; literal: string; } -export const timeOfDay = [{literal: 'matin'}, - {literal: 'midi'}, - {literal: 'après-midi'}, - {literal: 'soirée'}]; +export const timeOfDay = [{ + timeList: [], + literal: 'matin' +}, + {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()}`, @@ -37,7 +41,7 @@ export class PollConfig { visibility = 'link_only'; // date specific poll allowSeveralHours = 'true'; - dateList: DateOption[] = defaultDates; // sets of days as strings + 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, diff --git a/src/app/config/Routes.ts b/src/app/config/Routes.ts index 72ef5a8c..a5ce52ef 100644 --- a/src/app/config/Routes.ts +++ b/src/app/config/Routes.ts @@ -18,6 +18,7 @@ export const Routes = {path: '', component: CreateOrRetrieveComponent}, {path: 'home', component: HomeComponent}, {path: 'base', component: BaseComponent}, + {path: 'step/base', component: BaseComponent}, {path: 'step/creation', component: CreateOrRetrieveComponent}, {path: 'step/date', component: DatesComponent}, {path: 'step/kind', component: KindComponent}, diff --git a/src/app/pages/dates/dates.component.html b/src/app/pages/dates/dates.component.html index 36f43d29..a07424db 100644 --- a/src/app/pages/dates/dates.component.html +++ b/src/app/pages/dates/dates.component.html @@ -32,6 +32,7 @@ class="btn btn-primary" (click)="addtime()" id="add_time_button" + *ngIf="config.allowSeveralHours=='false'" > {{"dates.addTime"|translate}} diff --git a/src/app/pages/dates/dates.component.ts b/src/app/pages/dates/dates.component.ts index 300d1580..bf6776b2 100644 --- a/src/app/pages/dates/dates.component.ts +++ b/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,7 +9,10 @@ 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) { + constructor(public config: ConfigService, + private cd: ChangeDetectorRef, + @Inject(DOCUMENT) private document: any + ) { super(config); } @@ -16,11 +20,11 @@ export class DatesComponent extends BaseComponent implements OnInit { } addDate() { - this.config.dateList.push({literal: ''}); + this.config.dateList.push({literal: '', timeList: []}); } addtime() { - this.config.timeList.push({literal: ''}); + this.config.timeList.push({literal: '', timeList: []}); } /** @@ -34,15 +38,19 @@ export class DatesComponent extends BaseComponent implements OnInit { 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(); } } emptyAll() { this.config.dateList.forEach(element => { element.literal = ''; + element.timeList = ['', '', '']; + }); + this.config.timeList.forEach(element => { + element.literal = ''; }); } } From 933c32798cc26461ca5b62ec3eb89c18f29e4953 Mon Sep 17 00:00:00 2001 From: Baptiste Lemoine Date: Tue, 19 Nov 2019 11:18:58 +0100 Subject: [PATCH 2/9] :bug: fix deletions in date buttons , input of type date --- src/app/pages/dates/dates.component.html | 29 ++++++++++++++---------- src/app/pages/dates/dates.component.scss | 8 +++++-- 2 files changed, 23 insertions(+), 14 deletions(-) diff --git a/src/app/pages/dates/dates.component.html b/src/app/pages/dates/dates.component.html index a07424db..cac4c28a 100644 --- a/src/app/pages/dates/dates.component.html +++ b/src/app/pages/dates/dates.component.html @@ -28,14 +28,7 @@ > {{"dates.add"|translate}} - +
+ {{config.dateList.length}} - + + {{"dates.count_dates"|translate}} + +
- +
@@ -73,7 +77,7 @@ class="date-choice" > @@ -83,6 +87,7 @@ >X diff --git a/src/app/pages/dates/dates.component.scss b/src/app/pages/dates/dates.component.scss index a62fa1c8..84c17656 100644 --- a/src/app/pages/dates/dates.component.scss +++ b/src/app/pages/dates/dates.component.scss @@ -1,7 +1,11 @@ .several-times { padding-left: 1em; +} - input { - margin-right: 1em; +:host { + input, button { + + button { + margin-left: 1em; + } } } From 026c7cfda2476e7a77cecfaff28c151e835b7a10 Mon Sep 17 00:00:00 2001 From: Baptiste Lemoine Date: Tue, 19 Nov 2019 11:19:21 +0100 Subject: [PATCH 3/9] :zap: start call backend service to retrieve my polls by email --- src/app/config.service.ts | 16 +++- src/app/config/PollConfig.ts | 8 +- src/app/debugger/debugger.component.html | 48 +++++----- .../create-or-retrieve.component.html | 95 ++++++++++--------- .../create-or-retrieve.component.ts | 17 ++-- src/app/services/poll-service.service.spec.ts | 12 +++ src/app/services/poll-service.service.ts | 32 +++++++ src/environments/environment.prod.ts | 3 +- src/environments/environment.ts | 3 +- 9 files changed, 152 insertions(+), 82 deletions(-) create mode 100644 src/app/services/poll-service.service.spec.ts create mode 100644 src/app/services/poll-service.service.ts diff --git a/src/app/config.service.ts b/src/app/config.service.ts index 8cb4ebdf..39d1dcaf 100644 --- a/src/app/config.service.ts +++ b/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)) } } diff --git a/src/app/config/PollConfig.ts b/src/app/config/PollConfig.ts index 4a19e91b..a6f89d77 100644 --- a/src/app/config/PollConfig.ts +++ b/src/app/config/PollConfig.ts @@ -38,9 +38,13 @@ export class PollConfig { title = ''; description = ''; myName = ''; - visibility = 'link_only'; + // date specific poll - allowSeveralHours = 'true'; + allowSeveralHours = 'false'; + // 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 = [{ diff --git a/src/app/debugger/debugger.component.html b/src/app/debugger/debugger.component.html index 1af1e473..c9e8a4f6 100644 --- a/src/app/debugger/debugger.component.html +++ b/src/app/debugger/debugger.component.html @@ -1,29 +1,29 @@
- -

- infos de debug -

- + +

+ infos de debug +

+ {{"config.demo"|translate}} - -
    -
  • - étape actuelle {{config.step}} / {{config.stepMax}} -
    • -
  • - formulaire valide : {{formIsValid}} -
    • -
  • - type de formulaire: {{config.pollType}} -
    • -
  • - config: - 
    -				{{config|json}}
+    
+    
      
+        
    • 
+            étape actuelle {{config.step}} / {{config.stepMax}}
+        
      • 
+        
    • 
+            formulaire valide : {{formIsValid}}
+        
      • 
+        
    • 
+            type de formulaire: {{config.pollType}}
+        
      • 
+        
    • 
+            config:
+            
      +				{{config.answers|json}}
 			
      
-		
      • 
-	
    
+
    • +
@@ -62,7 +62,7 @@ diff --git a/src/app/pages/create-or-retrieve/create-or-retrieve.component.html b/src/app/pages/create-or-retrieve/create-or-retrieve.component.html index 50753eca..20c0b141 100644 --- a/src/app/pages/create-or-retrieve/create-or-retrieve.component.html +++ b/src/app/pages/create-or-retrieve/create-or-retrieve.component.html @@ -1,55 +1,60 @@
-

- {{"creation.title"|translate}} -

-

- {{"config.title"|translate}} -

-
- +

+ {{"creation.title"|translate}} +

+

+ {{"config.title"|translate}} +

+
+ + class="text" + i18n + > {{"config.letsgo"|translate}} - + > - -
+ +
-

- {{"config.find_my_polls"|translate}} -

-
- - - -
+

+ {{"config.find_my_polls"|translate}} +

+
+ + + +
+
+
+
    +
  • poll
    • +
diff --git a/src/app/pages/create-or-retrieve/create-or-retrieve.component.ts b/src/app/pages/create-or-retrieve/create-or-retrieve.component.ts index 81dfb0ba..12ee44f1 100644 --- a/src/app/pages/create-or-retrieve/create-or-retrieve.component.ts +++ b/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', - templateUrl: './create-or-retrieve.component.html', - styleUrls: ['./create-or-retrieve.component.scss'] + selector: 'framadate-create-or-retrieve', + templateUrl: './create-or-retrieve.component.html', + 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); + } } diff --git a/src/app/services/poll-service.service.spec.ts b/src/app/services/poll-service.service.spec.ts new file mode 100644 index 00000000..c9b6bcec --- /dev/null +++ b/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(); + }); +}); diff --git a/src/app/services/poll-service.service.ts b/src/app/services/poll-service.service.ts new file mode 100644 index 00000000..0bf09ae0 --- /dev/null +++ b/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) + ) + } +} diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 3612073b..0a1bc680 100644 --- a/src/environments/environment.prod.ts +++ b/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/' }; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 7b4f817a..918f5d2b 100644 --- a/src/environments/environment.ts +++ b/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/" }; /* From 6a40e041d0af462d9e776632168d033ab2d7eae2 Mon Sep 17 00:00:00 2001 From: Baptiste Lemoine Date: Tue, 19 Nov 2019 11:21:58 +0100 Subject: [PATCH 4/9] :alien: translate button to add --- src/app/pages/dates/dates.component.html | 3 ++- src/assets/i18n/en.json | 3 ++- src/assets/i18n/fr.json | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/app/pages/dates/dates.component.html b/src/app/pages/dates/dates.component.html index cac4c28a..196317cd 100644 --- a/src/app/pages/dates/dates.component.html +++ b/src/app/pages/dates/dates.component.html @@ -90,7 +90,8 @@ *ngIf="config.allowSeveralHours=='true'" class="btn btn-primary" (click)="addTimetoDate(choice, id)" - > Ajouter un choix d'heure + > + {{"dates.addTime"|translate}}
Date: Tue, 19 Nov 2019 11:23:42 +0100 Subject: [PATCH 5/9] :alien: translate button to add in template --- src/app/pages/dates/dates.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/pages/dates/dates.component.html b/src/app/pages/dates/dates.component.html index 196317cd..691d7fa2 100644 --- a/src/app/pages/dates/dates.component.html +++ b/src/app/pages/dates/dates.component.html @@ -91,7 +91,7 @@ class="btn btn-primary" (click)="addTimetoDate(choice, id)" > - {{"dates.addTime"|translate}} + {{"dates.add_time"|translate}}
Date: Tue, 19 Nov 2019 14:23:51 +0100 Subject: [PATCH 6/9] :zap: add unique interval days --- src/app/config/PollConfig.ts | 6 +- src/app/pages/dates/dates.component.html | 32 ++++++++- src/app/pages/dates/dates.component.ts | 89 +++++++++++++++++++++++- src/assets/i18n/fr.json | 6 +- 4 files changed, 123 insertions(+), 10 deletions(-) diff --git a/src/app/config/PollConfig.ts b/src/app/config/PollConfig.ts index a6f89d77..722298c6 100644 --- a/src/app/config/PollConfig.ts +++ b/src/app/config/PollConfig.ts @@ -15,15 +15,15 @@ export const timeOfDay = [{ {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'}] } ]; diff --git a/src/app/pages/dates/dates.component.html b/src/app/pages/dates/dates.component.html index 691d7fa2..e07b2048 100644 --- a/src/app/pages/dates/dates.component.html +++ b/src/app/pages/dates/dates.component.html @@ -4,8 +4,8 @@
@@ -28,6 +28,14 @@ > {{"dates.add"|translate}} + +
+ +
+

{{"dates.add_interval"|translate}}

+

+ Je souhaite proposer pour mon sondage toutes les dates entre le + + ({{startDateInterval }}) + et le + + ({{endDateInterval }}) +

+ +
+
{{config.dateList.length}} diff --git a/src/app/pages/dates/dates.component.ts b/src/app/pages/dates/dates.component.ts index bf6776b2..00db6e22 100644 --- a/src/app/pages/dates/dates.component.ts +++ b/src/app/pages/dates/dates.component.ts @@ -1,4 +1,4 @@ -import {ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core'; +import {ChangeDetectorRef, Component, Inject, OnChanges, OnInit} from '@angular/core'; import {ConfigService} from '../../config.service'; import {BaseComponent} from '../base-page/base.component'; import {DOCUMENT} from '@angular/common'; @@ -8,7 +8,13 @@ import {DOCUMENT} from '@angular/common'; templateUrl: './dates.component.html', styleUrls: ['./dates.component.scss'] }) -export class DatesComponent extends BaseComponent implements OnInit { +export class DatesComponent extends BaseComponent implements OnInit, OnChanges { + showDateInterval: boolean = true; + startDateInterval: any; + intervalDays: any; + intervalDaysDefault: number = 7; + endDateInterval: any; + constructor(public config: ConfigService, private cd: ChangeDetectorRef, @Inject(DOCUMENT) private document: any @@ -16,7 +22,22 @@ export class DatesComponent extends BaseComponent implements OnInit { super(config); } + ngOnChanges() { + // 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(); + console.log('dateJson', dateJson.substring(0, 10)); + this.startDateInterval = dateJson.substring(0, 10); + this.endDateInterval = this.addDaysToDate(this.intervalDaysDefault, dateCurrent).toISOString().substring(0, 10); } addDate() { @@ -27,6 +48,17 @@ export class DatesComponent extends BaseComponent implements OnInit { this.config.timeList.push({literal: '', timeList: []}); } + /** + * add some days to a date, to compute intervals + * @param days + * @param date + */ + addDaysToDate(days: number, date: Date) { + var 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 @@ -44,6 +76,9 @@ export class DatesComponent extends BaseComponent implements OnInit { } } + /** + * remove all input contents, does not reset to default + */ emptyAll() { this.config.dateList.forEach(element => { element.literal = ''; @@ -53,4 +88,54 @@ export class DatesComponent extends BaseComponent implements OnInit { element.literal = ''; }); } + + /** + * add all the dates between the start and end dates + */ + addIntervalOfDates() { + let newIntervalArray = this.getDatesInrange(this.startDateInterval, this.endDateInterval, 1); + console.log('newIntervalArray', newIntervalArray); + + 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 + console.log('converted', converted); + console.log('this.config.dateList', this.config.dateList); + + } + + getDatesInrange(d1, d2, interval) { + d1 = new Date(d1); + d2 = new Date(d2); + var dates = []; + while (+d1 < +d2) { + dates.push(this.formateDate(d1)); + d1.setDate(d1.getDate() + interval) + } + return dates.slice(0) + } + + dayDiff(d1: Date, d2: Date): Number { + console.log('Number(((d2.getTime()) - (d1.getTime()) / 31536000000))', Number(((d2.getTime()) - (d1.getTime()) / 31536000000))); + 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); + } } diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json index a0101366..366f2287 100644 --- a/src/assets/i18n/fr.json +++ b/src/assets/i18n/fr.json @@ -32,7 +32,8 @@ }, "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" @@ -40,7 +41,8 @@ "add": "Ajouter une plage de dates", "add_time": "Ajouter une plage d'heure", "empty": "Vider", - "count_dates": "choix de dates" + "count_dates": "choix de dates", + "add_interval": "Ajouter une intervalle de dates" }, "choices": { "title": "Choisir les propositions", From 7b590840b2a8504db34114434fd2345141711f4d Mon Sep 17 00:00:00 2001 From: Baptiste Lemoine Date: Tue, 19 Nov 2019 14:42:59 +0100 Subject: [PATCH 7/9] :alien: translate buttons --- src/app/pages/dates/dates.component.html | 75 ++++++++++++------------ src/app/pages/dates/dates.component.ts | 44 +++++++++----- src/assets/i18n/en.json | 8 ++- src/assets/i18n/fr.json | 7 ++- 4 files changed, 80 insertions(+), 54 deletions(-) diff --git a/src/app/pages/dates/dates.component.html b/src/app/pages/dates/dates.component.html index e07b2048..014458f3 100644 --- a/src/app/pages/dates/dates.component.html +++ b/src/app/pages/dates/dates.component.html @@ -8,9 +8,9 @@ {{"dates.hours_different"|translate}} - ({{startDateInterval }}) - et le - - ({{endDateInterval }}) + {{"dates.interval_propose"|translate}} + + {{"dates.interval_span"|translate}} +

-
- {{config.dateList.length}} + {{config.timeList.length}} - {{"dates.count_dates"|translate}} + {{"dates.count_time"|translate}}
- +
+ + {{config.dateList.length}} + {{"dates.count_dates"|translate}} @@ -103,38 +106,38 @@ class="date-choice" >
diff --git a/src/app/pages/dates/dates.component.ts b/src/app/pages/dates/dates.component.ts index 00db6e22..7e0d8f6a 100644 --- a/src/app/pages/dates/dates.component.ts +++ b/src/app/pages/dates/dates.component.ts @@ -1,4 +1,4 @@ -import {ChangeDetectorRef, Component, Inject, OnChanges, 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'; @@ -8,7 +8,7 @@ import {DOCUMENT} from '@angular/common'; templateUrl: './dates.component.html', styleUrls: ['./dates.component.scss'] }) -export class DatesComponent extends BaseComponent implements OnInit, OnChanges { +export class DatesComponent extends BaseComponent implements OnInit { showDateInterval: boolean = true; startDateInterval: any; intervalDays: any; @@ -22,7 +22,7 @@ export class DatesComponent extends BaseComponent implements OnInit, OnChanges { super(config); } - ngOnChanges() { + 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) @@ -35,16 +35,21 @@ export class DatesComponent extends BaseComponent implements OnInit, OnChanges { ngOnInit() { let dateCurrent = new Date(); const dateJson = dateCurrent.toISOString(); - console.log('dateJson', dateJson.substring(0, 10)); this.startDateInterval = dateJson.substring(0, 10); this.endDateInterval = this.addDaysToDate(this.intervalDaysDefault, dateCurrent).toISOString().substring(0, 10); } addDate() { 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: '', timeList: []}); } @@ -54,7 +59,7 @@ export class DatesComponent extends BaseComponent implements OnInit, OnChanges { * @param date */ addDaysToDate(days: number, date: Date) { - var date = new Date(date.valueOf()); + date = new Date(date.valueOf()); date.setDate(date.getDate() + days); return date; }; @@ -65,10 +70,9 @@ export class DatesComponent extends BaseComponent implements OnInit, OnChanges { * @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 = this.document.querySelector(selector); if (elem) { @@ -90,26 +94,30 @@ export class DatesComponent extends BaseComponent implements OnInit, OnChanges { } /** - * add all the dates between the start and end dates + * add all the dates between the start and end dates in the interval section */ addIntervalOfDates() { - let newIntervalArray = this.getDatesInrange(this.startDateInterval, this.endDateInterval, 1); - console.log('newIntervalArray', newIntervalArray); + 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 - console.log('converted', converted); - console.log('this.config.dateList', this.config.dateList); + this.showDateInterval = false; } - getDatesInrange(d1, d2, interval) { + /** + * + * @param d1 + * @param d2 + * @param interval + */ + getDatesInRange(d1: Date, d2: Date, interval: number) { d1 = new Date(d1); d2 = new Date(d2); - var dates = []; + const dates = []; while (+d1 < +d2) { dates.push(this.formateDate(d1)); d1.setDate(d1.getDate() + interval) @@ -117,8 +125,12 @@ export class DatesComponent extends BaseComponent implements OnInit, OnChanges { return dates.slice(0) } + /** + * get the number of days between two dates + * @param d1 + * @param d2 + */ dayDiff(d1: Date, d2: Date): Number { - console.log('Number(((d2.getTime()) - (d1.getTime()) / 31536000000))', Number(((d2.getTime()) - (d1.getTime()) / 31536000000))); return Number(((d2.getTime()) - (d1.getTime()) / 31536000000)); } diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 7963899f..36201f03 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -39,7 +39,13 @@ }, "add": "Add a date choice", "add_time": "Add a time span", - "count_dates": "choices of dates" + "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", diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json index 366f2287..51d4f390 100644 --- a/src/assets/i18n/fr.json +++ b/src/assets/i18n/fr.json @@ -42,7 +42,12 @@ "add_time": "Ajouter une plage d'heure", "empty": "Vider", "count_dates": "choix de dates", - "add_interval": "Ajouter une intervalle 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", From e81389eae13b8709085710ce60bae6d3307ba7ae Mon Sep 17 00:00:00 2001 From: Baptiste Lemoine Date: Tue, 19 Nov 2019 14:48:27 +0100 Subject: [PATCH 8/9] :zap: fix function call in template --- src/app/pages/dates/dates.component.html | 4 +-- yarn.lock | 35 +++++++++++++++++++++++- 2 files changed, 36 insertions(+), 3 deletions(-) diff --git a/src/app/pages/dates/dates.component.html b/src/app/pages/dates/dates.component.html index 014458f3..43b43923 100644 --- a/src/app/pages/dates/dates.component.html +++ b/src/app/pages/dates/dates.component.html @@ -70,7 +70,7 @@ {{"dates.count_time"|translate}}