ajoute des markers

assets/controllers/map_controller.js

@@ -4,20 +4,43 @@ import 'leaflet';
 export default class extends Controller {
     static values = {
         geojson: String,
+        icon: String,
     }
 
     connect() {
+        const simpleIcon = L.icon({
+            iconUrl: this.iconValue,
+            iconSize: [16, 16],
+            iconAnchor: [8, 16],
+            popupAnchor: [0, 0],
+        });
+
+        const iconHtml = `
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
+  <path fill="currentColor" d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6"/>
+</svg>
+            `; 
+        const icons = {
+            'danger': L.divIcon({ html: iconHtml, className: 'svg-icon text-danger', iconSize: [16, 16], iconAnchor: [8, 16], }),
+            'warning': L.divIcon({ html: iconHtml, className: 'svg-icon text-warning', iconSize: [16, 16], iconAnchor: [8, 16], }),
+            'success': L.divIcon({ html: iconHtml, className: 'svg-icon text-success', iconSize: [16, 16], iconAnchor: [8, 16], }),
+        };
+
         var map = L.map(this.element);
         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);
+
         var layer = L.featureGroup();
+
         var geojsons = JSON.parse(this.geojsonValue);
         if (geojsons.length > 0) {
             geojsons.forEach(function (geojson) {
+
                 const feature0 = geojson.features[0].properties;
-                L.geoJSON(geojson, {
+
+                const polygon = L.geoJSON(geojson, {
                     style: function (feature) {
                         var color = 'blue';
                         switch (feature.properties.color) {
@@ -30,9 +53,18 @@ export default class extends Controller {
                 }).bindTooltip(feature0.name).addTo(layer).on('click', function (event) {
                     window.location.href = event.layer.feature.properties.url;
                 });
+
+                L.marker(polygon.getBounds().getCenter(), {
+                    icon: icons[feature0.color],
+                    title: feature0.name,
+                    clickUrl: feature0.url,
+                }).addTo(layer).on('click', function (event) {
+                    window.location.href = event.target.options.clickUrl;
+                });
+
             });
             layer.addTo(map);
-            console.log(layer.getBounds().toBBoxString());
+ 
             map.fitBounds(layer.getBounds());
         }
     }

assets/images/marker.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
+  <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6"/>
+</svg>

config/packages/workflow.yaml

@@ -15,14 +15,17 @@ framework:
                     metadata:
                         title: 'À faire'
                         color: danger
+                        locking: false
                 !php/const App\Entity\Task::STATUS_DOING:
                     metadata:
                         title: 'En cours'
                         color: warning
+                        locking: true
                 !php/const App\Entity\Task::STATUS_DONE:
                     metadata:
                         title: 'Terminé'
                         color: success
+                        locking: false
             transitions:
                 !php/const App\Entity\Task::TRANSITION_START:
                     from: !php/const App\Entity\Task::STATUS_TODO
@@ -30,21 +33,29 @@ framework:
                     metadata:
                         title: 'Commencer la tâche'
                         route: 'app_task_start'
+                        lock: true
+                        unlock: false
                 !php/const App\Entity\Task::TRANSITION_FINISH:
                     from: !php/const App\Entity\Task::STATUS_DOING
                     to: !php/const App\Entity\Task::STATUS_DONE
                     metadata:
                         title: 'Terminer la tâche'
                         route: 'app_task_finish'
+                        lock: false
+                        unlock: true
                 !php/const App\Entity\Task::TRANSITION_CANCEL:
                     from: !php/const App\Entity\Task::STATUS_DOING
                     to: !php/const App\Entity\Task::STATUS_TODO
                     metadata:
                         title: 'Abandonner la tâche'
                         route: 'app_task_cancel'
+                        lock: false
+                        unlock: true
                 !php/const App\Entity\Task::TRANSITION_RESET:
                     from: !php/const App\Entity\Task::STATUS_DONE
                     to: !php/const App\Entity\Task::STATUS_TODO
                     metadata:
                         title: 'Recommencer la tâche'
                         route: 'app_task_reset'
+                        lock: false
+                        unlock: false

src/Controller/TaskController.php

@@ -179,7 +179,7 @@ class TaskController extends AbstractController
                     'Tâche modifiée !'
                 );
 
-                return $this->redirectToRoute('app_project_show', ['projectSlug' => $projectSlug]);
+                return $this->redirectToRoute('app_task_show', ['projectSlug' => $projectSlug, 'taskSlug' => $taskSlug]);
             } catch (\Exception $exception) {
                 $this->addFlash(
                     'danger',

templates/macro.html.twig

@@ -18,3 +18,7 @@
 </span>
 {% endif %}
 {% endmacro %}
+
+{% macro map(entity) %}
+<div id="map" class="img-fluid img-thumbnail min-vh-50" data-controller="map" data-map-geojson-value="{{ geoJsonManager.generateGeoJson(entity)|json_encode }}" data-map-icon-value="{{ asset('images/marker.svg') }}"></div>
+{% endmacro %}

templates/project/show.html.twig

@@ -32,7 +32,7 @@
 <h2 class="mb-3">Carte</h2>
 <div class="row">
     <div class="col mb-3">
-        <div id="map" class="img-fluid img-thumbnail min-vh-50" data-controller="map" data-map-geojson-value="{{ geoJsonManager.generateGeoJson(project)|json_encode }}"></div>
+        {{ macro.map(project) }}
     </div>
 </div>
 

templates/task/show.html.twig

@@ -1,4 +1,5 @@
 {% extends 'base.html.twig' %}
+{% import 'macro.html.twig' as macro %}
 
 {% block breadcrumb %}
 <li class="breadcrumb-item"><a href="{{ path('app_project') }}">Projets</a></li>
@@ -35,7 +36,7 @@
 <h2 class="mb-3">Carte</h2>
 <div class="row">
     <div class="col mb-3">
-        <div id="map" class="img-fluid img-thumbnail min-vh-50" data-controller="map" data-map-geojson-value="{{ geoJsonManager.generateGeoJson(task)|json_encode }}"></div>
+        {{ macro.map(task) }}
     </div>
 </div>