add nav

frontend/src/app/app.html

@@ -18,18 +18,18 @@
     
       
       <nav>
-        <a routerLink="/"><h1>
+        <a [routerLink]="['/']" routerLinkActive="active"><h1>
           <img src="/static/oedb.png" alt="OEDB" style="width: 20px; height: 20px;">
           OEDB
         </h1>
       </a>
         <!-- <button class="login">login OSM</button> -->
 
-        <a routerLink="/agenda">agenda</a>
-        <a routerLink="/unlocated-events">événements non localisés</a>
-        <a routerLink="/nouvelles-categories">nouvelles catégories</a>
-        <a href="/demo/stats">stats</a>
-        <a href="https://source.cipherbliss.com/tykayn/oedb-backend">sources</a>
+        <a routerLink="/agenda" routerLinkActive="active">agenda</a>
+        <a routerLink="/unlocated-events" routerLinkActive="active">événements non localisés</a>
+        <a routerLink="/nouvelles-categories" routerLinkActive="active">nouvelles catégories</a>
+        <a href="/demo/stats" routerLinkActive="active">stats</a>
+        <a href="https://source.cipherbliss.com/tykayn/oedb-backend" routerLinkActive="active">sources</a>
       </nav>
     </header>
     <main>

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;
+        }
+    }
+}

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: [

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<CalendarEvent>();
+  @Output() dateClick = new EventEmitter<Date>();
+
+  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;
+  }
+}

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;
 }