From d3042b3723839f6b4710b77024f0f0fb10a87455 Mon Sep 17 00:00:00 2001
From: tykayn <15d65f2f-0b14-4f70-bf34-e130180ed62b@users.tedomum.net>
Date: Fri, 6 Nov 2020 12:04:38 +0100
Subject: [PATCH] togglable advanced options

---
 .../core/components/home/home.component.html  |  13 +
 .../administration/form/form.component.html   | 269 +++++++++---------
 .../administration/form/form.component.scss   |   9 +
 .../administration/form/form.component.ts     |  26 +-
 src/assets/i18n/EN.json                       |   1 +
 src/assets/i18n/FR.json                       |   1 +
 src/styles/partials/_navigation.scss          |   6 +-
 7 files changed, 184 insertions(+), 141 deletions(-)

diff --git a/src/app/core/components/home/home.component.html b/src/app/core/components/home/home.component.html
index 90baee32..e8e5c42e 100644
--- a/src/app/core/components/home/home.component.html
+++ b/src/app/core/components/home/home.component.html
@@ -33,6 +33,19 @@
 					<img src="assets/img/kind/classic.jpeg" alt="sondage date" />
 				</div>
 			</div>
+			<div class="column">
+				Prise en main Framadate est un service en ligne permettant de planifier un rendez-vous ou prendre des
+				décisions rapidement et simplement. Aucune inscription préalable n’est nécessaire. Voici comment ça
+				fonctionne : Créez un sondage Déterminez les dates ou les sujets à choisir Envoyez le lien du sondage à
+				vos amis ou collègues Discutez et prenez votre décision Voulez-vous voir un exemple ? Le logiciel
+				Framadate est initialement basé sur Studs un logiciel développé par l'Université de Strasbourg.
+				Aujourd'hui, son développement est assuré par l’association Framasoft. Ce logiciel requiert l’activation
+				du JavaScript et des cookies. Il est compatible avec les navigateurs web suivants : Microsoft Internet
+				Explorer 9+ Google Chrome 19+ Firefox 12+ Safari 5+ Opera 11+ Il est régi par la licence CeCILL-B.
+				Cultivez votre jardin Pour participer au développement du logiciel, proposer des améliorations ou
+				simplement le télécharger, rendez-vous sur le site de développement. Si vous souhaitez installer ce
+				logiciel pour votre propre usage et ainsi gagner en autonomie, nous vous aidons sur :
+			</div>
 		</div>
 	</div>
 </section>
diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html
index 759d1492..8c76d5ae 100644
--- a/src/app/features/administration/form/form.component.html
+++ b/src/app/features/administration/form/form.component.html
@@ -13,25 +13,27 @@
 			<span class="pre-selector">
 				{{ 'creation.want' | translate }}
 			</span>
-			<div class="kind-of-poll">
-				<h1 class="title is-1">
-					<i class="fa fa-calendar" aria-hidden="true"></i> {{ 'dates.title' | translate }}
-				</h1>
-				<button
-					class="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>
-				<button
-					[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 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>
@@ -60,8 +62,22 @@
 			</button>
 		</div>
 
+		<fieldset class="date-kind">
+			<!--			choix spécialement pour les dates-->
+		</fieldset>
 		<div class="form-field">
-			<h2>Choix de réponse</h2>
+			<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">
@@ -81,18 +97,18 @@
 				<span *ngFor="let choice of choices.controls; let i = index">
 					<div class="form-row" [formGroup]="choice">
 						<div class="columns">
-							<div class="column">{{ i * 1 + 1 }})</div>
-							<div class="column">
-								<label for="label" class="hidden">label</label>
-								<input formControlName="label" id="label" placeholder="Enter a choice description" />
-								<br />
-								<label for="imageUrl" class="imageUrl">image Url</label>
-								<input formControlName="imageUrl" id="imageUrl" placeholder="URL de l' image" />
-							</div>
 							<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="label" class="hidden">label</label>
