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

<div class="min-height">
	<app-stepper [step_current]="3" [step_max]="5"></app-stepper>

	<!--			choix spécialement pour les dates-->
	<div class="dates-list">
		<div class="title">
			<span class="count-dates">
				{{ pollService.timeList.length }}
			</span>
			<span class="count-dates-txt">
				{{ 'dates.count_time' | translate }}
				(pour chaque jour)
			</span>
		</div>
		<div class="actions">
			<button
				(click)="pollService.addTime()"
				*ngIf="'false' === pollService.allowSeveralHours"
				class="btn btn--primary"
				id="add_time_button"
			>
				<i class="fa fa-plus" aria-hidden="true"></i>
				{{ 'dates.add_time' | translate }}
			</button>
			<button
				(click)="pollService.removeAllTimes()"
				*ngIf="'false' === pollService.allowSeveralHours"
				class="btn btn--warning"
				id="remove_time_button"
			>
				<i class="fa fa-trash" aria-hidden="true"></i>
				Aucune plage horaire
			</button>
			<button
				(click)="pollService.resetTimes()"
				*ngIf="'false' === pollService.allowSeveralHours"
				class="btn btn--warning"
				id="reset_time_button"
			>
				<i class="fa fa-refresh" aria-hidden="true"></i>
				réinitialiser
			</button>
		</div>

		<div *ngIf="'false' === pollService.allowSeveralHours" class="identical-dates">
			<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
				<div *ngFor="let time of pollService.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 />
		<span class="count-dates title">
			{{ pollService.dateList.length }}
		</span>
		<span>
			{{ 'dates.count_dates' | translate }}
		</span>
		<button class="btn btn--primary" (click)="pollService.addChoice()">
			{{ 'dates.add' | translate }}
		</button>
		<div *ngFor="let choice of pollService.dateList; index as id" class="date-choice">
			<input
				[(ngModel)]="choice.date_object"
				name="dateChoices_{{ id }}"
				id="dateChoices_{{ id }}"
				useValueAsDate
				type="date"
			/>
			<button (click)="pollService.dateList.splice(id, 1)" class="btn btn-warning">
				<i class="fa fa-times" aria-hidden="true"></i>
			</button>
			<button
				(click)="pollService.addTimeToDate(choice, id)"
				*ngIf="'true' === pollService.allowSeveralHours"
				class="btn btn--primary"
			>
				{{ 'dates.add_time' | translate }}
			</button>
			<div *ngIf="'true' === pollService.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>

	<button
		(click)="pollService.showDateInterval = !pollService.showDateInterval"
		[ngClass]="{ active: pollService.showDateInterval }"
		class="btn btn--primary"
		id="toggle_interval_button"
	>
		<i class="fa fa-clock-o" aria-hidden="true"></i>
		{{ 'dates.add_interval' | translate }}
	</button>
	<section *ngIf="pollService.showDateInterval" class="date-interval form-row">
		<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)="pollService.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)="pollService.addIntervalOfDates()" class="btn btn-block btn--primary">
			<i class="fa fa-plus" aria-hidden="true"></i>
			{{ 'dates.interval_button' | translate }}
			{{ pollService.intervalDays }}
			{{ 'dates.interval_button_dates' | translate }}
		</button>
	</section>
</div>
<div class="columns">
	<div class="column">
		<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/2']">
			précédent
		</button>
	</div>
	<div class="column">
		<!--				[disabled]="form.invalid"-->
		<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/4']">
			suivant
		</button>
	</div>
</div>