oedb-backend/oedb/resources/demo/static/edit.js

// 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
});

// Variable globale pour les données de l'événement
let eventData = null;

// Function to populate form with event data
function populateForm() {
    console.log('🔄 Tentative de récupération des données événement...');

    // Essayer de récupérer les données depuis window (définies dans le template)
    try {
        if (typeof window.eventData !== 'undefined' && window.eventData) {
            eventData = window.eventData;
            console.log('✅ Données événement récupérées depuis window:', eventData);
        } else {
            throw new Error('Aucune donnée d\'événement trouvée dans window.eventData');
        }
    } catch (error) {
        console.error('❌ Erreur lors de la récupération des données événement:', error);
        showResult('Erreur lors du chargement des données de l\'événement: ' + error.message, 'error');
        return;
    }

    // Vérifier la validité des données
    if (!eventData) {
        console.error('❌ eventData est null ou undefined');
        showResult('Données d\'événement manquantes', 'error');
        return;
    }

    if (!eventData.properties) {
        console.error('❌ eventData.properties est manquant:', eventData);
        showResult('Structure de données d\'événement invalide (properties manquant)', 'error');
        return;
    }

    console.log('✅ Données événement validées, remplissage du formulaire...');
    
    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
        });
    }
}

// Attendre que les données soient disponibles avant de peupler le formulaire
function initializeForm() {
    if (typeof window.eventDataJson !== 'undefined') {
        console.log('📄 Données disponibles, initialisation du formulaire...');
        populateForm();
    } else {
        console.log('⏳ En attente des données, nouvelle tentative dans 100ms...');
        setTimeout(initializeForm, 100);
    }
}

// Démarrer l'initialisation
document.addEventListener('DOMContentLoaded', function() {
    console.log('🚀 DOM chargé, démarrage de l\'initialisation...');
    initializeForm();
});

// 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('Êtes-vous sûr de vouloir supprimer cet événement ? Cette action ne peut pas être annulée.')) {
        // Show loading message
        showResult('Suppression en cours...', 'info');

        // Submit delete request to external API
        fetch(`https://api.openeventdatabase.org/event/${eventId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => {
            if (response.ok || response.status === 204) {
                showResult('✅ Événement supprimé avec succès !', 'success');

                // Add link to go back to map
                const resultElement = document.getElementById('result');
                resultElement.innerHTML += `<p><a href="/demo">Retour à la carte</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 3 seconds
                setTimeout(() => {
                    window.location.href = '/demo';
                }, 3000);
            } else if (response.status === 404) {
                throw new Error('Événement non trouvé sur l\'API externe');
            } else if (response.status === 403) {
                throw new Error('Accès non autorisé - un secret pourrait être requis pour supprimer cet événement');
            } else {
                return response.text().then(text => {
                    throw new Error(text || `Erreur HTTP ${response.status}: ${response.statusText}`);
                });
            }
        })
        .catch(error => {
            console.error('Erreur lors de la suppression:', error);
            if (error.name === 'TypeError' && error.message.includes('Failed to fetch')) {
                showResult('❌ Erreur de connexion : Impossible de joindre l\'API api.openeventdatabase.org', 'error');
            } else {
                showResult(`❌ Erreur lors de la suppression : ${error.message}`, 'error');
            }
        });
    }
});