suppr table ville
This commit is contained in:
@@ -4,100 +4,62 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
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;
|
||||
let map, marker, selectedAddress, selectedRue, selectedVille, selectedCodePostal;
|
||||
|
||||
// Ouvrir la modal
|
||||
document.getElementById("add-lieu-button").addEventListener("click", async () => {
|
||||
const villeId = villeSelect.value;
|
||||
document.getElementById("add-lieu-button").addEventListener("click", () => {
|
||||
addLieuModal.classList.remove("hidden");
|
||||
|
||||
if (!villeId) {
|
||||
alert("Veuillez sélectionner une ville avant d'ajouter un lieu.");
|
||||
return;
|
||||
// Détruire la carte si elle existe déjà
|
||||
if (map) {
|
||||
map.remove();
|
||||
map = null;
|
||||
marker = null;
|
||||
}
|
||||
|
||||
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();
|
||||
// Initialiser la carte
|
||||
map = L.map("map").setView([48.8566, 2.3522], 13); // Coordonnées par défaut (Paris)
|
||||
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
||||
maxZoom: 19,
|
||||
minZoom: 13,
|
||||
}).addTo(map);
|
||||
|
||||
addLieuModal.classList.remove("hidden");
|
||||
// Gérer les clics sur la carte
|
||||
map.on("click", async (e) => {
|
||||
const { lat, lng } = e.latlng;
|
||||
selectedAddress = { lat, lng };
|
||||
|
||||
// Détruire la carte si elle existe déjà
|
||||
if (map) {
|
||||
map.remove();
|
||||
map = null;
|
||||
marker = null;
|
||||
if (marker) {
|
||||
marker.setLatLng([lat, lng]);
|
||||
} else {
|
||||
marker = L.marker([lat, lng]).addTo(map);
|
||||
}
|
||||
|
||||
// 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);
|
||||
try {
|
||||
// Utiliser l'API Nominatim pour récupérer les informations d'adresse
|
||||
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.");
|
||||
}
|
||||
|
||||
cityBounds = L.latLngBounds(
|
||||
[data.south, data.west],
|
||||
[data.north, data.east]
|
||||
);
|
||||
const data = await response.json();
|
||||
selectedRue = data.address.road || "Rue inconnue";
|
||||
selectedVille = data.address.city || data.address.town || data.address.village || "Ville inconnue";
|
||||
selectedCodePostal = data.address.postcode || "Code postal inconnu";
|
||||
|
||||
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);
|
||||
console.log(`Rue: ${selectedRue}, Ville: ${selectedVille}, Code postal: ${selectedCodePostal}`);
|
||||
} catch (error) {
|
||||
console.error("Erreur lors de la recherche inversée :", error);
|
||||
selectedRue = null;
|
||||
selectedVille = null;
|
||||
selectedCodePostal = null;
|
||||
alert("Impossible de récupérer l'adresse à partir de ces coordonnées.");
|
||||
}
|
||||
|
||||
// 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
|
||||
@@ -118,17 +80,11 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedAddress || !selectedRue) {
|
||||
if (!selectedAddress || !selectedRue || !selectedVille || !selectedCodePostal) {
|
||||
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");
|
||||
@@ -142,9 +98,10 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
body: JSON.stringify({
|
||||
nom,
|
||||
rue: selectedRue,
|
||||
ville: selectedVille,
|
||||
codePostal: selectedCodePostal,
|
||||
latitude: selectedAddress.lat,
|
||||
longitude: selectedAddress.lng,
|
||||
villeId,
|
||||
}),
|
||||
})
|
||||
.then((response) => response.json().then((data) => ({ status: response.status, data })))
|
||||
@@ -166,4 +123,4 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
alert("Une erreur inattendue s'est produite.");
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,87 +0,0 @@
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const villeSelect = document.getElementById('sortie_ville');
|
||||
const lieuSelect = document.getElementById('sortie_lieu');
|
||||
|
||||
const rueLabel = document.getElementById('rue-value');
|
||||
const codePostalLabel = document.getElementById('codePostal-value');
|
||||
const latitudeLabel = document.getElementById('latitude-value');
|
||||
const longitudeLabel = document.getElementById('longitude-value');
|
||||
|
||||
if (villeSelect && lieuSelect) {
|
||||
// Désactiver le menu déroulant des lieux au départ
|
||||
lieuSelect.disabled = true;
|
||||
|
||||
// Listener pour le changement de ville
|
||||
villeSelect.addEventListener('change', function () {
|
||||
const villeId = villeSelect.value;
|
||||
|
||||
// Réinitialisation des options de lieu
|
||||
lieuSelect.innerHTML = '<option value="">Sélectionnez un lieu</option>';
|
||||
lieuSelect.disabled = true; // Toujours désactiver avant de récupérer les données
|
||||
|
||||
if (villeId) {
|
||||
fetch(`/get-lieux/${villeId}`)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Erreur lors de la récupération des lieux');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
// Ajouter les options si des lieux sont disponibles
|
||||
if (data.length > 0) {
|
||||
data.forEach(lieu => {
|
||||
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
|
||||
} else {
|
||||
lieuSelect.innerHTML = '<option value="">Aucun lieu disponible</option>';
|
||||
lieuSelect.disabled = true; // Toujours désactivé si aucun lieu n'est trouvé
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Erreur lors de la récupération des lieux :', error);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Listener pour le changement de lieu
|
||||
lieuSelect.addEventListener('change', function () {
|
||||
const selectedOption = lieuSelect.options[lieuSelect.selectedIndex];
|
||||
if (selectedOption) {
|
||||
const lieuDetails = selectedOption.dataset.details
|
||||
? JSON.parse(selectedOption.dataset.details)
|
||||
: null;
|
||||
|
||||
// Mise à jour des labels avec les détails du lieu sélectionné
|
||||
rueLabel.textContent = lieuDetails?.rue || 'Non renseignée';
|
||||
codePostalLabel.textContent = lieuDetails?.codePostal || 'Non renseigné';
|
||||
latitudeLabel.textContent = lieuDetails?.latitude || 'Non renseignée';
|
||||
longitudeLabel.textContent = lieuDetails?.longitude || 'Non renseignée';
|
||||
|
||||
console.log('Lieu sélectionné:', lieuDetails);
|
||||
} else {
|
||||
// Réinitialiser les labels si aucun lieu n'est sélectionné
|
||||
rueLabel.textContent = 'Renseigner avec le lieu';
|
||||
codePostalLabel.textContent = 'Renseigner avec le lieu';
|
||||
latitudeLabel.textContent = 'Renseigner avec le lieu';
|
||||
longitudeLabel.textContent = 'Renseigner avec le lieu';
|
||||
|
||||
console.log('Aucun lieu sélectionné.');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.error('Les champs ville-select ou lieu-select sont introuvables.');
|
||||
}
|
||||
});
|
||||
59
assets/js/show-lieu.js
Normal file
59
assets/js/show-lieu.js
Normal file
@@ -0,0 +1,59 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
console.log("DOMContentLoaded");
|
||||
const lieuSelect = document.getElementById("sortie_lieu");
|
||||
const rueValue = document.getElementById("rue-value");
|
||||
const codePostalValue = document.getElementById("codePostal-value");
|
||||
const latitudeValue = document.getElementById("latitude-value");
|
||||
const longitudeValue = document.getElementById("longitude-value");
|
||||
const villeValue = document.getElementById("ville-value");
|
||||
|
||||
// Vérifier que le champ "lieu" existe
|
||||
if (!lieuSelect) {
|
||||
console.error("Le champ 'lieu-select' est introuvable.");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("Script chargé. En attente de la sélection d'un lieu.");
|
||||
|
||||
// Écouter les changements sur le champ "lieu"
|
||||
lieuSelect.addEventListener("change", async () => {
|
||||
const lieuId = lieuSelect.value;
|
||||
|
||||
console.log(`Lieu sélectionné : ${lieuId}`);
|
||||
|
||||
// Si aucun lieu sélectionné, réinitialiser les champs
|
||||
if (!lieuId) {
|
||||
console.warn("Aucun lieu sélectionné. Réinitialisation des champs.");
|
||||
rueValue.textContent = "Renseigner avec le lieu";
|
||||
codePostalValue.textContent = "Renseigner avec le lieu";
|
||||
latitudeValue.textContent = "Renseigner avec le lieu";
|
||||
longitudeValue.textContent = "Renseigner avec le lieu";
|
||||
villeValue.textContent = "Renseigner avec le lieu";
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Requête vers l'API pour récupérer les données du lieu
|
||||
console.log(`Envoi de la requête à l'API pour le lieu ID : ${lieuId}`);
|
||||
const response = await fetch(`/lieux/${lieuId}`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`Erreur lors de la récupération des informations (statut ${response.status})`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log("Données reçues depuis l'API :", data);
|
||||
|
||||
// Mise à jour des champs avec les données récupérées
|
||||
rueValue.textContent = data.rue || "Non renseigné";
|
||||
codePostalValue.textContent = data.codePostal || "Non renseigné";
|
||||
latitudeValue.textContent = data.latitude || "Non renseigné";
|
||||
longitudeValue.textContent = data.longitude || "Non renseigné";
|
||||
villeValue.textContent = data.ville || "Non renseigné";
|
||||
|
||||
console.log("Champs mis à jour avec succès.");
|
||||
} catch (error) {
|
||||
console.error("Erreur lors de la récupération des données :", error);
|
||||
alert("Une erreur s'est produite lors de la récupération des informations du lieu.");
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user