add unique interval days

This commit is contained in:
Baptiste Lemoine 2019-11-19 14:23:51 +01:00
parent 20876f9a8d
commit 572f0837cc
4 changed files with 123 additions and 10 deletions

View File

@ -15,15 +15,15 @@ export const timeOfDay = [{
{timeList: [], literal: 'soirée'}]; {timeList: [], literal: 'soirée'}];
export const defaultDates = [ 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'}] 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'}] 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'}] timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}]
} }
]; ];

View File

@ -4,8 +4,8 @@
<div> <div>
<label for="multi_hours"> <label for="multi_hours">
<span i18n> <span>
Je souhaite mettre des créneaux horaires {{"dates.hours_different"|translate}}
</span> </span>
<select <select
name="multi_hours" name="multi_hours"
@ -16,7 +16,7 @@
<option value="false">{{"dates.multiple.identical"|translate}}</option> <option value="false">{{"dates.multiple.identical"|translate}}</option>
</select> </select>
<span i18n> <span i18n>
pour chaque journée {{"dates.hours_each_day"|translate}}
</span> </span>
</label> </label>
</div> </div>
@ -28,6 +28,14 @@
> >
{{"dates.add"|translate}} {{"dates.add"|translate}}
</button> </button>
<button
class="btn btn-primary"
[ngClass]="{active: showDateInterval}"
(click)="showDateInterval = !showDateInterval "
id="toggle_interval_button"
>
{{"dates.add_interval"|translate}}
</button>
<button <button
@ -36,6 +44,24 @@
id="empty_button" id="empty_button"
>{{"dates.empty"|translate}} >{{"dates.empty"|translate}}
</button> </button>
<section class="date-interval" *ngIf="showDateInterval">
<!-- TODO à mettre en popup-->
<hr>
<h2> {{"dates.add_interval"|translate}}</h2>
<p>
Je souhaite proposer pour mon sondage toutes les dates entre le
<input type="date" [(ngModel)]="startDateInterval">
({{startDateInterval }})
et le
<input type="date" [(ngModel)]="endDateInterval">
({{endDateInterval }})
</p>
<button class="btn btn-block"
(click)="addIntervalOfDates()">
Ajouter ces {{intervalDays}} dates
</button>
<hr>
</section>
<div class="dates-list"> <div class="dates-list">
<span class="count-dates"> <span class="count-dates">
{{config.dateList.length}} {{config.dateList.length}}

View File

@ -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 {ConfigService} from '../../config.service';
import {BaseComponent} from '../base-page/base.component'; import {BaseComponent} from '../base-page/base.component';
import {DOCUMENT} from '@angular/common'; import {DOCUMENT} from '@angular/common';
@ -8,7 +8,13 @@ import {DOCUMENT} from '@angular/common';
templateUrl: './dates.component.html', templateUrl: './dates.component.html',
styleUrls: ['./dates.component.scss'] 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, constructor(public config: ConfigService,
private cd: ChangeDetectorRef, private cd: ChangeDetectorRef,
@Inject(DOCUMENT) private document: any @Inject(DOCUMENT) private document: any
@ -16,7 +22,22 @@ export class DatesComponent extends BaseComponent implements OnInit {
super(config); 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() { 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() { addDate() {
@ -27,6 +48,17 @@ export class DatesComponent extends BaseComponent implements OnInit {
this.config.timeList.push({literal: '', timeList: []}); 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, * add a time period to a specific date choice,
* focus on the new input * 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() { emptyAll() {
this.config.dateList.forEach(element => { this.config.dateList.forEach(element => {
element.literal = ''; element.literal = '';
@ -53,4 +88,54 @@ export class DatesComponent extends BaseComponent implements OnInit {
element.literal = ''; 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);
}
} }

View File

@ -32,7 +32,8 @@
}, },
"dates": { "dates": {
"title": "Config spécialement pour les 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": { "multiple": {
"identical": "identiques", "identical": "identiques",
"different": "possiblement différentes" "different": "possiblement différentes"
@ -40,7 +41,8 @@
"add": "Ajouter une plage de dates", "add": "Ajouter une plage de dates",
"add_time": "Ajouter une plage d'heure", "add_time": "Ajouter une plage d'heure",
"empty": "Vider", "empty": "Vider",
"count_dates": "choix de dates" "count_dates": "choix de dates",
"add_interval": "Ajouter une intervalle de dates"
}, },
"choices": { "choices": {
"title": "Choisir les propositions", "title": "Choisir les propositions",