2021-05-20 09:43:15 +02:00
|
|
|
import { ChangeDetectorRef, Component, Inject, Input } from '@angular/core';
|
2021-05-18 16:02:36 +02:00
|
|
|
import { moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
|
2021-05-17 15:25:22 +02:00
|
|
|
import { DOCUMENT } from '@angular/common';
|
2021-05-18 16:02:36 +02:00
|
|
|
import { FormGroup } from '@angular/forms';
|
2021-05-17 16:15:54 +02:00
|
|
|
import { ToastService } from '../../../../../../core/services/toast.service';
|
|
|
|
import { StorageService } from '../../../../../../core/services/storage.service';
|
2021-05-18 16:02:36 +02:00
|
|
|
import { MatDialog } from '@angular/material/dialog';
|
|
|
|
import { ShortcutsHelpComponent } from '../../../../../shared/components/ui/shortcuts-help/shortcuts-help.component';
|
2021-05-20 10:54:28 +02:00
|
|
|
import { DateChoice } from '../../../../../../core/models/dateChoice.model';
|
2021-11-17 16:25:24 +01:00
|
|
|
import { PollService } from '../../../../../../core/services/poll.service';
|
|
|
|
import { DateUtilitiesService } from '../../../../../../core/services/date.utilities.service';
|
2021-12-21 16:02:25 +01:00
|
|
|
import { environment } from 'src/environments/environment';
|
2021-05-17 15:25:22 +02:00
|
|
|
@Component({
|
|
|
|
selector: 'app-day-list',
|
|
|
|
templateUrl: './day-list.component.html',
|
|
|
|
styleUrls: ['./day-list.component.scss'],
|
2021-05-18 16:02:36 +02:00
|
|
|
entryComponents: [ShortcutsHelpComponent],
|
2021-05-17 15:25:22 +02:00
|
|
|
})
|
2021-05-17 16:15:54 +02:00
|
|
|
export class DayListComponent {
|
2021-05-17 15:25:22 +02:00
|
|
|
@Input()
|
2021-05-17 16:15:54 +02:00
|
|
|
form: FormGroup;
|
2021-11-17 16:52:16 +01:00
|
|
|
public dateChoices: DateChoice[] = [];
|
2021-05-17 15:25:22 +02:00
|
|
|
@Input()
|
|
|
|
public hasSeveralHours: boolean;
|
|
|
|
timeList: any;
|
2021-05-17 16:15:54 +02:00
|
|
|
display = false;
|
2021-12-21 16:02:25 +01:00
|
|
|
public environment = environment;
|
2021-05-17 15:25:22 +02:00
|
|
|
|
2021-05-17 16:15:54 +02:00
|
|
|
constructor(
|
2021-05-18 16:02:36 +02:00
|
|
|
public dialog: MatDialog,
|
2021-05-17 16:15:54 +02:00
|
|
|
private toastService: ToastService,
|
2021-11-17 16:25:24 +01:00
|
|
|
private pollService: PollService,
|
|
|
|
private dateUtilitiesService: DateUtilitiesService,
|
2021-05-20 09:43:15 +02:00
|
|
|
private cd: ChangeDetectorRef,
|
2021-05-17 16:15:54 +02:00
|
|
|
@Inject(DOCUMENT) private document: any,
|
|
|
|
private storageService: StorageService
|
|
|
|
) {
|
2021-11-17 16:52:16 +01:00
|
|
|
this.dateChoices = this.pollService.dateChoiceList;
|
2021-05-17 16:15:54 +02:00
|
|
|
}
|
2021-05-17 15:25:22 +02:00
|
|
|
|
2021-05-17 16:15:54 +02:00
|
|
|
reinitChoices(): void {
|
2021-05-20 09:53:20 +02:00
|
|
|
this.dateChoices = [];
|
2021-05-17 15:25:22 +02:00
|
|
|
}
|
|
|
|
|
2021-05-18 16:02:36 +02:00
|
|
|
setDemoTextChoices(): void {
|
2021-05-17 16:15:54 +02:00
|
|
|
this.addChoice('orange');
|
|
|
|
this.addChoice('raisin');
|
|
|
|
this.addChoice('abricot');
|
|
|
|
}
|
2021-05-18 16:02:36 +02:00
|
|
|
|
2021-05-17 15:25:22 +02:00
|
|
|
dropDayItem(event: any): void {
|
|
|
|
if (event.previousContainer === event.container) {
|
|
|
|
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
|
|
|
|
} else {
|
|
|
|
transferArrayItem(
|
|
|
|
event.previousContainer.data,
|
|
|
|
event.container.data,
|
|
|
|
event.previousIndex,
|
|
|
|
event.currentIndex
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2021-05-17 16:15:54 +02:00
|
|
|
|
2021-05-17 15:25:22 +02:00
|
|
|
/**
|
2021-11-22 15:30:23 +01:00
|
|
|
* add a time period to a specific date timeSlice,
|
2021-05-17 15:25:22 +02:00
|
|
|
* focus on the new input
|
2021-05-18 12:45:51 +02:00
|
|
|
* @param choice DateChoice
|
|
|
|
* @param id number
|
2021-05-17 15:25:22 +02:00
|
|
|
*/
|
2021-05-20 10:54:28 +02:00
|
|
|
addTimeToDate(choice: DateChoice, id: number): void {
|
2021-05-18 22:51:06 +02:00
|
|
|
if (!choice.timeSlices) {
|
|
|
|
choice.timeSlices = [];
|
2021-05-18 15:19:11 +02:00
|
|
|
}
|
2021-05-18 22:51:06 +02:00
|
|
|
choice.timeSlices.push({
|
2021-05-17 15:25:22 +02:00
|
|
|
literal: '',
|
|
|
|
});
|
2021-05-20 10:54:28 +02:00
|
|
|
// focus on created field
|
2021-05-20 09:43:15 +02:00
|
|
|
this.cd.detectChanges();
|
2021-05-20 10:54:28 +02:00
|
|
|
const selector = '#choice_' + id + '_timeChoices_' + (choice.timeSlices.length - 1);
|
|
|
|
const firstField = this.document.querySelector(selector);
|
|
|
|
if (firstField) {
|
|
|
|
firstField.focus();
|
|
|
|
} else {
|
2021-11-22 15:30:23 +01:00
|
|
|
console.log('no last time timeSlice found');
|
2021-05-17 15:25:22 +02:00
|
|
|
}
|
|
|
|
}
|
2021-05-17 16:15:54 +02:00
|
|
|
|
2021-05-17 15:25:22 +02:00
|
|
|
/**
|
|
|
|
* handle keyboard shortcuts
|
|
|
|
* @param $event
|
|
|
|
* @param choice_number
|
|
|
|
*/
|
|
|
|
keyOnChoice($event: KeyboardEvent, choice_number: number): void {
|
|
|
|
$event.preventDefault();
|
|
|
|
|
2021-05-20 09:53:20 +02:00
|
|
|
console.log('this. dateChoices.length', this.dateChoices.length);
|
2021-05-17 15:25:22 +02:00
|
|
|
console.log('choice_number', choice_number);
|
2021-05-20 09:53:20 +02:00
|
|
|
const lastChoice = this.dateChoices.length - 1 === choice_number;
|
2021-05-17 15:25:22 +02:00
|
|
|
// TODO handle shortcuts
|
|
|
|
// reset field with Ctrl + D
|
|
|
|
// add a field with Ctrl + N
|
2021-11-22 15:30:23 +01:00
|
|
|
// go to previous timeSlice with arrow up
|
|
|
|
// go to next timeSlice with arrow down
|
2021-05-17 15:25:22 +02:00
|
|
|
console.log('$event', $event);
|
|
|
|
|
2021-05-17 16:15:54 +02:00
|
|
|
if ($event.ctrlKey && $event.key == 'ArrowUp' && choice_number > 0) {
|
2021-05-17 15:25:22 +02:00
|
|
|
this.focusOnChoice(choice_number - 1);
|
|
|
|
}
|
2021-05-17 16:15:54 +02:00
|
|
|
if ($event.ctrlKey && ($event.key == 'ArrowDown' || $event.key == 'ArrowRight')) {
|
2021-11-22 15:30:23 +01:00
|
|
|
// add a field if we are on the last timeSlice
|
2021-05-17 15:25:22 +02:00
|
|
|
if (lastChoice) {
|
|
|
|
this.addChoice();
|
|
|
|
this.toastService.display('choix ajouté par raccourci "flèche bas"');
|
|
|
|
} else {
|
|
|
|
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();
|
|
|
|
this.focusOnChoice(Math.min(choice_number - 1, 0));
|
|
|
|
}
|
|
|
|
if ($event.ctrlKey && $event.key == 'Enter') {
|
|
|
|
// go to other fields
|
|
|
|
const elem = this.document.querySelector('#creatorEmail');
|
|
|
|
if (elem) {
|
|
|
|
elem.focus();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2021-05-17 16:15:54 +02:00
|
|
|
|
|
|
|
addChoice(optionalLabel = ''): void {
|
2021-11-17 17:03:24 +01:00
|
|
|
let lastDateChoice = this.pollService.dateChoiceList[this.pollService.dateChoiceList.length];
|
|
|
|
console.log('lastDateChoice', lastDateChoice);
|
|
|
|
let lastDateChoiceObject = this.dateUtilitiesService.addDaysToDate(
|
|
|
|
this.pollService.dateChoiceList.length,
|
|
|
|
new Date()
|
|
|
|
);
|
2021-05-17 16:15:54 +02:00
|
|
|
|
2021-11-17 17:03:24 +01:00
|
|
|
if (lastDateChoice && lastDateChoice.date_object) {
|
|
|
|
lastDateChoiceObject = lastDateChoice.date_object;
|
|
|
|
}
|
|
|
|
this.pollService.dateChoiceList.push(
|
|
|
|
this.dateUtilitiesService.convertDateToDateChoiceObject(
|
|
|
|
this.dateUtilitiesService.addDaysToDate(1, lastDateChoiceObject)
|
|
|
|
)
|
|
|
|
);
|
2021-11-17 17:08:42 +01:00
|
|
|
this.pollService.dateChoiceList.sort((a: any, b: any) => {
|
|
|
|
return a.date_object - b.date_object;
|
2021-11-17 17:03:24 +01:00
|
|
|
});
|
2021-05-18 12:12:08 +02:00
|
|
|
this.focusOnChoice(this.storageService.dateChoices.length - 1);
|
2021-05-17 16:15:54 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
focusOnChoice(index): void {
|
|
|
|
const selector = '#choice_label_' + index;
|
|
|
|
const elem = this.document.querySelector(selector);
|
|
|
|
if (elem) {
|
|
|
|
elem.focus();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
deleteChoiceField(index: number): void {
|
2021-05-20 09:53:20 +02:00
|
|
|
if (this.dateChoices.length !== 1) {
|
|
|
|
this.dateChoices.splice(index, 1);
|
2021-05-17 16:15:54 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-12-21 16:02:25 +01:00
|
|
|
isWeekendDay(date_input: string) {
|
|
|
|
let date_object = new Date(Date.parse(date_input));
|
|
|
|
console.log('date_object', date_object);
|
2021-05-18 12:45:51 +02:00
|
|
|
if (date_object) {
|
|
|
|
const day = date_object.getDay();
|
2021-12-21 16:02:25 +01:00
|
|
|
console.log('day', day);
|
2021-05-18 12:45:51 +02:00
|
|
|
return day === 6 || day === 0;
|
|
|
|
}
|
|
|
|
return false;
|
2021-05-18 12:27:26 +02:00
|
|
|
}
|
2021-05-18 16:02:36 +02:00
|
|
|
|
|
|
|
openSimple() {
|
|
|
|
this.display = !this.display;
|
|
|
|
}
|
2022-02-04 13:40:19 +01:00
|
|
|
|
|
|
|
/**
|
|
|
|
* convert back date object to datechoices
|
|
|
|
* @param date_as_string
|
|
|
|
* @param choice_id
|
|
|
|
*/
|
|
|
|
convertDateInput(date_as_string: string, choice_id: number) {
|
|
|
|
console.log('$event,date_object', date_as_string, choice_id);
|
|
|
|
let newDate = new Date(date_as_string);
|
|
|
|
this.dateChoices[choice_id].date_object = newDate;
|
|
|
|
this.dateChoices[choice_id].date_input = date_as_string;
|
|
|
|
}
|
2021-05-17 15:25:22 +02:00
|
|
|
}
|