funky-framadate-front/src/app/features/administration/form/steps/step-four/step-four.component.html

137 lines
4.1 KiB
HTML

<div class="step">
<div class="min-height">
<app-stepper [step_current]="4" [step_max]="pollService.step_max"></app-stepper>
<app-errors-list [form]="pollService.form"></app-errors-list>
<h2 class="title is-2">
Choisissez les horaires
</h2>
<div
class="days-list-having-separated-time-slices rounded-block"
*ngFor="let dayChoice of pollService.dateChoiceList; index as day_id"
>
<div class="heading day-choice">
{{ dayChoice.date_object | date }}
</div>
<section class="time-slice-list-of-a-day">
<div *ngFor="let timeSlice of dayChoice.timeSlices; index as id" class="time-choice padded">
<label for="dateChoices_{{ id }}"> Horaire / option {{ id + 1 }} </label>
<input
class="input is-fullwidth"
type="text"
id="dateChoices_{{ id }}"
[(ngModel)]="timeSlice.literal"
/>
<button class="button input is-full" (click)="pollService.timeList.splice(id, 1)">
<i class="fa fa-trash"></i> supprimer
</button>
</div>
<div class="add-time-choice">
<button (click)="addChoiceForDay(dayChoice)">
<i class="fa fa-plus"></i>
Ajouter horaire / option
</button>
</div>
</section>
</div>
<section class="same-time-slices">
<button class="is-outlined is-primary" (click)="toggleHasSeveralHours()">
Appliquer le même horaire / option à toutes les dates
</button>
<section class="same-time-slices rounded-block" *ngIf="pollService.form.value.hasSeveralHours">
<h3 class="title is-3">
Choisissez les horaires ou options à appliquer à toutes les dates
</h3>
<button
(click)="pollService.addTime()"
*ngIf="false == pollService.allowSeveralHours"
class="button is-primary is-block is-fullwidth"
id="add_time_button"
>
<i class="fa fa-plus" aria-hidden="true"></i>
{{ 'dates.add_time' | translate }}
</button>
<section class="proposals">
<h3 class="title is-3">
Propositions de créneaux horaires
</h3>
<div class="time-slices-proposals rounded-block">
<div
class="button is-rounded"
*ngFor="let text of timeSlicesProposals"
(click)="addPreselect(text.literal)"
>
{{ text.literal }}
</div>
</div>
</section>
<div *ngFor="let timeSlice of pollService.timeList; index as id" class="time-choice padded">
<label for="timeList_{{ id }}"> Horaire / option {{ id + 1 }} </label>
<input
class="input is-fullwidth"
type="text"
id="timeList_{{ id }}"
[(ngModel)]="timeSlice.literal"
/>
<button class="button is-block" (click)="pollService.timeList.splice(id, 1)">
<i class="fa fa-trash"></i> supprimer
</button>
</div>
<div class="title" *ngIf="pollService.timeList.length">
<span class="count-dates">
{{ pollService.timeList.length }}
</span>
<span class="count-dates-txt">
{{ 'dates.count_time' | translate }}
(pour chaque jour)
</span>
</div>
<button class="is-primary button" (click)="applyTimeSlicesToDateChoices()">
Appliquer ces créneaux
</button>
</section>
</section>
<div class="section copy-paste">
<div class="actions">
<button
(click)="pollService.removeAllTimes()"
*ngIf="pollService.timeList.length && false == pollService.allowSeveralHours"
class="btn is-warning marged"
id="remove_time_button"
>
<i class="fa fa-trash" aria-hidden="true"></i>
Aucune plage horaire
</button>
<button
(click)="pollService.resetTimes()"
*ngIf="pollService.timeList.length && false == pollService.allowSeveralHours"
class="btn is-warning marged"
id="reset_time_button"
>
<i class="fa fa-refresh" aria-hidden="true"></i>
réinitialiser
</button>
</div>
</div>
</div>
<div class="columns">
<div class="column">
<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/3']">
Précédent
</button>
</div>
<div class="column">
<button
class="btn is-primary is-fullwidth"
[routerLink]="['/administration/step/5']"
[disabled]="!pollService.form.valid"
>
Suivant
</button>
</div>
</div>
</div>