framadate-responsive/src/app/pages/dates/dates.component.html

<h1 class="title is-1"><i class="fa fa-calendar"></i> {{ 'dates.title' | translate }}</h1>

<div>
	<label for="multi_hours">
		<span>
			{{ 'dates.hours_different' | translate }}
		</span>
		<select [(ngModel)]="config.allowSeveralHours" id="multi_hours" name="multi_hours">
			<option value="true">{{ 'dates.multiple.different' | translate }}</option>
			<option value="false">{{ 'dates.multiple.identical' | translate }}</option>
		</select>
		<span i18n>
			{{ 'dates.hours_each_day' | translate }}
		</span>
	</label>
</div>

<button (click)="addDate()" class="btn btn--primary" id="add_date_button">
	<i class="fa fa-plus"></i>
	{{ 'dates.add' | translate }}
</button>
<button
	(click)="showDateInterval = !showDateInterval"
	[ngClass]="{ active: showDateInterval }"
	class="btn btn--primary"
	id="toggle_interval_button"
>
	<i class="fa fa-clock-o"></i>
	{{ 'dates.add_interval' | translate }}
</button>

<button (click)="emptyAll()" class="btn btn--warning" id="empty_button">
	<i class="fa fa-trash"></i>
	{{ 'dates.empty' | translate }}
</button>
<section *ngIf="showDateInterval" class="date-interval">
	<!--    TODO à mettre en popup-->
	<hr />
	<h2>{{ 'dates.add_interval' | translate }}</h2>
	<p>
		{{ 'dates.interval_propose' | translate }}
		<input (change)="countDays()" [(ngModel)]="startDateInterval" type="date" />
		{{ 'dates.interval_span' | translate }}
		<input (change)="countDays()" [(ngModel)]="endDateInterval" type="date" />
		<br />
	</p>
	<button (click)="addIntervalOfDates()" class="btn btn-block btn--primary">
		<i class="fa fa-plus"></i>
		{{ 'dates.interval_button' | translate }}
		{{ intervalDays }}
		{{ 'dates.interval_button_dates' | translate }}
	</button>
	<hr />
</section>
<div class="columns">
	<div class="column">
		<div class="dates-list">
			<div class="title">
				<span class="count-dates">
					{{ config.timeList.length }}
				</span>
				<span class="count-dates-txt">
					{{ 'dates.count_time' | translate }}
					(pour chaque jour)
				</span>
			</div>
			<div class="actions">
				<button
					(click)="addTime()"
					*ngIf="'false' === config.allowSeveralHours"
					class="btn btn--primary"
					id="add_time_button"
				>
					<i class="fa fa-plus"></i>
					{{ 'dates.add_time' | translate }}
				</button>
				<button
					(click)="removeAllTimes()"
					*ngIf="'false' === config.allowSeveralHours"
					class="btn btn--warning"
					id="remove_time_button"
				>
					<i class="fa fa-trash"></i>
					Aucune plage horaire
				</button>
				<button
					(click)="resetTimes()"
					*ngIf="'false' === config.allowSeveralHours"
					class="btn btn--warning"
					id="reset_time_button"
				>
					<i class="fa fa-refresh"></i>
					réinitialiser
				</button>
			</div>

			<div *ngIf="'false' === config.allowSeveralHours" class="identical-dates">
				<div *ngFor="let time of config.timeList; index as id" class="time-choice">
					<label for="timeChoices_{{ id }}">
						<i class="fa fa-clock-o"></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"></i>
					</button>
				</div>
			</div>
			<hr />
			<span class="count-dates title">
				{{ config.dateList.length }}
			</span>
			<span>
				{{ 'dates.count_dates' | translate }}
			</span>
			<button class="btn btn--primary" (click)="addDate()">
				{{ 'dates.add' | translate }}
			</button>
			<div *ngFor="let choice of config.dateList; index as id" class="date-choice">
				{{ id }})
				<input
					[(ngModel)]="choice.date_object"
					name="dateChoices_{{ id }}"
					id="dateChoices_{{ id }}"
					useValueAsDate
					type="date"
				/>
				<button (click)="config.dateList.splice(id, 1)" class="btn btn-warning">
					<i class="fa fa-times"></i>
				</button>
				<button
					(click)="addTimeToDate(choice, id)"
					*ngIf="'true' === config.allowSeveralHours"
					class="btn btn--primary"
				>
					{{ 'dates.add_time' | translate }}
				</button>
				<div *ngIf="'true' === config.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"></i>
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="column">
		<framadate-resume></framadate-resume>
	</div>
</div>

<a [routerLink]="'/step/resume'" class="btn btn--full btn--primary">
	C'est parfait!
</a>
<a [routerLink]="'/step/home'" class="prev">
	Retour
</a>