load 3000 events

frontend/src/app/pages/home/home.html

@@ -86,6 +86,13 @@
         <button class="button" (click)="downloadGeoJSON()" title="Télécharger GeoJSON">📥 GeoJSON</button>
         <button class="button" (click)="downloadCSV()" title="Télécharger CSV">📥 CSV</button>
       </div>
+      <div class="selectors">
+        <button class="button" [class.active]="selectionMode==='rectangle'" (click)="startRectSelection()" title="Sélection rectangulaire">▭</button>
+        <button class="button" [class.active]="selectionMode==='polygon'" (click)="startPolySelection()" title="Sélection polygone">⬠</button>
+        @if (selectedIds.length) {
+          <span class="muted">{{selectedIds.length}} sélectionné(s)</span>
+        }
+      </div>
     </div>
 
   
@@ -150,7 +157,7 @@ lastupdate:
     }
     @if (!showTable) {
       <div class="map">
-        <app-all-events [features]="filteredFeatures" [selected]="selected" (select)="onSelect($event)" (pickCoords)="onPickCoords($event)"></app-all-events>
+        <app-all-events [features]="filteredFeatures" [selected]="selected" [selectMode]="selectionMode" (selection)="onSelection($event)" (select)="onSelect($event)" (pickCoords)="onPickCoords($event)"></app-all-events>
       </div>
     } @else {
       <div class="table-wrapper" style="overflow:auto;height:100%;">
@@ -178,3 +185,28 @@ lastupdate:
     }
   </div>
 </div>
+
+@if (selectedIds.length) {
+  <div class="batch-panel">
+    <div class="panel">
+      <div class="row">
+        <label>Action de masse</label>
+        <select class="input" [(ngModel)]="batchAction">
+          <option value="none">Choisir...</option>
+          <option value="changeWhat">Changer le type d'évènement (what)</option>
+          <option value="delete">Supprimer</option>
+        </select>
+      </div>
+      @if (batchAction==='changeWhat') {
+        <div class="row">
+          <label>Nouveau "what"</label>
+          <input class="input" type="text" [(ngModel)]="batchWhat" placeholder="ex: traffic.roadwork" />
+        </div>
+      }
+      <div class="actions">
+        <button class="btn" (click)="applyBatch()" [disabled]="batchAction==='none'">Appliquer</button>
+        <button class="btn btn-ghost" (click)="clearSelection()">Annuler</button>
+      </div>
+    </div>
+  </div>
+}

frontend/src/app/pages/home/home.scss

@@ -131,6 +131,7 @@ app-edit-form{
   top: 135px;
   margin-left: 397px;
   width: 40vw;
+  max-width: 350px;
   max-height: 77.7vh;
   display: block;
   overflow: auto;

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

@@ -40,7 +40,11 @@ export class Home implements OnInit, OnDestroy {
   showTable = false;
   showFilters = false;
   showEditForm = true;
-
+  selectionMode: 'none' | 'rectangle' | 'polygon' = 'none';
+  selectedIds: Array<string | number> = [];
+  batchAction: 'none' | 'changeWhat' | 'delete' = 'none';
+  batchWhat = '';
+  
   // Nouvelles propriétés pour le rechargement automatique et la sélection de jours
   autoReloadEnabled = true;
   autoReloadInterval: any = null;
@@ -81,7 +85,7 @@ export class Home implements OnInit, OnDestroy {
     const params = {
       start: today.toISOString().split('T')[0],
       end: endDate.toISOString().split('T')[0],
-      limit: 1000
+      limit: 3000
     };
 
     this.OedbApi.getEvents(params).subscribe((events: any) => {
@@ -226,6 +230,52 @@ export class Home implements OnInit, OnDestroy {
     this.loadEvents();
   }
 
+  // Selection from map
+  onSelection(ids: Array<string | number>) {
+    this.selectedIds = ids;
+  }
+
+  startRectSelection() {
+    this.selectionMode = this.selectionMode === 'rectangle' ? 'none' : 'rectangle';
+  }
+  startPolySelection() {
+    this.selectionMode = this.selectionMode === 'polygon' ? 'none' : 'polygon';
+  }
+  clearSelection() {
+    this.selectionMode = 'none';
+    this.selectedIds = [];
+    this.batchAction = 'none';
+    this.batchWhat = '';
+  }
+
+  async applyBatch() {
+    if (!this.selectedIds.length || this.batchAction === 'none') return;
+    if (this.batchAction === 'delete') {
+      for (const id of this.selectedIds) {
+        await new Promise<void>((resolve) => {
+          this.OedbApi.deleteEvent(id).subscribe({ next: () => resolve(), error: () => resolve() });
+        });
+      }
+      this.loadEvents();
+      this.clearSelection();
+      return;
+    }
+    if (this.batchAction === 'changeWhat') {
+      const what = this.batchWhat.trim();
+      if (!what) return;
+      for (const id of this.selectedIds) {
+        const feature = this.features.find(f => (f?.properties?.id ?? f?.id) === id);
+        if (!feature) continue;
+        const updated = { ...feature, properties: { ...feature.properties, what } };
+        await new Promise<void>((resolve) => {
+          this.OedbApi.updateEvent(id, updated).subscribe({ next: () => resolve(), error: () => resolve() });
+        });
+      }
+      this.loadEvents();
+      this.clearSelection();
+    }
+  }
+
   onCanceled() {
     this.showEditForm = false;
   }