2021-02-04 16:14:07 +01:00
|
|
|
<div class="date-selection">
|
2021-02-09 12:10:10 +01:00
|
|
|
<form [formGroup]="form">
|
|
|
|
<!-- interval-->
|
|
|
|
<button
|
|
|
|
(click)="showDateInterval = !showDateInterval"
|
|
|
|
[ngClass]="{ active: showDateInterval }"
|
|
|
|
class="btn btn--primary"
|
|
|
|
id="toggle_interval_button"
|
|
|
|
>
|
|
|
|
<i class="fa fa-clock-o" aria-hidden="true"></i>
|
|
|
|
<span>
|
|
|
|
{{ 'dates.add_interval' | translate }}
|
|
|
|
</span>
|
|
|
|
</button>
|
|
|
|
<fieldset *ngIf="showDateInterval" class="date-interval form-row is-boxed">
|
|
|
|
<h2>{{ 'dates.add_interval' | translate }}</h2>
|
|
|
|
<div class="columns">
|
|
|
|
<div class="column">
|
|
|
|
{{ 'dates.interval_propose' | translate }}
|
|
|
|
</div>
|
|
|
|
<div class="column">
|
|
|
|
<label for="start_interval" class="hidden">start</label>
|
|
|
|
<input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />
|
|
|
|
</div>
|
2021-02-09 11:27:01 +01:00
|
|
|
</div>
|
2021-02-09 12:10:10 +01:00
|
|
|
<div class="columns">
|
|
|
|
<div class="column">
|
|
|
|
{{ 'dates.interval_span' | translate }}
|
|
|
|
</div>
|
|
|
|
<div class="column">
|
|
|
|
<label for="end_interval" class="hidden">end</label>
|
|
|
|
<input id="end_interval" formControlName="endDateInterval" type="date" />
|
|
|
|
</div>
|
2021-02-09 11:27:01 +01:00
|
|
|
</div>
|
2021-02-09 12:10:10 +01:00
|
|
|
<button (click)="addIntervalOfDates()" class="btn btn-block btn--primary">
|
|
|
|
<i class="fa fa-plus" aria-hidden="true"></i>
|
|
|
|
{{ 'dates.interval_button' | translate }}
|
|
|
|
{{ intervalDays }}
|
|
|
|
{{ 'dates.interval_button_dates' | translate }}
|
|
|
|
</button>
|
|
|
|
</fieldset>
|
|
|
|
</form>
|
2021-02-09 11:27:01 +01:00
|
|
|
<div class="dates-list">
|
2021-02-09 12:31:33 +01:00
|
|
|
<button
|
|
|
|
class="btn"
|
|
|
|
[class.is-primary]="form.value.configuration.hasSeveralHours"
|
|
|
|
(click)="
|
|
|
|
form.patchValue({
|
|
|
|
configuration: { hasSeveralHours: !form.value.configuration.hasSeveralHours }
|
|
|
|
})
|
|
|
|
"
|
|
|
|
>
|
|
|
|
<i class="fa fa-clock-o"></i>
|
|
|
|
|
|
|
|
<span> horaires avancées</span>
|
|
|
|
</button>
|
|
|
|
<div class="is-info notification">
|
|
|
|
<span *ngIf="form.value.configuration.hasSeveralHours">
|
|
|
|
Chaque jour aura ses plages de temps personnalisées
|
|
|
|
</span>
|
|
|
|
<span *ngIf="!form.value.configuration.hasSeveralHours">
|
|
|
|
Tous les jours auront les mêmes plages de temps
|
|
|
|
</span>
|
|
|
|
</div>
|
2021-02-09 12:10:10 +01:00
|
|
|
<fieldset class="range-container is-boxed">
|
2021-02-09 11:27:01 +01:00
|
|
|
<div class="actions columns">
|
2021-02-09 12:31:33 +01:00
|
|
|
<div class="column"></div>
|
|
|
|
<div class="column has-text-right">
|
2021-02-09 11:11:06 +01:00
|
|
|
<button
|
2021-02-09 11:27:01 +01:00
|
|
|
(click)="addTime()"
|
2021-02-09 12:31:33 +01:00
|
|
|
*ngIf="!form.value.configuration.hasSeveralHours"
|
2021-02-09 11:11:06 +01:00
|
|
|
class="btn btn--primary"
|
2021-02-09 11:27:01 +01:00
|
|
|
id="add_time_button"
|
|
|
|
>
|
|
|
|
<i class="fa fa-plus" aria-hidden="true"></i>
|
|
|
|
<span>
|
|
|
|
{{ 'dates.add_time' | translate }}
|
|
|
|
</span>
|
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
(click)="removeAllTimes()"
|
|
|
|
*ngIf="form.value.configuration.hasSeveralHours"
|
|
|
|
class="btn btn--warning"
|
|
|
|
id="remove_time_button"
|
2021-02-09 11:11:06 +01:00
|
|
|
>
|
2021-02-09 11:27:01 +01:00
|
|
|
<i class="fa fa-trash" aria-hidden="true"></i>
|
|
|
|
<span>
|
|
|
|
Aucune plage horaire
|
|
|
|
</span>
|
2021-02-09 11:11:06 +01:00
|
|
|
</button>
|
2021-02-09 11:27:01 +01:00
|
|
|
<button
|
|
|
|
(click)="resetTimes()"
|
|
|
|
*ngIf="form.value.configuration.hasSeveralHours"
|
|
|
|
class="btn btn--warning"
|
|
|
|
id="reset_time_button"
|
|
|
|
>
|
|
|
|
<i class="fa fa-refresh" aria-hidden="true"></i>
|
|
|
|
<span>
|
|
|
|
réinitialiser
|
|
|
|
</span>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-09 12:31:33 +01:00
|
|
|
<div class="range-time" *ngIf="!form.value.configuration.hasSeveralHours">
|
|
|
|
<h2>
|
2021-02-09 11:27:01 +01:00
|
|
|
<span class="count-dates-txt">
|
|
|
|
{{ 'dates.count_time' | translate }}
|
2021-02-09 12:10:10 +01:00
|
|
|
(identique pour chaque jour)
|
2021-02-09 11:27:01 +01:00
|
|
|
</span>
|
2021-02-09 12:31:33 +01:00
|
|
|
</h2>
|
|
|
|
<div class="title">
|
|
|
|
<span class="count-dates">
|
|
|
|
{{ timeList.length }}
|
|
|
|
</span>
|
2021-02-09 11:27:01 +01:00
|
|
|
</div>
|
2021-02-09 12:10:10 +01:00
|
|
|
<div class="identical-dates" cdkDropListGroup>
|
|
|
|
<div
|
|
|
|
class="time-list"
|
|
|
|
cdkDropList
|
|
|
|
[cdkDropListData]="timeList"
|
|
|
|
(cdkDropListDropped)="dropTimeItem($event)"
|
|
|
|
>
|
|
|
|
<div *ngFor="let time of timeList; index as time_id" class="time-choice" cdkDrag>
|
|
|
|
<div class="columns">
|
|
|
|
<div class="column movable">
|
|
|
|
<label [for]="'timeChoices_' + time_id">
|
|
|
|
<i class="fa fa-clock-o" aria-hidden="true"></i>
|
|
|
|
</label>
|
|
|
|
<input
|
|
|
|
[(ngModel)]="time.literal"
|
|
|
|
name="timeChoices_{{ time_id }}"
|
|
|
|
type="text"
|
|
|
|
id="timeChoices_{{ time_id }}"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div class="column">
|
|
|
|
<button (click)="timeList.splice(time_id, 1)" class="btn btn-warning">
|
|
|
|
<i class="fa fa-times" aria-hidden="true"></i>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-09 11:11:06 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-09 12:10:10 +01:00
|
|
|
</fieldset>
|
2021-02-09 11:11:06 +01:00
|
|
|
|
2021-02-09 11:27:01 +01:00
|
|
|
<hr />
|
|
|
|
<div class="main-box is-boxed">
|
|
|
|
<div class="columns">
|
|
|
|
<div class="column">
|
|
|
|
<!-- ajouter une date-->
|
|
|
|
<button class="btn btn--primary" (click)="addChoice()">
|
|
|
|
{{ 'dates.add' | translate }}
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="column">
|
|
|
|
<span class="count-dates title">
|
|
|
|
{{ dateList.length }}
|
|
|
|
</span>
|
|
|
|
<span>
|
|
|
|
{{ 'dates.count_dates' | translate }}
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="columns">
|
|
|
|
<div class="column">
|
2021-02-09 12:31:33 +01:00
|
|
|
<!-- TODO lier au formulaire les valeurs des dates-->
|
2021-02-09 11:27:01 +01:00
|
|
|
<h2>Dates</h2>
|
|
|
|
<div *ngFor="let choice of dateList; index as id" class="date-choice">
|
|
|
|
{{ id }})
|
|
|
|
<input
|
|
|
|
[(ngModel)]="choice.date_object"
|
|
|
|
name="dateChoices_{{ id }}"
|
|
|
|
id="dateChoices_{{ id }}"
|
|
|
|
useValueAsDate
|
|
|
|
type="date"
|
|
|
|
/>
|
|
|
|
<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
|
|
|
|
<i class="fa fa-times" aria-hidden="true"></i>
|
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
(click)="addTimeToDate(choice, id)"
|
|
|
|
*ngIf="form.value.configuration.hasSeveralHours"
|
|
|
|
class="btn btn--primary"
|
|
|
|
>
|
|
|
|
{{ 'dates.add_time' | translate }}
|
|
|
|
</button>
|
|
|
|
<div *ngIf="form.value.configuration.hasSeveralHours" class="several-times">
|
|
|
|
plage horaire distincte
|
|
|
|
<br />
|
|
|
|
<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" aria-hidden="true"></i>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="column calendar-column">
|
|
|
|
<button class="btn" (click)="selectionKind = 'range'" [class.is-primary]="selectionKind == 'range'">
|
|
|
|
plage de jours
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<button
|
|
|
|
class="btn"
|
|
|
|
(click)="selectionKind = 'multiple'"
|
|
|
|
[class.is-primary]="selectionKind == 'multiple'"
|
|
|
|
>
|
|
|
|
jours séparés
|
|
|
|
</button>
|
|
|
|
<button class="btn" (click)="setDefaultDatesForInterval()">
|
|
|
|
réinitialiser</button
|
|
|
|
><button class="btn" (click)="dateCalendarEnum = [today]">
|
|
|
|
vider
|
|
|
|
</button>
|
|
|
|
<div class="text-center">
|
|
|
|
<br />
|
|
|
|
<p-calendar
|
|
|
|
[(ngModel)]="dateCalendarEnum"
|
|
|
|
[locale]="'calendar_widget' | translate"
|
|
|
|
[inline]="true"
|
2021-02-09 12:10:10 +01:00
|
|
|
[monthNavigator]="true"
|
2021-02-09 11:27:01 +01:00
|
|
|
[selectionMode]="selectionKind"
|
|
|
|
></p-calendar>
|
|
|
|
</div>
|
2021-02-04 16:14:07 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-05 23:03:49 +01:00
|
|
|
</div>
|
2021-02-04 16:14:07 +01:00
|
|
|
</div>
|