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

<div class="date-selection">
	<form [formGroup]="form">
		<h2>
			{{ 'choices.title' | translate }}
		</h2>
		{{ 'dates.add' | translate }}

		<!--	interval-->
		<app-date-interval [form]="form"></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>
				<i class="fa fa-clock-o"></i>
				<span> horaires avancées</span>
			</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" *ngIf="!form.value.hasSeveralHours">
						<div class="range-time">
							<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>
							<app-time-list [timeSlices]="timeSlices"></app-time-list>
						</div>
					</fieldset>
				</div>
			</div>
		</div>

		<hr />
		<div class="main-box is-boxed">
			<h2>Dates</h2>
			<button class="btn button-help" mat-raised-button (click)="openSimple()">
				💁 Raccourcis
			</button>
			<app-shortcuts-help *ngIf="display"></app-shortcuts-help>
			<br />
			<br />
			<app-day-list
				[form]="form"
				[dateChoices]="dateChoices"
				[hasSeveralHours]="form.value.hasSeveralHours"
			></app-day-list>
		</div>
	</div>
</div>