style marqueurs events, page nouvelles catégories

frontend/src/app/pages/home/home.ts

@@ -1,4 +1,6 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { FormsModule } from '@angular/forms';
 import {Menu} from './menu/menu';
 import { AllEvents } from '../../maps/all-events/all-events';
 import { EditForm } from '../../forms/edit-form/edit-form';
@@ -11,24 +13,86 @@ import { UnlocatedEvents } from '../../shared/unlocated-events/unlocated-events'
     Menu,
     AllEvents,
     UnlocatedEvents,
-    EditForm
+    EditForm,
+    FormsModule
   ],
   templateUrl: './home.html',
   styleUrl: './home.scss'
 })
-export class Home {
+export class Home implements OnInit, OnDestroy {
 
   OedbApi = inject(OedbApi);
+  private router = inject(Router);
+  
   features: Array<any> = [];
   selected: any | null = null;
   showTable = false;
+  
+  // Nouvelles propriétés pour le rechargement automatique et la sélection de jours
+  autoReloadEnabled = true;
+  autoReloadInterval: any = null;
+  daysAhead = 7; // Nombre de jours dans le futur par défaut
+  isLoading = false;
 
-  constructor() {
-    this.OedbApi.getEvents({ when: 'now', limit: 500 }).subscribe((events: any) => {
+  ngOnInit() {
+    this.loadEvents();
+    this.startAutoReload();
+  }
+
+  ngOnDestroy() {
+    this.stopAutoReload();
+  }
+
+  loadEvents() {
+    this.isLoading = true;
+    const today = new Date();
+    const endDate = new Date(today);
+    endDate.setDate(today.getDate() + this.daysAhead);
+    
+    const params = {
+      start: today.toISOString().split('T')[0],
+      end: endDate.toISOString().split('T')[0],
+      limit: 1000
+    };
+
+    this.OedbApi.getEvents(params).subscribe((events: any) => {
       this.features = Array.isArray(events?.features) ? events.features : [];
+      this.isLoading = false;
     });
   }
 
+  startAutoReload() {
+    if (this.autoReloadEnabled && !this.autoReloadInterval) {
+      this.autoReloadInterval = setInterval(() => {
+        this.loadEvents();
+      }, 60000); // 1 minute
+    }
+  }
+
+  stopAutoReload() {
+    if (this.autoReloadInterval) {
+      clearInterval(this.autoReloadInterval);
+      this.autoReloadInterval = null;
+    }
+  }
+
+  toggleAutoReload() {
+    this.autoReloadEnabled = !this.autoReloadEnabled;
+    if (this.autoReloadEnabled) {
+      this.startAutoReload();
+    } else {
+      this.stopAutoReload();
+    }
+  }
+
+  onDaysAheadChange() {
+    this.loadEvents();
+  }
+
+  goToNewCategories() {
+    this.router.navigate(['/nouvelles-categories']);
+  }
+
   onSelect(feature: any) {
     this.selected = feature;
   }
@@ -52,24 +116,18 @@ export class Home {
 
   onSaved(_res: any) {
     // refresh list after update
-    this.OedbApi.getEvents({ when: 'now', limit: 500 }).subscribe((events: any) => {
-      this.features = Array.isArray(events?.features) ? events.features : [];
-    });
+    this.loadEvents();
   }
 
   onCreated(_res: any) {
     // refresh and clear selection after create
     this.selected = null;
-    this.OedbApi.getEvents({ when: 'now', limit: 500 }).subscribe((events: any) => {
-      this.features = Array.isArray(events?.features) ? events.features : [];
-    });
+    this.loadEvents();
   }
 
   onDeleted(_res: any) {
     this.selected = null;
-    this.OedbApi.getEvents({ when: 'now', limit: 500 }).subscribe((events: any) => {
-      this.features = Array.isArray(events?.features) ? events.features : [];
-    });
+    this.loadEvents();
   }
 
   // Menu callbacks