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

<div class="date-selection">
	<!--	<form [formGroup]="form">-->
	<!--	interval-->

	<!--	<section *ngIf="showDateInterval" class="date-interval form-row">-->
	<!--		<button-->
	<!--			(click)="showDateInterval = !showDateInterval"-->
	<!--			[ngClass]="{ active: showDateInterval }"-->
	<!--			class="btn btn&#45;&#45;primary"-->
	<!--			id="toggle_interval_button"-->
	<!--		>-->
	<!--			<i class="fa fa-clock-o" aria-hidden="true"></i>-->
	<!--			{{ 'dates.add_interval' | translate }}-->
	<!--		</button>-->
	<!--		<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&#45;&#45;primary">-->
	<!--			<i class="fa fa-plus" aria-hidden="true"></i>-->
	<!--			{{ 'dates.interval_button' | translate }}-->
	<!--			{{ intervalDays }}-->
	<!--			{{ 'dates.interval_button_dates' | translate }}-->
	<!--		</button>-->
	<!--	</section>-->

	<!--	</form>-->
	<div class="dates-list">
		<div class="title">
			<span class="count-dates">
				{{ timeList.length }}
			</span>
			<span class="count-dates-txt">
				{{ 'dates.count_time' | translate }}
				(pour chaque jour)
			</span>
		</div>
		<div class="actions">
			<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 différentes à chaque jour </span>
			</button>
			<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="'false' === allowSeveralHours"
				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="'false' === allowSeveralHours"
				class="btn btn--warning"
				id="reset_time_button"
			>
				<i class="fa fa-refresh" aria-hidden="true"></i>
				<span>
					réinitialiser
				</span>
			</button>
		</div>

		<!--					<div *ngIf="'false' === allowSeveralHours" class="identical-dates">-->
		<!--						<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">-->
		<!--							<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>-->
		<!--								<label for="timeChoices_{{ id }}">-->
		<!--									<i class="fa fa-clock-o" aria-hidden="true"></i>-->
		<!--								</label>-->
		<!--								<input-->
		<!--									[(ngModel)]="time.literal"-->
		<!--									name="timeChoices_{{ id }}"-->
		<!--									type="text"-->
		<!--									id="timeChoices_{{ id }}"-->
		<!--								/>-->
		<!--								<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">-->
		<!--									<i class="fa fa-times" aria-hidden="true"></i>-->
		<!--								</button>-->
		<!--							</div>-->
		<!--						</div>-->
		<!--					</div>-->
		<hr />
		<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">
				<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="'true' === allowSeveralHours"
						class="btn btn--primary"
					>
						{{ 'dates.add_time' | translate }}
					</button>
					<div *ngIf="'true' === allowSeveralHours" class="several-times">
						<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"
						[selectionMode]="selectionKind"
					></p-calendar>
				</div>
			</div>
		</div>
	</div>
</div>