up add any
This commit is contained in:
Tykayn
tykayn
parent
0a7a527e68
commit
30aa570a43
3 changed files with 247 additions and 39 deletions
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = `
|
||||
<div style="color: #28a745; padding: 15px; background: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px;">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<strong>✅ Événement créé avec succès !</strong>
|
||||
`;
|
||||
|
||||
let successMessage = `✅ Événement créé avec succès !`;
|
||||
if (eventId) {
|
||||
successHtml += `<br>ID: ${eventId}<br><br>
|
||||
successMessage += `<br>ID: ${eventId}<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>
|
||||
|`;
|
||||
} else {
|
||||
successHtml += `<br><small>ID d'événement non disponible dans la réponse</small><br><br>`;
|
||||
}
|
||||
|
||||
successHtml += `
|
||||
|
|
||||
<a href="/demo" style="color: #0078ff; text-decoration: none; font-weight: bold;">
|
||||
<i class="fas fa-map"></i> Retour à la carte
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
</a>`;
|
||||
} else {
|
||||
successMessage += `<br><small>ID d'événement non disponible</small><br><br>
|
||||
<a href="/demo" style="color: #0078ff; text-decoration: none; font-weight: bold;">
|
||||
<i class="fas fa-map"></i> Retour à la carte
|
||||
</a>`;
|
||||
}
|
||||
|
||||
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 = `
|
||||
<div style="color: #dc3545; padding: 15px; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px;">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
<strong>❌ Erreur lors de la création de l'événement</strong>
|
||||
<br><small>${error.message}</small>
|
||||
</div>
|
||||
`;
|
||||
resultElement.className = 'error';
|
||||
showFixedResult(
|
||||
`❌ Erreur lors de la création de l'événement<br><small>${error.message}</small>`,
|
||||
'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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}`);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue