// Variables globales
let map;
let draw;
let currentMarker = null;
// Initialisation quand le DOM est chargé
document.addEventListener('DOMContentLoaded', function() {
initializeForm();
initializeMap();
setupEventHandlers();
});
function initializeForm() {
if (!window.eventData) {
console.error('Aucune donnée d\'événement disponible');
return;
}
const properties = window.eventData.properties || {};
const geometry = window.eventData.geometry || {};
// Remplir les champs du formulaire
document.getElementById('label').value = properties.label || '';
document.getElementById('type').value = properties.type || 'scheduled';
document.getElementById('what').value = properties.what || '';
document.getElementById('what_series').value = properties['what:series'] || '';
document.getElementById('where').value = properties.where || '';
// Convertir les dates pour les inputs datetime-local
if (properties.start) {
const startDate = new Date(properties.start);
document.getElementById('start').value = formatDateTimeLocal(startDate);
}
if (properties.stop) {
const stopDate = new Date(properties.stop);
document.getElementById('stop').value = formatDateTimeLocal(stopDate);
}
console.log('✅ Formulaire initialisé avec les données de l\'événement');
}
function formatDateTimeLocal(date) {
// Convertir une date en format compatible avec datetime-local
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
return `${year}-${month}-${day}T${hours}:${minutes}`;
}
function initializeMap() {
if (!window.maplibregl) {
console.error('MapLibre GL JS non disponible');
return;
}
const geometry = window.eventData?.geometry || {};
const coordinates = geometry.coordinates || [2.3522, 48.8566]; // Paris par défaut
// Initialiser la carte
map = new maplibregl.Map({
container: 'map',
style: 'https://tiles.openfreemap.org/styles/liberty',
center: coordinates,
zoom: coordinates[0] === 0 && coordinates[1] === 0 ? 2 : 12
});
// Ajouter les contrôles
map.addControl(new maplibregl.NavigationControl());
map.addControl(new maplibregl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
}
}));
// Ajouter un marqueur pour la position actuelle
if (coordinates[0] !== 0 || coordinates[1] !== 0) {
currentMarker = new maplibregl.Marker()
.setLngLat(coordinates)
.addTo(map);
}
// Gérer les clics sur la carte pour changer la position
map.on('click', function(e) {
const coords = [e.lngLat.lng, e.lngLat.lat];
// Supprimer l'ancien marqueur
if (currentMarker) {
currentMarker.remove();
}
// Ajouter un nouveau marqueur
currentMarker = new maplibregl.Marker()
.setLngLat(coords)
.addTo(map);
console.log('📍 Position mise à jour:', coords);
});
console.log('✅ Carte initialisée');
}
function setupEventHandlers() {
// Gestionnaire de soumission du formulaire
const form = document.getElementById('eventForm');
if (form) {
form.addEventListener('submit', handleFormSubmit);
}
// Gestionnaire du bouton de suppression
const deleteButton = document.getElementById('deleteButton');
if (deleteButton) {
deleteButton.addEventListener('click', handleDelete);
}
}
async function handleFormSubmit(e) {
e.preventDefault();
const resultElement = document.getElementById('result');
resultElement.innerHTML = '⏳ Mise à jour en cours...
';
resultElement.style.display = 'block';
try {
// Récupérer les données du formulaire
const formData = new FormData(e.target);
const eventId = document.getElementById('eventId').value;
// Construire l'objet événement
const updatedEvent = {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: currentMarker ?
[currentMarker.getLngLat().lng, currentMarker.getLngLat().lat] :
[0, 0]
},
properties: {
...window.eventData.properties,
label: formData.get('label'),
type: formData.get('type'),
what: formData.get('what'),
'what:series': formData.get('what_series') || undefined,
where: formData.get('where') || undefined,
start: formData.get('start') ? new Date(formData.get('start')).toISOString() : undefined,
stop: formData.get('stop') ? new Date(formData.get('stop')).toISOString() : undefined
}
};
// Nettoyer les propriétés undefined
Object.keys(updatedEvent.properties).forEach(key => {
if (updatedEvent.properties[key] === undefined) {
delete updatedEvent.properties[key];
}
});
// Envoyer la mise à jour
const response = await fetch(`https://api.openeventdatabase.org/event/${eventId}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(updatedEvent)
});
if (response.ok) {
resultElement.innerHTML = `
`;
} else {
const errorData = await response.text();
throw new Error(`HTTP ${response.status}: ${errorData}`);
}
} catch (error) {
console.error('Erreur lors de la mise à jour:', error);
resultElement.innerHTML = `
Erreur: ${error.message}
`;
}
}
async function handleDelete() {
const eventId = document.getElementById('eventId').value;
const eventLabel = window.eventData?.properties?.label || 'cet événement';
if (!confirm(`Êtes-vous sûr de vouloir supprimer "${eventLabel}" ? Cette action est irréversible.`)) {
return;
}
const resultElement = document.getElementById('result');
resultElement.innerHTML = '⏳ Suppression en cours...
';
resultElement.style.display = 'block';
try {
const response = await fetch(`https://api.openeventdatabase.org/event/${eventId}`, {
method: 'DELETE'
});
if (response.ok) {
resultElement.innerHTML = `
`;
// Désactiver le formulaire après suppression
document.getElementById('eventForm').style.display = 'none';
} else {
const errorData = await response.text();
throw new Error(`HTTP ${response.status}: ${errorData}`);
}
} catch (error) {
console.error('Erreur lors de la suppression:', error);
resultElement.innerHTML = `
Erreur: ${error.message}
`;
}
}