diff --git a/loko/assets/static/assets/inspection_map.js b/loko/assets/static/assets/inspection_map.js index bbb3f11..06b7575 100644 --- a/loko/assets/static/assets/inspection_map.js +++ b/loko/assets/static/assets/inspection_map.js @@ -1669,8 +1669,184 @@ const modal = bootstrap.Modal.getOrCreateInstance(modalEl); + let miniMap = null; + let miniMarker = null; + let fullScreenPlacementMarker = null; + let isMapPlacementActive = false; + + function updateNewSignCoords(lat, lon, updateMini = false) { + const inputLat = document.getElementById('new_sign_lat'); + const inputLon = document.getElementById('new_sign_lon'); + const coordsDisplay = document.getElementById('new_sign_gps_coords'); + + const fLat = parseFloat(lat); + const fLon = parseFloat(lon); + if (isNaN(fLat) || isNaN(fLon)) return; + + if (inputLat) inputLat.value = fLat.toFixed(6); + if (inputLon) inputLon.value = fLon.toFixed(6); + if (coordsDisplay) { + coordsDisplay.textContent = `Lat: ${fLat.toFixed(5)}, Lon: ${fLon.toFixed(5)}`; + } + + if (updateMini && miniMarker && miniMap) { + miniMarker.setLngLat([fLon, fLat]); + miniMap.setCenter([fLon, fLat]); + } + } + + function initOrUpdateMiniMap(lat, lon) { + const container = document.getElementById('new_sign_mini_map'); + if (!container || typeof maplibregl === 'undefined') return; + + const fLat = parseFloat(lat); + const fLon = parseFloat(lon); + if (isNaN(fLat) || isNaN(fLon)) return; + + if (!miniMap) { + const styleUrl = window.MAP_STYLE_LIGHT || 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'; + miniMap = new maplibregl.Map({ + container: 'new_sign_mini_map', + style: styleUrl, + center: [fLon, fLat], + zoom: 18.5, + attributionControl: false + }); + + miniMarker = new maplibregl.Marker({ draggable: true, color: '#dc3545' }) + .setLngLat([fLon, fLat]) + .addTo(miniMap); + + miniMarker.on('dragend', function() { + const lngLat = miniMarker.getLngLat(); + updateNewSignCoords(lngLat.lat, lngLat.lng, false); + }); + + miniMap.on('click', function(e) { + miniMarker.setLngLat(e.lngLat); + updateNewSignCoords(e.lngLat.lat, e.lngLat.lng, false); + }); + } else { + miniMap.setCenter([fLon, fLat]); + if (miniMarker) miniMarker.setLngLat([fLon, fLat]); + setTimeout(() => miniMap.resize(), 150); + } + } + + modalEl.addEventListener('shown.bs.modal', function() { + const inputLat = document.getElementById('new_sign_lat'); + const inputLon = document.getElementById('new_sign_lon'); + const lat = inputLat ? parseFloat(inputLat.value) : null; + const lon = inputLon ? parseFloat(inputLon.value) : null; + if (lat !== null && lon !== null && !isNaN(lat) && !isNaN(lon)) { + initOrUpdateMiniMap(lat, lon); + } + if (miniMap) { + setTimeout(() => miniMap.resize(), 200); + } + }); + + // Bouton Recentrer sur le GPS de l'appareil + const btnResetGps = document.getElementById('btn_sign_reset_gps'); + if (btnResetGps) { + btnResetGps.addEventListener('click', function() { + let lat = null, lon = null; + if (typeof userMarker !== 'undefined' && userMarker) { + const lngLat = userMarker.getLngLat(); + lat = lngLat.lat; + lon = lngLat.lng; + } else if (typeof map !== 'undefined' && map) { + const center = map.getCenter(); + lat = center.lat; + lon = center.lng; + } + if (lat !== null && lon !== null) { + updateNewSignCoords(lat, lon, true); + } + }); + } + + // Mode Positionnement Plein Écran sur la grande carte + const btnAdjustFullscreen = document.getElementById('btn_sign_adjust_fullscreen'); + const placementBar = document.getElementById('map-placement-bar'); + const btnConfirmPlacement = document.getElementById('btn-confirm-map-placement'); + const btnCancelPlacement = document.getElementById('btn-cancel-map-placement'); + + function onMapPlacementClick(e) { + if (!isMapPlacementActive || !fullScreenPlacementMarker) return; + fullScreenPlacementMarker.setLngLat(e.lngLat); + } + + if (btnAdjustFullscreen) { + btnAdjustFullscreen.addEventListener('click', function() { + const inputLat = document.getElementById('new_sign_lat'); + const inputLon = document.getElementById('new_sign_lon'); + let curLat = inputLat ? parseFloat(inputLat.value) : null; + let curLon = inputLon ? parseFloat(inputLon.value) : null; + + if (curLat === null || curLon === null || isNaN(curLat) || isNaN(curLon)) { + if (typeof map !== 'undefined' && map) { + const center = map.getCenter(); + curLat = center.lat; + curLon = center.lng; + } + } + + modal.hide(); + + if (typeof map !== 'undefined' && map && curLat !== null && curLon !== null) { + isMapPlacementActive = true; + if (placementBar) placementBar.classList.remove('d-none'); + + if (fullScreenPlacementMarker) { + fullScreenPlacementMarker.remove(); + } + + fullScreenPlacementMarker = new maplibregl.Marker({ draggable: true, color: '#dc3545' }) + .setLngLat([curLon, curLat]) + .addTo(map); + + map.flyTo({ center: [curLon, curLat], zoom: 19 }); + + map.on('click', onMapPlacementClick); + } + }); + } + + if (btnConfirmPlacement) { + btnConfirmPlacement.addEventListener('click', function() { + if (fullScreenPlacementMarker) { + const lngLat = fullScreenPlacementMarker.getLngLat(); + updateNewSignCoords(lngLat.lat, lngLat.lng, true); + fullScreenPlacementMarker.remove(); + fullScreenPlacementMarker = null; + } + isMapPlacementActive = false; + if (placementBar) placementBar.classList.add('d-none'); + if (typeof map !== 'undefined' && map) { + map.off('click', onMapPlacementClick); + } + modal.show(); + }); + } + + if (btnCancelPlacement) { + btnCancelPlacement.addEventListener('click', function() { + if (fullScreenPlacementMarker) { + fullScreenPlacementMarker.remove(); + fullScreenPlacementMarker = null; + } + isMapPlacementActive = false; + if (placementBar) placementBar.classList.add('d-none'); + if (typeof map !== 'undefined' && map) { + map.off('click', onMapPlacementClick); + } + modal.show(); + }); + } + btnAdd.addEventListener('click', function() { - // Déterminer la position GPS + // Déterminer la position GPS par défaut let lat = null, lon = null; if (typeof userMarker !== 'undefined' && userMarker) { const lngLat = userMarker.getLngLat(); @@ -1682,16 +1858,8 @@ lon = center.lng; } - const inputLat = document.getElementById('new_sign_lat'); - const inputLon = document.getElementById('new_sign_lon'); - const coordsDisplay = document.getElementById('new_sign_gps_coords'); - - if (inputLat && inputLon && lat !== null && lon !== null) { - inputLat.value = lat.toFixed(6); - inputLon.value = lon.toFixed(6); - if (coordsDisplay) { - coordsDisplay.textContent = `Lat: ${lat.toFixed(5)}, Lon: ${lon.toFixed(5)}`; - } + if (lat !== null && lon !== null) { + updateNewSignCoords(lat, lon, false); } // Réinitialiser la liste des panneaux et l'aperçu photo diff --git a/loko/inspections/templates/inspections/components/quick_add_sign_modal.html b/loko/inspections/templates/inspections/components/quick_add_sign_modal.html index eda49df..03be8f2 100644 --- a/loko/inspections/templates/inspections/components/quick_add_sign_modal.html +++ b/loko/inspections/templates/inspections/components/quick_add_sign_modal.html @@ -16,14 +16,34 @@
{% csrf_token %} - -
-
- - {% translate "Position d'implantation" %} + +
+
+ + {% translate "Emplacement exact du mât" %} - Lat: -, Lon: - + Lat: -, Lon: -
+ + +
+
+
+ + +
+
+ +
+ {% translate "Glissez le repère rouge ou touchez la carte pour placer le mât au mètre près." %} +
+
diff --git a/loko/inspections/templates/inspections/quick_inspection_map.html b/loko/inspections/templates/inspections/quick_inspection_map.html index fad06f3..7e58360 100644 --- a/loko/inspections/templates/inspections/quick_inspection_map.html +++ b/loko/inspections/templates/inspections/quick_inspection_map.html @@ -234,6 +234,30 @@
+ +
+
+
+
+ +
+
{% translate "Emplacement exact du mât" %}
+
{% translate "Glissez le repère rouge ou touchez la carte" %}
+
+
+
+ + +
+
+
+
+