From b3ac6814aaf9a5829a0f44bc5ddc271dd064fdb0 Mon Sep 17 00:00:00 2001
From: Jean-Marie Favreau <jeanmarie.favreau@free.fr>
Date: Sat, 3 May 2025 15:55:36 +0200
Subject: [PATCH] Ajout d'un filtre sur la page des lieux

---
 .../templates/agenda_culturel/place_list.html | 82 ++++++++++++-------
 1 file changed, 52 insertions(+), 30 deletions(-)

diff --git a/src/agenda_culturel/templates/agenda_culturel/place_list.html b/src/agenda_culturel/templates/agenda_culturel/place_list.html
index 61bdfe0..92c7f6d 100644
--- a/src/agenda_culturel/templates/agenda_culturel/place_list.html
+++ b/src/agenda_culturel/templates/agenda_culturel/place_list.html
@@ -40,30 +40,35 @@
     </header>
     <div class="grid">
       <div id="map_location"></div>
-      <div class="vertical-max">
+      <div>
         {% with cache_timeout=user.is_authenticated|yesno:"300,6000" %}
           {% cache cache_timeout place_lists user.is_authenticated %}
           {% if object_list %}
-            {% for place in object_list %}
-              <h3>
-                <a href="{{ place.get_absolute_url }}">{{ place.name }}</a> — <a id="open-map-{{ place.id }}"
+            <input type="search" id="searchInput" placeholder="Rechercher un lieu...">
+            <div class="vertical-max" id="placeList">
+              {% for place in object_list %}
+                <div class="item">
+                  <h3>
+                    <a href="{{ place.get_absolute_url }}">{{ place.name }}</a> — <a id="open-map-{{ place.id }}"
     href="#map_location"
     data-tooltip="afficher sur la carte">{% picto_from_name "map" %}</a>
-              </h3>
-              <ul>
-                <li>
-                  <strong>Adresse&nbsp;:</strong>
-                  {% if place.address %}{{ place.address }},{% endif %}
-                  {{ place.city }}
-                </li>
-                <li>
-                  <strong>Coordonnée GPS&nbsp;:</strong> {{ place.location }}
-                </li>
-                {% with place.nb_events_future as nb %}
-                  {% if nb > 0 %}<li>{{ nb }} événement{{ nb|pluralize }} à venir</li>{% endif %}
-                {% endwith %}
-              </ul>
-            {% endfor %}
+                  </h3>
+                  <ul>
+                    <li class="address">
+                      <strong>Adresse&nbsp;:</strong>
+                      {% if place.address %}{{ place.address }},{% endif %}
+                      {{ place.city }}
+                    </li>
+                    <li>
+                      <strong>Coordonnée GPS&nbsp;:</strong> {{ place.location }}
+                    </li>
+                    {% with place.nb_events_future as nb %}
+                      {% if nb > 0 %}<li>{{ nb }} événement{{ nb|pluralize }} à venir</li>{% endif %}
+                    {% endwith %}
+                  </ul>
+                </div>
+              {% endfor %}
+            </div>
           {% else %}
             <p>Il n'y a aucun lieu défini.</p>
           {% endif %}
@@ -91,20 +96,37 @@
     markerArray = [];
     var markers = L.markerClusterGroup({disableClusteringAtZoom:16});
     window.mMapping = {};
-    {% if object_list %}
-        {% for place in object_list %}
-        markerArray.push(L.marker([{{ place.location|tocoords }}], {'icon': pinIcon}).bindPopup('<a href="{{ place.get_absolute_url }}">{{ place.name }}</a><br />{% if place.address %}{{ place.address }}, {% endif %}{{ place.city }}'))
-        markers.addLayer(markerArray[markerArray.length - 1]);
-        window.mMapping[{{ place.id }}] = markerArray[markerArray.length - 1];
-        window.django.jQuery('a#open-map-{{ place.id }}').click(function(){
-                window.mMapping[{{ place.id }}].openPopup();
-                map.panTo(window.mMapping[{{ place.id }}].getLatLng());
-        });
-        {% endfor %}
-    {% endif %}
+    {% with cache_timeout=user.is_authenticated|yesno:"300,6000" %}
+          {% cache cache_timeout place_lists_js_all user.is_authenticated %}
+
+              {% if object_list %}
+            {% for place in object_list %}
+            markerArray.push(L.marker([{{ place.location|tocoords }}], {'icon': pinIcon}).bindPopup('<a href="{{ place.get_absolute_url }}">{{ place.name }}</a><br />{% if place.address %}{{ place.address }}, {% endif %}{{ place.city }}'))
+            markers.addLayer(markerArray[markerArray.length - 1]);
+            window.mMapping[{{ place.id }}] = markerArray[markerArray.length - 1];
+            window.django.jQuery('a#open-map-{{ place.id }}').click(function(){
+                    window.mMapping[{{ place.id }}].openPopup();
+                    map.panTo(window.mMapping[{{ place.id }}].getLatLng());
+            });
+            {% endfor %}
+        {% endif %}
+        {% endcache %}
+    {% endwith %}
     map.addLayer(markers);
     //var group = L.featureGroup(window.markerArray).addTo(map);
     map.fitBounds(markers.getBounds());
 
+    document.getElementById("searchInput").addEventListener("input", function () {
+    const filter = this.value.toLowerCase();
+    const items = document.querySelectorAll("#placeList .item");
+
+    items.forEach(item => {
+        const title = item.querySelector("h3")?.textContent.toLowerCase() || "";
+        const address = item.querySelector("li.address")?.textContent.toLowerCase() || "";
+        const content = title + " " + address;
+
+        item.style.display = content.includes(filter) ? "" : "none";
+    });});
+
 </script>
 {% endblock %}