From ba6ec938604b6c3fd228ccd9460aa902415644bd Mon Sep 17 00:00:00 2001 From: Tykayn Date: Sat, 4 Oct 2025 19:33:22 +0200 Subject: [PATCH] add nav --- frontend/src/app/app.html | 12 +- frontend/src/app/app.scss | 22 +++ frontend/src/app/app.ts | 4 +- .../src/app/pages/agenda/calendar/calendar.ts | 160 ++++++++++++++++++ frontend/src/styles.scss | 12 ++ 5 files changed, 202 insertions(+), 8 deletions(-) create mode 100644 frontend/src/app/pages/agenda/calendar/calendar.ts diff --git a/frontend/src/app/app.html b/frontend/src/app/app.html index 740b775..f39b014 100644 --- a/frontend/src/app/app.html +++ b/frontend/src/app/app.html @@ -18,18 +18,18 @@
diff --git a/frontend/src/app/app.scss b/frontend/src/app/app.scss index e69de29..a4fb8e0 100644 --- a/frontend/src/app/app.scss +++ b/frontend/src/app/app.scss @@ -0,0 +1,22 @@ +:host{ + + a{ + cursor: pointer; + padding: 10px; + border-radius: 10px; + border: 1px solid rgba(0,0,0,0.08); + display: inline-block; + margin-bottom: 10px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; + color: #000; + &.active{ + background-color: #d4ebff; + border-color: #007bff; + color: #007bff; + } + } +} \ No newline at end of file diff --git a/frontend/src/app/app.ts b/frontend/src/app/app.ts index c6ef36f..517848c 100644 --- a/frontend/src/app/app.ts +++ b/frontend/src/app/app.ts @@ -1,5 +1,5 @@ import { Component, signal } from '@angular/core'; -import { RouterOutlet } from '@angular/router'; +import { RouterOutlet, RouterLink } from '@angular/router'; import { CalendarPreviousViewDirective, CalendarTodayDirective, CalendarNextViewDirective, CalendarMonthViewComponent, CalendarWeekViewComponent, CalendarDayViewComponent, CalendarDatePipe, DateAdapter, provideCalendar } from 'angular-calendar'; import { adapterFactory } from 'angular-calendar/date-adapters/moment'; import * as moment from 'moment'; @@ -10,7 +10,7 @@ export function momentAdapterFactory() { @Component({ selector: 'app-root', - imports: [RouterOutlet, CalendarPreviousViewDirective, CalendarTodayDirective, CalendarNextViewDirective, CalendarMonthViewComponent, CalendarWeekViewComponent, CalendarDayViewComponent, CalendarDatePipe], + imports: [RouterOutlet, RouterLink, CalendarPreviousViewDirective, CalendarTodayDirective, CalendarNextViewDirective, CalendarMonthViewComponent, CalendarWeekViewComponent, CalendarDayViewComponent, CalendarDatePipe], templateUrl: './app.html', styleUrl: './app.scss', providers: [ diff --git a/frontend/src/app/pages/agenda/calendar/calendar.ts b/frontend/src/app/pages/agenda/calendar/calendar.ts new file mode 100644 index 0000000..0c8d45a --- /dev/null +++ b/frontend/src/app/pages/agenda/calendar/calendar.ts @@ -0,0 +1,160 @@ +import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +export interface CalendarEvent { + id: string; + title: string; + start: Date; + end?: Date; + description?: string; + location?: string; + type?: string; + properties?: any; +} + +@Component({ + selector: 'app-calendar', + standalone: true, + imports: [CommonModule], + templateUrl: './calendar.html', + styleUrl: './calendar.scss' +}) +export class CalendarComponent implements OnInit, OnDestroy { + @Input() events: CalendarEvent[] = []; + @Output() eventClick = new EventEmitter(); + @Output() dateClick = new EventEmitter(); + + currentDate = new Date(); + selectedDate: Date | null = null; + selectedEvent: CalendarEvent | null = null; + showEventDetails = false; + + // Configuration du calendrier + weekDays = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim']; + months = [ + 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', + 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre' + ]; + + calendarDays: Date[] = []; + currentMonth: number; + currentYear: number; + + constructor() { + this.currentMonth = this.currentDate.getMonth(); + this.currentYear = this.currentDate.getFullYear(); + } + + ngOnInit() { + this.generateCalendar(); + } + + ngOnDestroy() { + // Cleanup si nécessaire + } + + generateCalendar() { + this.calendarDays = []; + + // Premier jour du mois + const firstDay = new Date(this.currentYear, this.currentMonth, 1); + // Dernier jour du mois + const lastDay = new Date(this.currentYear, this.currentMonth + 1, 0); + + // Commencer le lundi de la semaine qui contient le premier jour + const startDate = new Date(firstDay); + const dayOfWeek = firstDay.getDay(); + const mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek; // Lundi = 1 + startDate.setDate(firstDay.getDate() + mondayOffset); + + // Générer 42 jours (6 semaines) + for (let i = 0; i < 42; i++) { + const date = new Date(startDate); + date.setDate(startDate.getDate() + i); + this.calendarDays.push(date); + } + } + + getEventsForDate(date: Date): CalendarEvent[] { + return this.events.filter(event => { + const eventDate = new Date(event.start); + return eventDate.toDateString() === date.toDateString(); + }); + } + + getEventCountForDate(date: Date): number { + return this.getEventsForDate(date).length; + } + + isToday(date: Date): boolean { + const today = new Date(); + return date.toDateString() === today.toDateString(); + } + + isCurrentMonth(date: Date): boolean { + return date.getMonth() === this.currentMonth; + } + + isWeekend(date: Date): boolean { + const day = date.getDay(); + return day === 0 || day === 6; // Dimanche ou Samedi + } + + onDateClick(date: Date) { + this.selectedDate = date; + this.dateClick.emit(date); + } + + onEventClick(event: CalendarEvent, $event: Event) { + $event.stopPropagation(); + this.selectedEvent = event; + this.showEventDetails = true; + this.eventClick.emit(event); + } + + closeEventDetails() { + this.showEventDetails = false; + this.selectedEvent = null; + } + + previousMonth() { + this.currentMonth--; + if (this.currentMonth < 0) { + this.currentMonth = 11; + this.currentYear--; + } + this.generateCalendar(); + } + + nextMonth() { + this.currentMonth++; + if (this.currentMonth > 11) { + this.currentMonth = 0; + this.currentYear++; + } + this.generateCalendar(); + } + + goToToday() { + this.currentDate = new Date(); + this.currentMonth = this.currentDate.getMonth(); + this.currentYear = this.currentDate.getFullYear(); + this.generateCalendar(); + } + + getMonthName(): string { + return this.months[this.currentMonth]; + } + + getTotalEventsCount(): number { + return this.events.length; + } + + getEventsThisMonth(): number { + return this.events.filter(event => { + const eventDate = new Date(event.start); + return eventDate.getMonth() === this.currentMonth && + eventDate.getFullYear() === this.currentYear; + }).length; + } +} diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index b4abcb3..c8e21e9 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -183,4 +183,16 @@ nav{ background-color: #f0f0f0; } } +} + +.row, .filters, .controls{ + input{ + display: block; + max-width: 93%; + } +} + +.presets{ + max-height: 300px; + overflow: auto; } \ No newline at end of file