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

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

@ -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 %}