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> </header>
<div class="grid"> <div class="grid">
<div id="map_location"></div> <div id="map_location"></div>
<div class="vertical-max"> <div>
{% with cache_timeout=user.is_authenticated|yesno:"300,6000" %} {% with cache_timeout=user.is_authenticated|yesno:"300,6000" %}
{% cache cache_timeout place_lists user.is_authenticated %} {% cache cache_timeout place_lists user.is_authenticated %}
{% if object_list %} {% if object_list %}
{% for place in object_list %} <input type="search" id="searchInput" placeholder="Rechercher un lieu...">
<h3> <div class="vertical-max" id="placeList">
<a href="{{ place.get_absolute_url }}">{{ place.name }}</a> — <a id="open-map-{{ place.id }}" {% 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" href="#map_location"
data-tooltip="afficher sur la carte">{% picto_from_name "map" %}</a> data-tooltip="afficher sur la carte">{% picto_from_name "map" %}</a>
</h3> </h3>
<ul> <ul>
<li> <li class="address">
<strong>Adresse&nbsp;:</strong> <strong>Adresse&nbsp;:</strong>
{% if place.address %}{{ place.address }},{% endif %} {% if place.address %}{{ place.address }},{% endif %}
{{ place.city }} {{ place.city }}
</li> </li>
<li> <li>
<strong>Coordonnée GPS&nbsp;:</strong> {{ place.location }} <strong>Coordonnée GPS&nbsp;:</strong> {{ place.location }}
</li> </li>
{% with place.nb_events_future as nb %} {% with place.nb_events_future as nb %}
{% if nb > 0 %}<li>{{ nb }} événement{{ nb|pluralize }} à venir</li>{% endif %} {% if nb > 0 %}<li>{{ nb }} événement{{ nb|pluralize }} à venir</li>{% endif %}
{% endwith %} {% endwith %}
</ul> </ul>
{% endfor %} </div>
{% endfor %}
</div>
{% else %} {% else %}
<p>Il n'y a aucun lieu défini.</p> <p>Il n'y a aucun lieu défini.</p>
{% endif %} {% endif %}
@ -91,20 +96,37 @@
markerArray = []; markerArray = [];
var markers = L.markerClusterGroup({disableClusteringAtZoom:16}); var markers = L.markerClusterGroup({disableClusteringAtZoom:16});
window.mMapping = {}; window.mMapping = {};
{% if object_list %} {% with cache_timeout=user.is_authenticated|yesno:"300,6000" %}
{% for place in object_list %} {% cache cache_timeout place_lists_js_all user.is_authenticated %}
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]); {% if object_list %}
window.mMapping[{{ place.id }}] = markerArray[markerArray.length - 1]; {% for place in object_list %}
window.django.jQuery('a#open-map-{{ place.id }}').click(function(){ 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 }}'))
window.mMapping[{{ place.id }}].openPopup(); markers.addLayer(markerArray[markerArray.length - 1]);
map.panTo(window.mMapping[{{ place.id }}].getLatLng()); window.mMapping[{{ place.id }}] = markerArray[markerArray.length - 1];
}); window.django.jQuery('a#open-map-{{ place.id }}').click(function(){
{% endfor %} window.mMapping[{{ place.id }}].openPopup();
{% endif %} map.panTo(window.mMapping[{{ place.id }}].getLatLng());
});
{% endfor %}
{% endif %}
{% endcache %}
{% endwith %}
map.addLayer(markers); map.addLayer(markers);
//var group = L.featureGroup(window.markerArray).addTo(map); //var group = L.featureGroup(window.markerArray).addTo(map);
map.fitBounds(markers.getBounds()); 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> </script>
{% endblock %} {% endblock %}