add manual geoloc feature #3594

assets/scripts/app-back-bo.ts

@@ -30,6 +30,7 @@ import './vanilla/controllers/back_signalement_view/form_upload_documents.js';
 import './vanilla/controllers/back_signalement_view/input_autocomplete_bailleur.js';
 import './vanilla/controllers/back_signalement_view/form_cloture_modal.js';
 import './vanilla/controllers/back_signalement_view/form_acceptation_refus.js';
+import './vanilla/controllers/back_signalement_view/pick-localisation.js';
 import './vanilla/controllers/back_signalement_edit_file/back_signalement_edit_file.js';
 import './vanilla/controllers/back_signalement_delete_file/back_signalement_delete_file.js';
 import './vanilla/controllers/back_signalement_list_export/back_signalement_list_export.js';

assets/scripts/vanilla/controllers/back_signalement_view/pick-localisation.js

@@ -0,0 +1,115 @@
+import L from 'leaflet';
+import 'leaflet.vectorgrid';
+
+const modalLocalisation = document.getElementById('fr-modal-localisation');
+const modalPickLocalisation = document.getElementById('fr-modal-pick-localisation');
+const modalPickLocalisationMessage = document.getElementById('fr-modal-pick-localisation-message');
+
+if (modalLocalisation) {
+  modalLocalisation.addEventListener('dsfr.disclose', (e) => {
+    if(modalLocalisation.dataset.loaded == 'false'){
+      modalLocalisation.dataset.loaded = 'true'
+      const map = L.map('fr-modal-localisation-map')
+      L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+          maxZoom: 19,
+          attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+      }).addTo(map)
+      let lat = modalLocalisation.dataset.lat
+      let lng = modalLocalisation.dataset.lng
+      map.setView([lat, lng], 18)
+      L.marker([lat, lng]).addTo(map)
+    }
+  })
+
+}else if (modalPickLocalisation) {
+  const map = L.map('fr-modal-pick-localisation-map')
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+  }).addTo(map)
+
+  modalPickLocalisation.addEventListener('dsfr.disclose', (e) => {
+    if(modalPickLocalisation.dataset.loaded == 'false'){
+      modalPickLocalisation.dataset.loaded = 'true'
+      const apiAdresse = 'https://api-adresse.data.gouv.fr/search/?q='
+      let address = modalPickLocalisation.dataset.address
+      let postCode = modalPickLocalisation.dataset.postcode
+      fetch(apiAdresse + address + '&postcode=' + postCode).then(response => response.json()).then(json => {
+        map.setView([json.features[0].geometry.coordinates[1], json.features[0].geometry.coordinates[0]], 18)
+        modalPickLocalisationMessage.classList.add('fr-hidden')
+      })
+    }
+  })
+
+  // Patch pour rendre les couches vectorielles interactives : https://github.com/Leaflet/Leaflet.VectorGrid/issues/274#issuecomment-1371640331
+  L.Canvas.Tile.include({
+    _onClick: function (e) {
+      var point = this._map.mouseEventToLayerPoint(e).subtract(this.getOffset());
+      var layer = L.Layer;
+      var clickedLayer = L.Layer;
+
+      for (var id in this._layers) {
+        layer = this._layers[id];
+        if (
+          layer.options.interactive &&
+          layer._containsPoint(point) &&
+          !this._map._draggableMoved(layer)
+        ) {
+          clickedLayer = layer;
+        }
+      }
+      if (clickedLayer) {
+        if (typeof clickedLayer === 'object' && clickedLayer !== null) {
+          clickedLayer.fireEvent(e.type, undefined, true);
+        }
+      }
+    },
+  })
+  // Fin du patch
+  var clickedStyle = {
+    radius: 5,
+    fillColor: '#31e060',
+    color: '#ffffff',
+    weight: 3,
+    fill: true,
+    fillOpacity: 1,
+    opacity: 1
+  }
+
+  var initialStyle = {
+    radius: 5,
+    fillColor: '#1452e3',
+    color: '#ffffff',
+    weight: 3,
+    fill: true,
+    fillOpacity: 1,
+    opacity: 1
+  }
+
+  var vectorTileOptions = {
+    rendererFactory: L.canvas.tile,
+    vectorTileLayerStyles: {
+      'default': initialStyle
+    },
+    interactive: true,
+    getFeatureId: function(f) {
+      return f.properties.rnb_id;
+    }
+  }
+
+  var vectorTileLayer = L.vectorGrid.protobuf('https://rnb-api.beta.gouv.fr/api/alpha/tiles/{x}/{y}/{z}.pbf', vectorTileOptions);
+  vectorTileLayer.addTo(map);
+  var previousId;
+  vectorTileLayer.on('click', async function(e) {
+    var properties = e.layer.properties;
+    var rnb_id = properties.rnb_id;
+    if (previousId !== undefined) {
+      vectorTileLayer.setFeatureStyle(previousId, initialStyle);
+    }
+    vectorTileLayer.setFeatureStyle(rnb_id, clickedStyle);
+    previousId = rnb_id;
+    document.getElementById('fr-modal-pick-localisation-rnb-id').value = rnb_id
+    document.getElementById('fr-modal-pick-localisation-submit').disabled = false
+  })
+}
+

