split templates

oedb/resources/demo/static/edit.js

@@ -0,0 +1,209 @@
+// Initialize the map
+const map = new maplibregl.Map({
+    container: 'map',
+    style: 'https://tiles.openfreemap.org/styles/liberty',
+    center: [2.2137, 46.2276], // Default center (center of metropolitan France)
+    zoom: 5
+});
+
+// Add navigation controls
+map.addControl(new maplibregl.NavigationControl());
+
+// Add attribution control with OpenStreetMap attribution
+map.addControl(new maplibregl.AttributionControl({
+    customAttribution: '© <a href="https://www.openstreetmap.org/copyright" >OpenStreetMap</a> contributors'
+}));
+
+// Add marker for event location
+let marker = new maplibregl.Marker({
+    draggable: true
+});
+
+// Function to populate form with event data
+function populateForm() {
+    if (!eventData || !eventData.properties) {
+        showResult('Error loading event data', 'error');
+        return;
+    }
+    
+    const properties = eventData.properties;
+    
+    // Set form values
+    document.getElementById('label').value = properties.label || '';
+    document.getElementById('type').value = properties.type || 'scheduled';
+    document.getElementById('what').value = properties.what || '';
+    
+    // Handle optional fields
+    if (properties['what:series']) {
+        document.getElementById('what_series').value = properties['what:series'];
+    }
+    
+    if (properties.where) {
+        document.getElementById('where').value = properties.where;
+    }
+    
+    // Format dates for datetime-local input
+    if (properties.start) {
+        const startDate = new Date(properties.start);
+        document.getElementById('start').value = startDate.toISOString().slice(0, 16);
+    }
+    
+    if (properties.stop) {
+        const stopDate = new Date(properties.stop);
+        document.getElementById('stop').value = stopDate.toISOString().slice(0, 16);
+    }
+    
+    // Set marker on map
+    if (eventData.geometry && eventData.geometry.coordinates) {
+        const coords = eventData.geometry.coordinates;
+        marker.setLngLat(coords).addTo(map);
+        
+        // Center map on event location
+        map.flyTo({
+            center: coords,
+            zoom: 10
+        });
+    }
+}
+
+// Call function to populate form
+populateForm();
+
+// Add marker on map click
+map.on('click', function(e) {
+    marker.setLngLat(e.lngLat).addTo(map);
+});
+
+// Function to show result message
+function showResult(message, type) {
+    const resultElement = document.getElementById('result');
+    resultElement.textContent = message;
+    resultElement.className = type;
+    resultElement.style.display = 'block';
+    
+    // Scroll to result
+    resultElement.scrollIntoView({ behavior: 'smooth' });
+}
+
+// Handle form submission
+document.getElementById('eventForm').addEventListener('submit', function(e) {
+    e.preventDefault();
+    
+    // Get event ID
+    const eventId = document.getElementById('eventId').value;
+    
+    // Get form values
+    const label = document.getElementById('label').value;
+    const type = document.getElementById('type').value;
+    const what = document.getElementById('what').value;
+    const what_series = document.getElementById('what_series').value;
+    const where = document.getElementById('where').value;
+    const start = document.getElementById('start').value;
+    const stop = document.getElementById('stop').value;
+    
+    // Check if marker is set
+    if (!marker.getLngLat()) {
+        showResult('Please set a location by clicking on the map', 'error');
+        return;
+    }
+    
+    // Get marker coordinates
+    const lngLat = marker.getLngLat();
+    
+    // Create event object
+    const event = {
+        type: 'Feature',
+        geometry: {
+            type: 'Point',
+            coordinates: [lngLat.lng, lngLat.lat]
+        },
+        properties: {
+            label: label,
+            type: type,
+            what: what,
+            start: start,
+            stop: stop
+        }
+    };
+    
+    // Add optional properties if provided
+    if (what_series) {
+        event.properties['what:series'] = what_series;
+    }
+    
+    if (where) {
+        event.properties.where = where;
+    }
+    
+    // Submit event to API
+    fetch(`/event/${eventId}`, {
+        method: 'PUT',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(event)
+    })
+    .then(response => {
+        if (response.ok) {
+            return response.json();
+        } else {
+            return response.text().then(text => {
+                throw new Error(text || response.statusText);
+            });
+        }
+    })
+    .then(data => {
+        showResult(`Event updated successfully with ID: ${data.id}`, 'success');
+        
+        // Add link to view the event
+        const resultElement = document.getElementById('result');
+        resultElement.innerHTML += `<p><a href="/event/${data.id}" >View Event</a> | <a href="/demo">Back to Map</a></p>`;
+    })
+    .catch(error => {
+        showResult(`Error: ${error.message}`, 'error');
+    });
+});
+
+// Handle delete button click
+document.getElementById('deleteButton').addEventListener('click', function() {
+    // Get event ID
+    const eventId = document.getElementById('eventId').value;
+    
+    // Show confirmation dialog
+    if (confirm('Are you sure you want to delete this event? This action cannot be undone.')) {
+        // Submit delete request to API
+        fetch(`/event/${eventId}`, {
+            method: 'DELETE',
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        })
+        .then(response => {
+            if (response.ok) {
+                showResult('Event deleted successfully', 'success');
+                
+                // Add link to go back to map
+                const resultElement = document.getElementById('result');
+                resultElement.innerHTML += `<p><a href="/demo">Back to Map</a></p>`;
+                
+                // Disable form controls
+                const formElements = document.querySelectorAll('#eventForm input, #eventForm select, #eventForm button');
+                formElements.forEach(element => {
+                    element.disabled = true;
+                });
+                
+                // Redirect to demo page after 2 seconds
+                setTimeout(() => {
+                    window.location.href = '/demo';
+                }, 2000);
+            } else {
+                return response.text().then(text => {
+                    throw new Error(text || response.statusText);
+                });
+            }
+        })
+        .catch(error => {
+            showResult(`Error deleting event: ${error.message}`, 'error');
+        });
+    }
+});