+								<input formControlName="label" id="label" placeholder="Enter a choice description" />
+								<br />
+								<label for="imageUrl" class="hidden">image Url</label>
+								<input formControlName="imageUrl" id="imageUrl" placeholder="URL de l' image" />
 							</div>
 						</div>
 					</div>
@@ -101,7 +117,17 @@
 		</div>
 
 		<div>
-			<label class="hidden" for="creatorEmail">creator email</label>
+			<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
@@ -111,116 +137,103 @@
 				required
 			/>
 		</div>
-		<div>
-			<label class="hidden" for="selector">kind</label>
-			<select formControlName="isAboutDate" id="selector">
-				<option value="true" name="polltype_date">
-					{{ 'creation.kind.date' | translate }}
-				</option>
-				<option value="false" name="polltype_classic">
-					{{ 'creation.kind.classic' | translate }}
-				</option>
-			</select>
-		</div>
 
 		<br />
-
-		<hr />
-		<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 class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
+			<i class="fa fa-save"></i>
+			{{ 'creation.advanced' | translate }}
 		</button>
+		<hr />
 
-		<label for="slug"
-			>Url pour les participants
-
+		<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="slug.value"
+				*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 = ''"
-			>
-				<i class="fa fa-close"></i>
-			</button>
-		</label>
-		<br />
-		<span
-			>{{ urlPrefix }}
-			<strong>
-				{{ slug.value }}
-			</strong>
-		</span>
-		<input #slug matInput id="slug" placeholder="Url" formControlName="slug" required />
-		<br />
-		<h2>Version complète du formulaire</h2>
-		<div appearance="outline" class="is-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-flex" formControlName="areResultsPublic">
-			Les participants pourront consulter les résultats
-		</mat-checkbox>
-		<mat-checkbox class="is-flex" formControlName="isAboutDate">
-			Les choix possibles concerneront des dates
-		</mat-checkbox>
-		<mat-checkbox class="is-flex" formControlName="isProtectedByPassword">
-			Le sondage sera protégé par un mot de passe
-		</mat-checkbox>
-		<mat-checkbox class="is-flex" formControlName="isOwnerNotifiedByEmailOnNewVote">
-			Vous recevrez un mail à chaque nouvelle participation
-		</mat-checkbox>
-		<mat-checkbox class="is-flex" formControlName="isOwnerNotifiedByEmailOnNewComment">
-			Vous recevrez un mail à chaque nouveau commentaire
-		</mat-checkbox>
-		<mat-checkbox class="is-flex" formControlName="isMaybeAnswerAvailable">
-			La réponse « peut-être » sera disponible
-		</mat-checkbox>
-
-		<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
-			<i class="fa fa-save"></i>
-			Options avancées
-		</button>
-		<div class="columns">
-			<div class="column">
-				<span class="complete well" *ngIf="advancedDisplayEnabled">
-					version longue du formulaire activée
-				</span>
+			></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>
diff --git a/src/app/features/administration/form/form.component.scss b/src/app/features/administration/form/form.component.scss
index 7c8963bc..460083a2 100644
--- a/src/app/features/administration/form/form.component.scss
+++ b/src/app/features/administration/form/form.component.scss
@@ -13,9 +13,18 @@
 	}
 	.form-row {
 		margin-top: 0.5em;
+		margin-bottom: 0.25em;
+		border: solid 1px #ddd;
 		border-left: solid 3px $primary_color;
 		padding-left: 1em;
+		padding-top: 0.5em;
+		padding-bottom: 0.5em;
 	}
 	.fa {
+		margin-right: 1ch;
+		&.fa-times,
+		&.fa-trash {
+			margin-right: 0;
+		}
 	}
 }
