V1.2

angular.json

@@ -26,9 +26,7 @@
 								"input": "public"
 							}
 						],
-						"styles": [
-							"src/styles.scss"
-						],
+						"styles": ["src/styles.scss"],
 						"server": "src/main.server.ts",
 						"outputMode": "server",
 						"ssr": {
@@ -90,9 +88,7 @@
 								"input": "public"
 							}
 						],
-						"styles": [
-							"src/styles.scss"
-						]
+						"styles": ["src/styles.scss"]
 					}
 				}
 			}

compose.prod.yml

@@ -7,16 +7,16 @@ services:
         container_name: vac-optimizer-prod
         restart: always
         ports:
-            - "80:4000"
+            - '80:4000'
         environment:
             - NODE_ENV=production
             - PORT=4000
         healthcheck:
             test:
                 [
-                    "CMD",
-                    "node",
-                    "-e",
+                    'CMD',
+                    'node',
+                    '-e',
                     "require('http').get('http://localhost:4000', (r) => {process.exit(r.statusCode === 200 ? 0 : 1)})",
                 ]
             interval: 30s
@@ -26,10 +26,10 @@ services:
         deploy:
             resources:
                 limits:
-                    cpus: "1.0"
+                    cpus: '1.0'
                     memory: 512M
                 reservations:
-                    cpus: "0.5"
+                    cpus: '0.5'
                     memory: 256M
             restart_policy:
                 condition: on-failure
@@ -37,10 +37,10 @@ services:
                 max_attempts: 3
                 window: 120s
         logging:
-            driver: "json-file"
+            driver: 'json-file'
             options:
-                max-size: "10m"
-                max-file: "3"
+                max-size: '10m'
+                max-file: '3'
         networks:
             - vac-optimizer-network
 

compose.yml

@@ -7,16 +7,16 @@ services:
         container_name: vac-optimizer
         restart: unless-stopped
         ports:
-            - "4000:4000"
+            - '4000:4000'
         environment:
             - NODE_ENV=production
             - PORT=4000
         healthcheck:
             test:
                 [
-                    "CMD",
-                    "node",
-                    "-e",
+                    'CMD',
+                    'node',
+                    '-e',
                     "require('http').get('http://localhost:4000', (r) => {process.exit(r.statusCode === 200 ? 0 : 1)})",
                 ]
             interval: 30s

src/app/app.html

@@ -1,8 +1,9 @@
+<app-dark-light-mode-button class="modeButton"></app-dark-light-mode-button>
 <main class="main">
 	<h1>{{ title() }}</h1>
 	<div class="content">
 		<app-user-input></app-user-input>
-		<mat-divider [vertical]="true" style="height: 80%;"></mat-divider>
+		<mat-divider [vertical]="true" style="height: 80%"></mat-divider>
 		<app-calendar-year></app-calendar-year>
 	</div>
 </main>

src/app/app.routes.server.ts

@@ -3,6 +3,6 @@ import { RenderMode, ServerRoute } from '@angular/ssr';
 export const serverRoutes: ServerRoute[] = [
 	{
 		path: '**',
-		renderMode: RenderMode.Prerender
+		renderMode: RenderMode.Client
 	}
 ];

src/app/app.scss

@@ -3,14 +3,26 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	width: 100vw;
-	height: 100vh;
+	min-height: 100vh;
 }
 
 .content {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	justify-content: center;
-	gap: 2rem;
+	justify-content: space-evenly;
+	width: 100%;
+}
+
+@media (max-width: 768px) {
+	.content {
+		flex-direction: column;
+	}
+}
+
+.modeButton {
+	position: fixed;
+	top: 20px;
+	right: 20px;
+	z-index: 1000;
 }

src/app/app.ts

@@ -3,11 +3,19 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { provideNativeDateAdapter } from '@angular/material/core';
 import { MatDivider } from '@angular/material/divider';
 import { UserInput } from './components/user-input/user-input';
