dates and recap side to side

develop
Baptiste Lemoine 3 years ago
parent 15bbf0e375
commit 61bf6a289c
  1. 6
      src/app/config/PollConfig.ts
  2. 59
      src/app/config/defaultConfigs.ts
  3. 206
      src/app/pages/dates/dates.component.html
  4. 13
      src/app/pages/resume/resume.component.html

@ -2,7 +2,7 @@
* une option de date dans les sondages spéciaux
*/
import {environment} from "../../environments/environment";
import {defaultAnswers, defaultDates, defaultTimeOfDay} from "./defaultConfigs";
import {defaultAnswers, otherDefaultDates, otherTimeOfDay} from "./defaultConfigs";
export interface DateOption {
timeList: any;
@ -59,8 +59,8 @@ export class PollConfig {
canModifyAnswers = true;// bool for the frontend selector
whoModifiesAnswers = "everybody";// everybody, self, nobody (= just admin)
whoCanChangeAnswers = 'everybody';// everybody, self, nobody (= just admin)
dateList: any = defaultDates; // sets of days as strings, config to set identical time for days in a special days poll
timeList: any = defaultTimeOfDay; // ranges of time expressed as strings
dateList: any = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll
timeList: any = otherTimeOfDay; // ranges of time expressed as strings
answers: any = defaultAnswers;

@ -3,28 +3,67 @@ export const basicSlicesOfDay = [
{literal: 'midi'},
{literal: 'soir'}
];
export const defaultTimeOfDay = [{
timeList: Object.create(basicSlicesOfDay),
export const otherSlicesOfDay = [
{literal: 'aux aurores'},
{literal: 'au petit dej'},
{literal: 'au deuxième petit dej des hobbits'}
];
export const defaultTimeOfDay = Array.from([{
timeList: [...basicSlicesOfDay],
literal: 'matin'
},
{timeList: [...basicSlicesOfDay], literal: 'midi'},
{timeList: [...basicSlicesOfDay], literal: 'après-midi'},
{timeList: [...basicSlicesOfDay], literal: 'soirée'}]);
export const otherTimeOfDay = Array.from([{
timeList: [
{literal: 'aux aurores'},
{literal: 'au petit dej'},
{literal: 'au deuxième petit dej des hobbits'}
],
literal: 'matin'
},
{timeList: Object.create(basicSlicesOfDay), literal: 'midi'},
{timeList: Object.create(basicSlicesOfDay), literal: 'après-midi'},
{timeList: Object.create(basicSlicesOfDay), literal: 'soirée'}];
{
timeList: [
{literal: 'matin'},
{literal: 'midi'},
{literal: 'soir'}
], literal: 'midi'
},
{timeList: [...otherSlicesOfDay], literal: 'après-midi'},
{timeList: [...basicSlicesOfDay], literal: 'soirée'}]);
export const defaultDates = [
{
literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()}`,
date_object: new Date(),
timeList: Object.create(basicSlicesOfDay)
timeList: [...otherSlicesOfDay]
},
{
literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 1}`,
date_object: new Date(),
timeList: [...basicSlicesOfDay]
},
{
literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 2}`,
date_object: new Date(),
timeList: [...otherSlicesOfDay]
}
];
export const otherDefaultDates = [
{
literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()}`,
date_object: new Date(),
timeList: [...otherSlicesOfDay]
},
{
literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 1}`,
date_object: new Date(),
timeList: Object.create(basicSlicesOfDay)
timeList: [...basicSlicesOfDay]
},
{
literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 2}`,
date_object: new Date(),
timeList: Object.create(basicSlicesOfDay)
timeList: [...otherSlicesOfDay]
}
];
export const defaultAnswers = [{
@ -33,7 +72,7 @@ export const defaultAnswers = [{
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()}`,
date_object: new Date(),
timeList: Object.create(basicSlicesOfDay)
timeList: Array.from(otherSlicesOfDay)
},
{
id: 1,
@ -41,6 +80,7 @@ export const defaultAnswers = [{
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() + 1}`,
date_object: new Date(),
timeList: Array.from(basicSlicesOfDay)
},
{
id: 2,
@ -48,4 +88,5 @@ export const defaultAnswers = [{
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() + 2}`,
date_object: new Date(),
timeList: Array.from(otherSlicesOfDay)
}];

@ -77,129 +77,139 @@
</button >
<hr >
</section >
<div class="dates-list " >
<div class='title' >
<div class='columns' >
<div class='column' >
<div class="dates-list " >
<div class='title' >
<span class="count-dates" >
{{config.timeList.length}}
</span >
<span class="count-dates-txt " >
<span class="count-dates-txt " >
{{"dates.count_time"|translate}}
(pour chaque jour)
(pour chaque jour)
</span >
</div >
<div class='actions' >
<button
(click)="addTime()"
*ngIf=" 'false' === config.allowSeveralHours "
class="btn btn--primary"
id="add_time_button"
>
<i class='fa fa-plus' ></i >
{{"dates.add_time"|translate}}
</button >
<button
(click)="removeAllTimes()"
*ngIf=" 'false' === config.allowSeveralHours "
class="btn btn--warning"
id="remove_time_button"
>
<i class='fa fa-trash' ></i >
Aucune plage horaire
</button >
<button
(click)="resetTimes()"
*ngIf=" 'false' === config.allowSeveralHours"
class="btn btn--warning"
id="reset_time_button"
>
<i class='fa fa-refresh' ></i >
réinitialiser
</button >
</div >
</div >
<div class='actions' >
<button
(click)="addTime()"
*ngIf=" 'false' === config.allowSeveralHours "
class="btn btn--primary"
id="add_time_button"
>
<i class='fa fa-plus' ></i >
{{"dates.add_time"|translate}}
</button >
<button
(click)="removeAllTimes()"
*ngIf=" 'false' === config.allowSeveralHours "
class="btn btn--warning"
id="remove_time_button"
>
<i class='fa fa-trash' ></i >
Aucune plage horaire
</button >
<button
(click)="resetTimes()"
*ngIf=" 'false' === config.allowSeveralHours"
class="btn btn--warning"
id="reset_time_button"
>
<i class='fa fa-refresh' ></i >
réinitialiser
</button >
</div >
<div
*ngIf=" 'false' === config.allowSeveralHours"
class="identical-dates"
>
<div
*ngFor="let time of config.timeList; index as id"
class="time-choice"
>
<label for='timeChoices_{{id}}' >
<i class='fa fa-clock-o' ></i >
</label >
<input
[(ngModel)]="time.literal"
name="timeChoices_{{id}}"
type="text"
id='timeChoices_{{id}}'
<div
*ngIf=" 'false' === config.allowSeveralHours"
class="identical-dates"
>
<button
(click)="time.timeList.splice(id, 1)"
class="btn btn-warning" ><i class="fa fa-times" ></i >
</button >
</div >
</div >
<hr >
<span class="count-dates title" >
<div
*ngFor="let time of config.timeList; index as id"
class="time-choice"
>
<label for='timeChoices_{{id}}' >
<i class='fa fa-clock-o' ></i >
</label >
<input
[(ngModel)]="time.literal"
name="timeChoices_{{id}}"
type="text"
id='timeChoices_{{id}}'
>
<button
(click)="time.timeList.splice(id, 1)"
class="btn btn-warning" ><i class="fa fa-times" ></i >
</button >
</div >
</div >
<hr >
<span class="count-dates title" >
{{config.dateList.length}}
</span >
<span >
<span >
{{"dates.count_dates"|translate}}
</span >
<button
class='btn btn--primary'
(click)='addDate()' >
{{"dates.add"|translate}}
</button >
<div
*ngFor="let choice of config.dateList; index as id"
class="date-choice"
>
<input
[(ngModel)]="choice.date_object"
name="dateChoices_{{id}}"
id="dateChoices_{{id}}"
useValueAsDate
type="date"
>
<button
(click)="config.dateList.splice(id, 1)"
class="btn btn-warning"
><i class="fa fa-times" ></i >
</button >
<button
(click)="addTimeToDate(choice, id)"
*ngIf=" 'true' === config.allowSeveralHours"
class="btn btn--primary"
>
{{"dates.add_time"|translate}}
</button >
<div
*ngIf=" 'true' === config.allowSeveralHours"
class="several-times"
>
<button
class='btn btn--primary'
(click)='addDate()' >
{{"dates.add"|translate}}
</button >
<div
*ngFor="let time of choice.timeList; index as idTime"
class="time-choice"
*ngFor="let choice of config.dateList; index as id"
class="date-choice"
>
{{id}})
<input
[(ngModel)]="time.date_object"
name="dateTime_{{id}}_Choices_{{idTime}}"
id="dateTime_{{id}}_Choices_{{idTime}}"
[(ngModel)]="choice.date_object"
name="dateChoices_{{id}}"
id="dateChoices_{{id}}"
useValueAsDate
type="text"
type="date"
>
<button
(click)="choice.timeList.splice(idTime, 1)"
(click)="config.dateList.splice(id, 1)"
class="btn btn-warning"
><i class="fa fa-times" ></i >
</button >
<button
(click)="addTimeToDate(choice, id)"
*ngIf=" 'true' === config.allowSeveralHours"
class="btn btn--primary"
>
{{"dates.add_time"|translate}}
</button >
<div
*ngIf=" 'true' === config.allowSeveralHours"
class="several-times"
>
<h2 >Several hours</h2 >
<div
*ngFor="let timeItem of choice.timeList; index as idTime"
class="time-choice"
>
<input
[(ngModel)]="timeItem.literal"
name="dateTime_{{id}}_Choices_{{idTime}}"
id="dateTime_{{id}}_Choices_{{idTime}}"
type="text"
>
<button
(click)="choice.timeList.splice(idTime, 1)"
class="btn btn-warning"
><i class="fa fa-times" ></i >
</button >
</div >
</div >
</div >
</div >
</div >
<div class='column' >
<framadate-resume ></framadate-resume >
</div >
</div >
<a
[routerLink]="'/step/resume'"
class="btn btn--full btn--primary"

@ -38,12 +38,12 @@
<i class='fa fa-clock-o' ></i >
<span
class='well'
*ngIf="true ===!!config.allowSeveralHours" >
*ngIf="'true' === config.allowSeveralHours" >
{{"dates.multiple.different"|translate}}
</span >
<span
class='well'
*ngIf="false ===!!config.allowSeveralHours" >
*ngIf="'false' === config.allowSeveralHours" >
{{"dates.multiple.identical"|translate}}
</span >
<div
@ -59,13 +59,15 @@
<!-- CASE different slices of the day-->
<div
*ngIf="true ===!!config.allowSeveralHours"
*ngIf="'true' === config.allowSeveralHours"
class="several-times"
>
<div
*ngFor="let time of choice.timeList "
*ngFor="let time of choice.timeList ; index as idTime"
class="time-choice"
>
{{idTime}})
<i class='fa fa-square-o' ></i >
{{time.literal}}
</div >
@ -73,13 +75,14 @@
</div >
<!-- CASE all dates having the same slices of the day-->
<div
*ngIf="false ===!!config.allowSeveralHours"
*ngIf="'false' === config.allowSeveralHours"
class="same-times"
>
<div
*ngFor="let time of config.timeList "
class="time-choice"
>
<i class='fa fa-square-o' ></i >
{{time.literal}}
</div >
</div >

Loading…
Cancel
Save