edit form

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

@@ -1,11 +1,15 @@
 import { Component, inject } from '@angular/core';
 import {Menu} from './menu/menu';
+import { AllEvents } from '../../maps/all-events/all-events';
+import { EditForm } from '../../forms/edit-form/edit-form';
 import { OedbApi } from '../../services/oedb-api';
 
 @Component({
   selector: 'app-home',
   imports: [
-    Menu
+    Menu,
+    AllEvents,
+    EditForm
   ],
   templateUrl: './home.html',
   styleUrl: './home.scss'
@@ -13,10 +17,55 @@ import { OedbApi } from '../../services/oedb-api';
 export class Home {
 
   OedbApi = inject(OedbApi);
+  features: Array<any> = [];
+  selected: any | null = null;
 
   constructor() {
-    this.OedbApi.getEvents({}).subscribe((events) => {
-      console.log(events);
+    this.OedbApi.getEvents({ when: 'now', limit: 500 }).subscribe((events: any) => {
+      this.features = Array.isArray(events?.features) ? events.features : [];
+    });
+  }
+
+  onSelect(feature: any) {
+    this.selected = feature;
+  }
+
+  onPickCoords(coords: [number, number]) {
+    // Autofill lat/lon in the form selection or prepare a new feature shell
+    const [lon, lat] = coords;
+    if (this.selected && this.selected.properties) {
+      this.selected = {
+        ...this.selected,
+        geometry: { type: 'Point', coordinates: [lon, lat] }
+      };
+    } else {
+      this.selected = {
+        id: null,
+        properties: { label: '', description: '', what: '', where: '' },
+        geometry: { type: 'Point', coordinates: [lon, lat] }
+      };
+    }
+  }
+
+  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 : [];
+    });
+  }
+
+  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 : [];
+    });
+  }
+
+  onDeleted(_res: any) {
+    this.selected = null;
+    this.OedbApi.getEvents({ when: 'now', limit: 500 }).subscribe((events: any) => {
+      this.features = Array.isArray(events?.features) ? events.features : [];
     });
   }
 }