funky-framadate-front/src/app/features/administration/form/date-select/date-select.component.html

102 lines
2.8 KiB
HTML

<div class="date-selection">
<form [formGroup]="form">
<h2>
{{ 'choices.title' | translate }}
</h2>
{{ 'dates.add' | translate }}
<!-- interval-->
<!-- <app-date-interval></app-date-interval>-->
</form>
<div class="dates-list">
<!-- différentes horaires-->
<div class="different-hours" *ngIf="displaySeveralHoursChoice">
<button
class="btn"
[class.is-primary]="form.value.hasSeveralHours"
(click)="form.patchValue({ hasSeveralHours: !form.value.hasSeveralHours })"
>
<i class="fa fa-check-square-o" *ngIf="form.value.hasSeveralHours"></i>
<i class="fa fa-square-o" *ngIf="!form.value.hasSeveralHours"></i>
<span> horaires avancées</span>
<i class="fa fa-clock-o"></i>
</button>
<div class="is-info notification">
<span *ngIf="form.value.hasSeveralHours">
Chaque jour aura ses plages de temps personnalisées
</span>
<span *ngIf="!form.value.hasSeveralHours">
Tous les jours auront les mêmes plages de temps
</span>
</div>
<div class="actions columns">
<div class="column has-text-right">
<button
(click)="addTime()"
*ngIf="!form.value.hasSeveralHours"
class="btn btn--primary"
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.hasSeveralHours"
class="btn btn--warning"
id="remove_time_button"
>
<i class="fa fa-trash" aria-hidden="true"></i>
<span>
Aucune plage horaire
</span>
</button>
<button
(click)="resetTimes()"
*ngIf="form.value.hasSeveralHours"
class="btn btn--warning"
id="reset_time_button"
>
<i class="fa fa-refresh" aria-hidden="true"></i>
<span>
réinitialiser
</span>
</button>
<fieldset class="range-container is-boxed">
<div class="range-time" *ngIf="!form.value.hasSeveralHours">
<h2>
<span class="count-dates-txt">
{{ 'dates.count_time' | translate }}
</span>
</h2>
<div class="title">
<span class="count-dates">
{{ timeSlices.length }}
</span>
<button class="button is-warning" (click)="removeAllTimes()">
<i class="fa fa-trash"></i>
</button>
<button class="button is-info" (click)="resetTimes()">
<i class="fa fa-refresh"></i>
</button>
</div>
</div>
<app-time-list [timeSlices]="timeSlices"></app-time-list>
</fieldset>
</div>
</div>
</div>
<hr />
<div class="main-box is-boxed">
<app-day-list
[form]="form"
[dateList]="dateList"
[hasSeveralHours]="form.value.hasSeveralHours"
></app-day-list>
</div>
</div>
</div>