up edit

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

@@ -14,8 +14,33 @@
     <app-edit-form [selected]="selected" (saved)="onSaved($event)" (created)="onCreated($event)" (deleted)="onDeleted($event)"></app-edit-form>
   </div>
   <div class="main">
-    <div class="map">
-      <app-all-events [features]="features" (select)="onSelect($event)" (pickCoords)="onPickCoords($event)"></app-all-events>
-    </div>
+    @if (!showTable) {
+      <div class="map">
+        <app-all-events [features]="features" [selected]="selected" (select)="onSelect($event)" (pickCoords)="onPickCoords($event)"></app-all-events>
+      </div>
+    } @else {
+      <div class="table-wrapper" style="overflow:auto;height:100%;">
+        <table style="width:100%;border-collapse:collapse;">
+          <thead>
+            <tr>
+              <th style="text-align:left;padding:6px;border-bottom:1px solid #e5e7eb;">Type</th>
+              <th style="text-align:left;padding:6px;border-bottom:1px solid #e5e7eb;">Label</th>
+              <th style="text-align:left;padding:6px;border-bottom:1px solid #e5e7eb;">Start</th>
+              <th style="text-align:left;padding:6px;border-bottom:1px solid #e5e7eb;">Stop</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (f of features; track f.id) {
+              <tr (click)="onSelect({ id: f?.properties?.id ?? f?.id, properties: f.properties, geometry: f.geometry })" style="cursor:pointer;">
+                <td style="padding:6px;border-bottom:1px solid #f1f5f9;">{{f?.properties?.what}}</td>
+                <td style="padding:6px;border-bottom:1px solid #f1f5f9;">{{f?.properties?.label || f?.properties?.name}}</td>
+                <td style="padding:6px;border-bottom:1px solid #f1f5f9;">{{f?.properties?.start || f?.properties?.when}}</td>
+                <td style="padding:6px;border-bottom:1px solid #f1f5f9;">{{f?.properties?.stop}}</td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+    }
   </div>
 </div>

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

@@ -19,6 +19,7 @@ export class Home {
   OedbApi = inject(OedbApi);
   features: Array<any> = [];
   selected: any | null = null;
+  showTable = false;
 
   constructor() {
     this.OedbApi.getEvents({ when: 'now', limit: 500 }).subscribe((events: any) => {
@@ -68,4 +69,49 @@ export class Home {
       this.features = Array.isArray(events?.features) ? events.features : [];
     });
   }
+
+  // Menu callbacks
+  ngAfterViewInit() {
+    // Wire menu callbacks if needed via querySelector; left simple for now
+    // We keep logic here: toggling and downloads
+  }
+
+  toggleView() {
+    this.showTable = !this.showTable;
+  }
+
+  downloadGeoJSON() {
+    const blob = new Blob([JSON.stringify({ type: 'FeatureCollection', features: this.features }, null, 2)], { type: 'application/geo+json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'events.geojson';
+    document.body.appendChild(a);
+    a.click();
+    URL.revokeObjectURL(url);
+    a.remove();
+  }
+
+  downloadCSV() {
+    const header = ['id', 'what', 'label', 'start', 'stop', 'lon', 'lat'];
+    const rows = this.features.map((f: any) => [
+      JSON.stringify(f?.properties?.id ?? f?.id ?? ''),
+      JSON.stringify(f?.properties?.what ?? ''),
+      JSON.stringify(f?.properties?.label ?? f?.properties?.name ?? ''),
+      JSON.stringify(f?.properties?.start ?? f?.properties?.when ?? ''),
+      JSON.stringify(f?.properties?.stop ?? ''),
+      JSON.stringify(f?.geometry?.coordinates?.[0] ?? ''),
+      JSON.stringify(f?.geometry?.coordinates?.[1] ?? '')
+    ].join(','));
+    const csv = [header.join(','), ...rows].join('\n');
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'events.csv';
+    document.body.appendChild(a);
+    a.click();
+    URL.revokeObjectURL(url);
+    a.remove();
+  }
 }

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

@@ -72,6 +72,12 @@
     <button class="button">oui, toujours là</button>
     <button class="button">non plus là</button>
     <button class="button">pouet pouet!</button>
+    <hr>
+    <button class="button" (click)="toggleView()">Basculer carte / tableau</button>
+    <div class="downloaders">
+      <button class="button" (click)="downloadGeoJSON()">Télécharger GeoJSON</button>
+      <button class="button" (click)="downloadCSV()">Télécharger CSV</button>
+    </div>
   </div>
   <div id="user_infos">
     login OSM:

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

@@ -10,6 +10,9 @@ import oedb_what_categories from '../../../../oedb-types';
 export class Menu {
 
   public oedb_what_categories: Array<any> = [];
+  public onToggleView?: () => void;
+  public onDownloadGeoJSON?: () => void;
+  public onDownloadCSV?: () => void;
 
   constructor() {
     let keys = Object.keys(oedb_what_categories.presets.what);
@@ -22,4 +25,8 @@ export class Menu {
       );
     })
   }
+
+  toggleView() { this.onToggleView && this.onToggleView(); }
+  downloadGeoJSON() { this.onDownloadGeoJSON && this.onDownloadGeoJSON(); }
+  downloadCSV() { this.onDownloadCSV && this.onDownloadCSV(); }
 }