setop/agenda_culturel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajout d'un filtre sur la page des lieux

Browse Source
This commit is contained in:
Jean-Marie Favreau 2025-05-03 15:55:36 +02:00
parent 51e820821a
commit b3ac6814aa
1 changed files with 52 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/agenda_culturel/templates/agenda_culturel/place_list.html
View File

@ -40,18 +40,21 @@
</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 %}
<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>
<li class="address">
<strong>Adresse&nbsp;:</strong>
{% if place.address %}{{ place.address }},{% endif %}
{{ place.city }}
@ -63,7 +66,9 @@
{% 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,6 +96,9 @@
markerArray = [];
var markers = L.markerClusterGroup({disableClusteringAtZoom:16});
window.mMapping = {};
{% 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 }}'))
@ -102,9 +110,23 @@
});
{% 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 %}