-import { CalendarYear } from "./components/calendar-year/calendar-year";
+import { CalendarYear } from './components/calendar-year/calendar-year';
+import { DarkLightModeButton } from './components/dark-light-mode-button/dark-light-mode-button';
 
 @Component({
 	selector: 'app-root',
-	imports: [MatDatepickerModule, MatDivider, UserInput, CalendarYear],
+	imports: [
+		MatDatepickerModule,
+		MatDivider,
+		UserInput,
+		CalendarYear,
+		DarkLightModeButton,
+		DarkLightModeButton,
+	],
 	templateUrl: './app.html',
 	styleUrl: './app.scss',
 	providers: [provideNativeDateAdapter()],

src/app/components/calendar-month/calendar-month.html

@@ -1,26 +1,28 @@
 <div class="calendar">
 	<h3>{{ getMonthName() }} {{ year }}</h3>
-	<div class="row header">
-		<p class="day">L</p>
-		<p class="day">M</p>
-		<p class="day">M</p>
-		<p class="day">J</p>
-		<p class="day">V</p>
-		<p class="day">S</p>
-		<p class="day">D</p>
-	</div>
-	<div class="cols">
-		@for (week of weeksInAMonth; track $index) {
-		<div class="row week">
-			@for (day of week; track $index) {
-			@if (day === null) {
-			<p class="day empty"></p>
-			} @else {
-			<p [class.past]="day < getNow()" [class.start]="selectedDates.isStart(day)" [class.end]="selectedDates.isEnd(day)" [class.selected]="selectedDates.isSelected(day)"
-				[class]="selectedDates.getClasses(day)" class="day number" [matTooltip]="selectedDates.getTooltip(day)" [matTooltipShowDelay]="500">{{ day.getDate() }}</p>
-			}
+	<div>
+		<div class="row header">
+			<p class="day">L</p>
+			<p class="day">M</p>
+			<p class="day">M</p>
+			<p class="day">J</p>
+			<p class="day">V</p>
+			<p class="day">S</p>
+			<p class="day">D</p>
+		</div>
+		<div class="cols">
+			@for (week of weeksInAMonth; track $index) {
+			<div class="row week">
+				@for (day of week; track $index) {
+				@if (day === null) {
+				<p class="day empty"></p>
+				} @else {
+				<p [class.past]="day < getNow()" [class.start]="selectedDates.isStart(day)" [class.end]="selectedDates.isEnd(day)" [class.selected]="selectedDates.isSelected(day)"
+					[class]="selectedDates.getClasses(day)" class="day number" [matTooltip]="selectedDates.getTooltip(day)" [matTooltipShowDelay]="500">{{ day.getDate() }}</p>
+				}
+				}
+			</div>
 			}
 		</div>
-		}
 	</div>
 </div>

src/app/components/calendar-month/calendar-month.scss

@@ -1,16 +1,11 @@
 .calendar {
 	display: flex;
 	flex-direction: column;
-	align-items: flex-start;
-	justify-content: flex-start;
-
-	mat-card {
-		width: 100%;
-		max-width: 400px;
-	}
+	align-items: center;
+	gap: 16px;
 
 	h3 {
-		margin: 0 0 8px 0;
+		margin: 0;
 		font-weight: normal;
 	}
 }
@@ -36,18 +31,22 @@
 		margin: 0;
 		margin-top: 2px;
 		margin-bottom: 2px;
-		border-radius: 40%;
+		border-radius: 30%;
+		color: var(--number-color);
 
 		&.empty {
 			visibility: hidden;
 		}
 
 		&.number:hover {
-			background-color: #e0e0e0;
-			color: black;
+			background-color: var(--number-bg-hover);
+			color: var(--number-color-hover);
 			cursor: default;
 		}
 
+		&.past {
+			color: var(--past-color);
+		}
 	}
 
 	.selected {
@@ -58,50 +57,49 @@
 		border-radius: 0;
 	}
 
-	>.start:not(.end) {
-		border-radius: 40% 0 0 40%;
+	> .start:not(.end) {
+		border-radius: 30% 0 0 30%;
 	}
 
-	>.end:not(.start) {
-		border-radius: 0 40% 40% 0;
+	> .end:not(.start) {
+		border-radius: 0 30% 30% 0;
 	}
 }
 
-
 .today {
-	border-color: #1976d2;
+	border-color: var(--today-border-color);
 	border-width: 2px;
 	width: 26px !important;
 	height: 22px !important;
 	border-style: dashed !important;
+
+	:has(.dark-mode) {
+		border-color: #0b385c;
+	}
 }
 
 .other-month {
-	color: #9e9e9e;
+	color: var(--other-month-color);
 }
 
 .weekend {
-	background-color: #ffca39;
+	background-color: var(--weekend-bg);
 }
 
 .closed-day {
-	border: 2px solid #0ee3ff;
+	border: 2px solid var(--closed-day-bg);
 	width: 26px !important;
 	height: 22px !important;
 }
 
 .rtt {
-	background-color: #99ff87;
+	background-color: var(--rtt-bg);
 }
 
 .cp {
-	background-color: #eca0ff;
+	background-color: var(--cp-bg);
 }
 
 .other {
-	background-color: #ff9b9b;
-}
-
-.past {
-	color: #b0b0b0;
+	background-color: var(--other-bg);
 }

src/app/components/calendar-year/calendar-year.html

@@ -2,13 +2,13 @@
 	@if (isLoading()) {
 	<div class="loading-overlay">
 		<div class="loading-spinner">
-			<div class="spinner"></div>
+			<mat-spinner></mat-spinner>
 			<p>Calcul en cours...</p>
 		</div>
 	</div>
 	}
 	@for (month of months; track $index) {
-	<mat-card>
+	<mat-card class="card">
 		<mat-card-content>
 			<app-calendar-month [monthIndex]="month" [year]="getYear(month)" [selectedDates]="selectedDates"></app-calendar-month>
 		</mat-card-content>

src/app/components/calendar-year/calendar-year.scss

@@ -1,13 +1,20 @@
+@use '@angular/material' as mat;
+
 .calendar-year {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	justify-content: center;
-	gap: 16px;
-	max-width: 60vw;
+	justify-content: space-evenly;
+	max-width: 65vw;
 	position: relative;
 }
 
+@media (max-width: 768px) {
+	.calendar-year {
+		max-width: 100vw;
+	}
+}
+
 .loading-overlay {
 	position: absolute;
 	top: 0;
@@ -20,6 +27,10 @@
 	align-items: center;
 	border-radius: 4px;
 	z-index: 1000;
+
+	@media (prefers-color-scheme: dark) {
+		background-color: rgba(0, 0, 0, 0.7);
+	}
 }
 
 .loading-spinner {
@@ -33,16 +44,15 @@
 		font-weight: 500;
 		color: #333;
 		margin: 0;
+
+		@media (prefers-color-scheme: dark) {
+			color: #ddd;
+		}
 	}
 }
 
-.spinner {
-	width: 40px;
-	height: 40px;
-	border: 4px solid #f3f3f3;
-	border-top: 4px solid #3498db;
-	border-radius: 50%;
-	animation: spin 1s linear infinite;
+.card {
+	margin: 16px;
 }
 
 @keyframes spin {
@@ -54,3 +64,7 @@
 		transform: rotate(360deg);
 	}
 }
+
+:root {
+	@include mat.progress-spinner-overrides((size: 0.5rem, active-indicator-width: 0.25rem));
+}

src/app/components/calendar-year/calendar-year.ts

@@ -1,17 +1,18 @@
-import { Component, OnInit, effect, signal } from '@angular/core';
+import { Component, effect, signal } from '@angular/core';
 import { UserInputService } from '../../services/user-input-service';
 import { MatCard, MatCardContent } from '@angular/material/card';
 import { CalendarMonth } from "../calendar-month/calendar-month";
 import { CalendarService, SelectedDates } from '../../services/calendar-service';
 import { CommonModule } from '@angular/common';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
 
 @Component({
 	selector: 'app-calendar-year',
-	imports: [MatCard, CalendarMonth, MatCardContent, CommonModule],
+	imports: [MatCard, CalendarMonth, MatCardContent, CommonModule, MatProgressSpinner],
 	templateUrl: './calendar-year.html',
 	styleUrl: './calendar-year.scss',
 })
-export class CalendarYear implements OnInit {
+export class CalendarYear {
 	protected isLoading = signal(true);
 
 	constructor(private userInput: UserInputService, private calendarService: CalendarService) {
@@ -38,8 +39,4 @@ export class CalendarYear implements OnInit {
 
 	// months starting from actual date
 	protected months: number[] = Array.from({ length: 12 }, (_, i) => (new Date().getMonth() + i) % 12);
-
-	ngOnInit(): void {
-		this.selectedDates = this.calendarService.getSelectedDatesForYear();
-	}
 }

src/app/components/dark-light-mode-button/dark-light-mode-button.html

@@ -0,0 +1,21 @@
+@if (lightMode()) {
+	<button
+		animate.enter="enter-animation"
+		mat-fab
+		color="primary"
+		(click)="toggleTheme()"
+		aria-label="Toggle light mode"
+	>
+		<mat-icon aria-hidden="false" aria-label="Dark mode icon" fontIcon="dark_mode"></mat-icon>
+	</button>
+} @else {
+	<button
+		animate.enter="enter-animation"
+		mat-fab
+		color="accent"
+		(click)="toggleTheme()"
+		aria-label="Toggle dark mode"
+	>
+		<mat-icon aria-hidden="false" aria-label="Light mode icon" fontIcon="light_mode"></mat-icon>
+	</button>
+}

src/app/components/dark-light-mode-button/dark-light-mode-button.scss

@@ -0,0 +1,32 @@
+button {
+	margin: 0;
+	padding: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: none;
+	border-radius: 50%;
+	width: 40px;
+	height: 40px;
+	transition: all 0.3s ease;
+
+	&:hover {
+		background-color: rgba(0, 0, 0, 0);
+		cursor: pointer;
+	}
+}
+
+.enter-animation {
+	animation: slide-fade 1s;
+}
+
+@keyframes slide-fade {
+	from {
+		opacity: 0;
+		transform: translateY(20px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}

src/app/components/dark-light-mode-button/dark-light-mode-button.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DarkLightModeButton } from './dark-light-mode-button';
+
+describe('DarkLightModeButton', () => {
+	let component: DarkLightModeButton;
+	let fixture: ComponentFixture<DarkLightModeButton>;
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [DarkLightModeButton],
+		}).compileComponents();
+
+		fixture = TestBed.createComponent(DarkLightModeButton);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/components/dark-light-mode-button/dark-light-mode-button.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { ThemeService } from '../../services/theme-service';
+import { MatIcon } from '@angular/material/icon';
+
+@Component({
+	selector: 'app-dark-light-mode-button',
+	imports: [MatIcon],
+	templateUrl: './dark-light-mode-button.html',
+	styleUrl: './dark-light-mode-button.scss',
+})
+export class DarkLightModeButton {
+	constructor(private themeService: ThemeService) {}
+
+	lightMode(): boolean {
+		return this.themeService.isLightMode();
+	}
+
+	toggleTheme(): void {
+		this.themeService.toggleTheme();
+	}
+}

src/app/components/user-input/user-input.ts

@@ -36,7 +36,7 @@ export class UserInput implements OnInit, OnDestroy {
 	ngOnInit() {
 		this.userInputForm.valueChanges
 			.pipe(
-				debounceTime(2500),
+				debounceTime(1500),
 				takeUntil(this.destroy$)
 			)
 			.subscribe(() => this.submitForm());

src/app/services/calendar-service.ts

@@ -31,24 +31,25 @@ export class CalendarService {
 					if (day) {
 						this.setWeekendSelection(day, selectedDates);
 						if (holidays.some(holiday => holiday.getTime() === day.getTime())) {
-							selectedDates.push(new SelectedDate(DayType.CLOSED_DAY, new DateRange<Date>(day, day)));
+							selectedDates._datesSelected.push(new SelectedDate(DayType.CLOSED_DAY, new DateRange<Date>(day, day)));
 						}
 						if (day.getDate() === new Date().getDate() && day.getMonth() === new Date().getMonth() && day.getFullYear() === new Date().getFullYear()) {
-							selectedDates.push(new SelectedDate(DayType.TODAY, new DateRange<Date>(day, day)));
+							selectedDates._datesSelected.push(new SelectedDate(DayType.TODAY, new DateRange<Date>(day, day)));
 						}
 					}
 				}
 			}
 		}
+		selectedDates.update();
 		return selectedDates;
 	}
 
 	setWeekendSelection(date: Date, selectedDates: SelectedDates) {
 		if (date.getDay() === 6) {
-			selectedDates.push(new SelectedDate(DayType.WEEKEND, new DateRange<Date>(date, new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1))));
+			selectedDates._datesSelected.push(new SelectedDate(DayType.WEEKEND, new DateRange<Date>(date, new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1))));
 		}
 		if (date.getDate() === 1 && date.getDay() === 0) {
-			selectedDates.push(new SelectedDate(DayType.WEEKEND, new DateRange<Date>(new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1), date)));
+			selectedDates._datesSelected.push(new SelectedDate(DayType.WEEKEND, new DateRange<Date>(new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1), date)));
 		}
 	}
 
@@ -226,6 +227,11 @@ export class SelectedDates implements SelectedDateInterface {
 	_datesSelected: SelectedDate[] = [];
 	datesSelected: SelectedDate[] = [];
 
+	update(): void {
+		this.datesSelected = this._datesSelected.slice();
+		this.grouping();
+	}
+
 	push(selectedDate: SelectedDate) {
 		this._datesSelected.push(selectedDate);
 		this.datesSelected = this._datesSelected.slice();
@@ -436,21 +442,21 @@ export class SelectedDates implements SelectedDateInterface {
 	optimizeVacations(vacationsNumber: VacationsNumber): void {
 		this.samediMalin(vacationsNumber);
 		while (vacationsNumber.cp > 0) {
-			const result = this.lookForVacationRec(DayType.CP);
+			const result = this.lookForVacation(DayType.CP);
 			if (result.heuristic === -1) {
 				break;
 			}
 			vacationsNumber.cp -= 1;
 		}
 		while (vacationsNumber.rtt > 0) {
-			const result = this.lookForVacationRec(DayType.RTT);
+			const result = this.lookForVacation(DayType.RTT);
 			if (result.heuristic === -1) {
 				break;
 			}
 			vacationsNumber.rtt -= 1;
 		}
 		while (vacationsNumber.other > 0) {
-			const result = this.lookForVacationRec(DayType.OTHER);
+			const result = this.lookForVacation(DayType.OTHER);
 			if (result.heuristic === -1) {
 				break;
 			}
@@ -570,7 +576,7 @@ export class SelectedDates implements SelectedDateInterface {
 		}
 	}
 
-	lookForVacationRec(vacType: DayType): { apply: () => void; heuristic: number } {
+	lookForVacation(vacType: DayType): { apply: () => void; heuristic: number } {
 		const daysOfYear = CalendarService.monthsInAYearFromNow();
 		const now = new Date();
 		now.setHours(0, 0, 0, 0);

src/app/services/theme-service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ThemeService } from './theme-service';
+
+describe('ThemeService', () => {
+  let service: ThemeService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ThemeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/theme-service.ts

@@ -0,0 +1,21 @@
+import { Injectable, signal } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class ThemeService {
+	private lightModeMedia = window.matchMedia('(prefers-color-scheme: light)');
+	isLightMode = signal(this.lightModeMedia.matches);
+
+	constructor() {
+		this.toggleTheme(this.isLightMode());
+		this.lightModeMedia.addEventListener('change', (e) => {
+			this.isLightMode.set(e.matches);
+		});
+	}
+
+	toggleTheme(forceLight?: boolean) {
+		const isLight = forceLight ?? !this.isLightMode();
+		this.isLightMode.set(isLight);
+		document.body.classList.toggle('light-mode', isLight);
+		document.body.classList.toggle('dark-mode', !isLight);
+	}
+}

src/app/services/user-input-service.ts

@@ -1,6 +1,4 @@
 import { Injectable, signal, PLATFORM_ID, inject } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-import Holidays, { HolidaysTypes } from 'date-holidays';
 import { VacationsNumber } from './calendar-service';
 
 
@@ -9,24 +7,16 @@ import { VacationsNumber } from './calendar-service';
 	providedIn: 'root'
 })
 export class UserInputService {
-	private platformId = inject(PLATFORM_ID);
 
 	private getRandomNumber(): number {
 		return Math.floor(Math.random() * 9) + 1;
 	}
 
 	private getInitialValues(): VacationsNumber {
-		if (isPlatformBrowser(this.platformId)) {
-			return {
-				cp: this.getRandomNumber(),
-				rtt: this.getRandomNumber(),
-				other: this.getRandomNumber()
-			};
-		}
 		return {
-			cp: 0,
-			rtt: 0,
-			other: 0
+			cp: this.getRandomNumber(),
+			rtt: this.getRandomNumber(),
+			other: this.getRandomNumber()
 		};
 	}
 

src/styles.scss

@@ -6,19 +6,59 @@
 @use '@angular/material' as mat;
 
 html {
-	@include mat.theme((color: (primary: mat.$azure-palette,
+	@include mat.theme(
+		(
+			color: (
+				primary: mat.$azure-palette,
 				tertiary: mat.$blue-palette,
 			),
 			typography: Roboto,
 			density: 0,
-		));
+		)
+	);
+}
+
+:root {
+	--number-bg-hover: #e0e0e0;
+	--number-color: black;
+	--number-color-hover: black;
+	--past-color: #b0b0b0;
+
+	--today-border-color: #1976d2;
+	--other-month-color: #9e9e9e;
+	--weekend-bg: #ffca39;
+	--closed-day-bg: #0ee3ff;
+	--rtt-bg: #99ff87;
+	--cp-bg: #eca0ff;
+	--other-bg: #ff9b9b;
+}
+
+.dark-mode {
+	--number-bg-hover: #424242;
+	--number-color: white;
+	--number-color-hover: white;
+	--past-color: #757575;
+
+	--today-border-color: #0b385c;
+	--other-month-color: #757575;
+	--weekend-bg: #b17927;
+	--closed-day-bg: #098a9b;
+	--rtt-bg: #468149;
+	--cp-bg: #703e79;
+	--other-bg: #9b3939;
 }
 
 body {
 	// Default the application to a light color theme. This can be changed to
 	// `dark` to enable the dark color theme, or to `light dark` to defer to the
 	// user's system settings.
-	color-scheme: light;
+	&.dark-mode {
+		color-scheme: dark;
+	}
+
+	&.light-mode {
+		color-scheme: light;
+	}
 
 	// Set a default background, font and text colors for the application using
 	// Angular Material's system-level CSS variables. Learn more about these
@@ -40,5 +80,5 @@ body {
 
 body {
 	margin: 0;
-	font-family: Roboto, "Helvetica Neue", sans-serif;
-}
+	font-family: Roboto, 'Helvetica Neue', sans-serif;
+}

tsconfig.app.json

@@ -14,4 +14,4 @@
 	"exclude": [
 		"src/**/*.spec.ts"
 	]
-}
+}