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

<div class="date-selection">
	<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>
			</div>
			<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>
			</div>
			<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>
	<div class="dates-list">
		<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>
		<fieldset class="range-container is-boxed">
			<div class="actions columns">
				<div class="column"></div>
				<div class="column has-text-right">
					<button
						(click)="addTime()"
						*ngIf="!form.value.configuration.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.configuration.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.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>
			<div class="range-time" *ngIf="!form.value.configuration.hasSeveralHours">
				<h2>
					<span class="count-dates-txt">
						{{ 'dates.count_time' | translate }}
						(identique pour chaque jour)
					</span>
				</h2>
				<div class="title">
					<span class="count-dates">
						{{ timeList.length }}
					</span>
				</div>
				<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>
						</div>
					</div>
				</div>
			</div>
		</fieldset>

		<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">
					<!--					TODO lier au formulaire les valeurs des dates-->
					<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"
							[monthNavigator]="true"
							[selectionMode]="selectionKind"
						></p-calendar>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>