docker: set up a configuration for development

.editorconfig

@@ -11,3 +11,6 @@ trim_trailing_whitespace = true
 [*.md]
 max_line_length = off
 trim_trailing_whitespace = false
+
+[*.yaml]
+indent_style = space

compose.yaml

@@ -0,0 +1,13 @@
+services:
+  date-front:
+    image: node:lts-slim
+    entrypoint:
+      - "bash"
+      - "docker/dev/entrypoint.sh"
+    volumes:
+      - '.:/var/www/html/funky-framadate-front'
+    working_dir: '/var/www/html/funky-framadate-front'
+    environment:
+      - "NODE_OPTIONS=--openssl-legacy-provider"
+    ports:
+      - "4200:4200"

docker/dev/entrypoint.sh

@@ -0,0 +1,2 @@
+yarn install --pure-lockfile
+yarn start_docker

package.json

@@ -8,6 +8,7 @@
 	"scripts": {
 		"ng": "ng",
 		"start": "ng serve",
+		"start_docker": "ng serve --host 0.0.0.0",
 		"build:prod": "ng build --prod",
 		"build:prod:stats": "ng build --prod --stats-json",
 		"build:prod:gitlabpage": "ng build --prod --baseHref=/framadate/funky-framadate-front/",
@@ -130,5 +131,8 @@
 			"^.+\\.(ts|html)$": "ts-jest",
 			"^.+\\.jsx?$": "babel-jest"
 		}
+	},
+	"browser": {
+    "crypto": false
 	}
 }

src/app/features/administration/dev-menu/dev-menu.component.html

@@ -0,0 +1,14 @@
+<mat-sidenav-container (backdropClick)="sidenav.toggle()">
+	<mat-sidenav #sidenav mode="side">
+		<app-navigation></app-navigation>
+	</mat-sidenav>
+
+	<mat-sidenav-content> </mat-sidenav-content>
+
+	<hr />
+	<div *ngIf="devModeEnabled">
+		<br />
+		<mat-slide-toggle (change)="sidenav.toggle()" label="dev menu"></mat-slide-toggle>
+		menu développeur
+	</div>
+</mat-sidenav-container>

src/app/features/administration/dev-menu/dev-menu.component.spec.ts

@@ -1,19 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NamingComponent } from './naming.component';
+import { DevMenuComponent } from './dev-menu.component';
 
-describe('NamingComponent', () => {
-	let component: NamingComponent;
-	let fixture: ComponentFixture<NamingComponent>;
+describe('DevMenuComponent', () => {
+	let component: DevMenuComponent;
+	let fixture: ComponentFixture<DevMenuComponent>;
 
 	beforeEach(async(() => {
 		TestBed.configureTestingModule({
-			declarations: [NamingComponent],
+			declarations: [DevMenuComponent],
 		}).compileComponents();
 	}));
 
 	beforeEach(() => {
-		fixture = TestBed.createComponent(NamingComponent);
+		fixture = TestBed.createComponent(DevMenuComponent);
 		component = fixture.componentInstance;
 		fixture.detectChanges();
 	});

src/app/features/administration/dev-menu/dev-menu.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-dev-menu',
+	templateUrl: './dev-menu.component.html',
+	styleUrls: ['./dev-menu.component.scss'],
+})
+export class DevMenuComponent implements OnInit {
+	devModeEnabled: boolean = false;
+
+	constructor() {}
+
+	ngOnInit(): void {}
+}

src/app/features/administration/form/classic-choices/classic-choices.component.html

@@ -0,0 +1,67 @@
+<div class="form-field">
+	<!--			Choisir les propositions -->
+	<!--			sondage classique texte -->
+	<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>

src/app/features/administration/form/classic-choices/classic-choices.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ClassicChoicesComponent } from './classic-choices.component';
+
+describe('ClassicChoicesComponent', () => {
+	let component: ClassicChoicesComponent;
+	let fixture: ComponentFixture<ClassicChoicesComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [ClassicChoicesComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(ClassicChoicesComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/features/administration/form/classic-choices/classic-choices.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-classic-choices',
+	templateUrl: './classic-choices.component.html',
+	styleUrls: ['./classic-choices.component.scss'],
+})
+export class ClassicChoicesComponent implements OnInit {
+	constructor() {}
+
+	ngOnInit(): void {}
+}

src/app/features/administration/form/date-views/date-views.component.html

@@ -0,0 +1,76 @@
+<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>
+<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>

src/app/features/administration/form/date-views/date-views.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DateViewsComponent } from './date-views.component';
+
+describe('DateViewsComponent', () => {
+	let component: DateViewsComponent;
+	let fixture: ComponentFixture<DateViewsComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [DateViewsComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(DateViewsComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/features/administration/form/date-views/date-views.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+import { PollService } from '../../../../core/services/poll.service';
+
+@Component({
+	selector: 'app-date-views',
+	templateUrl: './date-views.component.html',
+	styleUrls: ['./date-views.component.scss'],
+})
+export class DateViewsComponent implements OnInit {
+	constructor(public pollService: PollService) {}
+
+	ngOnInit(): void {}
+}

src/app/features/administration/form/step-five/step-five.component.html

@@ -0,0 +1,34 @@
+<app-stepper [step_current]="5" [step_max]="5"></app-stepper>
+<div class="columns">
+	<div class="column"></div>
+	<div class="column">
+		<button class="btn is-primary" (click)="createPoll()" [disabled]="!form.valid || !form.valid">
+			<i class="fa fa-save"></i>
+			Enregistrer le sondage
+		</button>
+	</div>
+</div>
+
+<section class="supplement">
+	<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.custom_url }}
+	</div>
+	<div class="has-background-danger" *ngIf="!form.valid">
+		le formulaire est invalide
+		<pre>  {{ form.errors | json }}</pre>
+	</div>
+</section>

src/app/features/administration/form/step-five/step-five.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StepFiveComponent } from './step-five.component';
+
+describe('StepFiveComponent', () => {
+	let component: StepFiveComponent;
+	let fixture: ComponentFixture<StepFiveComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [StepFiveComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(StepFiveComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/features/administration/form/step-five/step-five.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+@Component({
+	selector: 'app-step-five',
+	templateUrl: './step-five.component.html',
+	styleUrls: ['./step-five.component.scss'],
+})
+export class StepFiveComponent implements OnInit {
+	@Input() step_max: any;
+	@Input() public form: FormGroup;
+	poll: any;
+	constructor() {}
+	ngOnInit(): void {}
+
+	askInitFormDefault() {}
+
+	createPoll() {}
+
+	automaticSlug() {}
+}

src/app/features/administration/form/step-four/step-four.component.html

@@ -0,0 +1,127 @@
+<div class="step">
+	<div class="min-height">
+		<form action="#" [formGroup]="pollService.form">
+			<app-stepper [step_current]="4" [step_max]="5"></app-stepper>
+
+			<div class="creator-infos">
+				<label class="" for="creatorEmail">
+					<span>
+						{{ 'creation.name' | translate }}
+					</span>
+				</label>
+				<input
+					#title
+					matInput
+					placeholder="pseudo"
+					formControlName="creatorPseudo"
+					id="creatorPseudo"
+					required
+				/>
+				<label class="hidden" for="creatorPseudo">
+					<span>
+						{{ 'creation.email' | translate }}
+					</span>
+				</label>
+				<input
+					#title
+					matInput
+					placeholder="mon-email@example.com"
+					formControlName="creatorEmail"
+					id="creatorEmail"
+					required
+				/>
+			</div>
+
+			<fieldset class="advanced-config">
+				<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
+					<i class="fa fa-save"></i>
+					{{ 'creation.advanced' | translate }}
+				</button>
+				<fieldset class="complete well" *ngIf="advancedDisplayEnabled">
+					<h2>{{ 'creation.advanced' | translate }}</h2>
+
+					<br />
+
+					<label for="slug">Url pour les participants </label>
+					<br />
+					<span
+						>{{ urlPrefix }} <strong> {{ pollService.form.controls.custom_url.value }} </strong>
+					</span>
+					<app-copy-text
+						[textToCopy]="urlPrefix + pollService.form.controls.custom_url.value"
+					></app-copy-text>
+
+					<button
+						mat-button
+						*ngIf="form.controls.custom_url.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>
+					<br />
+					<mat-checkbox class="is-not-flex" formControlName="areResultsPublic">
+						Les participants pourront consulter les résultats
+					</mat-checkbox>
+					<br />
+					<mat-checkbox class="is-not-flex" formControlName="isAboutDate">
+						Les choix possibles concerneront des dates
+					</mat-checkbox>
+					<br />
+					<mat-checkbox class="is-not-flex" formControlName="isProtectedByPassword">
+						Le sondage sera protégé par un mot de passe
+					</mat-checkbox>
+					<br />
+					<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewVote">
+						Vous recevrez un mail à chaque nouvelle participation
+					</mat-checkbox>
+					<br />
+					<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewComment">
+						Vous recevrez un mail à chaque nouveau commentaire
+					</mat-checkbox>
+					<br />
+					<mat-checkbox class="is-not-flex" formControlName="isMaybeAnswerAvailable">
+						La réponse « peut-être » sera disponible
+					</mat-checkbox>
+				</fieldset>
+			</fieldset>
+		</form>
+	</div>
+	<div class="columns">
+		<div class="column">
+			<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/4']">
+				précédent
+			</button>
+		</div>
+		<div class="column">
+			<!--				[disabled]="form.invalid"-->
+			<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/5']">
+				suivant
+			</button>
+		</div>
+	</div>
+</div>

src/app/features/administration/form/step-four/step-four.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StepFourComponent } from './step-four.component';
+
+describe('StepFourComponent', () => {
+	let component: StepFourComponent;
+	let fixture: ComponentFixture<StepFourComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [StepFourComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(StepFourComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/features/administration/form/step-four/step-four.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { PollService } from '../../../../core/services/poll.service';
+
+@Component({
+	selector: 'app-step-four',
+	templateUrl: './step-four.component.html',
+	styleUrls: ['./step-four.component.scss'],
+})
+export class StepFourComponent implements OnInit {
+	urlPrefix: any;
+	advancedDisplayEnabled: any;
+	@Input()
+	step_max: any;
+	@Input()
+	form: any;
+	constructor(public pollService: PollService) {}
+
+	ngOnInit(): void {}
+}

src/app/features/administration/form/step-one/step-one.component.html

@@ -0,0 +1,91 @@
+<div class="step">
+	<form class="min-height" [formGroup]="pollService.form">
+		<app-stepper [step_current]="1" [step_max]="5"></app-stepper>
+		<section class="poll-title">
+			<h2 class="title is-2">
+				{{ 'creation.choose_title' | translate }}
+			</h2>
+			<div class="columns">
+				<div class="column">
+					<label class="hidden" for="title">Titre</label>
+					<input
+						class="input-lg"
+						#title
+						[placeholder]="'creation.choose_title_placeholder' | translate"
+						formControlName="title"
+						aria-placeholder="Quel resto ce soir ?"
+						placeholder="Quel resto ce soir ?"
+						id="title"
+						autofocus="autofocus"
+						(keyup)="pollService.updateSlug()"
+						(blur)="pollService.updateSlug()"
+						required
+					/>
+				</div>
+				<div class="column is-narrow">
+					<button
+						mat-button
+						*ngIf="title.value"
+						matSuffix
+						mat-icon-button
+						aria-label="Clear"
+						(click)="title.value = ''"
+					>
+						<i class="fa fa-close"></i>
+					</button>
+				</div>
+			</div>
+		</section>
+		<div class="poll-description">
+			<div class="columns">
+				<div class="column">
+					<label for="descr">Description (optionnel)</label>
+					<div class="rich-text-toggle">
+						<label for="richTextMode">mode de saisie avancée</label>
+
+						<mat-checkbox formControlName="richTextMode" id="richTextMode"></mat-checkbox>
+					</div>
+					<div class="rich-toolbar" *ngIf="pollService.form.value.richTextMode">
+						richTextMode activé
+					</div>
+					<textarea
+						class="ui-inputtextarea is-fullwidth is-block"
+						#description
+						matInput
+						id="descr"
+						class="is-large is-full"
+						placeholder="Description"
+						formControlName="description"
+						required
+						maxlength="300"
+					></textarea>
+					<div class="text-info">
+						300 caractères maximum
+					</div>
+				</div>
+				<div class="column is-narrow">
+					<button
+						mat-button
+						*ngIf="description.value"
+						matSuffix
+						mat-icon-button
+						aria-label="Clear"
+						(click)="description.value = ''"
+					>
+						<i class="fa fa-close"></i>
+					</button>
+				</div>
+			</div>
+		</div>
+		slug: {{ pollService.form.value.custom_url }}
+	</form>
+	<div class="columns">
+		<div class="column"></div>
+		<div class="column">
+			<!--				[disabled]="form.invalid"-->
+			<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/2']">
+				suivant
+			</button>
+		</div>
+	</div>
+</div>

src/app/features/administration/form/step-one/step-one.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StepOneComponent } from './step-one.component';
+
+describe('StepOneComponent', () => {
+	let component: StepOneComponent;
+	let fixture: ComponentFixture<StepOneComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [StepOneComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(StepOneComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/features/administration/form/step-one/step-one.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { PollService } from '../../../../core/services/poll.service';
+
+@Component({
+	selector: 'app-step-one',
+	templateUrl: './step-one.component.html',
+	styleUrls: ['./step-one.component.scss'],
+})
+export class StepOneComponent implements OnInit {
+	constructor(public pollService: PollService) {}
+
+	@Input()
+	step_max: any;
+	@Input()
+	form: FormGroup;
+
+	ngOnInit(): void {}
+}

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

@@ -0,0 +1,99 @@
+<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.calendar.length }}
+		</span>
+		<span>
+			{{ 'dates.count_dates' | translate }}
+		</span>
+		<div class="calendar">
+			<p-calendar
+				[(ngModel)]="pollService.calendar"
+				firstDayOfWeek="5"
+				selectionMode="multiple"
+				inputId="multiple"
+				showButtonBar="true"
+				[inline]="true"
+				[showWeek]="true"
+			></p-calendar>
+		</div>
+
+		<!--		<div class="debug">-->
+		<!--		<pre>{{pollService.calendar |json}}</pre>-->
+		<!--		</div>-->
+	</div>
+</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>

src/app/features/administration/form/step-three/step-three.component.scss

@@ -0,0 +1,9 @@
+@import '../../../../../styles/variables';
+
+.ui-datepicker table td.ui-datepicker-today > a.ui-state-active,
+.ui-datepicker table td.ui-datepicker-today > span.ui-state-active {
+	background-color: $primary-color !important;
+}
+.calendar {
+	margin-top: 1em;
+}

src/app/features/administration/form/step-three/step-three.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StepThreeComponent } from './step-three.component';
+
+describe('StepThreeComponent', () => {
+	let component: StepThreeComponent;
+	let fixture: ComponentFixture<StepThreeComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [StepThreeComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(StepThreeComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/features/administration/form/step-three/step-three.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { PollService } from '../../../../core/services/poll.service';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+
+@Component({
+	selector: 'app-step-three',
+	templateUrl: './step-three.component.html',
+	styleUrls: ['./step-three.component.scss'],
+})
+export class StepThreeComponent implements OnInit {
+	@Input()
+	step_max: any;
+	@Input()
+	form: any;
+
+	constructor(public pollService: PollService) {}
+
+	ngOnInit(): void {}
+
+	drop(event: CdkDragDrop<string[]>) {
+		// moveItemInArray(this.pollService.choices, event.previousIndex, event.currentIndex);
+	}
+}

src/app/features/administration/form/step-two/step-two.component.html

@@ -0,0 +1,43 @@
+<div class="form-field poll-kind">
+	<div class="min-height">
+		<app-stepper [step_current]="2" [step_max]="5"></app-stepper>
+		<h2 class="title is-2">
+			{{ 'creation.want' | translate }}
+		</h2>
+		<div class="kind-of-poll columns">
+			<div class="column">
+				<button
+					class="button is-fullwidth"
+					[ngClass]="{ 'is-selected is-primary': pollService.form.controls.isAboutDate.value }"
+					(click)="pollService.form.controls.isAboutDate.setValue(true)"
+				>
+					<i class="fa fa-calendar"></i>
+					{{ 'creation.kind.date' | translate }}
+				</button>
+			</div>
+			<div class="column">
+				<button
+					class="button is-fullwidth"
+					[ngClass]="{ 'is-selected is-primary': !pollService.form.controls.isAboutDate.value }"
+					(click)="pollService.form.controls.isAboutDate.setValue(false)"
+				>
+					<i class="fa fa-list-ul"></i>
+					{{ 'creation.kind.classic' | translate }}
+				</button>
+			</div>
+		</div>
+	</div>
+	<div class="columns">
+		<div class="column">
+			<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/1']">
+				précédent
+			</button>
+		</div>
+		<div class="column">
+			<!--				[disabled]="form.invalid"-->
+			<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/3']">
+				suivant
+			</button>
+		</div>
+	</div>
+</div>

src/app/features/administration/form/step-two/step-two.component.scss

@@ -0,0 +1,3 @@
+.fa {
+	margin-right: 1em;
+}

src/app/features/administration/form/step-two/step-two.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StepTwoComponent } from './step-two.component';
+
+describe('StepTwoComponent', () => {
+	let component: StepTwoComponent;
+	let fixture: ComponentFixture<StepTwoComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [StepTwoComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(StepTwoComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/features/administration/form/step-two/step-two.component.ts

@@ -0,0 +1,61 @@
+import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
+import { FormArray, FormBuilder } from '@angular/forms';
+import { UuidService } from '../../../../core/services/uuid.service';
+import { ApiService } from '../../../../core/services/api.service';
+import { ToastService } from '../../../../core/services/toast.service';
+import { PollService } from '../../../../core/services/poll.service';
+import { DateUtilities } from '../../../old-stuff/config/DateUtilities';
+import { DOCUMENT } from '@angular/common';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { Router } from '@angular/router';
+
+@Component({
+	selector: 'app-step-two',
+	templateUrl: './step-two.component.html',
+	styleUrls: ['./step-two.component.scss'],
+})
+export class StepTwoComponent implements OnInit {
+	ngOnInit(): void {}
+
+	@Input()
+	form: any;
+	@Input()
+	step_max: any;
+	timeList: any;
+	allowSeveralHours: string;
+	dateList: any;
+	showDateInterval: boolean;
+	intervalDays: any;
+
+	constructor(
+		private fb: FormBuilder,
+		private cd: ChangeDetectorRef,
+		private uuidService: UuidService,
+		private toastService: ToastService,
+		public pollService: PollService,
+		private router: Router,
+		public dateUtilities: DateUtilities,
+		private apiService: ApiService,
+		@Inject(DOCUMENT) private document: any
+	) {
+		this.form = this.pollService.form;
+	}
+
+	addIntervalOfDates() {}
+
+	get choices(): FormArray {
+		return this.form.get('choices') as FormArray;
+	}
+
+	addTime() {}
+
+	removeAllTimes() {}
+
+	resetTimes() {}
+
+	addChoice() {}
+
+	addTimeToDate(choice: any, id: number) {}
+
+	countDays() {}
+}

src/app/features/administration/naming/naming.component.html

@@ -1 +0,0 @@
-<p>naming works!</p>

src/app/features/administration/naming/naming.component.ts

@@ -1,12 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-	selector: 'app-naming',
-	templateUrl: './naming.component.html',
-	styleUrls: ['./naming.component.scss'],
-})
-export class NamingComponent implements OnInit {
-	constructor() {}
-
-	ngOnInit(): void {}
-}

src/environments/endpoints.ts

@@ -4,13 +4,13 @@ export const backendApiUrlsInDev = {
 	local: 'http://localhost:8000/api/v1', // the docker port is this one
 	// local: 'http://www.tk.lan/index.php/api/v1',
 	// local: 'https://framadate-api.cipherbliss.com/api/v1',
-	// remote: 'http://localhost:8000/api/v1',
+	 remote: 'http://localhost:8000/api/v1',
 	// remote: 'http://www.tk.lan/index.php/api/v1',
-	remote: 'https://framadate-api.cipherbliss.com/api/v1',
+	//remote: 'https://framadate-api.cipherbliss.com/api/v1',
 };
 export const apiV1 = {
-	// baseHref: 'http://localhost:8000/api/v1', // local "symfony serve" live server
-	baseHref: 'http://www.tk.lan/index.php/api/v1', // local apache2 server
+	baseHref: 'http://localhost:8000/api/v1', // local "symfony serve" live server
+	// baseHref: 'http://www.tk.lan/index.php/api/v1', // local apache2 server
 	// baseHref: 'http://tktest.lan/api/v1',
 	// baseHref: 'https://framadate-api.cipherbliss.com/api/v1', // demo preprod
 	api_new_poll: '/poll/',

src/environments/environment.prod.ts

@@ -81,6 +81,7 @@ export const environment = {
 		},
 	},
 	poll: {
+		autoFillDemo: false,
 		defaultConfig: {
 			maxCountOfAnswers: 150,
 			expiresDaysDelay: 60,

src/styles.scss

@@ -34,7 +34,7 @@
 @import './styles/variables';
 @import './styles/dev-utilities/mixins';
 @import './styles/dev-utilities/helpers';
-// @import './styles/dev-utilities/debug';
+@import './styles/dev-utilities/debug';
 @import './styles/libraries/frameworks';
 @import './styles/libraries/overrides';
 // typography

src/styles/dev-utilities/_debug.scss

@@ -24,14 +24,14 @@ label {
 		cursor: pointer;
 	}
 
-	&:not([for]) {
-		color: $dusty-orange;
-
-		&:before {
-			content: "### debug: ce label n'a pas d'attribut for, c'est mal. ### ";
-			color: $violet;
-		}
-	}
+	//&:not([for]) {
+	//	color: $dusty-orange;
+	//
+	//	&:before {
+	//		content: "### debug: ce label n'a pas d'attribut for, c'est mal. ### ";
+	//		color: $violet;
+	//	}
+	//}
 }
 
 input {