From 83135cee5a2f3568dea5c931fcc5697924189e28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Thu, 5 Jan 2023 13:45:41 +0100
Subject: [PATCH] montpellier-ville: add style/behaviour for roadwork display
 (#72594)

---
 static/montpellier-ville/_chantiers.scss      | 52 +++++++++++++++++++
 static/montpellier-ville/config.json          | 21 ++++++++
 static/montpellier-ville/extra.js             | 17 ++++++
 .../combo/json/chantiers-genants.html         | 27 ++++++++++
 .../combo/json/chantiers-majeurs.html         | 26 ++++++++++
 5 files changed, 143 insertions(+)
 create mode 100644 static/montpellier-ville/extra.js
 create mode 100644 templates/variants/montpellier-ville/combo/json/chantiers-genants.html
 create mode 100644 templates/variants/montpellier-ville/combo/json/chantiers-majeurs.html

diff --git a/static/montpellier-ville/_chantiers.scss b/static/montpellier-ville/_chantiers.scss
index 89385235..22dd822d 100644
--- a/static/montpellier-ville/_chantiers.scss
+++ b/static/montpellier-ville/_chantiers.scss
@@ -31,3 +31,55 @@ $cell-map-mobile-height: calc(100vh - 108px);
 		border: none;
 	}
 }
+
+.chantier {
+	position: absolute;
+	border: $cell-border;
+	background: $cell-background;
+	right: 0;
+	top: 0;
+	z-index: 100000;
+	height: calc(#{$cell-map-height} + 2px);
+	overflow-x: hidden;
+	overflow-y: scroll;
+	width: 25vw;
+	transform: translateX(25vw);
+	transition: transform linear 250ms;
+	padding: 1em;
+	h3 {
+		@extend %title;
+		padding: 0;
+		margin-bottom: 0.5em;
+	}
+	p {
+		margin: 0.5em 0;
+		&.chantier--localisations {
+			font-size: 105%;
+			@media ($max-mobile-viewport) {
+				font-size: 100%;
+			}
+		}
+	}
+	.chantier--dates {
+		font-size: 80%;
+	}
+	.chantier--libelle {
+		display: block;
+		color: #333;
+	}
+	&.shown {
+		transform: translateX(0vw);
+	}
+	@media ($max-mobile-viewport) {
+		top: unset;
+		right: unset;
+		bottom: 0;
+		width: 100vw;
+		height: 250px;
+		max-height: calc(100vh - 180px);
+		transform: translateY(250px);
+		&.shown {
+			transform: translateY(0px);
+		}
+	}
+}
diff --git a/static/montpellier-ville/config.json b/static/montpellier-ville/config.json
index 28bead9a..ee883fdd 100644
--- a/static/montpellier-ville/config.json
+++ b/static/montpellier-ville/config.json
@@ -17,6 +17,27 @@
           "name": "Une colonne (spéciale carte travaux)",
           "template": "combo/page_template.html"
         }
+      },
+      "JSON_CELL_TYPES.update": {
+        "chantiers-genants": {
+          "cache_duration": 3600,
+          "force_async": false,
+          "name": "Chantiers gênants",
+          "url": "{{url}}",
+          "form": [
+            {"label": "Adresse du GEOJSON des chantiers gênants", "varname": "url", "required": true}
+          ]
+        },
+        "chantiers-majeurs": {
+          "cache_duration": 3600,
+          "force_async": false,
+          "name": "Chantiers majeurs",
+          "url": "{{url}}",
+          "form": [
+            {"label": "Adresse de récupération des fiches des chantiers majeurs", "varname": "url", "required": true}
+          ]
+        }
+
       }
     }
   }
