mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
👽 translate buttons
This commit is contained in:
parent
572f0837cc
commit
7b590840b2
@ -8,9 +8,9 @@
|
|||||||
{{"dates.hours_different"|translate}}
|
{{"dates.hours_different"|translate}}
|
||||||
</span>
|
</span>
|
||||||
<select
|
<select
|
||||||
name="multi_hours"
|
|
||||||
id="multi_hours"
|
|
||||||
[(ngModel)]="config.allowSeveralHours"
|
[(ngModel)]="config.allowSeveralHours"
|
||||||
|
id="multi_hours"
|
||||||
|
name="multi_hours"
|
||||||
>
|
>
|
||||||
<option value="true">{{"dates.multiple.different"|translate}}</option>
|
<option value="true">{{"dates.multiple.different"|translate}}</option>
|
||||||
<option value="false">{{"dates.multiple.identical"|translate}}</option>
|
<option value="false">{{"dates.multiple.identical"|translate}}</option>
|
||||||
@ -22,16 +22,16 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="btn btn-primary"
|
|
||||||
(click)="addDate()"
|
(click)="addDate()"
|
||||||
|
class="btn btn-primary"
|
||||||
id="add_date_button"
|
id="add_date_button"
|
||||||
>
|
>
|
||||||
{{"dates.add"|translate}}
|
{{"dates.add"|translate}}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="btn btn-primary"
|
|
||||||
[ngClass]="{active: showDateInterval}"
|
|
||||||
(click)="showDateInterval = !showDateInterval "
|
(click)="showDateInterval = !showDateInterval "
|
||||||
|
[ngClass]="{active: showDateInterval}"
|
||||||
|
class="btn btn-primary"
|
||||||
id="toggle_interval_button"
|
id="toggle_interval_button"
|
||||||
>
|
>
|
||||||
{{"dates.add_interval"|translate}}
|
{{"dates.add_interval"|translate}}
|
||||||
@ -39,62 +39,65 @@
|
|||||||
|
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="btn btn-warning"
|
|
||||||
(click)="emptyAll()"
|
(click)="emptyAll()"
|
||||||
|
class="btn btn-warning"
|
||||||
id="empty_button"
|
id="empty_button"
|
||||||
>{{"dates.empty"|translate}}
|
>{{"dates.empty"|translate}}
|
||||||
</button>
|
</button>
|
||||||
<section class="date-interval" *ngIf="showDateInterval">
|
<section *ngIf="showDateInterval" class="date-interval">
|
||||||
<!-- TODO à mettre en popup-->
|
<!-- TODO à mettre en popup-->
|
||||||
<hr>
|
<hr>
|
||||||
<h2> {{"dates.add_interval"|translate}}</h2>
|
<h2> {{"dates.add_interval"|translate}}</h2>
|
||||||
<p>
|
<p>
|
||||||
Je souhaite proposer pour mon sondage toutes les dates entre le
|
{{"dates.interval_propose"|translate}}
|
||||||
<input type="date" [(ngModel)]="startDateInterval">
|
<input (change)="countDays()" [(ngModel)]="startDateInterval" type="date">
|
||||||
({{startDateInterval }})
|
{{"dates.interval_span"|translate}}
|
||||||
et le
|
<input (change)="countDays()" [(ngModel)]="endDateInterval" type="date">
|
||||||
<input type="date" [(ngModel)]="endDateInterval">
|
|
||||||
({{endDateInterval }})
|
|
||||||
</p>
|
</p>
|
||||||
<button class="btn btn-block"
|
<button (click)="addIntervalOfDates()"
|
||||||
(click)="addIntervalOfDates()">
|
class="btn btn-block">
|
||||||
Ajouter ces {{intervalDays}} dates
|
{{"dates.interval_button"|translate}}
|
||||||
|
{{intervalDays}}
|
||||||
|
{{"dates.interval_button_dates"|translate}}
|
||||||
</button>
|
</button>
|
||||||
<hr>
|
<hr>
|
||||||
</section>
|
</section>
|
||||||
<div class="dates-list">
|
<div class="dates-list">
|
||||||
<span class="count-dates">
|
<span class="count-dates">
|
||||||
{{config.dateList.length}}
|
{{config.timeList.length}}
|
||||||
</span>
|
</span>
|
||||||
<span class="count-dates-txt">
|
<span class="count-dates-txt">
|
||||||
{{"dates.count_dates"|translate}}
|
{{"dates.count_time"|translate}}
|
||||||
</span>
|
</span>
|
||||||
<button
|
<button
|
||||||
class="btn btn-primary pull-right"
|
(click)="add_time()"
|
||||||
(click)="addtime()"
|
|
||||||
id="add_time_button"
|
|
||||||
*ngIf="config.allowSeveralHours=='false'"
|
*ngIf="config.allowSeveralHours=='false'"
|
||||||
|
class="btn btn-primary pull-right"
|
||||||
|
id="add_time_button"
|
||||||
>
|
>
|
||||||
{{"dates.addTime"|translate}}
|
{{"dates.add_time"|translate}}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="identical-dates"
|
|
||||||
*ngIf="'false'==config.allowSeveralHours"
|
*ngIf="'false'==config.allowSeveralHours"
|
||||||
|
class="identical-dates"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="time-choice"
|
|
||||||
*ngFor="let choice of config.timeList; index as id"
|
*ngFor="let choice of config.timeList; index as id"
|
||||||
|
class="time-choice"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
type="text"
|
|
||||||
name="timeChoices_{{id}}"
|
|
||||||
[(ngModel)]="choice.literal"
|
[(ngModel)]="choice.literal"
|
||||||
|
name="timeChoices_{{id}}"
|
||||||
|
type="text"
|
||||||
>
|
>
|
||||||
<button class="btn btn-warning" (click)="config.timeList.splice(id, 1)">X</button>
|
<button (click)="config.timeList.splice(id, 1)" class="btn btn-warning">X</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
<hr>
|
||||||
|
<span class="count-dates">
|
||||||
|
{{config.dateList.length}}
|
||||||
|
</span>
|
||||||
<span>
|
<span>
|
||||||
{{"dates.count_dates"|translate}}
|
{{"dates.count_dates"|translate}}
|
||||||
</span>
|
</span>
|
||||||
@ -103,38 +106,38 @@
|
|||||||
class="date-choice"
|
class="date-choice"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
type="date"
|
|
||||||
name="dateChoices_{{id}}"
|
|
||||||
[(ngModel)]="choice.literal"
|
[(ngModel)]="choice.literal"
|
||||||
|
name="dateChoices_{{id}}"
|
||||||
|
type="date"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
class="btn btn-warning"
|
|
||||||
(click)="config.dateList.splice(id, 1)"
|
(click)="config.dateList.splice(id, 1)"
|
||||||
|
class="btn btn-warning"
|
||||||
>X
|
>X
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
|
(click)="add_timeToDate(choice, id)"
|
||||||
*ngIf="config.allowSeveralHours=='true'"
|
*ngIf="config.allowSeveralHours=='true'"
|
||||||
class="btn btn-primary"
|
class="btn btn-primary"
|
||||||
(click)="addTimetoDate(choice, id)"
|
|
||||||
>
|
>
|
||||||
{{"dates.add_time"|translate}}
|
{{"dates.add_time"|translate}}
|
||||||
</button>
|
</button>
|
||||||
<div
|
<div
|
||||||
class="several-times"
|
|
||||||
*ngIf="'true'==config.allowSeveralHours"
|
*ngIf="'true'==config.allowSeveralHours"
|
||||||
|
class="several-times"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="time-choice"
|
|
||||||
*ngFor="let time of choice.timeList; index as idTime"
|
*ngFor="let time of choice.timeList; index as idTime"
|
||||||
|
class="time-choice"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
type="text"
|
|
||||||
name="dateTime_{{id}}_Choices_{{idTime}}"
|
|
||||||
[(ngModel)]="time.literal"
|
[(ngModel)]="time.literal"
|
||||||
|
name="dateTime_{{id}}_Choices_{{idTime}}"
|
||||||
|
type="text"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
class="btn btn-warning"
|
|
||||||
(click)="choice.timeList.splice(idTime, 1)"
|
(click)="choice.timeList.splice(idTime, 1)"
|
||||||
|
class="btn btn-warning"
|
||||||
>X
|
>X
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -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 {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,7 @@ 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, OnChanges {
|
export class DatesComponent extends BaseComponent implements OnInit {
|
||||||
showDateInterval: boolean = true;
|
showDateInterval: boolean = true;
|
||||||
startDateInterval: any;
|
startDateInterval: any;
|
||||||
intervalDays: any;
|
intervalDays: any;
|
||||||
@ -22,7 +22,7 @@ export class DatesComponent extends BaseComponent implements OnInit, OnChanges {
|
|||||||
super(config);
|
super(config);
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnChanges() {
|
countDays() {
|
||||||
// compute the number of days in the date interval
|
// compute the number of days in the date interval
|
||||||
if (this.endDateInterval && this.startDateInterval) {
|
if (this.endDateInterval && this.startDateInterval) {
|
||||||
this.intervalDays = (this.dayDiff(this.endDateInterval, this.startDateInterval)).toFixed(0)
|
this.intervalDays = (this.dayDiff(this.endDateInterval, this.startDateInterval)).toFixed(0)
|
||||||
@ -35,16 +35,21 @@ export class DatesComponent extends BaseComponent implements OnInit, OnChanges {
|
|||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
let dateCurrent = new Date();
|
let dateCurrent = new Date();
|
||||||
const dateJson = dateCurrent.toISOString();
|
const dateJson = dateCurrent.toISOString();
|
||||||
console.log('dateJson', dateJson.substring(0, 10));
|
|
||||||
this.startDateInterval = dateJson.substring(0, 10);
|
this.startDateInterval = dateJson.substring(0, 10);
|
||||||
this.endDateInterval = this.addDaysToDate(this.intervalDaysDefault, dateCurrent).toISOString().substring(0, 10);
|
this.endDateInterval = this.addDaysToDate(this.intervalDaysDefault, dateCurrent).toISOString().substring(0, 10);
|
||||||
}
|
}
|
||||||
|
|
||||||
addDate() {
|
addDate() {
|
||||||
this.config.dateList.push({literal: '', timeList: []});
|
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: []});
|
this.config.timeList.push({literal: '', timeList: []});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -54,7 +59,7 @@ export class DatesComponent extends BaseComponent implements OnInit, OnChanges {
|
|||||||
* @param date
|
* @param date
|
||||||
*/
|
*/
|
||||||
addDaysToDate(days: number, date: Date) {
|
addDaysToDate(days: number, date: Date) {
|
||||||
var date = new Date(date.valueOf());
|
date = new Date(date.valueOf());
|
||||||
date.setDate(date.getDate() + days);
|
date.setDate(date.getDate() + days);
|
||||||
return date;
|
return date;
|
||||||
};
|
};
|
||||||
@ -65,10 +70,9 @@ export class DatesComponent extends BaseComponent implements OnInit, OnChanges {
|
|||||||
* @param config
|
* @param config
|
||||||
* @param id
|
* @param id
|
||||||
*/
|
*/
|
||||||
addTimetoDate(config: any, id: number) {
|
addTimeToDate(config: any, id: number) {
|
||||||
config.timeList.push({literal: ''});
|
config.timeList.push({literal: ''});
|
||||||
let selector = '[ng-reflect-name="dateTime_' + id + '_Choices_' + (config.timeList.length - 1) + '"]';
|
let selector = '[ng-reflect-name="dateTime_' + id + '_Choices_' + (config.timeList.length - 1) + '"]';
|
||||||
console.log('selector', selector);
|
|
||||||
this.cd.detectChanges();
|
this.cd.detectChanges();
|
||||||
const elem = this.document.querySelector(selector);
|
const elem = this.document.querySelector(selector);
|
||||||
if (elem) {
|
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() {
|
addIntervalOfDates() {
|
||||||
let newIntervalArray = this.getDatesInrange(this.startDateInterval, this.endDateInterval, 1);
|
let newIntervalArray = this.getDatesInRange(this.startDateInterval, this.endDateInterval, 1);
|
||||||
console.log('newIntervalArray', newIntervalArray);
|
|
||||||
|
|
||||||
const converted = [];
|
const converted = [];
|
||||||
newIntervalArray.forEach(element => {
|
newIntervalArray.forEach(element => {
|
||||||
converted.push({literal: element, timeList: []});
|
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.config.dateList = [...new Set(converted)]; // add only dates that are not already present with a Set of unique items
|
||||||
console.log('converted', converted);
|
this.showDateInterval = false;
|
||||||
console.log('this.config.dateList', this.config.dateList);
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getDatesInrange(d1, d2, interval) {
|
/**
|
||||||
|
*
|
||||||
|
* @param d1
|
||||||
|
* @param d2
|
||||||
|
* @param interval
|
||||||
|
*/
|
||||||
|
getDatesInRange(d1: Date, d2: Date, interval: number) {
|
||||||
d1 = new Date(d1);
|
d1 = new Date(d1);
|
||||||
d2 = new Date(d2);
|
d2 = new Date(d2);
|
||||||
var dates = [];
|
const dates = [];
|
||||||
while (+d1 < +d2) {
|
while (+d1 < +d2) {
|
||||||
dates.push(this.formateDate(d1));
|
dates.push(this.formateDate(d1));
|
||||||
d1.setDate(d1.getDate() + interval)
|
d1.setDate(d1.getDate() + interval)
|
||||||
@ -117,8 +125,12 @@ export class DatesComponent extends BaseComponent implements OnInit, OnChanges {
|
|||||||
return dates.slice(0)
|
return dates.slice(0)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* get the number of days between two dates
|
||||||
|
* @param d1
|
||||||
|
* @param d2
|
||||||
|
*/
|
||||||
dayDiff(d1: Date, d2: Date): Number {
|
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));
|
return Number(((d2.getTime()) - (d1.getTime()) / 31536000000));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -39,7 +39,13 @@
|
|||||||
},
|
},
|
||||||
"add": "Add a date choice",
|
"add": "Add a date choice",
|
||||||
"add_time": "Add a time span",
|
"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": {
|
"choices": {
|
||||||
"title": "Write the proposals",
|
"title": "Write the proposals",
|
||||||
|
@ -42,7 +42,12 @@
|
|||||||
"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"
|
"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": {
|
"choices": {
|
||||||
"title": "Choisir les propositions",
|
"title": "Choisir les propositions",
|
||||||
|
Loading…
Reference in New Issue
Block a user