assets/styles/histologe.scss

@@ -930,6 +930,9 @@ a.photo-preview {
         background: white;
     }
 }
+#fr-modal-localisation-map, #fr-modal-pick-localisation-map {
+    height: 50vh;
+}
 #zone_map, #info_zone_map {
     height: 70vh;
 }

config/app/csp.yaml

@@ -15,6 +15,7 @@ parameters:
       - "https://cdn.jsdelivr.net/npm/[email protected]/"
       - "https://cdn.jsdelivr.net/gh/nelmio/NelmioApiDocBundle/public/swagger-ui/"
       - "https://cdn.jsdelivr.net/gh/nelmio/NelmioApiDocBundle/public/"
+      - "https://cdn.jsdelivr.net/npm/leaflet.vectorgrid/dist/Leaflet.VectorGrid.bundled.min.js"
     style-src:
       - "'self'"
       - "'unsafe-inline'"
@@ -34,6 +35,7 @@ parameters:
       - "blob:"
       - "https://voxusagers.numerique.gouv.fr"
       - "https://*.tile.openstreetmap.org"
+      - "https://tile.openstreetmap.org"
       - "https://cdn.jsdelivr.net"
       - "https://jedonnemonavis.numerique.gouv.fr"
       - "https://cdn.redoc.ly"
@@ -44,6 +46,7 @@ parameters:
       - "https://histologe.matomo.cloud"
       - "https://koumoul.com"
       - "https://sentry.incubateur.net"
+      - "https://rnb-api.beta.gouv.fr"
     font-src:
       - "'self'"
       - "https://fonts.gstatic.com"

package.json

@@ -13,6 +13,7 @@
     "datatables.net-vue3": "^1.0.0",
     "leaflet": "^1.9.4",
     "leaflet.markercluster": "^1.5.3",
+    "leaflet.vectorgrid": "^1.3.0",
     "libphonenumber-js": "^1.10.44",
     "vue": "^3.5.13",
     "vue-chartjs": "^4.1.1",

src/Controller/Back/SignalementActionController.php

@@ -8,9 +8,11 @@
 use App\Entity\Suivi;
 use App\Entity\Tag;
 use App\Entity\User;
+use App\Manager\SignalementManager;
 use App\Manager\SuiviManager;
 use App\Repository\AffectationRepository;
 use App\Repository\SuiviRepository;
+use App\Service\BetaGouv\RnbService;
 use App\Service\Mailer\NotificationMail;
 use App\Service\Mailer\NotificationMailerRegistry;
 use App\Service\Mailer\NotificationMailerType;
@@ -238,4 +240,37 @@ public function switchValue(Signalement $signalement, Request $request, EntityMa
 
         return $this->json(['response' => 'error'], 400);
     }
+
+    #[Route('/{uuid:signalement}/set-rnb', name: 'back_signalement_set_rnb', methods: 'POST')]
+    public function setRnbId(
+        Signalement $signalement,
+        Request $request,
+        RnbService $rnbService,
+        SignalementManager $signalementManager,
+    ): RedirectResponse {
+        $this->denyAccessUnlessGranted('SIGN_EDIT', $signalement);
+        $rnbId = $request->get('rnbId');
+        $token = $request->get('_token');
+        if (!$this->isCsrfTokenValid('signalement_set_rnb_'.$signalement->getUuid(), $token)) {
+            $this->addFlash('error', 'Le jeton CSRF est invalide. Veuillez réessayer.');
+
+            return $this->redirectToRoute('back_signalement_view', ['uuid' => $signalement->getUuid()]);
+        }
+        if (!empty($signalement->getGeoloc())) {
+            $this->addFlash('error', 'Le signalement a déjà une géolocalisation.');
+
+            return $this->redirectToRoute('back_signalement_view', ['uuid' => $signalement->getUuid()]);
+        }
+        $building = $rnbService->getBuilding($rnbId);
+        if (!$building) {
+            $this->addFlash('error', 'Le bâtiment n\'a pas été trouvé.');
+        } else {
+            $signalement->setRnbIdOccupant($building->getRnbId());
+            $signalement->setGeoloc(['lat' => $building->getLat(), 'lng' => $building->getLng()]);
+            $signalementManager->flush();
+            $this->addFlash('success', 'Le bâtiment a été mis à jour avec succès.');
+        }
+
+        return $this->redirectToRoute('back_signalement_view', ['uuid' => $signalement->getUuid()]);
+    }
 }