From 345b90c2e1897369282a9d587fb923d35d077dbf Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Tue, 18 May 2021 12:27:26 +0200
Subject: [PATCH] indiquer le jour de la semaine avec les choix de date

---
 src/app/core/services/storage.service.ts               |  5 +++--
 .../form/date/list/day/day-list.component.html         | 10 ++++++++--
 .../form/date/list/day/day-list.component.scss         |  3 +++
 .../form/date/list/day/day-list.component.ts           |  5 +++++
 src/styles/partials/_forms.scss                        |  8 ++++++++
 5 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/app/core/services/storage.service.ts b/src/app/core/services/storage.service.ts
index 1505fde1..d8ddcdd5 100644
--- a/src/app/core/services/storage.service.ts
+++ b/src/app/core/services/storage.service.ts
@@ -10,6 +10,7 @@ import { environment } from '../../../environments/environment';
 import {
 	basicSlicesOfDay,
 	DateChoice,
+	defaultTimeOfDay,
 	moreTimeOfDay,
 	otherDefaultDates,
 	TimeSlices,
@@ -35,13 +36,13 @@ export class StorageService {
 	public dateChoices: DateChoice[] = [];
 
 	@LocalStorage()
-	public timeSlices: TimeSlices[];
+	public timeSlices: TimeSlices[] = defaultTimeOfDay;
 
 	@LocalStorage()
 	public vote_stack: Stack = new Stack();
 
 	@LocalStorage()
-	public choices: Choice[];
+	public choices: Choice[] = [];
 
 	constructor(public dateUtilities: DateUtilitiesService) {
 		if (environment.autofill) {
diff --git a/src/app/features/administration/form/date/list/day/day-list.component.html b/src/app/features/administration/form/date/list/day/day-list.component.html
index 5678d2bc..85272a59 100644
--- a/src/app/features/administration/form/date/list/day/day-list.component.html
+++ b/src/app/features/administration/form/date/list/day/day-list.component.html
@@ -24,8 +24,14 @@
 			</button>
 			<br />
 			<br />
-			<div *ngFor="let choice of dateList; index as id" class="date-choice" cdkDrag>
-				<i class="fa fa-arrow-v"></i>
+			<div
+				*ngFor="let choice of dateList; index as id"
+				class="date-choice padded"
+				cdkDrag
+				[ngClass]="{ 'day-weekend': isWeekendDay(choice.date_object) }"
+			>
+				<i class="fa fa-arrows-v"></i>
+				{{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}
 				<input
 					[(ngModel)]="choice.date_object"
 					(keyup)="keyOnChoice($event, id)"
diff --git a/src/app/features/administration/form/date/list/day/day-list.component.scss b/src/app/features/administration/form/date/list/day/day-list.component.scss
index e69de29b..742c4932 100644
--- a/src/app/features/administration/form/date/list/day/day-list.component.scss
+++ b/src/app/features/administration/form/date/list/day/day-list.component.scss
@@ -0,0 +1,3 @@
+.day-weekend {
+	background: #dedede;
+}
diff --git a/src/app/features/administration/form/date/list/day/day-list.component.ts b/src/app/features/administration/form/date/list/day/day-list.component.ts
index 58dd8d39..a93ac0b3 100644
--- a/src/app/features/administration/form/date/list/day/day-list.component.ts
+++ b/src/app/features/administration/form/date/list/day/day-list.component.ts
@@ -145,4 +145,9 @@ export class DayListComponent {
 	openKeyboardShortcutsModal() {
 		this.display = true;
 	}
+
+	isWeekendDay(date_object: Date) {
+		const day = date_object.getDay();
+		return day === 6 || day === 0;
+	}
 }
diff --git a/src/styles/partials/_forms.scss b/src/styles/partials/_forms.scss
index 4ed5530a..8c98af94 100644
--- a/src/styles/partials/_forms.scss
+++ b/src/styles/partials/_forms.scss
@@ -143,3 +143,11 @@ textarea {
 mat-checkbox {
 	display: block;
 }
+
+.cdk-drag {
+	cursor: pointer;
+	border-left: 3px white;
+	&:hover {
+		border-left: 3px #ccc;
+	}
+}