diff --git a/src/app/features/administration/form/form.component.ts b/src/app/features/administration/form/form.component.ts
index 860e6c41..b5217e7e 100644
--- a/src/app/features/administration/form/form.component.ts
+++ b/src/app/features/administration/form/form.component.ts
@@ -34,23 +34,23 @@ export class FormComponent implements OnInit {
 	public createPoll(): void {
 		if (this.form.valid && this.form.valid) {
 			console.log('Le sondage est correctement rempli, prêt à enregistrer.');
-			let newpoll = this.pollService.newPollFromForm(this.form);
+			const newpoll = this.pollService.newPollFromForm(this.form);
 			// TODO : save the poll
 			this.apiService.createPoll(newpoll);
 		}
 	}
 
-	public updateSlug() {
-		let newValueFormatted = 'TODO';
+	public updateSlug(): void {
+		const newValueFormatted = 'TODO';
 		this.form.patchValue({ slug: newValueFormatted });
 	}
 
-	get choices() {
+	get choices(): FormArray {
 		return this.form.get('choices') as FormArray;
 	}
 
-	addChoice(optionalLabel: string = '') {
-		let newControlGroup = this.fb.group({
+	addChoice(optionalLabel = ''): void {
+		const newControlGroup = this.fb.group({
 			label: this.fb.control('', [Validators.required]),
 			imageUrl: ['', [Validators.required]],
 		});
@@ -63,17 +63,17 @@ export class FormComponent implements OnInit {
 		this.choices.push(newControlGroup);
 	}
 
-	deleteChoiceField(index: number) {
+	deleteChoiceField(index: number): void {
 		if (this.choices.length !== 1) {
 			this.choices.removeAt(index);
 		}
 	}
 
-	reinitChoices() {
+	reinitChoices(): void {
 		this.choices.setValue([]);
 	}
 
-	initFormDefault() {
+	initFormDefault(): void {
 		this.form = this.fb.group({
 			title: ['', [Validators.required, Validators.minLength(12)]],
 			creatorPseudo: ['', [Validators.required]],
@@ -90,7 +90,10 @@ export class FormComponent implements OnInit {
 			expiracyNumberOfDays: [60, [Validators.required, Validators.min(0)]],
 		});
 		console.log('this.form ', this.form);
+		this.setDemoValues();
+	}
 
+	setDemoValues(): void {
 		this.addChoice('orange');
 		this.addChoice('raisin');
 		this.addChoice('abricot');
@@ -111,8 +114,9 @@ export class FormComponent implements OnInit {
 			expiracyNumberOfDays: 60,
 		});
 	}
-	askInitFormDefault() {
+
+	askInitFormDefault(): void {
 		this.initFormDefault();
-		this.toastService.display('formulaire réinitialisé', 'info');
+		this.toastService.display('formulaire réinitialisé');
 	}
 }
diff --git a/src/assets/i18n/EN.json b/src/assets/i18n/EN.json
index ffe61dfd..44cbe627 100644
--- a/src/assets/i18n/EN.json
+++ b/src/assets/i18n/EN.json
@@ -28,6 +28,7 @@
 	"creation": {
 		"title": "To begin with",
 		"want": "I want to create a poll",
+		"advanced": "More options",
 		"kind": {
 			"classic": "classic",
 			"date": "special dates"
diff --git a/src/assets/i18n/FR.json b/src/assets/i18n/FR.json
index 3091b6d6..89808c4b 100644
--- a/src/assets/i18n/FR.json
+++ b/src/assets/i18n/FR.json
@@ -28,6 +28,7 @@
 	"creation": {
 		"title": "Créer un sondage",
 		"want": "Je veux créer un sondage",
+		"advanced": "Options avancées",
 		"kind": {
 			"classic": "classique",
 			"date": "spécial dates"
diff --git a/src/styles/partials/_navigation.scss b/src/styles/partials/_navigation.scss
index e560f464..91578e93 100644
--- a/src/styles/partials/_navigation.scss
+++ b/src/styles/partials/_navigation.scss
@@ -3,7 +3,6 @@ nav {
 	margin-bottom: 3.2rem;
 	padding-top: 1.6rem;
 	padding-bottom: 1.6rem;
-	border-top: 2px solid $primary;
 	border-bottom: 2px solid $primary;
 
 	a {
@@ -21,7 +20,10 @@ nav {
 		&.active,
 		&.is-active {
 			color: $white;
-			background: $primary_color;
+			background: $primary_color !important;
+			&:hover {
+				background: $dark !important;
+			}
 		}
 	}
 }