diff --git a/static/montpellier-ville/extra.js b/static/montpellier-ville/extra.js
new file mode 100644
index 00000000..cec089a5
--- /dev/null
+++ b/static/montpellier-ville/extra.js
@@ -0,0 +1,17 @@
+$(function() {
+  $('.page-template-roadworks-map div.cell.map').on('combo:map-feature-prepare', function(ev, info) {
+    info.layer.on('click', function(ev) {
+      var marker = info.layer;
+      var chantier_id = marker.feature.properties.IDCHANTIER || marker.feature.properties.id;
+      var $cell = $('[data-chantier-id=' + chantier_id + ']');
+      if ($cell.hasClass('shown')) {
+        $('.chantier').removeClass('shown');
+      } else {
+        $('.chantier[data-chantier-id!=' + chantier_id + ']').removeClass('shown');
+        $('.chantier').show();
+        $cell.addClass('shown');
+      }
+    });
+  });
+  $('.chantier').on('click', function() { $(this).toggleClass('shown'); });
+});
diff --git a/templates/variants/montpellier-ville/combo/json/chantiers-genants.html b/templates/variants/montpellier-ville/combo/json/chantiers-genants.html
new file mode 100644
index 00000000..9988587f
--- /dev/null
+++ b/templates/variants/montpellier-ville/combo/json/chantiers-genants.html
@@ -0,0 +1,27 @@
+{% for feature in json.features %}
+<div class="chantier" data-chantier-id="{{feature.properties.IDCHANTIER}}" style="display: none">
+<h3>{{ feature.properties.TYPE }}<br>
+<span class="chantier--dates">
+{% with year=feature.properties.DEBUT|slice:":4" month=feature.properties.DEBUT|slice:"4:6" day=feature.properties.DEBUT|slice:"6:8" %}
+{% with date=year|add:"-"|add:month|add:"-"|add:day|date %}
+du {{date}}
+{%endwith %}
+{% endwith %}
+{% with year=feature.properties.FIN|slice:":4" month=feature.properties.FIN|slice:"4:6" day=feature.properties.FIN|slice:"6:8" %}
+{% with date=year|add:"-"|add:month|add:"-"|add:day|date %}
+au {{date}}
+{%endwith %}
+{%endwith %}
+</span>
+</h3>
+<div>
+<p class="chantier--localisations">{{ feature.properties.LOCALISATIONS|safe }}</p>
+
+{% if feature.properties.INCIDENCE_CIRCULATION %}<p><span class="chantier--libelle">Incidence circulation :</span> {{feature.properties.INCIDENCE_CIRCULATION}}</p>{% endif %}
+{% if feature.properties.INCIDENCE_STATIONNEMENT %}<p><span class="chantier--libelle">Incidence sur le stationnement :</span> {{feature.properties.INCIDENCE_STATIONNEMENT}}</p>{% endif %}
+{% if feature.properties.NATURE %}<p><span class="chantier--libelle">Nature :</span> {{feature.properties.NATURE }}</p>{% endif %}
+{% if feature.properties.MOUVRAGE %}<p><span class="chantier--libelle">Maîtrise d’ouvrage :</span> {{feature.properties.MOUVRAGE }}</p>{% endif %}
+
+</div>
+</div>
+{% endfor %}
diff --git a/templates/variants/montpellier-ville/combo/json/chantiers-majeurs.html b/templates/variants/montpellier-ville/combo/json/chantiers-majeurs.html
new file mode 100644
index 00000000..75dd8c11
--- /dev/null
+++ b/templates/variants/montpellier-ville/combo/json/chantiers-majeurs.html
@@ -0,0 +1,26 @@
+{% for feature in json.data %}
+<div class="chantier" data-chantier-id="{{feature.display_id}}" style="display: none">
+<h3>{{ feature.fields.chantier }}<br>
+<span class="chantier--dates">
+{% with date=feature.fields.debutchantier|date %}
+du {{date}}
+{% endwith %}
+{% with date=feature.fields.finchantier|date %}
+au {{date}}
+{% endwith %}
+</span>
+</h3>
+<div>
+<p class="chantier--localisations">{{ feature.fields.numero|default:"" }} {{ feature.fields.rue }}, {{ feature.fields.commune }}</p>
+
+<p>{{feature.fields.descriptifchantier|safe}}</p>
+
+{% if feature.fields.contacts %}<p><span class="chantier--libelle">Contacts :</span> {{feature.fields.contacts }}</p>{% endif %}
+{% if feature.fields.categoriechantier %}<p><span class="chantier--libelle">Catégorie :</span> {{feature.fields.categoriechantier }}</p>{% endif %}
+{% if feature.fields.emploisgeneres %}<p><span class="chantier--libelle">Emplois générés :</span> {{feature.fields.emploisgeneres }}</p>{% endif %}
+{% if feature.fields.montanttravaux %}<p><span class="chantier--libelle">Montant des travaux :</span> {{feature.fields.montanttravaux }}</p>{% endif %}
+
+{% if feature.fields.url %}<p><a class="pk-button" href="{{ feature.fields.url }}">Plus d’infos</a></p>{% endif %}
+</div>
+</div>
+{% endfor %}