up traffic
This commit is contained in:
Tykayn
tykayn
parent
11cd3236c5
commit
3ec22cbe3b
4 changed files with 321 additions and 58 deletions
|
|
@ -57,61 +57,127 @@ function populateForm() {
|
|||
|
||||
console.log('✅ Données événement validées, remplissage du formulaire...');
|
||||
|
||||
// Remplir le tableau des propriétés
|
||||
populatePropertiesTable(eventData.properties);
|
||||
|
||||
const properties = eventData.properties;
|
||||
|
||||
|
||||
// Set form values
|
||||
document.getElementById('label').value = properties.label || '';
|
||||
document.getElementById('type').value = properties.type || 'scheduled';
|
||||
document.getElementById('what').value = properties.what || '';
|
||||
|
||||
|
||||
// Handle optional fields
|
||||
if (properties['what:series']) {
|
||||
document.getElementById('what_series').value = properties['what:series'];
|
||||
}
|
||||
|
||||
|
||||
if (properties.where) {
|
||||
document.getElementById('where').value = properties.where;
|
||||
}
|
||||
|
||||
|
||||
// Format dates for datetime-local input
|
||||
if (properties.start) {
|
||||
const startDate = new Date(properties.start);
|
||||
document.getElementById('start').value = startDate.toISOString().slice(0, 16);
|
||||
}
|
||||
|
||||
|
||||
if (properties.stop) {
|
||||
const stopDate = new Date(properties.stop);
|
||||
document.getElementById('stop').value = stopDate.toISOString().slice(0, 16);
|
||||
}
|
||||
|
||||
|
||||
// Set marker on map
|
||||
if (eventData.geometry && eventData.geometry.coordinates) {
|
||||
const coords = eventData.geometry.coordinates;
|
||||
marker.setLngLat(coords).addTo(map);
|
||||
|
||||
|
||||
// Center map on event location
|
||||
map.flyTo({
|
||||
center: coords,
|
||||
zoom: 10
|
||||
});
|
||||
}
|
||||
|
||||
// Initialiser l'autocomplétion pour le champ "what"
|
||||
const whatInput = document.getElementById('what');
|
||||
if (whatInput && window.initializeEventTypeAutocomplete) {
|
||||
initializeEventTypeAutocomplete(whatInput);
|
||||
}
|
||||
}
|
||||
|
||||
// Function to populate the properties table
|
||||
function populatePropertiesTable(properties) {
|
||||
const tableBody = document.getElementById('propertiesTableBody');
|
||||
if (!tableBody) return;
|
||||
|
||||
// Clear existing rows
|
||||
tableBody.innerHTML = '';
|
||||
|
||||
// Sort properties alphabetically
|
||||
const sortedProperties = Object.keys(properties).sort();
|
||||
|
||||
sortedProperties.forEach(key => {
|
||||
const value = properties[key];
|
||||
const row = document.createElement('tr');
|
||||
|
||||
// Determine value type and format
|
||||
let displayValue;
|
||||
let valueType;
|
||||
|
||||
if (value === null) {
|
||||
displayValue = '<em style="color: #999;">null</em>';
|
||||
valueType = 'null';
|
||||
} else if (typeof value === 'object') {
|
||||
displayValue = `<pre style="margin: 0; font-size: 12px;">${JSON.stringify(value, null, 2)}</pre>`;
|
||||
valueType = 'object';
|
||||
} else if (typeof value === 'string' && value.match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/)) {
|
||||
displayValue = value + ` <small style="color: #666;">(${new Date(value).toLocaleString()})</small>`;
|
||||
valueType = 'datetime';
|
||||
} else if (typeof value === 'string' && value.startsWith('http')) {
|
||||
displayValue = `<a href="${value}" target="_blank">${value}</a>`;
|
||||
valueType = 'url';
|
||||
} else {
|
||||
displayValue = String(value);
|
||||
valueType = typeof value;
|
||||
}
|
||||
|
||||
row.innerHTML = `
|
||||
<td style="padding: 6px; border-bottom: 1px solid #eee; font-weight: bold; color: #333;">${key}</td>
|
||||
<td style="padding: 6px; border-bottom: 1px solid #eee; word-break: break-word;">${displayValue}</td>
|
||||
<td style="padding: 6px; border-bottom: 1px solid #eee; color: #666; font-size: 12px;">${valueType}</td>
|
||||
`;
|
||||
|
||||
// Add alternating row colors
|
||||
if (tableBody.children.length % 2 === 0) {
|
||||
row.style.backgroundColor = '#f9f9f9';
|
||||
}
|
||||
|
||||
tableBody.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
// Attendre que les données soient disponibles avant de peupler le formulaire
|
||||
function initializeForm() {
|
||||
if (typeof window.eventDataJson !== 'undefined') {
|
||||
function initializeForm(retryCount = 0) {
|
||||
console.log(`🔄 Tentative d'initialisation ${retryCount + 1}/10`);
|
||||
|
||||
if (typeof window.eventData !== 'undefined' && window.eventData !== null) {
|
||||
console.log('📄 Données disponibles, initialisation du formulaire...');
|
||||
populateForm();
|
||||
} else if (retryCount < 10) {
|
||||
console.log('⏳ En attente des données, nouvelle tentative dans 200ms...');
|
||||
setTimeout(() => initializeForm(retryCount + 1), 200);
|
||||
} else {
|
||||
console.log('⏳ En attente des données, nouvelle tentative dans 100ms...');
|
||||
setTimeout(initializeForm, 100);
|
||||
console.error('❌ Timeout: Impossible de récupérer les données après 10 tentatives');
|
||||
showResult('Impossible de charger les données de l\'événement après plusieurs tentatives', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Démarrer l'initialisation
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('🚀 DOM chargé, démarrage de l\'initialisation...');
|
||||
initializeForm();
|
||||
// Attendre un peu pour laisser le temps au script du template de s'exécuter
|
||||
setTimeout(() => initializeForm(), 100);
|
||||
});
|
||||
|
||||
// Add marker on map click
|
||||
|
|
@ -119,6 +185,36 @@ map.on('click', function(e) {
|
|||
marker.setLngLat(e.lngLat).addTo(map);
|
||||
});
|
||||
|
||||
// Add functionality for swapping coordinates button
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const swapButton = document.getElementById('swapCoordinatesButton');
|
||||
if (swapButton) {
|
||||
swapButton.addEventListener('click', function() {
|
||||
if (!marker || !marker.getLngLat()) {
|
||||
showResult('Veuillez d\'abord placer un marqueur sur la carte', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const currentLngLat = marker.getLngLat();
|
||||
const swappedLngLat = [currentLngLat.lat, currentLngLat.lng];
|
||||
|
||||
// Update marker position
|
||||
marker.setLngLat(swappedLngLat);
|
||||
|
||||
// Show confirmation message
|
||||
showResult(`Coordonnées inversées: ${currentLngLat.lng.toFixed(6)}, ${currentLngLat.lat.toFixed(6)} → ${swappedLngLat[0].toFixed(6)}, ${swappedLngLat[1].toFixed(6)}`, 'success');
|
||||
|
||||
// Auto-hide success message after 3 seconds
|
||||
setTimeout(() => {
|
||||
const resultElement = document.getElementById('result');
|
||||
if (resultElement && resultElement.className === 'success') {
|
||||
resultElement.style.display = 'none';
|
||||
}
|
||||
}, 3000);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Function to show result message
|
||||
function showResult(message, type) {
|
||||
const resultElement = document.getElementById('result');
|
||||
|
|
@ -180,8 +276,8 @@ document.getElementById('eventForm').addEventListener('submit', function(e) {
|
|||
event.properties.where = where;
|
||||
}
|
||||
|
||||
// Submit event to API
|
||||
fetch(`/event/${eventId}`, {
|
||||
// Submit event to OEDB API
|
||||
fetch(`https://api.openeventdatabase.org/event/${eventId}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
|
|
@ -198,14 +294,39 @@ document.getElementById('eventForm').addEventListener('submit', function(e) {
|
|||
}
|
||||
})
|
||||
.then(data => {
|
||||
showResult(`Event updated successfully with ID: ${data.id}`, 'success');
|
||||
|
||||
console.log('📅 Réponse API de modification:', data);
|
||||
|
||||
// Extract event ID from response (handle different response structures)
|
||||
let eventId = null;
|
||||
if (data.properties && data.properties.id) {
|
||||
eventId = data.properties.id;
|
||||
} else if (data.id) {
|
||||
eventId = data.id;
|
||||
} else if (typeof data === 'string') {
|
||||
eventId = data;
|
||||
} else {
|
||||
// Fallback: use the eventId from the form
|
||||
eventId = document.getElementById('eventId').value;
|
||||
}
|
||||
|
||||
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');
|
||||
resultElement.innerHTML += `<p><a href="/event/${data.id}" >View Event</a> | <a href="/demo">Back to Map</a></p>`;
|
||||
let linksHtml = '<p>';
|
||||
|
||||
if (eventId) {
|
||||
linksHtml += `<a href="/demo/by_id/${eventId}" >Voir l'événement</a> | `;
|
||||
}
|
||||
|
||||
linksHtml += '<a href="/demo">Retour à la carte</a></p>';
|
||||
resultElement.innerHTML += linksHtml;
|
||||
})
|
||||
.catch(error => {
|
||||
showResult(`Error: ${error.message}`, 'error');
|
||||
console.error('❌ Erreur lors de la modification:', error);
|
||||
showResult(`❌ Erreur lors de la modification: ${error.message}`, 'error');
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue