ajout page calendrier

frontend/src/app/pages/agenda/agenda.ts

@@ -0,0 +1,166 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { OedbApi } from '../../services/oedb-api';
+import { EditForm } from '../../forms/edit-form/edit-form';
+
+interface Event {
+  id: string;
+  properties: {
+    label?: string;
+    name?: string;
+    what?: string;
+    start?: string;
+    when?: string;
+    stop?: string;
+    description?: string;
+    where?: string;
+  };
+  geometry?: {
+    type: string;
+    coordinates: [number, number];
+  };
+}
+
+interface DayEvents {
+  date: Date;
+  events: Event[];
+}
+
+@Component({
+  selector: 'app-agenda',
+  standalone: true,
+  imports: [CommonModule, EditForm],
+  templateUrl: './agenda.html',
+  styleUrl: './agenda.scss'
+})
+export class Agenda implements OnInit {
+  private oedbApi = inject(OedbApi);
+  
+  events: Event[] = [];
+  daysWithEvents: DayEvents[] = [];
+  selectedEvent: Event | null = null;
+  showSidePanel = false;
+
+  ngOnInit() {
+    this.loadEvents();
+  }
+
+  loadEvents() {
+    const today = new Date();
+    const startDate = new Date(today);
+    startDate.setDate(today.getDate() - 10);
+    
+    const endDate = new Date(today);
+    endDate.setDate(today.getDate() + 10);
+
+    const params = {
+      start: `${startDate.toISOString().split('T')[0]}`,
+      end: `${endDate.toISOString().split('T')[0]}`,
+      limit: 1000
+    };
+
+    this.oedbApi.getEvents(params).subscribe((response: any) => {
+      this.events = Array.isArray(response?.features) ? response.features : [];
+      this.organizeEventsByDay();
+    });
+  }
+
+  organizeEventsByDay() {
+    const daysMap = new Map<string, DayEvents>();
+    
+    // Initialiser les 20 jours
+    for (let i = -10; i <= 10; i++) {
+      const date = new Date();
+      date.setDate(date.getDate() + i);
+      const dateKey = date.toISOString().split('T')[0];
+      daysMap.set(dateKey, {
+        date: new Date(date),
+        events: []
+      });
+    }
+
+    // Organiser les événements par jour
+    this.events.forEach(event => {
+      const eventDate = this.getEventDate(event);
+      if (eventDate) {
+        const dateKey = eventDate.toISOString().split('T')[0];
+        const dayEvents = daysMap.get(dateKey);
+        if (dayEvents) {
+          dayEvents.events.push(event);
+        }
+      }
+    });
+
+    this.daysWithEvents = Array.from(daysMap.values()).sort((a, b) => 
+      a.date.getTime() - b.date.getTime()
+    );
+  }
+
+  getEventDate(event: Event): Date | null {
+    const startDate = event.properties.start || event.properties.when;
+    if (startDate) {
+      return new Date(startDate);
+    }
+    return null;
+  }
+
+  getEventTitle(event: Event): string {
+    return event.properties.label || event.properties.name || 'Événement sans titre';
+  }
+
+  getEventTime(event: Event): string {
+    const startDate = event.properties.start || event.properties.when;
+    if (startDate) {
+      const date = new Date(startDate);
+      return date.toLocaleTimeString('fr-FR', { 
+        hour: '2-digit', 
+        minute: '2-digit' 
+      });
+    }
+    return '';
+  }
+
+  selectEvent(event: Event) {
+    this.selectedEvent = event;
+    this.showSidePanel = true;
+  }
+
+  closeSidePanel() {
+    this.showSidePanel = false;
+    this.selectedEvent = null;
+  }
+
+  onEventSaved(event: any) {
+    this.loadEvents(); // Recharger les événements après modification
+    this.closeSidePanel();
+  }
+
+  onEventCreated(event: any) {
+    this.loadEvents(); // Recharger les événements après création
+    this.closeSidePanel();
+  }
+
+  onEventDeleted(event: any) {
+    this.loadEvents(); // Recharger les événements après suppression
+    this.closeSidePanel();
+  }
+
+  isToday(date: Date): boolean {
+    const today = new Date();
+    return date.toDateString() === today.toDateString();
+  }
+
+  isPast(date: Date): boolean {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    return date < today;
+  }
+
+  formatDate(date: Date): string {
+    return date.toLocaleDateString('fr-FR', {
+      weekday: 'long',
+      day: 'numeric',
+      month: 'long'
+    });
+  }
+}