oedb-backend/static/edit.js

// Variables globales
let map;
let draw;
let currentMarker = null;

// Initialisation quand le DOM est chargé
document.addEventListener('DOMContentLoaded', function() {
    initializeForm();
    initializeMap();
    setupEventHandlers();
});

function initializeForm() {
    if (!window.eventData) {
        console.error('Aucune donnée d\'événement disponible');
        return;
    }

    const properties = window.eventData.properties || {};
    const geometry = window.eventData.geometry || {};

    // Remplir les champs du formulaire
    document.getElementById('label').value = properties.label || '';
    document.getElementById('type').value = properties.type || 'scheduled';
    document.getElementById('what').value = properties.what || '';
    document.getElementById('what_series').value = properties['what:series'] || '';
    document.getElementById('where').value = properties.where || '';

    // Convertir les dates pour les inputs datetime-local
    if (properties.start) {
        const startDate = new Date(properties.start);
        document.getElementById('start').value = formatDateTimeLocal(startDate);
    }
    if (properties.stop) {
        const stopDate = new Date(properties.stop);
        document.getElementById('stop').value = formatDateTimeLocal(stopDate);
    }

    console.log('✅ Formulaire initialisé avec les données de l\'événement');
}

function formatDateTimeLocal(date) {
    // Convertir une date en format compatible avec datetime-local
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');

    return `${year}-${month}-${day}T${hours}:${minutes}`;
}

function initializeMap() {
    if (!window.maplibregl) {
        console.error('MapLibre GL JS non disponible');
        return;
    }

    const geometry = window.eventData?.geometry || {};
    const coordinates = geometry.coordinates || [2.3522, 48.8566]; // Paris par défaut

    // Initialiser la carte
    map = new maplibregl.Map({
        container: 'map',
        style: 'https://tiles.openfreemap.org/styles/liberty',
        center: coordinates,
        zoom: coordinates[0] === 0 && coordinates[1] === 0 ? 2 : 12
    });

    // Ajouter les contrôles
    map.addControl(new maplibregl.NavigationControl());
    map.addControl(new maplibregl.GeolocateControl({
        positionOptions: {
            enableHighAccuracy: true
        }
    }));

    // Ajouter un marqueur pour la position actuelle
    if (coordinates[0] !== 0 || coordinates[1] !== 0) {
        currentMarker = new maplibregl.Marker()
            .setLngLat(coordinates)
            .addTo(map);
    }

    // Gérer les clics sur la carte pour changer la position
    map.on('click', function(e) {
        const coords = [e.lngLat.lng, e.lngLat.lat];

        // Supprimer l'ancien marqueur
        if (currentMarker) {
            currentMarker.remove();
        }

        // Ajouter un nouveau marqueur
        currentMarker = new maplibregl.Marker()
            .setLngLat(coords)
            .addTo(map);

        console.log('📍 Position mise à jour:', coords);
    });

    console.log('✅ Carte initialisée');
}

function setupEventHandlers() {
    // Gestionnaire de soumission du formulaire
    const form = document.getElementById('eventForm');
    if (form) {
        form.addEventListener('submit', handleFormSubmit);
    }

    // Gestionnaire du bouton de suppression
    const deleteButton = document.getElementById('deleteButton');
    if (deleteButton) {
        deleteButton.addEventListener('click', handleDelete);
    }
}

async function handleFormSubmit(e) {
    e.preventDefault();

    const resultElement = document.getElementById('result');
    resultElement.innerHTML = '<div style="color: #0078ff;">⏳ Mise à jour en cours...</div>';
    resultElement.style.display = 'block';

    try {
        // Récupérer les données du formulaire
        const formData = new FormData(e.target);
        const eventId = document.getElementById('eventId').value;

        // Construire l'objet événement
        const updatedEvent = {
            type: 'Feature',
            geometry: {
                type: 'Point',
                coordinates: currentMarker ? 
                    [currentMarker.getLngLat().lng, currentMarker.getLngLat().lat] : 
                    [0, 0]
            },
            properties: {
                ...window.eventData.properties,
                label: formData.get('label'),
                type: formData.get('type'),
                what: formData.get('what'),
                'what:series': formData.get('what_series') || undefined,
                where: formData.get('where') || undefined,
                start: formData.get('start') ? new Date(formData.get('start')).toISOString() : undefined,
                stop: formData.get('stop') ? new Date(formData.get('stop')).toISOString() : undefined
            }
        };

        // Nettoyer les propriétés undefined
        Object.keys(updatedEvent.properties).forEach(key => {
            if (updatedEvent.properties[key] === undefined) {
                delete updatedEvent.properties[key];
            }
        });

        // Envoyer la mise à jour
        const response = await fetch(`https://api.openeventdatabase.org/event/${eventId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(updatedEvent)
        });

        if (response.ok) {
            resultElement.innerHTML = `
                <div style="color: #28a745; padding: 15px; background: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px;">
                    <i class="fas fa-check"></i>
                    <strong>Succès:</strong> L'événement a été mis à jour avec succès.
                    <br><a href="/demo/by_id/${eventId}">Voir l'événement</a>
                </div>
            `;
        } else {
            const errorData = await response.text();
            throw new Error(`HTTP ${response.status}: ${errorData}`);
        }
    } catch (error) {
        console.error('Erreur lors de la mise à jour:', error);
        resultElement.innerHTML = `
            <div style="color: #dc3545; padding: 15px; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px;">
                <i class="fas fa-exclamation-triangle"></i>
                <strong>Erreur:</strong> ${error.message}
            </div>
        `;
    }
}

async function handleDelete() {
    const eventId = document.getElementById('eventId').value;
    const eventLabel = window.eventData?.properties?.label || 'cet événement';

    if (!confirm(`Êtes-vous sûr de vouloir supprimer "${eventLabel}" ? Cette action est irréversible.`)) {
        return;
    }

    const resultElement = document.getElementById('result');
    resultElement.innerHTML = '<div style="color: #dc3545;">⏳ Suppression en cours...</div>';
    resultElement.style.display = 'block';

    try {
        const response = await fetch(`https://api.openeventdatabase.org/event/${eventId}`, {
            method: 'DELETE'
        });

        if (response.ok) {
            resultElement.innerHTML = `
                <div style="color: #28a745; padding: 15px; background: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px;">
                    <i class="fas fa-check"></i>
                    <strong>Succès:</strong> L'événement a été supprimé avec succès.
                    <br><a href="/demo">Retour à la démo</a>
                </div>
            `;

            // Désactiver le formulaire après suppression
            document.getElementById('eventForm').style.display = 'none';
        } else {
            const errorData = await response.text();
            throw new Error(`HTTP ${response.status}: ${errorData}`);
        }
    } catch (error) {
        console.error('Erreur lors de la suppression:', error);
        resultElement.innerHTML = `
            <div style="color: #dc3545; padding: 15px; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px;">
                <i class="fas fa-exclamation-triangle"></i>
                <strong>Erreur:</strong> ${error.message}
            </div>
        `;
    }
}