mirror of
https://forge.chapril.org/tykayn/osm-commerces
synced 2025-06-20 01:44:42 +02:00
up validate edit form
This commit is contained in:
Tykayn
tykayn
parent
3ccfd732e7
commit
81c613e93c
4 changed files with 263 additions and 69 deletions
|
|
@ -87,10 +87,10 @@
|
|||
</div>
|
||||
<div class="d-flex justify-content-end mb-2">
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-outline-primary active" id="circleMarkersBtn">
|
||||
<button type="button" class="btn btn-outline-primary" id="circleMarkersBtn">
|
||||
<i class="bi bi-circle"></i> Cercles
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-primary" id="dropMarkersBtn">
|
||||
<button type="button" class="btn btn-outline-primary active" id="dropMarkersBtn">
|
||||
<i class="bi bi-geo-alt"></i> Gouttes
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -151,6 +151,9 @@
|
|||
let maplibre;
|
||||
let map;
|
||||
let overpassData = {}; // Stockage des données Overpass
|
||||
let currentMarkerType = 'drop'; // Type de marqueur actuel
|
||||
let dropMarkers = []; // Tableau pour stocker les marqueurs en goutte
|
||||
let contextMenu = null; // Menu contextuel
|
||||
|
||||
function getCompletionColor(completion) {
|
||||
if (completion === undefined || completion === null) {
|
||||
|
|
@ -186,28 +189,28 @@
|
|||
}
|
||||
|
||||
function createPopupContent(element) {
|
||||
console.log("createPopupContent",element);
|
||||
|
||||
const completion = calculateCompletion(element);
|
||||
console.log("completion", completion);
|
||||
|
||||
let tagstable = '<table class="table table-bordered"><tr><th>Clé</th><th>Valeur</th></tr>';
|
||||
let content = `
|
||||
<div class="mb-2">
|
||||
<a class="btn btn-primary" href="/admin/placeType/${element.type}/${element.id}">
|
||||
<i class="bi bi-pencil"></i> ${element.tags?.name || 'Sans nom'}
|
||||
</a>
|
||||
<a class="btn btn-secondary ms-2" href="https://openstreetmap.org/${element.type}/${element.id}">
|
||||
<i class="bi bi-map"></i> OSM
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
content += '<table class="table table-sm">';
|
||||
|
||||
// Ajouter tous les tags
|
||||
if (element.tags) {
|
||||
for (const tag in element.tags) {
|
||||
tagstable += `<tr><td>${tag}</td><td>${element.tags[tag]}</td></tr>`;
|
||||
content += `<tr><td><strong>${tag}</strong></td><td>${element.tags[tag]}</td></tr>`;
|
||||
}
|
||||
}
|
||||
tagstable += '</table>';
|
||||
|
||||
return `
|
||||
<a class="btn btn-primary" href="/admin/placeType/${element.type}/${element.id}">
|
||||
<i class="bi bi-pencil"></i> Modifier
|
||||
<h3>${element.tags?.name || 'Sans nom'}</h3>
|
||||
</a>
|
||||
<br>
|
||||
<a class="btn btn-secondary" href="https://openstreetmap.org/${element.type}/${element.id}"> <i class="bi bi-map"></i> OSM</a>
|
||||
${tagstable}
|
||||
`;
|
||||
content += '</table>';
|
||||
return content;
|
||||
}
|
||||
|
||||
function calculateCompletionDistribution(elements) {
|
||||
|
|
@ -307,7 +310,7 @@
|
|||
overpassData[element.id] = element;
|
||||
});
|
||||
|
||||
// Mettre à jour les cercles
|
||||
// Mettre à jour les marqueurs
|
||||
features = [];
|
||||
josm_elements = [];
|
||||
data.elements.forEach(element => {
|
||||
|
|
@ -316,8 +319,8 @@
|
|||
if (lat && lon) {
|
||||
const completion = calculateCompletion(element);
|
||||
|
||||
const circle = {
|
||||
id: `circle-${element.id}`,
|
||||
const feature = {
|
||||
id: `marker-${element.id}`,
|
||||
type: 'Feature',
|
||||
properties: {
|
||||
id: element.id,
|
||||
|
|
@ -330,24 +333,65 @@
|
|||
coordinates: [lon, lat]
|
||||
}
|
||||
};
|
||||
features.push(circle);
|
||||
features.push(feature);
|
||||
josm_elements.push(element);
|
||||
}
|
||||
});
|
||||
|
||||
// Créer les cercles sur la carte
|
||||
features.forEach(feature => {
|
||||
const layerId = `circle-${feature.properties.id}`;
|
||||
if (map.getSource(layerId)) {
|
||||
map.removeSource(layerId);
|
||||
}
|
||||
if (map.getLayer(layerId)) {
|
||||
map.removeLayer(layerId);
|
||||
}
|
||||
// Afficher les marqueurs selon le type actuel
|
||||
updateMarkers();
|
||||
|
||||
// Ajuster la vue pour inclure tous les points
|
||||
const points = features.map(f => f.properties.center);
|
||||
if (points.length > 0) {
|
||||
const bounds = new maplibregl.LngLatBounds(points[0], points[0]);
|
||||
points.forEach(point => bounds.extend(point));
|
||||
|
||||
if (bounds?._sw && bounds?._ne) {
|
||||
map.fitBounds(bounds, {
|
||||
padding: 50,
|
||||
maxZoom: 15
|
||||
});
|
||||
} else {
|
||||
console.warn('Bounds invalides, utilisation des coordonnées par défaut');
|
||||
}
|
||||
}
|
||||
|
||||
createCompletionChart(data.elements);
|
||||
|
||||
// Cacher le spinner une fois le chargement terminé
|
||||
document.getElementById('maploader').style.display = 'none';
|
||||
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement des lieux:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function updateMarkers() {
|
||||
// Supprimer tous les marqueurs existants
|
||||
features.forEach(feature => {
|
||||
const layerId = `marker-${feature.properties.id}`;
|
||||
// Supprimer d'abord la couche
|
||||
if (map.getLayer(layerId)) {
|
||||
map.removeLayer(layerId);
|
||||
}
|
||||
// Puis supprimer la source
|
||||
if (map.getSource(layerId)) {
|
||||
map.removeSource(layerId);
|
||||
}
|
||||
});
|
||||
|
||||
// Supprimer tous les marqueurs en goutte existants
|
||||
dropMarkers.forEach(marker => marker.remove());
|
||||
dropMarkers = [];
|
||||
|
||||
if (currentMarkerType === 'circle') {
|
||||
// Afficher les cercles
|
||||
features.forEach(feature => {
|
||||
const layerId = `marker-${feature.properties.id}`;
|
||||
const circle = turf.circle(
|
||||
feature.properties.center,
|
||||
5/1000, // Rayon initial en kilomètres
|
||||
5/1000,
|
||||
{ steps: 64, units: 'kilometers' }
|
||||
);
|
||||
|
||||
|
|
@ -370,14 +414,12 @@
|
|||
// Ajouter les popups sur les cercles
|
||||
map.on('click', function(e) {
|
||||
const clickedFeatures = map.queryRenderedFeatures(e.point, {
|
||||
layers: features.map(f => `circle-${f.properties.id}`)
|
||||
layers: features.map(f => `marker-${f.properties.id}`)
|
||||
});
|
||||
|
||||
console.log('Clicked features:', clickedFeatures);
|
||||
|
||||
if (clickedFeatures.length > 0) {
|
||||
const feature = clickedFeatures[0];
|
||||
const elementId = feature.layer.id.replace('circle-', '');
|
||||
const elementId = feature.layer.id.replace('marker-', '');
|
||||
const element = overpassData[elementId];
|
||||
|
||||
if (element) {
|
||||
|
|
@ -391,31 +433,21 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Ajuster la vue pour inclure tous les points
|
||||
const points = features.map(f => f.properties.center);
|
||||
if (points.length > 0) {
|
||||
const bounds = new maplibregl.LngLatBounds(points[0], points[0]);
|
||||
points.forEach(point => bounds.extend(point));
|
||||
} else {
|
||||
// Afficher les marqueurs en goutte
|
||||
features.forEach(feature => {
|
||||
const element = overpassData[feature.properties.id];
|
||||
const popupContent = element ? createPopupContent(element) : `<h1>${feature.properties.name}</h1>`;
|
||||
|
||||
// Vérifier que les bounds sont valides avant de les utiliser
|
||||
if (bounds?._sw && bounds?._ne) {
|
||||
map.fitBounds(bounds, {
|
||||
padding: 50,
|
||||
maxZoom: 15
|
||||
});
|
||||
} else {
|
||||
console.warn('Bounds invalides, utilisation des coordonnées par défaut');
|
||||
}
|
||||
}
|
||||
|
||||
createCompletionChart(data.elements);
|
||||
|
||||
// Cacher le spinner une fois le chargement terminé
|
||||
document.getElementById('maploader').style.display = 'none';
|
||||
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement des lieux:', error);
|
||||
const marker = new maplibregl.Marker({
|
||||
color: getCompletionColor(feature.properties.completion)
|
||||
})
|
||||
.setLngLat(feature.properties.center)
|
||||
.setPopup(new maplibregl.Popup({ offset: 25 })
|
||||
.setHTML(popupContent))
|
||||
.addTo(map);
|
||||
dropMarkers.push(marker);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -531,16 +563,112 @@
|
|||
});
|
||||
map = maplibre;
|
||||
|
||||
// Créer le menu contextuel
|
||||
contextMenu = document.createElement('div');
|
||||
contextMenu.id = 'context-menu';
|
||||
contextMenu.style.display = 'none';
|
||||
contextMenu.style.position = 'absolute';
|
||||
contextMenu.style.backgroundColor = 'white';
|
||||
contextMenu.style.border = '1px solid #ccc';
|
||||
contextMenu.style.padding = '10px';
|
||||
contextMenu.style.borderRadius = '4px';
|
||||
contextMenu.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)';
|
||||
contextMenu.style.zIndex = '1000';
|
||||
document.body.appendChild(contextMenu);
|
||||
|
||||
// Gestionnaire de clic droit sur la carte
|
||||
map.on('contextmenu', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Vérifier si le clic est sur un marqueur
|
||||
const clickedFeatures = map.queryRenderedFeatures(e.point, {
|
||||
layers: features.map(f => `marker-${f.properties.id}`)
|
||||
});
|
||||
|
||||
if (clickedFeatures.length > 0) {
|
||||
return; // Ne rien faire si on clique sur un marqueur
|
||||
}
|
||||
|
||||
// Afficher le menu contextuel
|
||||
contextMenu.style.display = 'block';
|
||||
|
||||
// Obtenir la position de la carte dans la page
|
||||
const mapContainer = map.getContainer();
|
||||
const mapRect = mapContainer.getBoundingClientRect();
|
||||
|
||||
// Calculer la position relative au conteneur de la carte
|
||||
const x = e.point.x + mapRect.left;
|
||||
const y = e.point.y + mapRect.top;
|
||||
|
||||
// Positionner le menu contextuel
|
||||
contextMenu.style.left = `${x}px`;
|
||||
contextMenu.style.top = `${y}px`;
|
||||
|
||||
contextMenu.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Recherche du code INSEE...';
|
||||
|
||||
try {
|
||||
// Récupérer les coordonnées du clic
|
||||
const { lng, lat } = e.lngLat;
|
||||
|
||||
// Appeler l'API pour obtenir le code INSEE
|
||||
const response = await fetch(`https://api-adresse.data.gouv.fr/reverse/?lon=${lng}&lat=${lat}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.features && data.features.length > 0) {
|
||||
const feature = data.features[0];
|
||||
const city = feature.properties.city;
|
||||
const inseeCode = feature.properties.citycode;
|
||||
|
||||
contextMenu.innerHTML = `
|
||||
<div class="mb-2">
|
||||
<strong>Ville :</strong> ${city}<br>
|
||||
<strong>Code INSEE :</strong> ${inseeCode}
|
||||
</div>
|
||||
<a href="/admin/labourer/${inseeCode}" class="btn btn-primary btn-sm">
|
||||
<i class="bi bi-tractor"></i> Labourer cette zone
|
||||
</a>
|
||||
`;
|
||||
} else {
|
||||
contextMenu.innerHTML = 'Aucune information trouvée pour cette position';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de la recherche du code INSEE:', error);
|
||||
contextMenu.innerHTML = 'Erreur lors de la recherche du code INSEE';
|
||||
}
|
||||
});
|
||||
|
||||
// Fermer le menu contextuel lors d'un clic ailleurs
|
||||
document.addEventListener('click', function(e) {
|
||||
if (contextMenu && !contextMenu.contains(e.target)) {
|
||||
contextMenu.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Gestionnaires d'événements pour les boutons de type de marqueur
|
||||
document.getElementById('circleMarkersBtn').addEventListener('click', function() {
|
||||
currentMarkerType = 'circle';
|
||||
this.classList.add('active');
|
||||
document.getElementById('dropMarkersBtn').classList.remove('active');
|
||||
updateMarkers();
|
||||
});
|
||||
|
||||
document.getElementById('dropMarkersBtn').addEventListener('click', function() {
|
||||
currentMarkerType = 'drop';
|
||||
this.classList.add('active');
|
||||
document.getElementById('circleMarkersBtn').classList.remove('active');
|
||||
updateMarkers();
|
||||
});
|
||||
|
||||
document.getElementById('openInJOSM').addEventListener('click', openInJOSM);
|
||||
|
||||
// Attendre que la carte soit chargée avant d'ajouter les écouteurs d'événements
|
||||
map.on('load', function() {
|
||||
console.log('Map loaded');
|
||||
map_is_loaded = true;
|
||||
// Changer le curseur au survol des cercles
|
||||
// Changer le curseur au survol des marqueurs
|
||||
map.on('mouseenter', function(e) {
|
||||
const hoveredFeatures = map.queryRenderedFeatures(e.point, {
|
||||
layers: features.map(f => f.id)
|
||||
layers: features.map(f => `marker-${f.properties.id}`)
|
||||
});
|
||||
if (hoveredFeatures.length > 0) {
|
||||
map.getCanvas().style.cursor = 'pointer';
|
||||
|
|
@ -549,7 +677,7 @@
|
|||
|
||||
map.on('mouseleave', function(e) {
|
||||
const hoveredFeatures = map.queryRenderedFeatures(e.point, {
|
||||
layers: features.map(f => f.id)
|
||||
layers: features.map(f => `marker-${f.properties.id}`)
|
||||
});
|
||||
if (hoveredFeatures.length === 0) {
|
||||
map.getCanvas().style.cursor = '';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue