170 lines
6.0 KiB
JavaScript
170 lines
6.0 KiB
JavaScript
document.addEventListener("DOMContentLoaded", () => {
|
|
const addLieuModal = document.getElementById("add-lieu-modal");
|
|
const cancelAddLieu = document.getElementById("cancel-add-lieu");
|
|
const saveLieuButton = document.getElementById("save-lieu");
|
|
const lieuNomInput = document.getElementById("lieu-nom");
|
|
const lieuNomError = document.getElementById("lieu-nom-error");
|
|
const villeSelect = document.getElementById("sortie_ville");
|
|
const lieuSelect = document.getElementById("sortie_lieu");
|
|
|
|
let map, marker, selectedAddress, selectedRue, cityPolygon, cityBounds;
|
|
|
|
// Ouvrir la modal
|
|
document.getElementById("add-lieu-button").addEventListener("click", async () => {
|
|
const villeId = villeSelect.value;
|
|
|
|
if (!villeId) {
|
|
alert("Veuillez sélectionner une ville avant d'ajouter un lieu.");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Récupérer les limites et le centre de la ville depuis le serveur
|
|
const response = await fetch(`/get-bounds/${villeId}`);
|
|
if (!response.ok) {
|
|
throw new Error("Erreur lors de la récupération des informations de la ville.");
|
|
}
|
|
const data = await response.json();
|
|
|
|
addLieuModal.classList.remove("hidden");
|
|
|
|
// Détruire la carte si elle existe déjà
|
|
if (map) {
|
|
map.remove();
|
|
map = null;
|
|
marker = null;
|
|
}
|
|
|
|
// Initialiser la carte
|
|
map = L.map("map").setView([data.centerLat, data.centerLng], 13);
|
|
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
maxZoom: 19,
|
|
minZoom: 13,
|
|
}).addTo(map);
|
|
|
|
cityBounds = L.latLngBounds(
|
|
[data.south, data.west],
|
|
[data.north, data.east]
|
|
);
|
|
|
|
map.fitBounds(cityBounds);
|
|
map.setMaxBounds(cityBounds);
|
|
|
|
// Ajouter le polygone de la ville si disponible
|
|
if (data.polygon_geojson) {
|
|
cityPolygon = L.geoJSON(data.polygon_geojson, {
|
|
style: {
|
|
color: "blue",
|
|
weight: 2,
|
|
fillOpacity: 0.3,
|
|
},
|
|
}).addTo(map);
|
|
}
|
|
|
|
// Gérer les clics sur la carte
|
|
map.on("click", async (e) => {
|
|
const { lat, lng } = e.latlng;
|
|
|
|
if (!cityBounds.contains([lat, lng])) {
|
|
alert("Vous ne pouvez pas sélectionner un emplacement en dehors de la ville.");
|
|
return;
|
|
}
|
|
|
|
selectedAddress = { lat, lng };
|
|
|
|
if (marker) {
|
|
marker.setLatLng([lat, lng]);
|
|
} else {
|
|
marker = L.marker([lat, lng]).addTo(map);
|
|
}
|
|
|
|
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 de l'adresse.");
|
|
}
|
|
|
|
const data = await response.json();
|
|
selectedRue = data.address.road || "Rue inconnue";
|
|
} catch (error) {
|
|
console.error("Erreur lors de la recherche inversée :", error);
|
|
selectedRue = null;
|
|
alert("Impossible de récupérer l'adresse à partir de ces coordonnées.");
|
|
}
|
|
});
|
|
} catch (error) {
|
|
console.error("Erreur :", error);
|
|
alert("Impossible de récupérer les données de la ville.");
|
|
}
|
|
});
|
|
|
|
// Fermer la modal
|
|
cancelAddLieu.addEventListener("click", () => {
|
|
addLieuModal.classList.add("hidden");
|
|
lieuNomInput.value = "";
|
|
lieuNomError.textContent = "";
|
|
lieuNomError.classList.add("hidden");
|
|
});
|
|
|
|
// Enregistrer le lieu
|
|
saveLieuButton.addEventListener("click", () => {
|
|
const nom = lieuNomInput.value.trim();
|
|
|
|
if (!nom) {
|
|
lieuNomError.textContent = "Le nom est obligatoire.";
|
|
lieuNomError.classList.remove("hidden");
|
|
return;
|
|
}
|
|
|
|
if (!selectedAddress || !selectedRue) {
|
|
alert("Veuillez sélectionner un emplacement valide sur la carte.");
|
|
return;
|
|
}
|
|
|
|
const villeId = villeSelect.value;
|
|
if (!villeId) {
|
|
alert("Veuillez sélectionner une ville.");
|
|
return;
|
|
}
|
|
|
|
// Réinitialiser les erreurs
|
|
lieuNomError.textContent = "";
|
|
lieuNomError.classList.add("hidden");
|
|
|
|
// Envoyer les données au serveur
|
|
fetch("/lieu/set", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
nom,
|
|
rue: selectedRue,
|
|
latitude: selectedAddress.lat,
|
|
longitude: selectedAddress.lng,
|
|
villeId,
|
|
}),
|
|
})
|
|
.then((response) => response.json().then((data) => ({ status: response.status, data })))
|
|
.then(({ status, data }) => {
|
|
if (status >= 200 && status < 300) {
|
|
// Rafraîchir la page après l'ajout réussi
|
|
location.reload();
|
|
} else {
|
|
if (data.error.includes("nom")) {
|
|
lieuNomError.textContent = data.error;
|
|
lieuNomError.classList.remove("hidden");
|
|
} else {
|
|
alert(data.error || "Une erreur est survenue.");
|
|
}
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error("Erreur :", error);
|
|
alert("Une erreur inattendue s'est produite.");
|
|
});
|
|
});
|
|
});
|