Saisie des caractéristiques des haies

envergo/hedges/forms.py

@@ -0,0 +1,29 @@
+from django import forms
+from django.utils.safestring import mark_safe
+
+TYPES = (
+    ("degradee", "Haie dégradée ou résiduelle basse"),
+    ("buissonnante", "Haie buissonnante basse"),
+    ("arbustive", "Haie arbustive basse"),
+    ("alignement", "Alignement d'arbres"),
+    ("mixte", "Mixte"),
+)
+
+
+class HedgeDataForm(forms.Form):
+    hedge_type = forms.ChoiceField(
+        choices=TYPES,
+        label=mark_safe(
+            """
+        <span>Type de haie</span>
+        <a href="https://docs.google.com/document/d/1MAzLdH2ZsHHoHnK9ZgF47PrFT9SfnLnMA_IZwUI3sUc/edit?usp=sharing)"
+        target="_blank" rel="noopener">Aide</a>
+        """
+        ),
+    )
+    sur_parcelle_pac = forms.BooleanField(
+        label="Située sur parcelle PAC", required=False
+    )
+    proximite_mare = forms.BooleanField(
+        label="Présence d'une mare à moins de 200 m", required=False
+    )

envergo/hedges/models.py

@@ -24,12 +24,13 @@
 class Hedge:
     """Represent a single hedge."""
 
-    def __init__(self, id, latLngs, type):
+    def __init__(self, id, latLngs, type, additionalData=None):
         self.id = id  # The edge reference, e.g A1, A2…
         self.geometry = LineString(
             [(latLng["lng"], latLng["lat"]) for latLng in latLngs]
         )
         self.type = type
+        self.additionalData = additionalData
 
     @property
     def length(self):

envergo/hedges/static/hedge_input/app.js

@@ -120,6 +120,7 @@ class Hedge {
       id: this.id,
       latLngs: this.latLngs.map((latLng) => ({ lat: latLng.lat, lng: latLng.lng })),
       type: this.type,
+      additionalData: this.additionalData,
     };
   }
 }
