document.addEventListener("DOMContentLoaded", () => { console.log("Script chargé"); const addLieuButton = document.getElementById("add-lieu-button"); const addLieuModal = document.getElementById("add-lieu-modal"); const cancelAddLieu = document.getElementById("cancel-add-lieu"); const selectLocationButton = document.getElementById("select-location"); const addressDisplay = document.getElementById("lieu-details"); let map, marker, selectedAddress; if (addLieuButton && addLieuModal && cancelAddLieu && selectLocationButton) { // Affiche la modal addLieuButton.addEventListener("click", () => { const villeId = document.getElementById("sortie_ville").value; if (!villeId) { alert("Veuillez sélectionner une ville avant d'ajouter un lieu."); return; } addLieuModal.classList.remove("hidden"); // Détruire la carte si elle existe déjà if (map) { map.remove(); map = null; marker = null; } // Récupère les limites de la ville fetch(`/get-bounds/${villeId}`) .then(response => { if (!response.ok) { throw new Error("Erreur lors de la récupération des limites de la ville"); } return response.json(); }) .then(data => { console.log("Bounds de la ville :", data); // Initialise la carte map = L.map("map").setView([data.centerLat, data.centerLng], 13); // Ajout du fond de carte L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 19, }).addTo(map); // Limite le déplacement de la carte aux bounds const bounds = L.latLngBounds( [data.south, data.west], [data.north, data.east] ); map.setMaxBounds(bounds); map.fitBounds(bounds); // Empêche de dézoomer au-delà de la ville map.setMinZoom(map.getZoom()); // Gestion de la sélection d'un lieu sur la carte map.on("click", async (e) => { const { lat, lng } = e.latlng; // Place un marqueur if (marker) { marker.setLatLng([lat, lng]); } else { marker = L.marker([lat, lng]).addTo(map); } // Récupère l'adresse à partir des coordonnées try { const response = await fetch( `https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}` ); if (!response.ok) { throw new Error("Erreur lors de la récupération des informations du lieu."); } const data = await response.json(); console.log("Détails du lieu :", data); selectedAddress = data.display_name; // Affiche les détails du lieu const addressDetails = `
Rue : ${data.address.road || "Non disponible"}
Ville : ${data.address.city || data.address.town || "Non disponible"}
Code postal : ${data.address.postcode || "Non disponible"}
Pays : ${data.address.country || "Non disponible"}
`; addressDisplay.innerHTML = addressDetails; } catch (error) { console.error("Erreur lors de la récupération des informations :", error); addressDisplay.textContent = "Impossible de récupérer l'adresse."; } }); }) .catch(error => { console.error("Erreur :", error); }); }); // Ferme la modal sans enregistrer cancelAddLieu.addEventListener("click", () => { addLieuModal.classList.add("hidden"); addressDisplay.innerHTML = ""; // Réinitialise les détails de l'adresse }); // Sélectionne l'emplacement et envoie les données au serveur selectLocationButton.addEventListener("click", () => { if (marker) { const lat = marker.getLatLng().lat; const lng = marker.getLatLng().lng; const villeId = document.getElementById("sortie_ville").value; if (!villeId) { alert("Veuillez sélectionner une ville avant d'ajouter un lieu."); return; } if (!selectedAddress) { alert("Veuillez sélectionner un emplacement sur la carte."); return; } // Demande le nom du lieu à l'utilisateur const nom = prompt("Nom du lieu ?"); if (!nom) { alert("Le nom du lieu est obligatoire."); return; } // Envoie les données au serveur fetch("/lieu/set", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ nom, rue: selectedAddress, latitude: lat, longitude: lng, villeId, }), }) .then((response) => { if (!response.ok) { throw new Error("Erreur lors de l'ajout du lieu."); } return response.json(); }) .then((data) => { console.log("Lieu ajouté :", data); // Ajoute le lieu à la liste déroulante const lieuSelect = document.getElementById("sortie_lieu"); const option = document.createElement("option"); option.value = data.id; option.textContent = data.nom; lieuSelect.appendChild(option); // Sélectionne automatiquement le nouveau lieu lieuSelect.value = data.id; // Ferme la modal addLieuModal.classList.add("hidden"); }) .catch((error) => { console.error("Erreur :", error); }); } else { alert("Veuillez sélectionner un emplacement sur la carte."); } }); } else { console.error("Éléments requis pour ajouter un lieu introuvables."); } });