diff --git a/oedb/resources/demo/static/edit.js b/oedb/resources/demo/static/edit.js index 25d314e..67945cb 100644 --- a/oedb/resources/demo/static/edit.js +++ b/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 = '

'; + let successMessage = `✅ Événement mis à jour avec succès !${eventId ? ` ID: ${eventId}` : ''}`; if (eventId) { - linksHtml += `Voir l'événement | `; + successMessage += `

+ Voir l'événement + | `; } - linksHtml += 'Retour à la carte

'; - resultElement.innerHTML += linksHtml; + successMessage += ` + Retour à la carte + `; + + 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
${error.message}`, 'error'); + }) + .finally(() => { + // Re-enable validation after operation is complete + setTimeout(() => { + window.validationEnabled = true; + console.log('🔓 Validation réactivée'); + }, 1000); }); }); diff --git a/oedb/resources/demo/static/traffic.js b/oedb/resources/demo/static/traffic.js index cbc9f35..7c47864 100644 --- a/oedb/resources/demo/static/traffic.js +++ b/oedb/resources/demo/static/traffic.js @@ -203,11 +203,13 @@ document.addEventListener('DOMContentLoaded', function () { async function submitReport(event) { event.preventDefault(); + // Disable validation during submission + window.validationEnabled = false; + console.log('🔒 Validation désactivée pendant la soumission'); + // Show loading message const resultElement = document.getElementById('result'); - resultElement.textContent = 'Submitting report...'; - resultElement.className = ''; - resultElement.style.display = 'block'; + showFixedResult('Création de l\'événement en cours...', 'loading'); try { // Check if we have coordinates @@ -294,31 +296,24 @@ document.addEventListener('DOMContentLoaded', function () { console.log('🆔 ID événement extrait:', eventId); // Show success message with links - let successHtml = ` -
- - ✅ Événement créé avec succès ! - `; - + let successMessage = `✅ Événement créé avec succès !`; if (eventId) { - successHtml += `
ID: ${eventId}

+ successMessage += `
ID: ${eventId}

Voir l'événement - |`; - } else { - successHtml += `
ID d'événement non disponible dans la réponse

`; - } - - successHtml += ` + | Retour Ă  la carte - -
- `; + `; + } else { + successMessage += `
ID d'événement non disponible

+ + Retour à la carte + `; + } - resultElement.innerHTML = successHtml; - resultElement.className = 'success'; + showFixedResult(successMessage, 'success'); // Reset the form event.target.reset(); @@ -345,14 +340,16 @@ document.addEventListener('DOMContentLoaded', function () { console.error('❌ Erreur lors de la création d\'événement:', error); // Show error message - resultElement.innerHTML = ` -
- - ❌ Erreur lors de la création de l'événement -
${error.message} -
- `; - resultElement.className = 'error'; + showFixedResult( + `❌ Erreur lors de la création de l'événement
${error.message}`, + 'error' + ); + } finally { + // Re-enable validation after submission is complete + setTimeout(() => { + window.validationEnabled = true; + console.log('🔓 Validation rĂ©activĂ©e'); + }, 1000); } } @@ -443,6 +440,12 @@ function clearFieldError(element) { } // Validate the entire form function validateForm() { + // Skip validation if disabled (during submission) + if (window.validationEnabled === false) { + console.log('⏸️ Validation ignorĂ©e (dĂ©sactivĂ©e)'); + return true; + } + const form = document.getElementById('reportForm'); const submitButton = document.getElementById('report_issue_button'); @@ -831,3 +834,104 @@ function showFieldError(element, message) { // Insert error message after the field element.parentNode.insertBefore(errorDiv, element.nextSibling); } + +// 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); + + // Auto-hide loading messages after 10 seconds + if (type === 'loading') { + setTimeout(() => { + if (resultElement.style.display !== 'none') { + resultElement.style.display = 'none'; + } + }, 10000); + } + + console.log(`📢 Message fixe affichĂ© (${type}):`, message); +} diff --git a/oedb/resources/demo/templates/map_by_what_type.html b/oedb/resources/demo/templates/map_by_what_type.html index 0e05fdc..a4f0c0b 100644 --- a/oedb/resources/demo/templates/map_by_what_type.html +++ b/oedb/resources/demo/templates/map_by_what_type.html @@ -483,7 +483,7 @@ // Charger les Ă©vĂ©nements async function loadEvents() { try { - const response = await fetch(`https://api.openeventdatabase.org/event?what=${eventType}&limit=1000 &start=1970-01-01T00:00:00Z&stop=2099-12-31T23:59:59Z`); + const response = await fetch(`https://api.openeventdatabase.org/event?what=${eventType}&limit=200 &start=2010-01-01T00:00:00Z&stop=2026-12-31T23:59:59Z`); if (!response.ok) { throw new Error(`HTTP ${response.status}: ${response.statusText}`);