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

<div class="admin-form">
	<h1>
		{{ 'creation.title' | translate }}
	</h1>

	<img src="assets/img/undraw_Moving_twwf.svg" alt="image WIP" />
	<button class="btn btn--warning" (click)="askInitFormDefault()">
		<i class="fa fa-refresh"></i>
		Tout réinitialiser
	</button>
	<button class="btn is-success" (click)="createPoll()">
		<i class="fa fa-save"></i>
		Enregistrer le sondage
	</button>
	<button class="btn is-default" (click)="automaticSlug()">
		<i class="fa fa-save"></i>
		Slug automatique
	</button>

	<div class="well">
		{{ poll.slug }}
	</div>
	<div class="bg-danger" *ngIf="!form.valid">
		le formulaire est invalide
	</div>
	<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
				(click)="addTime()"
				*ngIf="'false' === 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)="removeAllTimes()"
				*ngIf="'false' === allowSeveralHours"
				class="btn btn--warning"
				id="remove_time_button"
			>
				<i class="fa fa-trash" aria-hidden="true"></i>
				Aucune plage horaire
			</button>
			<button
				(click)="resetTimes()"
				*ngIf="'false' === 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' === allowSeveralHours" class="identical-dates">
			<div *ngFor="let time of timeList; index as id" class="time-choice">
				<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>
		<hr />
		<span class="count-dates title">
			{{ dateList.length }}
		</span>
		<span>
			{{ 'dates.count_dates' | translate }}
		</span>
		<button class="btn btn--primary" (click)="addChoice()">
			{{ 'dates.add' | translate }}
		</button>
		<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>
	<hr />

	<form [formGroup]="form">
		<div class="form-field">
			<span class="pre-selector">
				{{ 'creation.want' | translate }}
			</span>
			<div class="kind-of-poll columns">
				<div class="column">
					<button
						class="btn-block btn"
						[ngClass]="{ 'is-primary': form.controls.isAboutDate.value }"
						(click)="form.controls.isAboutDate.setValue(true)"
					>
						<i class="fa fa-calendar"></i>
						{{ 'creation.kind.date' | translate }}
					</button>
				</div>
				<div class="column">
					<button
						class="btn-block btn btn-default"
						[ngClass]="{ 'is-primary': !form.controls.isAboutDate.value }"
						(click)="form.controls.isAboutDate.setValue(false)"
					>
						<i class="fa fa-stats"></i>
						{{ 'creation.kind.classic' | translate }}
					</button>
				</div>
			</div>

			<span>
				{{ 'creation.choose_title' | translate }}
			</span>
			<label class="hidden" for="title">Titre</label>
			<input
				#title
				matInput
				[placeholder]="'creation.choose_title_placeholder' | translate"
				formControlName="title"
				id="title"
				autofocus="autofocus"
				(change)="updateSlug()"
				required
			/>
			<button
				mat-button
				*ngIf="title.value"
				matSuffix
				mat-icon-button
				aria-label="Clear"
				(click)="title.value = ''"
			>
				<i class="fa fa-close"></i>
			</button>
		</div>

		<fieldset class="date-kind">
			<!--			choix spécialement pour les dates-->
		</fieldset>

		<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>
			{{ 'dates.add_interval' | translate }}
		</button>
		<section *ngIf="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)="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>
			<hr />
		</section>

		<div class="form-field">
			<h2>
				{{ 'choices.title' | translate }}
			</h2>
			{{ 'dates.add' | translate }}
			<p>
				<i>
					{{ 'choices.helper' | translate }}
				</i>
			</p>
			{{ 'choices.answer_preset_1' | translate }}
			{{ 'choices.add' | translate }}
			{{ 'choices.continue' | translate }}
			<span>
				<span class="columns">
					<span class="column">
						<button class="btn is-primary" (click)="addChoice()">
							<i class="fa fa-plus"></i>
							Ajouter un choix
						</button>
					</span>
					<span class="column pull-right">
						<button class="btn is-warning" (click)="reinitChoices()">
							<i class="fa fa-recycle"></i>
							Réinitialiser
						</button>
					</span>
				</span>

				<p class="hint">
					{{ 'creation.choices_hint' | translate }}
				</p>
				<span *ngFor="let choice of choices.controls; let i = index">
					<div class="form-row" [formGroup]="choice">
						<div class="columns">
							<div class="column">
								<button class="btn btn-warning" (click)="deleteChoiceField(i)">
									<i class="fa fa-times"></i>
								</button>
								{{ i * 1 + 1 }})
							</div>
							<div class="column">
								<label [for]="'choice_label_' + i" class="hidden">label</label>
								<input
									formControlName="label"
									[id]="'choice_label_' + i"
									placeholder="Enter a choice description"
									(keyup)="keyOnChoice($event, i)"
									(keyup.backspace)="deleteChoiceField(i)"
								/>
								<br />
								<label [for]="'image_url_' + i" class="hidden">image Url</label>
								<input
									formControlName="imageUrl"
									[id]="'image_url_' + i"
									placeholder="URL de l' image"
									(keyup)="keyOnChoice($event, i)"
									(keyup.backspace)="deleteChoiceField(i)"
								/>
							</div>
						</div>
					</div>
				</span>
			</span>
		</div>

		<div>
			<label class="" for="creatorEmail">
				<span>
					{{ 'creation.name' | translate }}
				</span>
			</label>
			<label class="hidden" for="creatorPseudo">
				<span>
					{{ 'creation.email' | translate }}
				</span>
			</label>
			<input #title matInput placeholder="pseudo" formControlName="creatorPseudo" id="creatorPseudo" required />
			<input
				#title
				matInput
				placeholder="mon-email@example.com"
				formControlName="creatorEmail"
				id="creatorEmail"
				required
			/>
		</div>

		<br />
		<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
			<i class="fa fa-save"></i>
			{{ 'creation.advanced' | translate }}
		</button>
		<hr />

		<fieldset class="complete well" *ngIf="advancedDisplayEnabled">
			<h2>{{ 'creation.advanced' | translate }}</h2>
			<label for="descr">Description (optionnel)</label>
			<textarea
				#description
				matInput
				id="descr"
				placeholder="Description"
				formControlName="description"
				required
			></textarea>
			<button
				mat-button
				*ngIf="description.value"
				matSuffix
				mat-icon-button
				aria-label="Clear"
				(click)="description.value = ''"
			>
				<i class="fa fa-close"></i>
			</button>

			<br />

			<label for="slug"
				>Url pour les participants

				<i class="fa fa-close"></i>
			</label>
			<br />
			<span
				>{{ urlPrefix }}
				<strong>
					{{ form.controls.slug.value }}
				</strong>
			</span>
			<button
				mat-button
				*ngIf="form.controls.slug.value"
				matSuffix
				mat-icon-button
				aria-label="Clear"
				(click)="slug.value = ''"
			></button>
			<input #slug matInput id="slug" placeholder="Url" formControlName="slug" required />
			<br />
			<div appearance="outline" class="is-not-flex">
				<mat-label>Nombre de jours avant expiration</mat-label>
				<input
					#expiracy
					id="expiracy"
					matInput
					type="number"
					placeholder="Nombre de jours avant expiration"
					formControlName="expiracyNumberOfDays"
					required
				/>
				<button
					mat-button
					*ngIf="expiracy.value"
					matSuffix
					mat-icon-button
					aria-label="Clear"
					(click)="expiracy.value = ''"
				>
					<i class="fa fa-close"></i>
				</button>
			</div>
			<mat-checkbox class="is-not-flex" formControlName="areResultsPublic">
				Les participants pourront consulter les résultats
			</mat-checkbox>
			<mat-checkbox class="is-not-flex" formControlName="isAboutDate">
				Les choix possibles concerneront des dates
			</mat-checkbox>
			<mat-checkbox class="is-not-flex" formControlName="isProtectedByPassword">
				Le sondage sera protégé par un mot de passe
			</mat-checkbox>
			<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewVote">
				Vous recevrez un mail à chaque nouvelle participation
			</mat-checkbox>
			<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewComment">
				Vous recevrez un mail à chaque nouveau commentaire
			</mat-checkbox>
			<mat-checkbox class="is-not-flex" formControlName="isMaybeAnswerAvailable">
				La réponse « peut-être » sera disponible
			</mat-checkbox>
		</fieldset>
		<div class="columns">
			<div class="column"></div>
			<div class="column">
				<button class="btn is-success" (click)="createPoll()" [disabled]="!form.valid || !form.valid">
					<i class="fa fa-save"></i>
					Enregistrer le sondage
				</button>
			</div>
		</div>
	</form>
</div>