manage dates poll type display, fix typo in add button date

This commit is contained in:
Baptiste Lemoine 2020-02-10 13:06:47 +01:00
parent e089d19993
commit 15bbf0e375
6 changed files with 82 additions and 40 deletions

View File

@ -37,7 +37,7 @@ export class PollConfig {
myEmail: string = "tktest@tktest.com"; myEmail: string = "tktest@tktest.com";
myPolls: any = [];// list of retrieved polls from the backend api myPolls: any = [];// list of retrieved polls from the backend api
// date specific poll, we have the choice to setup different hours (timeList) for all possible dates (dateList), or use the same hours for all dates // date specific poll, we have the choice to setup different hours (timeList) for all possible dates (dateList), or use the same hours for all dates
allowSeveralHours = 'false'; allowSeveralHours = 'true';
// access // access
visibility = 'link_only'; // visible to anyone with the link: visibility = 'link_only'; // visible to anyone with the link:
voteChoices = 'only_yes'; // possible answers to a vote choice: only "yes", "yes, maybe, no" voteChoices = 'only_yes'; // possible answers to a vote choice: only "yes", "yes, maybe, no"

View File

@ -1,25 +1,30 @@
export const basicSlicesOfDay = [
{literal: 'matin'},
{literal: 'midi'},
{literal: 'soir'}
];
export const defaultTimeOfDay = [{ export const defaultTimeOfDay = [{
timeList: [], timeList: Object.create(basicSlicesOfDay),
literal: 'matin' literal: 'matin'
}, },
{timeList: [], literal: 'midi'}, {timeList: Object.create(basicSlicesOfDay), literal: 'midi'},
{timeList: [], literal: 'après-midi'}, {timeList: Object.create(basicSlicesOfDay), literal: 'après-midi'},
{timeList: [], literal: 'soirée'}]; {timeList: Object.create(basicSlicesOfDay), literal: 'soirée'}];
export const defaultDates = [ export const defaultDates = [
{ {
literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()}`, literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()}`,
date_object: new Date(), date_object: new Date(),
timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}] timeList: Object.create(basicSlicesOfDay)
}, },
{ {
literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 1}`, literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 1}`,
date_object: new Date(), date_object: new Date(),
timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}] timeList: Object.create(basicSlicesOfDay)
}, },
{ {
literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 2}`, literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 2}`,
date_object: new Date(), date_object: new Date(),
timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}] timeList: Object.create(basicSlicesOfDay)
} }
]; ];
export const defaultAnswers = [{ export const defaultAnswers = [{
@ -28,7 +33,7 @@ export const defaultAnswers = [{
url: 'https://mastodon.cipherbliss.com/system/media_attachments/files/001/439/118/original/6fcf149bd902841b.png?1579471574', 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()}`, literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()}`,
date_object: new Date(), date_object: new Date(),
timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}] timeList: Object.create(basicSlicesOfDay)
}, },
{ {
id: 1, id: 1,

View File

@ -12,8 +12,8 @@
id="multi_hours" id="multi_hours"
name="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 >
</select > </select >
<span i18n > <span i18n >
{{"dates.hours_each_day"|translate}} {{"dates.hours_each_day"|translate}}
@ -91,7 +91,7 @@
<div class='actions' > <div class='actions' >
<button <button
(click)="addTime()" (click)="addTime()"
*ngIf="config.allowSeveralHours=='false'" *ngIf=" 'false' === config.allowSeveralHours "
class="btn btn--primary" class="btn btn--primary"
id="add_time_button" id="add_time_button"
> >
@ -100,7 +100,7 @@
</button > </button >
<button <button
(click)="removeAllTimes()" (click)="removeAllTimes()"
*ngIf="config.allowSeveralHours=='false'" *ngIf=" 'false' === config.allowSeveralHours "
class="btn btn--warning" class="btn btn--warning"
id="remove_time_button" id="remove_time_button"
> >
@ -109,7 +109,7 @@
</button > </button >
<button <button
(click)="resetTimes()" (click)="resetTimes()"
*ngIf="config.allowSeveralHours=='false'" *ngIf=" 'false' === config.allowSeveralHours"
class="btn btn--warning" class="btn btn--warning"
id="reset_time_button" id="reset_time_button"
> >
@ -119,25 +119,24 @@
</div > </div >
<div <div
*ngIf="'false'==config.allowSeveralHours" *ngIf=" 'false' === config.allowSeveralHours"
class="identical-dates" class="identical-dates"
> >
<div <div
*ngFor="let choice of config.timeList; index as id" *ngFor="let time of config.timeList; index as id"
class="time-choice" class="time-choice"
> >
<label for='timeChoices_{{id}}' > <label for='timeChoices_{{id}}' >
<i class='fa fa-clock-o' ></i > <i class='fa fa-clock-o' ></i >
</label > </label >
<input <input
[(ngModel)]="choice.literal" [(ngModel)]="time.literal"
name="timeChoices_{{id}}" name="timeChoices_{{id}}"
type="text" type="text"
id='timeChoices_{{id}}' id='timeChoices_{{id}}'
> >
<button <button
(click)="config.timeList.splice(id, 1)" (click)="time.timeList.splice(id, 1)"
class="btn btn-warning" ><i class="fa fa-times" ></i > class="btn btn-warning" ><i class="fa fa-times" ></i >
</button > </button >
</div > </div >
@ -149,6 +148,11 @@
<span > <span >
{{"dates.count_dates"|translate}} {{"dates.count_dates"|translate}}
</span > </span >
<button
class='btn btn--primary'
(click)='addDate()' >
{{"dates.add"|translate}}
</button >
<div <div
*ngFor="let choice of config.dateList; index as id" *ngFor="let choice of config.dateList; index as id"
class="date-choice" class="date-choice"
@ -167,13 +171,13 @@
</button > </button >
<button <button
(click)="addTimeToDate(choice, id)" (click)="addTimeToDate(choice, id)"
*ngIf="config.allowSeveralHours=='true'" *ngIf=" 'true' === config.allowSeveralHours"
class="btn btn--primary" class="btn btn--primary"
> >
{{"dates.add_time"|translate}} {{"dates.add_time"|translate}}
</button > </button >
<div <div
*ngIf="'true'==config.allowSeveralHours" *ngIf=" 'true' === config.allowSeveralHours"
class="several-times" class="several-times"
> >
<div <div
@ -185,7 +189,7 @@
name="dateTime_{{id}}_Choices_{{idTime}}" name="dateTime_{{id}}_Choices_{{idTime}}"
id="dateTime_{{id}}_Choices_{{idTime}}" id="dateTime_{{id}}_Choices_{{idTime}}"
useValueAsDate useValueAsDate
type="name" type="text"
> >
<button <button
(click)="choice.timeList.splice(idTime, 1)" (click)="choice.timeList.splice(idTime, 1)"
@ -196,7 +200,6 @@
</div > </div >
</div > </div >
</div > </div >
<a <a
[routerLink]="'/step/resume'" [routerLink]="'/step/resume'"
class="btn btn--full btn--primary" class="btn btn--full btn--primary"

View File

@ -34,23 +34,53 @@
</section > </section >
<section <section
class='type-date' class='type-date'
*ngIf='config.pollType == "dates"' > *ngIf='config.pollType !== "classic"' >
<i class='fa fa-clock-o' ></i >
<span
class='well'
*ngIf="true ===!!config.allowSeveralHours" >
{{"dates.multiple.different"|translate}}
</span >
<span
class='well'
*ngIf="false ===!!config.allowSeveralHours" >
{{"dates.multiple.identical"|translate}}
</span >
<div <div
*ngFor="let choice of config.dateList; index as id" *ngFor="let choice of config.dateList; index as id"
class="date-choice" class="date-choice"
> >
<div
class='only-one-slice'
*ngIf='!choice.timeList.length' >
<i class='fa fa-square-o' ></i >
</div >
{{choice.literal}} {{choice.literal}}
<!-- CASE different slices of the day-->
<div <div
*ngIf="'true'==config.allowSeveralHours" *ngIf="true ===!!config.allowSeveralHours"
class="several-times" class="several-times"
> >
<div <div
*ngFor="let time of choice.timeList; index as idTime" *ngFor="let time of choice.timeList "
class="time-choice"
>
<i class='fa fa-square-o' ></i >
{{time.literal}}
</div >
</div >
<!-- CASE all dates having the same slices of the day-->
<div
*ngIf="false ===!!config.allowSeveralHours"
class="same-times"
>
<div
*ngFor="let time of config.timeList "
class="time-choice" class="time-choice"
> >
{{time.literal}} {{time.literal}}
</div > </div >
</div > </div >
</div > </div >
@ -73,7 +103,7 @@
</a > </a >
<a <a
*ngIf='config.pollType == "dates"' *ngIf='config.pollType == "dates"'
[routerLink]="'/step/dates'" [routerLink]="'/step/date'"
class="prev" > class="prev" >
Retour Retour
</a > </a >

View File

@ -3,3 +3,7 @@
padding: 2em; padding: 2em;
margin: 1em 0; margin: 1em 0;
} }
.time-choice {
margin-left: 3em;
}

View File

@ -39,7 +39,7 @@
"identical": "identiques", "identical": "identiques",
"different": "possiblement différents" "different": "possiblement différents"
}, },
"add": "Ajouter une plage de dates", "add": "Ajouter une date",
"add_time": "Ajouter une plage horaire", "add_time": "Ajouter une plage horaire",
"empty": "Vider", "empty": "Vider",
"count_dates": "choix de dates", "count_dates": "choix de dates",