Add basic URL filters

@@ -3,5 +3,6 @@ import "./scripts/property_map.js";import "./scripts/property_date_select.js";import "./scripts/property_custom_cards.js";import "./scripts/property_is_public.js";import "./scripts/property_filters.js";import "./styles/print.scss";

@@ -0,0 +1,16 @@/** * When clicking a .btn-filter-clear button, get the data-filter-key and the * data-filter-value and remove the filter from the URL then reload the page. */document.addEventListener("DOMContentLoaded", function () {  var filterClearButtons = document.querySelectorAll(".btn-filter-clear");  for (var i = 0; i < filterClearButtons.length; i++) {    filterClearButtons[i].addEventListener("click", function (e) {      var filterKey = e.target.dataset.filterKey;      var url = new URL(window.location.href);      url.searchParams.delete(filterKey);      window.location.href = url.toString();    });  }});

@@ -84,6 +84,15 @@        </div>      </div>      <div class="col-12 col-lg-6 d-flex flex-column justify-content-end align-items-xl-end">        {% if filter_url %}        <div class="mb-2 d-flex align-items-center">          <span class="text-muted small me-2">Current filters</span>          <span class="badge bg-success d-flex align-items-center">            {{ filter_url }}            <button type="button" class="btn-filter-clear btn-close btn-sm text-white ms-2" data-filter-key="filter_url" data-filter-value="{{ filter_url }}"></button>          </span>        </div>        {% endif %}        <form method="GET">          <div class="row g-1">            <div class="col-6 col-md-4">

@@ -195,7 +204,7 @@        </li>        {% for item in total_page_views_by_page_url %}        <li class="list-group-item d-flex justify-content-between align-items-start bg-light">          <span class="text-truncate">{{ item.label }}</span>          <a href="{% url 'property' property.id %}?filter_url={{ item.label|urlencode }}" class="text-decoration-none text-dark"><span class="text-truncate">{{ item.label }}</span></a>          <span class="badge bg-primary rounded-pill">{{ item.count }}</span>        </li>        {% endfor %}

@@ -211,7 +220,7 @@        </li>        {% for item in total_events_by_page_url %}        <li class="list-group-item d-flex justify-content-between align-items-start bg-light">          <span class="text-truncate">{{ item.label }}</span>          <a href="{% url 'property' property.id %}?filter_url={{ item.label|urlencode }}" class="text-decoration-none text-dark"><span class="text-truncate">{{ item.label }}</span></a>          <span class="badge bg-primary rounded-pill">{{ item.count }}</span>        </li>        {% endfor %}

@@ -157,6 +157,12 @@ def property(request, property_id):        created_at__gte=date_start_obj, created_at__lte=date_end_obj    )    # Get the filter_url and filter by data__url if filter_url exists    filter_url = request.GET.get("filter_url", None)    if filter_url:        events_filtered = events_filtered.filter(data__url=filter_url)        context['filter_url'] = filter_url    # Get the previous period as well for comparisons    date_start_obj_prev = date_start_obj - timezone.timedelta(days=date_range)    date_end_obj_prev = date_end_obj - timezone.timedelta(days=date_range)