up add any

oedb/resources/demo/static/edit.js

@@ -180,6 +180,98 @@ document.addEventListener('DOMContentLoaded', function() {
     setTimeout(() => initializeForm(), 100);
 });
 
+// Show fixed result message at bottom of screen
+function showFixedResult(message, type) {
+    let resultElement = document.getElementById('result');
+
+    if (!resultElement) {
+        // Create result element if it doesn't exist
+        resultElement = document.createElement('div');
+        resultElement.id = 'result';
+        document.body.appendChild(resultElement);
+    }
+
+    // Style the element as fixed at bottom
+    resultElement.style.cssText = `
+        position: fixed;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 10000;
+        max-width: 90%;
+        width: auto;
+        min-width: 300px;
+        padding: 15px 45px 15px 15px;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        font-family: Arial, sans-serif;
+        font-size: 14px;
+        line-height: 1.4;
+        display: block;
+    `;
+
+    // Set colors based on type
+    let bgColor, textColor, borderColor;
+    switch (type) {
+        case 'success':
+            bgColor = '#d4edda';
+            textColor = '#155724';
+            borderColor = '#c3e6cb';
+            break;
+        case 'error':
+            bgColor = '#f8d7da';
+            textColor = '#721c24';
+            borderColor = '#f5c6cb';
+            break;
+        case 'loading':
+            bgColor = '#d1ecf1';
+            textColor = '#0c5460';
+            borderColor = '#bee5eb';
+            break;
+        default:
+            bgColor = '#e2e3e5';
+            textColor = '#383d41';
+            borderColor = '#d6d8db';
+    }
+
+    resultElement.style.backgroundColor = bgColor;
+    resultElement.style.color = textColor;
+    resultElement.style.border = `1px solid ${borderColor}`;
+
+    // Add close button
+    const closeButton = document.createElement('span');
+    closeButton.innerHTML = '×';
+    closeButton.style.cssText = `
+        position: absolute;
+        top: 8px;
+        right: 12px;
+        font-size: 20px;
+        font-weight: bold;
+        cursor: pointer;
+        color: ${textColor};
+        opacity: 0.7;
+        line-height: 1;
+    `;
+
+    closeButton.addEventListener('click', function() {
+        resultElement.style.display = 'none';
+    });
+
+    closeButton.addEventListener('mouseenter', function() {
+        this.style.opacity = '1';
+    });
+
+    closeButton.addEventListener('mouseleave', function() {
+        this.style.opacity = '0.7';
+    });
+
+    // Set message content
+    resultElement.innerHTML = message;
+    resultElement.appendChild(closeButton);
+
+    console.log(`📢 Message fixe affiché (${type}):`, message);
+}
+
 // Add marker on map click
 map.on('click', function(e) {
     marker.setLngLat(e.lngLat).addTo(map);
@@ -230,6 +322,10 @@ function showResult(message, type) {
 document.getElementById('eventForm').addEventListener('submit', function(e) {
     e.preventDefault();
     
+    // Disable any ongoing validation during submission
+    window.validationEnabled = false;
+    console.log('🔒 Validation désactivée pendant la modification');
+
     // Get event ID
     const eventId = document.getElementById('eventId').value;
     
@@ -311,22 +407,30 @@ document.getElementById('eventForm').addEventListener('submit', function(e) {
 
         console.log('🆔 ID événement pour les liens:', eventId);
 
-        showResult(`✅ Événement mis à jour avec succès !${eventId ? ` ID: ${eventId}` : ''}`, 'success');
-
-        // Add link to view the event
-        const resultElement = document.getElementById('result');
-        let linksHtml = '<p>';
+        let successMessage = `✅ Événement mis à jour avec succès !${eventId ? ` ID: ${eventId}` : ''}`;
 
         if (eventId) {
-            linksHtml += `<a href="/demo/by_id/${eventId}" >Voir l'événement</a> | `;
+            successMessage += `<br><br><a href="/demo/by_id/${eventId}" style="color: #0078ff; text-decoration: none; font-weight: bold;">
+                <i class="fas fa-eye"></i> Voir l'événement
+            </a> | `;
         }
 
-        linksHtml += '<a href="/demo">Retour à la carte</a></p>';
-        resultElement.innerHTML += linksHtml;
+        successMessage += `<a href="/demo" style="color: #0078ff; text-decoration: none; font-weight: bold;">
+            <i class="fas fa-map"></i> Retour à la carte
+        </a>`;
+
+        showFixedResult(successMessage, 'success');
     })
     .catch(error => {
         console.error('❌ Erreur lors de la modification:', error);
-        showResult(`❌ Erreur lors de la modification: ${error.message}`, 'error');
+        showFixedResult(`❌ Erreur lors de la modification<br><small>${error.message}</small>`, 'error');
+    })
+    .finally(() => {
+        // Re-enable validation after operation is complete
+        setTimeout(() => {
+            window.validationEnabled = true;
+            console.log('🔓 Validation réactivée');
+        }, 1000);
     });
 });