QA page

static/edit.js

@@ -19,6 +19,9 @@ function initializeForm() {
     const properties = window.eventData.properties || {};
     const geometry = window.eventData.geometry || {};
 
+    // Remplir le tableau des propriétés
+    populatePropertiesTable();
+
     // Remplir les champs du formulaire
     document.getElementById('label').value = properties.label || '';
     document.getElementById('type').value = properties.type || 'scheduled';
@@ -102,6 +105,54 @@ function initializeMap() {
     console.log('✅ Carte initialisée');
 }
 
+function populatePropertiesTable() {
+    if (!window.eventData || !window.eventData.properties) {
+        return;
+    }
+
+    const tableBody = document.getElementById('propertiesTableBody');
+    const properties = window.eventData.properties;
+
+    // Vider le tableau
+    tableBody.innerHTML = '';
+
+    // Trier les propriétés alphabétiquement
+    const sortedKeys = Object.keys(properties).sort();
+
+    // Ajouter chaque propriété au tableau
+    sortedKeys.forEach(key => {
+        const value = properties[key];
+        const valueType = typeof value;
+
+        const row = document.createElement('tr');
+        row.style.borderBottom = '1px solid #eee';
+
+        // Formater la valeur pour l'affichage
+        let displayValue = '';
+        if (value === null) {
+            displayValue = '<em style="color: #999;">null</em>';
+        } else if (value === undefined) {
+            displayValue = '<em style="color: #999;">undefined</em>';
+        } else if (typeof value === 'object') {
+            displayValue = `<pre style="margin: 0; white-space: pre-wrap; font-size: 12px;">${JSON.stringify(value, null, 2)}</pre>`;
+        } else if (typeof value === 'string' && value.length > 50) {
+            displayValue = `<span title="${value}">${value.substring(0, 50)}...</span>`;
+        } else {
+            displayValue = String(value);
+        }
+
+        row.innerHTML = `
+            <td style="padding: 8px; font-weight: bold; background-color: #f8f9fa;">${key}</td>
+            <td style="padding: 8px; word-break: break-word; max-width: 300px;">${displayValue}</td>
+            <td style="padding: 8px; color: #666; font-style: italic;">${valueType}</td>
+        `;
+
+        tableBody.appendChild(row);
+    });
+
+    console.log('✅ Tableau des propriétés rempli');
+}
+
 function setupEventHandlers() {
     // Gestionnaire de soumission du formulaire
     const form = document.getElementById('eventForm');
@@ -114,6 +165,34 @@ function setupEventHandlers() {
     if (deleteButton) {
         deleteButton.addEventListener('click', handleDelete);
     }
+
+    // Gestionnaire du bouton d'inversion des coordonnées
+    const swapButton = document.getElementById('swapCoordinatesButton');
+    if (swapButton) {
+        swapButton.addEventListener('click', handleSwapCoordinates);
+
+        // Vérifier si c'est un Point pour activer/désactiver le bouton
+        const geometry = window.eventData?.geometry;
+        if (!geometry || geometry.type !== 'Point') {
+            swapButton.disabled = true;
+            swapButton.textContent = '🔄 Non disponible (pas un Point)';
+            swapButton.style.backgroundColor = '#6c757d';
+        }
+    }
+
+    // Initialiser l'autocomplétion pour le champ "what"
+    const whatInput = document.getElementById('what');
+    if (whatInput && window.initializeEventTypeAutocomplete) {
+        initializeEventTypeAutocomplete(whatInput, function(suggestion) {
+            console.log('Type d\'événement sélectionné:', suggestion);
+
+            // Émettre un événement de validation du formulaire
+            setTimeout(() => {
+                whatInput.dispatchEvent(new Event('input', { bubbles: true }));
+            }, 100);
+        });
+        console.log('✅ Autocomplétion initialisée pour le champ "what"');
+    }
 }
 
 async function handleFormSubmit(e) {
@@ -230,3 +309,115 @@ async function handleDelete() {
         `;
     }
 }
+
+async function handleSwapCoordinates() {
+    const eventId = document.getElementById('eventId').value;
+    const resultElement = document.getElementById('result');
+    const geometry = window.eventData?.geometry;
+
+    // Vérifications de sécurité
+    if (!geometry || geometry.type !== 'Point') {
+        resultElement.innerHTML = `
+            <div style="color: #dc3545; padding: 15px; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px;">
+                <strong>Erreur:</strong> L'inversion des coordonnées n'est disponible que pour les événements de type Point.
+            </div>
+        `;
+        resultElement.style.display = 'block';
+        return;
+    }
+
+    const currentCoords = geometry.coordinates;
+    if (!Array.isArray(currentCoords) || currentCoords.length < 2) {
+        resultElement.innerHTML = `
+            <div style="color: #dc3545; padding: 15px; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px;">
+                <strong>Erreur:</strong> Coordonnées invalides détectées.
+            </div>
+        `;
+        resultElement.style.display = 'block';
+        return;
+    }
+
+    // Afficher les coordonnées actuelles et futures
+    const [currentLon, currentLat] = currentCoords;
+    const newCoords = [currentLat, currentLon]; // Inverser longitude et latitude
+
+    const confirmMessage = `Voulez-vous inverser les coordonnées ?
+
+Actuelles: [${currentLon.toFixed(6)}, ${currentLat.toFixed(6)}] (lon, lat)
+Nouvelles: [${newCoords[0].toFixed(6)}, ${newCoords[1].toFixed(6)}] (lat→lon, lon→lat)
+
+Cette action sera sauvegardée immédiatement sur le serveur.`;
+
+    if (!confirm(confirmMessage)) {
+        return;
+    }
+
+    resultElement.innerHTML = '<div style="color: #17a2b8;">⏳ Inversion des coordonnées en cours...</div>';
+    resultElement.style.display = 'block';
+
+    try {
+        // Créer l'événement modifié avec coordonnées inversées
+        const updatedEvent = {
+            ...window.eventData,
+            geometry: {
+                ...geometry,
+                coordinates: newCoords
+            }
+        };
+
+        // Envoyer la mise à jour au serveur
+        const response = await fetch(`https://api.openeventdatabase.org/event/${eventId}`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(updatedEvent)
+        });
+
+        if (response.ok) {
+            // Mettre à jour les données locales
+            window.eventData = updatedEvent;
+
+            // Mettre à jour le marqueur sur la carte
+            if (currentMarker) {
+                currentMarker.setLngLat(newCoords);
+            }
+
+            // Centrer la carte sur les nouvelles coordonnées
+            if (map) {
+                map.flyTo({
+                    center: newCoords,
+                    zoom: Math.max(map.getZoom(), 12)
+                });
+            }
+
+            // Mettre à jour le tableau des propriétés
+            populatePropertiesTable();
+
+            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> Les coordonnées ont été inversées avec succès.<br>
+                    <small>Anciennes: [${currentLon.toFixed(6)}, ${currentLat.toFixed(6)}]<br>
+                    Nouvelles: [${newCoords[0].toFixed(6)}, ${newCoords[1].toFixed(6)}]</small>
+                </div>
+            `;
+
+            console.log('✅ Coordonnées inversées avec succès:', {
+                avant: [currentLon, currentLat],
+                après: newCoords
+            });
+        } else {
+            const errorData = await response.text();
+            throw new Error(`HTTP ${response.status}: ${errorData}`);
+        }
+    } catch (error) {
+        console.error('Erreur lors de l\'inversion des coordonnées:', 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> Impossible d'inverser les coordonnées. ${error.message}
+            </div>
+        `;
+    }
+}