plein de truc
This commit is contained in:
marvin
@@ -1,23 +1,30 @@
|
||||
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");
|
||||
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;
|
||||
let map, marker, selectedAddress, selectedRue, cityPolygon, cityBounds;
|
||||
|
||||
if (addLieuButton && addLieuModal && cancelAddLieu && selectLocationButton) {
|
||||
// Affiche la modal
|
||||
addLieuButton.addEventListener("click", () => {
|
||||
const villeId = document.getElementById("sortie_ville").value;
|
||||
// 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;
|
||||
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");
|
||||
|
||||
@@ -28,155 +35,135 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
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);
|
||||
// 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);
|
||||
|
||||
// Initialise la carte
|
||||
map = L.map("map").setView([data.centerLat, data.centerLng], 13);
|
||||
cityBounds = L.latLngBounds(
|
||||
[data.south, data.west],
|
||||
[data.north, data.east]
|
||||
);
|
||||
|
||||
// Ajout du fond de carte
|
||||
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
||||
maxZoom: 19,
|
||||
}).addTo(map);
|
||||
map.fitBounds(cityBounds);
|
||||
map.setMaxBounds(cityBounds);
|
||||
|
||||
// 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 = `
|
||||
<p><strong>Rue :</strong> ${data.address.road || "Non disponible"}</p>
|
||||
<p><strong>Ville :</strong> ${data.address.city || data.address.town || "Non disponible"}</p>
|
||||
<p><strong>Code postal :</strong> ${data.address.postcode || "Non disponible"}</p>
|
||||
<p><strong>Pays :</strong> ${data.address.country || "Non disponible"}</p>
|
||||
`;
|
||||
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",
|
||||
// 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,
|
||||
},
|
||||
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.");
|
||||
}).addTo(map);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.error("Éléments requis pour ajouter un lieu introuvables.");
|
||||
}
|
||||
|
||||
// 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.");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -34,6 +34,14 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
const option = document.createElement('option');
|
||||
option.value = lieu.id; // Utiliser l'ID pour la soumission
|
||||
option.textContent = lieu.nom; // Texte visible dans le menu
|
||||
|
||||
option.dataset.details = JSON.stringify({
|
||||
rue: lieu.rue,
|
||||
codePostal: lieu.codePostal,
|
||||
latitude: lieu.latitude,
|
||||
longitude: lieu.longitude
|
||||
});
|
||||
|
||||
lieuSelect.appendChild(option);
|
||||
});
|
||||
lieuSelect.disabled = false; // Activer le menu des lieux
|
||||
|
||||
Reference in New Issue
Block a user