387 lines
No EOL
14 KiB
JavaScript
387 lines
No EOL
14 KiB
JavaScript
|
|
// Variable globale pour les données de l'événement
|
|
let eventData = null
|
|
|
|
// Initialize the map
|
|
const map = new maplibregl.Map({
|
|
container: 'map',
|
|
style: 'https://tiles.openfreemap.org/styles/liberty',
|
|
center: [2.2137, 46.2276], // Default center (center of metropolitan France)
|
|
zoom: 5
|
|
});
|
|
|
|
// Add navigation controls
|
|
map.addControl(new maplibregl.NavigationControl());
|
|
|
|
// Add attribution control with OpenStreetMap attribution
|
|
map.addControl(new maplibregl.AttributionControl({
|
|
customAttribution: '© <a href="https://www.openstreetmap.org/copyright" >OpenStreetMap</a> contributors'
|
|
}));
|
|
|
|
// Add marker for event location
|
|
let marker = new maplibregl.Marker({
|
|
draggable: true
|
|
});
|
|
;
|
|
|
|
// Function to populate form with event data
|
|
function populateForm() {
|
|
console.log('🔄 Tentative de récupération des données événement...');
|
|
|
|
// Essayer de récupérer les données depuis window (définies dans le template)
|
|
try {
|
|
if (typeof window.eventData !== 'undefined' && window.eventData) {
|
|
eventData = window.eventData;
|
|
console.log('✅ Données événement récupérées depuis window:', eventData);
|
|
} else {
|
|
throw new Error('Aucune donnée d\'événement trouvée dans window.eventData');
|
|
}
|
|
} catch (error) {
|
|
console.error('❌ Erreur lors de la récupération des données événement:', error);
|
|
showResult('Erreur lors du chargement des données de l\'événement: ' + error.message, 'error');
|
|
return;
|
|
}
|
|
|
|
// Vérifier la validité des données
|
|
if (!eventData) {
|
|
console.error('❌ eventData est null ou undefined');
|
|
showResult('Données d\'événement manquantes', 'error');
|
|
return;
|
|
}
|
|
|
|
if (!eventData.properties) {
|
|
console.error('❌ eventData.properties est manquant:', eventData);
|
|
showResult('Structure de données d\'événement invalide (properties manquant)', 'error');
|
|
return;
|
|
}
|
|
|
|
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(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.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...');
|
|
// Attendre un peu pour laisser le temps au script du template de s'exécuter
|
|
setTimeout(() => initializeForm(), 100);
|
|
});
|
|
|
|
// Add marker on map click
|
|
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');
|
|
resultElement.textContent = message;
|
|
resultElement.className = type;
|
|
resultElement.style.display = 'block';
|
|
|
|
// Scroll to result
|
|
resultElement.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
|
|
// Handle form submission
|
|
document.getElementById('eventForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
// Get event ID
|
|
const eventId = document.getElementById('eventId').value;
|
|
|
|
// Get form values
|
|
const label = document.getElementById('label').value;
|
|
const type = document.getElementById('type').value;
|
|
const what = document.getElementById('what').value;
|
|
const what_series = document.getElementById('what_series').value;
|
|
const where = document.getElementById('where').value;
|
|
const start = document.getElementById('start').value;
|
|
const stop = document.getElementById('stop').value;
|
|
|
|
// Check if marker is set
|
|
if (!marker.getLngLat()) {
|
|
showResult('Please set a location by clicking on the map', 'error');
|
|
return;
|
|
}
|
|
|
|
// Get marker coordinates
|
|
const lngLat = marker.getLngLat();
|
|
|
|
// Create event object
|
|
const event = {
|
|
type: 'Feature',
|
|
geometry: {
|
|
type: 'Point',
|
|
coordinates: [lngLat.lng, lngLat.lat]
|
|
},
|
|
properties: {
|
|
label: label,
|
|
type: type,
|
|
what: what,
|
|
start: start,
|
|
stop: stop
|
|
}
|
|
};
|
|
|
|
// Add optional properties if provided
|
|
if (what_series) {
|
|
event.properties['what:series'] = what_series;
|
|
}
|
|
|
|
if (where) {
|
|
event.properties.where = where;
|
|
}
|
|
|
|
// Submit event to OEDB API
|
|
fetch(`https://api.openeventdatabase.org/event/${eventId}`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(event)
|
|
})
|
|
.then(response => {
|
|
if (response.ok) {
|
|
return response.json();
|
|
} else {
|
|
return response.text().then(text => {
|
|
throw new Error(text || response.statusText);
|
|
});
|
|
}
|
|
})
|
|
.then(data => {
|
|
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');
|
|
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 => {
|
|
console.error('❌ Erreur lors de la modification:', error);
|
|
showResult(`❌ Erreur lors de la modification: ${error.message}`, 'error');
|
|
});
|
|
});
|
|
|
|
// Handle delete button click
|
|
document.getElementById('deleteButton').addEventListener('click', function() {
|
|
// Get event ID
|
|
const eventId = document.getElementById('eventId').value;
|
|
|
|
// Show confirmation dialog
|
|
if (confirm('Êtes-vous sûr de vouloir supprimer cet événement ? Cette action ne peut pas être annulée.')) {
|
|
// Show loading message
|
|
showResult('Suppression en cours...', 'info');
|
|
|
|
// Submit delete request to external API
|
|
fetch(`https://api.openeventdatabase.org/event/${eventId}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
})
|
|
.then(response => {
|
|
if (response.ok || response.status === 204) {
|
|
showResult('✅ Événement supprimé avec succès !', 'success');
|
|
|
|
// Add link to go back to map
|
|
const resultElement = document.getElementById('result');
|
|
resultElement.innerHTML += `<p><a href="/demo">Retour à la carte</a></p>`;
|
|
|
|
// Disable form controls
|
|
const formElements = document.querySelectorAll('#eventForm input, #eventForm select, #eventForm button');
|
|
formElements.forEach(element => {
|
|
element.disabled = true;
|
|
});
|
|
|
|
// Redirect to demo page after 3 seconds
|
|
setTimeout(() => {
|
|
window.location.href = '/demo';
|
|
}, 3000);
|
|
} else if (response.status === 404) {
|
|
throw new Error('Événement non trouvé sur l\'API externe');
|
|
} else if (response.status === 403) {
|
|
throw new Error('Accès non autorisé - un secret pourrait être requis pour supprimer cet événement');
|
|
} else {
|
|
return response.text().then(text => {
|
|
throw new Error(text || `Erreur HTTP ${response.status}: ${response.statusText}`);
|
|
});
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Erreur lors de la suppression:', error);
|
|
if (error.name === 'TypeError' && error.message.includes('Failed to fetch')) {
|
|
showResult('❌ Erreur de connexion : Impossible de joindre l\'API api.openeventdatabase.org', 'error');
|
|
} else {
|
|
showResult(`❌ Erreur lors de la suppression : ${error.message}`, 'error');
|
|
}
|
|
});
|
|
}
|
|
}); |