⚡ more settings for admin form with time and answers groups

src/app/features/administration/administration.module.ts

@@ -9,6 +9,7 @@ import { AdministrationComponent } from './administration.component';
 import { StepperComponent } from './stepper/stepper.component';
 import { NamingComponent } from './naming/naming.component';
 import { FormComponent } from './form/form.component';
+import { DateValueAccessorModule } from 'angular-date-value-accessor';
 
 @NgModule({
 	declarations: [AdministrationComponent, StepperComponent, NamingComponent, FormComponent],
@@ -18,6 +19,7 @@ import { FormComponent } from './form/form.component';
 		ReactiveFormsModule,
 		SharedModule,
 		TranslateModule.forChild({ extend: true }),
+		DateValueAccessorModule,
 	],
 })
 export class AdministrationModule {}

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

@@ -7,6 +7,105 @@
 		<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>
+	<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">
@@ -77,13 +176,24 @@
 		</button>
 		<section *ngIf="showDateInterval" class="date-interval form-row">
 			<h2>{{ 'dates.add_interval' | translate }}</h2>
-			<p>
+			<div class="columns">
+				<div class="column">
 					{{ 'dates.interval_propose' | translate }}
-				<input (change)="countDays()" formControlName="startDateInterval" type="date" />
+				</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 }}
-				<input (change)="countDays()" formControlName="endDateInterval" type="date" />
-				<br />
-			</p>
+				</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 }}

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

@@ -7,6 +7,7 @@ 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 { DateChoice, otherDefaultDates } from '../../old-stuff/config/defaultConfigs';
 
 @Component({
 	selector: 'app-admin-form',
@@ -21,11 +22,13 @@ export class FormComponent implements OnInit {
 	public urlPrefix: string = window.location.origin + '/participation/';
 	public advancedDisplayEnabled = false;
 	public showDateInterval = true;
-	startDateInterval: any;
+	public allowSeveralHours = true;
+	startDateInterval: string;
+	endDateInterval: string;
 	intervalDays: any;
 	intervalDaysDefault = 7;
-	endDateInterval: any;
-	dateList: any[];
+	dateList: any = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll
+	timeList: DateChoice[] = otherDefaultDates; // ranges of time expressed as strings
 
 	constructor(
 		private fb: FormBuilder,
@@ -43,6 +46,7 @@ export class FormComponent implements OnInit {
 	}
 
 	public createPoll(): void {
+		console.log('this.form', this.form);
 		if (this.form.valid && this.form.valid) {
 			console.log('Le sondage est correctement rempli, prêt à enregistrer.');
 			const newpoll = this.pollService.newPollFromForm(this.form);
@@ -74,7 +78,12 @@ export class FormComponent implements OnInit {
 		this.choices.push(newControlGroup);
 		this.cd.detectChanges();
 		console.log('this.choices.length', this.choices.length);
-		const selector = '#choice_label_' + (this.choices.length - 1);
+
+		this.focusOnChoice(this.choices.length - 1);
+	}
+
+	focusOnChoice(index) {
+		const selector = '#choice_label_' + index;
 		const elem = this.document.querySelector(selector);
 		if (elem) {
 			elem.focus();
@@ -99,6 +108,8 @@ export class FormComponent implements OnInit {
 			slug: [this.uuidService.getUUID(), [Validators.required]],
 			description: ['', [Validators.required]],
 			choices: new FormArray([]),
+			whoModifiesAnswers: ['', [Validators.required]],
+			whoCanChangeAnswers: ['', [Validators.required]],
 			isAboutDate: [true, [Validators.required]],
 			startDateInterval: ['', [Validators.required]],
 			endDateInterval: ['', [Validators.required]],
@@ -132,6 +143,7 @@ export class FormComponent implements OnInit {
 			startDateInterval: this.startDateInterval,
 			endDateInterval: this.endDateInterval,
 		});
+		this.countDays();
 	}
 
 	/**
@@ -148,8 +160,9 @@ export class FormComponent implements OnInit {
 			slug: this.uuidService.getUUID(),
 			creatorPseudo: 'Chuck Norris',
 			creatorEmail: '',
-			choices: ['matin', 'midi'],
 			isAboutDate: true,
+			whoModifiesAnswers: 'everybody',
+			whoCanChangeAnswers: 'everybody',
 			isProtectedByPassword: false,
 			isOwnerNotifiedByEmailOnNewVote: false,
 			isOwnerNotifiedByEmailOnNewComment: false,
@@ -165,14 +178,23 @@ export class FormComponent implements OnInit {
 	}
 
 	countDays(): void {
-		this.intervalDays = this.dateUtilities.countDays(this.startDateInterval, this.endDateInterval);
+		this.intervalDays = this.dateUtilities.countDays(
+			this.dateUtilities.parseInputDateToDateObject(this.startDateInterval),
+			this.dateUtilities.parseInputDateToDateObject(this.endDateInterval)
+		);
+		this.toastService.display('intervalle de ' + this.intervalDays + ' jours');
+		this.cd.detectChanges();
 	}
 
 	/**
 	 * add all the dates between the start and end dates in the interval section
 	 */
 	addIntervalOfDates(): void {
-		const newIntervalArray = this.dateUtilities.getDatesInRange(this.startDateInterval, this.endDateInterval, 1);
+		const newIntervalArray = this.dateUtilities.getDatesInRange(
+			this.dateUtilities.parseInputDateToDateObject(this.startDateInterval),
+			this.dateUtilities.parseInputDateToDateObject(this.endDateInterval),
+			1
+		);
 
 		const converted = [];
 		newIntervalArray.forEach((element) => {
@@ -187,12 +209,23 @@ export class FormComponent implements OnInit {
 		console.log('this.dateList', this.dateList);
 		this.showDateInterval = false;
 
+		this.form.patchValue({ choices: this.dateList });
+		// this.dateList.forEach(elem=>{
+		// 	const newControlGroup = this.fb.group({
+		// 		label: this.fb.control('', [Validators.required]),
+		// 		imageUrl: ['', [Validators.required]],
+		// 	});
+		//
+		// 	this.choices.push(newControlGroup);
+		// })
+
 		this.toastService.display(`les dates ont été ajoutées aux réponses possibles.`);
 	}
 
 	/**
 	 * handle keyboard shortcuts
 	 * @param $event
+	 * @param choice_number
 	 */
 	keyOnChoice($event: KeyboardEvent, choice_number: number): void {
 		$event.preventDefault();
@@ -207,11 +240,7 @@ export class FormComponent implements OnInit {
 		console.log('$event', $event);
 
 		if ($event.key == 'ArrowUp' && choice_number > 0) {
-			const selector = '#choice_label_' + (choice_number - 1);
-			const elem = this.document.querySelector(selector);
-			if (elem) {
-				elem.focus();
-			}
+			this.focusOnChoice(choice_number - 1);
 		}
 		if ($event.key == 'ArrowDown') {
 			// add a field if we are on the last choice
@@ -219,22 +248,14 @@ export class FormComponent implements OnInit {
 				this.addChoice();
 				this.toastService.display('choix ajouté par raccourci "flèche bas"');
 			} else {
-				const selector = '#choice_label_' + (choice_number + 1);
-				const elem = this.document.querySelector(selector);
-				if (elem) {
-					elem.focus();
-				}
+				this.focusOnChoice(choice_number + 1);
 			}
 		}
 		if ($event.ctrlKey && $event.key == 'Backspace') {
 			this.deleteChoiceField(choice_number);
 			this.toastService.display('choix supprimé par raccourci "Ctrl + retour"');
 			this.cd.detectChanges();
-			const selector = '#choice_label_' + Math.min(choice_number - 1, 0);
-			const elem = this.document.querySelector(selector);
-			if (elem) {
-				elem.focus();
-			}
+			this.focusOnChoice(Math.min(choice_number - 1, 0));
 		}
 		if ($event.ctrlKey && $event.key == 'Enter') {
 			// go to other fields
@@ -244,4 +265,39 @@ export class FormComponent implements OnInit {
 			}
 		}
 	}
+
+	/**
+	 * change time spans
+	 */
+	addTime() {
+		this.timeList.push({
+			literal: '',
+			timeList: [],
+			date_object: new Date(),
+		});
+	}
+
+	removeAllTimes() {
+		this.timeList = [];
+	}
+
+	resetTimes() {
+		this.timeList = otherDefaultDates;
+	}
+
+	/**
+	 * add a time period to a specific date choice,
+	 * focus on the new input
+	 * @param config
+	 * @param id
+	 */
+	addTimeToDate(config: any, id: number) {
+		this.timeList.push({ literal: '' });
+		const selector = '[ng-reflect-choice_label="dateTime_' + id + '_Choices_' + (this.timeList.length - 1) + '"]';
+		this.cd.detectChanges();
+		const elem = this.document.querySelector(selector);
+		if (elem) {
+			elem.focus();
+		}
+	}
 }

src/app/features/old-stuff/config/DateUtilities.ts

@@ -40,8 +40,9 @@ export class DateUtilities {
 	 * @param d1
 	 * @param d2
 	 */
-	dayDiff(d1: Date, d2: Date): number {
-		return Number(d2.getTime() - d1.getTime() / 31536000000);
+	dayDiff(d1: Date, d2: Date): any {
+		const div = 1000 * 3600 * 24;
+		return Math.abs((d2.getTime() - d1.getTime()) / div).toFixed(0);
 	}
 
 	/**
@@ -57,12 +58,21 @@ export class DateUtilities {
 		].join('-');
 	}
 
+	parseInputDateToDateObject(inputDateString: string) {
+		const boom = inputDateString.split('-');
+
+		const converted = new Date(boom['0'], boom['1'] - 1, boom['2']);
+		console.log('converted', converted);
+		return converted;
+	}
+
 	getDoubleDigits(str) {
 		return ('00' + str).slice(-2);
 	}
 
 	countDays(startDateInterval: Date, endDateInterval: Date): number {
 		// compute the number of days in the date interval
+
 		if (endDateInterval && startDateInterval) {
 			return this.dayDiff(endDateInterval, startDateInterval);
 		}