@@ -229,11 +230,70 @@ createApp({
       // Cacher la bulle d'aide à la fin du tracé
       newHedge.polyline.on('editable:drawing:end', () => {
         showHelpBubble.value = false;
+        showHedgeModal(newHedge);
       });
 
       return newHedge;
     };
 
+    // Show the "description de la haie" form modal
+    const showHedgeModal = (hedge) => {
+      const dialog = document.getElementById("hedge-data-dialog");
+      const form = dialog.querySelector("form");
+      const hedgeTypeField = document.getElementById("id_hedge_type");
+      const pacField = document.getElementById("id_sur_parcelle_pac");
+      const nearPondField = document.getElementById("id_proximite_mare");
+      const hedgeName = document.getElementById("hedge-data-dialog-hedge-name");
+      const hedgeLength = document.getElementById("hedge-data-dialog-hedge-length");
+
+      // Pre-fill the form with hedge data if it's an edition
+      if (hedge.additionalData) {
+        hedgeTypeField.value = hedge.additionalData.type;
+        pacField.checked = hedge.additionalData.onPacField;
+        nearPondField.checked = hedge.additionalData.nearPond;
+      } else {
+        form.reset();
+      }
+      hedgeName.textContent = hedge.id;
+      hedgeLength.textContent = hedge.length.toFixed(0);
+
+      // Save form data to the hedge object
+      // This is the form submit event handler
+      const saveModalData = (event) => {
+        event.preventDefault();
+
+        const hedgeType = hedgeTypeField.value;
+        const isOnPacField = pacField.checked;
+        const isNearPond = nearPondField.checked;
+        hedge.additionalData = {
+          type: hedgeType,
+          surParcellePac: isOnPacField,
+          proximiteMare: isNearPond,
+        };
+
+        // Reset the form and hide the modal
+        form.reset();
+        dsfr(dialog).modal.conceal();
+      };
+
+
+      // Save data upon form submission
+      form.addEventListener("submit", saveModalData, { once: true });
+
+      // If the modal is closed without saving, let's make sure to remove the
+      // event listener.
+      dialog.addEventListener("dsfr.conceal", () => {
+        form.removeEventListener("submit", saveModalData);
+      });
+
+      dsfr(dialog).modal.disclose();
+    };
+
+    // Open the form modal to edit an existing hedge
+    const editHedge = (hedge) => {
+      showHedgeModal(hedge);
+    };
+
     const startDrawingToPlant = () => {
       return addHedge(TO_PLANT);
     };
@@ -294,19 +354,55 @@ createApp({
 
     // Mount the app component and initialize the leaflet map
     onMounted(() => {
+      const planLayer = L.tileLayer("https://data.geopf.fr/wmts?" +
+        "&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0" +
+        "&STYLE=normal" +
+        "&TILEMATRIXSET=PM" +
+        "&FORMAT=image/png" +
+        "&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2" +
+        "&TILEMATRIX={z}" +
+        "&TILEROW={y}" +
+        "&TILECOL={x}", {
+        maxZoom: 22,
+        maxNativeZoom: 19,
+        tileSize: 256,
+        attribution: '&copy; <a href="https://www.ign.fr/">IGN</a>'
+      });
+
+      const satelliteLayer = L.tileLayer("https://data.geopf.fr/wmts?" +
+        "&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0" +
+        "&STYLE=normal" +
+        "&TILEMATRIXSET=PM" +
+        "&FORMAT=image/jpeg" +
+        "&LAYER=ORTHOIMAGERY.ORTHOPHOTOS" +
+        "&TILEMATRIX={z}" +
+        "&TILEROW={y}" +
+        "&TILECOL={x}", {
+        maxZoom: 22,
+        maxNativeZoom: 19,
+        tileSize: 256,
+        attribution: '&copy; <a href="https://www.ign.fr/">IGN</a>'
+      });
+
+      // Display layer switching control
+      const baseMaps = {
+        "Plan": planLayer,
+        "Satellite": satelliteLayer
+      };
+
       map = L.map('map', {
         editable: true,
         doubleClickZoom: false,
         zoomControl: false,
+        layers: [satelliteLayer]
       }).setView([43.6861, 3.5911], 14);
 
+      L.control.layers(baseMaps, null, { position: 'bottomleft' }).addTo(map);
+
       L.control.zoom({
         position: 'bottomright'
       }).addTo(map);
 
-      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        maxZoom: 19,
-      }).addTo(map);
 
       // Zoom on the selected address
       window.addEventListener('EnvErgo:citycode_selected', function (event) {
@@ -329,6 +425,7 @@ createApp({
       showHelpBubble,
       saveData,
       cancel,
+      editHedge,
     };
   }
 }).mount('#app');

envergo/hedges/views.py

@@ -6,6 +6,7 @@
 from django.views.decorators.csrf import csrf_exempt
 from django.views.generic import DetailView
 
+from envergo.hedges.forms import HedgeDataForm
 from envergo.hedges.models import HedgeData
 
 
@@ -32,7 +33,7 @@ def get_context_data(self, **kwargs):
 
         hedge_data = json.dumps(self.object.data) if self.object else "[]"
         context["hedge_data_json"] = hedge_data
-
+        context["hedge_data_form"] = HedgeDataForm()
         return context
 
     def post(self, request, *args, **kwargs):

envergo/pages/templatetags/utils.py

@@ -4,6 +4,7 @@
     CheckboxSelectMultiple,
     FileInput,
     RadioSelect,
+    Select,
 )
 
 register = template.Library()
@@ -30,6 +31,13 @@ def is_radio(field):
     return isinstance(field.field.widget, RadioSelect)
 
 
+@register.filter
+def is_select(field):
+    """Is the given field a select?."""
+
+    return isinstance(field.field.widget, Select)
+
+
 @register.filter
 def is_input_file(field):
     """Is the given field an input[type=file] widget?."""

envergo/static/sass/project_haie.scss

@@ -44,9 +44,12 @@ div#app {
     visibility: hidden;
   }
 
-  header {
+  footer {
     display: flex;
     justify-content: space-between;
+    padding: 0.75rem 1rem;
+    background-color: var(--background-alt-blue-france);
+    border-top: 2px solid var(--border-plain-blue-france);
   }
 
   div#saisie-ui {
@@ -60,6 +63,10 @@ div#app {
     #map {
       flex: 1;
       font-family: Marianne, arial, sans-serif;
+
+      .leaflet-control-layers-toggle {
+        background-image: url("/static/icons/stack-line.svg");
+      }
     }
 
     div.controls {
@@ -82,6 +89,12 @@ div#app {
         right: 1rem;
       }
 
+      &.inline-controls {
+        .leaflet-control {
+          clear: none;
+        }
+      }
+
       button {
         background-color: white;
 
@@ -157,7 +170,7 @@ div#app {
     .help-bubble {
       position: absolute;
       bottom: 1rem;
-      left: 1rem;
+      left: 4rem;
       z-index: 1000;
       background-color: white;
       color: var(--text-default-info);
@@ -182,11 +195,12 @@ div#app {
       }
 
       div#hedge-lists {
-        padding: 16px;
+        padding: 16px 0;
 
         --title-spacing: 0 0 0.5rem 0;
 
         h3 {
+          padding: 0 16px;
           font-weight: 500 !important;
           font-size: 16px !important;
         }
@@ -202,6 +216,7 @@ div#app {
 
         p.fr-text--light {
           font-size: 14px;
+          padding: 0 16px;
         }
 
         table {
@@ -220,27 +235,26 @@ div#app {
 
             th {
               text-align: left;
-              padding-left: 2rem;
-              min-width: 6rem;
               font-weight: 900;
+              padding-left: 16px;
             }
 
             td {
-              text-align: right;
-              color: #666;
-            }
-
-            td:first-of-type {
-              min-width: 3rem;
+              text-align: center;
             }
 
             td:last-child {
-              width: 100%;
+              text-align: right;
+              padding-right: 16px;
             }
 
             button {
               visibility: hidden;
               margin-left: auto;
+              font-size: 14px;
+
+              --hover-tint: var(--background-alt-grey-hover);
+              --active-tint: var(--background-alt-grey-active);
             }
 
             &:hover,
@@ -274,6 +288,13 @@ dialog#hedge-input-modal {
   padding: 0;
 }
 
+dialog#hedge-data-dialog {
+  #form-group-hedge_type label span.label-content {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
 div#statistics {
   background-color: #f6f6f6;
   padding: 16px;

envergo/templates/_form_snippet.html

@@ -9,6 +9,9 @@
   {% if field|is_checkbox %}
     {% include '_checkbox_snippet.html' with field=field %}
 
+  {% elif field|is_select %}
+    {% include '_select_snippet.html' with field=field %}
+
   {% elif field|is_radio %}
     {% include '_radio_snippet.html' with field=field %}
 

envergo/templates/_select_snippet.html

@@ -0,0 +1,27 @@
+{% load utils %}
+
+<div id="form-group-{{ field.html_name }}"
+     class="fr-select-group{% if field.field.required %} required{% endif %}{% if field.errors %} fr-select-group--error{% endif %}">
+
+  {% include '_label.html' %}
+
+  {% if nest_field_class %}<div class="{{ nest_field_class }}">{% endif %}
+
+    {% if field.errors %}
+      {{ field|add_classes:'fr-select fr-input--error' }}
+    {% else %}
+      {{ field|add_classes:'fr-select' }}
+    {% endif %}
+
+    {% if nest_field_class %}</div>{% endif %}
+
+  {% if field.help_text and bottom_help_text %}<span class="fr-hint-text">{{ field.help_text|safe }}</span>{% endif %}
+
+  {% if field.errors %}
+    <p class="fr-error-text">
+      ↑
+      {{ field.errors.0 }}
+      ↑
+    </p>
+  {% endif %}
+</div>