pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-20 08:31:08 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor park filtering system and templates

Browse Source 
- Updated the filtered_list.html template to extend from base/base.html and improved layout and styling.
- Removed the park_list.html template as its functionality is now integrated into the filtered list.
- Added a new migration to create indexes for improved filtering performance on the parks model.
- Merged migrations to maintain a clean migration history.
- Implemented a ParkFilterService to handle complex filtering logic, aggregations, and caching for park filters.
- Enhanced filter suggestions and popular filters retrieval methods.
- Improved the overall structure and efficiency of the filtering system.
This commit is contained in:
pacnpal
2025-08-20 21:20:10 -04:00
parent 66ed4347a9
commit 652ea149bd
17 changed files with 3224 additions and 515 deletions
Download Patch File Download Diff File Expand all files Collapse all files

463
templates/core/search/components/filter_form.html
View File

@@ -1,20 +1,122 @@
{# Enhanced filter form with modern UI/UX design - timestamp: 2025-08-21 #}
{% load static %}
{% load filter_utils %}
<div class="filter-container" x-data="{ open: false }">
<div class="filter-container" x-data="filterManager()" x-init="init()">
{# Quick Filter Presets - Enhanced Design #}
<div class="mb-8 bg-gradient-to-br from-white via-gray-50 to-white dark:from-gray-800 dark:via-gray-800 dark:to-gray-900 rounded-xl shadow-lg border border-gray-200/50 dark:border-gray-700/50 p-6 backdrop-blur-sm">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center space-x-3">
<div class="w-2 h-8 bg-gradient-to-b from-blue-500 to-purple-600 rounded-full"></div>
<div>
<h3 class="text-lg font-bold text-gray-900 dark:text-white">Quick Filters</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Find parks instantly with preset filters</p>
</div>
</div>
<div class="flex items-center space-x-2">
<div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
<span class="text-xs text-gray-500 dark:text-gray-400">Live filtering</span>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<button type="button"
@click="applyQuickFilter('disney')"
class="group relative overflow-hidden rounded-xl p-4 transition-all duration-300 ease-out transform hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
:class="isQuickFilterActive('disney') ? 'bg-gradient-to-br from-blue-500 to-blue-600 text-white shadow-lg ring-2 ring-blue-500/20' : 'bg-white dark:bg-gray-700/50 text-gray-700 dark:text-gray-300 hover:bg-blue-50 dark:hover:bg-gray-600 border border-gray-200 dark:border-gray-600'"
title="Show Disney Parks">
<div class="flex flex-col items-center text-center space-y-2">
<div class="relative">
<svg class="w-8 h-8 transition-transform duration-300 group-hover:rotate-12" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<div class="absolute -top-1 -right-1 w-3 h-3 bg-yellow-400 rounded-full animate-ping" x-show="isQuickFilterActive('disney')"></div>
</div>
<div>
<div class="font-semibold text-sm">Disney Parks</div>
<div class="text-xs opacity-75" x-show="quickFilterCounts.disney" x-text="`${quickFilterCounts.disney} parks`"></div>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-br from-blue-400/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</button>
<button type="button"
@click="applyQuickFilter('coasters')"
class="group relative overflow-hidden rounded-xl p-4 transition-all duration-300 ease-out transform hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
:class="isQuickFilterActive('coasters') ? 'bg-gradient-to-br from-green-500 to-green-600 text-white shadow-lg ring-2 ring-green-500/20' : 'bg-white dark:bg-gray-700/50 text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-gray-600 border border-gray-200 dark:border-gray-600'"
title="Parks with Roller Coasters">
<div class="flex flex-col items-center text-center space-y-2">
<div class="relative">
<svg class="w-8 h-8 transition-transform duration-300 group-hover:scale-110" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
</svg>
<div class="absolute -top-1 -right-1 w-3 h-3 bg-red-400 rounded-full animate-ping" x-show="isQuickFilterActive('coasters')"></div>
</div>
<div>
<div class="font-semibold text-sm">With Coasters</div>
<div class="text-xs opacity-75" x-show="quickFilterCounts.coasters" x-text="`${quickFilterCounts.coasters} parks`"></div>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-br from-green-400/10 to-emerald-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</button>
<button type="button"
@click="applyQuickFilter('top_rated')"
class="group relative overflow-hidden rounded-xl p-4 transition-all duration-300 ease-out transform hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2"
:class="isQuickFilterActive('top_rated') ? 'bg-gradient-to-br from-yellow-500 to-yellow-600 text-white shadow-lg ring-2 ring-yellow-500/20' : 'bg-white dark:bg-gray-700/50 text-gray-700 dark:text-gray-300 hover:bg-yellow-50 dark:hover:bg-gray-600 border border-gray-200 dark:border-gray-600'"
title="Highly Rated Parks (4+ stars)">
<div class="flex flex-col items-center text-center space-y-2">
<div class="relative">
<svg class="w-8 h-8 transition-transform duration-300 group-hover:rotate-12" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<div class="absolute -top-1 -right-1 w-3 h-3 bg-yellow-400 rounded-full animate-ping" x-show="isQuickFilterActive('top_rated')"></div>
</div>
<div>
<div class="font-semibold text-sm">Top Rated</div>
<div class="text-xs opacity-75" x-show="quickFilterCounts.top_rated" x-text="`${quickFilterCounts.top_rated} parks`"></div>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-br from-yellow-400/10 to-orange-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</button>
<button type="button"
@click="applyQuickFilter('major_parks')"
class="group relative overflow-hidden rounded-xl p-4 transition-all duration-300 ease-out transform hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
:class="isQuickFilterActive('major_parks') ? 'bg-gradient-to-br from-purple-500 to-purple-600 text-white shadow-lg ring-2 ring-purple-500/20' : 'bg-white dark:bg-gray-700/50 text-gray-700 dark:text-gray-300 hover:bg-purple-50 dark:hover:bg-gray-600 border border-gray-200 dark:border-gray-600'"
title="Major Theme Parks (10+ rides)">
<div class="flex flex-col items-center text-center space-y-2">
<div class="relative">
<svg class="w-8 h-8 transition-transform duration-300 group-hover:scale-110" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
<div class="absolute -top-1 -right-1 w-3 h-3 bg-purple-400 rounded-full animate-ping" x-show="isQuickFilterActive('major_parks')"></div>
</div>
<div>
<div class="font-semibold text-sm">Major Parks</div>
<div class="text-xs opacity-75" x-show="quickFilterCounts.major_parks" x-text="`${quickFilterCounts.major_parks} parks`"></div>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-br from-purple-400/10 to-pink-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</button>
</div>
</div>
{# Mobile Filter Toggle #}
<div class="lg:hidden bg-white rounded-lg shadow p-4 mb-4">
<button @click="open = !open" type="button" class="w-full flex items-center justify-between p-2">
<span class="font-medium text-gray-900">
<div class="lg:hidden bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4 mb-6">
<button @click="toggleMobileFilters()" type="button" class="w-full flex items-center justify-between p-3 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-md transition-colors duration-200">
<span class="font-medium text-gray-900 dark:text-white">
<span class="mr-2">
<svg class="w-5 h-5 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
</svg>
</span>
Filter Options
<span x-show="activeFilterCount > 0"
class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100"
x-text="activeFilterCount"></span>
</span>
<span class="text-gray-500">
<svg class="w-5 h-5 transition-transform duration-200" :class="{'rotate-180': open}" fill="currentColor" viewBox="0 0 20 20">
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-5 h-5 transition-transform duration-200" :class="{'rotate-180': mobileFiltersOpen}" fill="currentColor" viewBox="0 0 20 20">
<path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"></path>
</svg>
</span>
@@ -22,90 +124,341 @@
</div>
{# Filter Form #}
<form hx-get="{{ request.path }}"
hx-trigger="change delay:500ms"
<form hx-get="{{ request.path }}"
hx-trigger="change delay:300ms, submit"
hx-target="#results-container"
hx-push-url="true"
hx-indicator="#filter-loading"
class="space-y-6"
x-show="open || $screen('lg')"
x-transition>
x-show="mobileFiltersOpen || $screen('lg')"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
@change="updateActiveFilterCount()">
{# Active Filters Summary #}
{% if applied_filters %}
<div class="bg-blue-50 rounded-lg p-4 shadow-xs border border-blue-100">
<div class="flex justify-between items-center">
<div>
<h3 class="text-sm font-medium text-blue-800">Active Filters</h3>
<p class="text-xs text-blue-600 mt-1">{{ applied_filters|length }} filter{{ applied_filters|length|pluralize }} applied</p>
</div>
<a href="{{ request.path }}"
class="text-sm font-medium text-blue-600 hover:text-blue-500 hover:underline"
hx-get="{{ request.path }}"
hx-target="#results-container"
hx-push-url="true">
Clear All
</a>
{# Loading Indicator #}
<div id="filter-loading" class="htmx-indicator fixed top-4 right-4 z-50">
<div class="bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center">
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Updating results...
</div>
</div>
{# Active Filters Summary #}
<div x-show="activeFilterCount > 0"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 transform scale-95"
x-transition:enter-end="opacity-100 transform scale-100"
class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 shadow-xs border border-blue-100 dark:border-blue-800">
<div class="flex justify-between items-center">
<div>
<h3 class="text-sm font-medium text-blue-800 dark:text-blue-200">Active Filters</h3>
<p class="text-xs text-blue-600 dark:text-blue-300 mt-1" x-text="`${activeFilterCount} filter${activeFilterCount !== 1 ? 's' : ''} applied`"></p>
</div>
<button type="button"
@click="clearAllFilters()"
class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 hover:underline focus:outline-none focus:underline transition-colors duration-150"
aria-label="Clear all filters">
Clear All
</button>
</div>
</div>
{% endif %}
{# Filter Groups #}
<div class="bg-white rounded-lg shadow divide-y divide-gray-200">
{% for fieldset in filter.form|groupby_filters %}
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700">
<div class="p-6" x-data="{ expanded: true }">
{# Group Header #}
<button type="button"
<button type="button"
@click="expanded = !expanded"
class="w-full flex justify-between items-center text-left">
<h3 class="text-lg font-medium text-gray-900">{{ fieldset.name }}</h3>
<svg class="w-5 h-5 text-gray-500 transform transition-transform duration-200"
class="w-full flex justify-between items-center text-left focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-md p-1 -m-1"
:aria-expanded="expanded"
aria-controls="filter-group-1">
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Search & Filter Options</h3>
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400 transform transition-transform duration-200"
:class="{'rotate-180': !expanded}"
fill="currentColor"
viewBox="0 0 20 20">
fill="currentColor"
viewBox="0 0 20 20"
aria-hidden="true">
<path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/>
</svg>
</button>
{# Group Content #}
<div class="mt-4 space-y-4" x-show="expanded" x-collapse>
{% for field in fieldset.fields %}
<div id="filter-group-1"
class="mt-4 space-y-4"
x-show="expanded"
x-collapse>
{% for field in filter.form %}
<div class="filter-field">
<label for="{{ field.id_for_label }}"
class="block text-sm font-medium text-gray-700 mb-1">
<label for="{{ field.id_for_label }}"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 flex items-center">
{{ field.label }}
{% if field.help_text %}
<button type="button"
class="ml-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none"
@click="$tooltip('{{ field.help_text|escapejs }}', $event)"
aria-label="Help for {{ field.label }}">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/>
</svg>
</button>
{% endif %}
</label>
<div class="mt-1">
{{ field|add_field_classes }}
<div class="mt-2 relative">
<div class="form-field-wrapper">
{% if field.field.widget.input_type == 'text' or field.field.widget.input_type == 'search' %}
<input type="{{ field.field.widget.input_type }}"
name="{{ field.name }}"
id="{{ field.id_for_label }}"
value="{{ field.value|default_if_none:'' }}"
placeholder="{{ field.field.widget.attrs.placeholder|default:'' }}"
class="block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm transition-colors duration-200">
{% elif field.field.widget.input_type == 'number' %}
<input type="number"
name="{{ field.name }}"
id="{{ field.id_for_label }}"
value="{{ field.value|default_if_none:'' }}"
min="{{ field.field.widget.attrs.min|default:'' }}"
max="{{ field.field.widget.attrs.max|default:'' }}"
class="block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm transition-colors duration-200">
{% elif field.field.widget.input_type == 'checkbox' %}
<div class="flex items-center">
<input type="checkbox"
name="{{ field.name }}"
id="{{ field.id_for_label }}"
{% if field.value %}checked{% endif %}
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded transition-colors duration-200">
<label for="{{ field.id_for_label }}" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
{{ field.label }}
</label>
</div>
{% elif field.field.widget.input_type == 'select' %}
<select name="{{ field.name }}"
id="{{ field.id_for_label }}"
class="block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm transition-colors duration-200">
{% for choice in field.field.choices %}
<option value="{{ choice.0 }}" {% if choice.0 == field.value %}selected{% endif %}>{{ choice.1 }}</option>
{% endfor %}
</select>
{% else %}
{{ field }}
{% endif %}
</div>
{% if field.field.widget.input_type == 'select' %}
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
</svg>
</div>
{% endif %}
</div>
{% if field.help_text %}
<p class="mt-1 text-sm text-gray-500">{{ field.help_text }}</p>
{% endif %}
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
{# Mobile Apply Button #}
<div class="lg:hidden">
<button type="submit"
class="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-150 ease-in-out">
Apply Filters
<button type="submit"
class="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-150 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed"
:disabled="isLoading">
<span x-show="!isLoading">Apply Filters</span>
<span x-show="isLoading" class="flex items-center justify-center">
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Applying...
</span>
</button>
</div>
</form>
</div>
{# Required Scripts #}
{# Enhanced Scripts #}
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('filterForm', () => ({
expanded: true,
toggle() {
this.expanded = !this.expanded
Alpine.data('filterManager', () => ({
mobileFiltersOpen: false,
activeFilterCount: 0,
isLoading: false,
quickFilterCounts: {
disney: 0,
coasters: 0,
top_rated: 0,
major_parks: 0
},
init() {
this.updateActiveFilterCount();
this.loadQuickFilterCounts();
// Listen for HTMX events
document.addEventListener('htmx:beforeRequest', () => {
this.isLoading = true;
});
document.addEventListener('htmx:afterRequest', () => {
this.isLoading = false;
});
document.addEventListener('htmx:responseError', () => {
this.isLoading = false;
});
},
toggleMobileFilters() {
this.mobileFiltersOpen = !this.mobileFiltersOpen;
},
updateActiveFilterCount() {
// Count active filters from form inputs
const form = this.$el.querySelector('form');
if (!form) return;
let count = 0;
const inputs = form.querySelectorAll('input, select, textarea');
inputs.forEach(input => {
if (input.name && input.value && input.value !== '' && input.value !== 'all') {
// Skip hidden fields and empty values
if (input.type !== 'hidden' && input.value !== '0') {
count++;
}
}
});
this.activeFilterCount = count;
},
clearAllFilters() {
const form = this.$el.querySelector('form');
if (!form) return;
// Clear all form inputs
const inputs = form.querySelectorAll('input, select, textarea');
inputs.forEach(input => {
if (input.type === 'checkbox' || input.type === 'radio') {
input.checked = false;
} else if (input.type !== 'hidden') {
input.value = '';
}
});
// Trigger form submission
this.activeFilterCount = 0;
htmx.trigger(form, 'submit');
},
applyQuickFilter(filterType) {
const form = this.$el.querySelector('form');
if (!form) return;
// Clear existing filters first
this.clearAllFilters();
// Apply specific filter based on type
switch(filterType) {
case 'disney':
const parkTypeField = form.querySelector('[name="park_type"]');
if (parkTypeField) parkTypeField.value = 'disney';
break;
case 'coasters':
const coastersField = form.querySelector('[name="has_coasters"]');
if (coastersField) coastersField.checked = true;
break;
case 'top_rated':
const ratingField = form.querySelector('[name="min_rating"]');
if (ratingField) ratingField.value = '4';
break;
case 'major_parks':
const bigParksField = form.querySelector('[name="big_parks_only"]');
if (bigParksField) bigParksField.checked = true;
break;
}
this.updateActiveFilterCount();
htmx.trigger(form, 'submit');
},
isQuickFilterActive(filterType) {
const form = this.$el.querySelector('form');
if (!form) return false;
switch(filterType) {
case 'disney':
const parkTypeField = form.querySelector('[name="park_type"]');
return parkTypeField && parkTypeField.value === 'disney';
case 'coasters':
const coastersField = form.querySelector('[name="has_coasters"]');
return coastersField && coastersField.checked;
case 'top_rated':
const ratingField = form.querySelector('[name="min_rating"]');
return ratingField && ratingField.value === '4';
case 'major_parks':
const bigParksField = form.querySelector('[name="big_parks_only"]');
return bigParksField && bigParksField.checked;
}
return false;
},
loadQuickFilterCounts() {
// This would typically fetch from an API endpoint
// For now, set some placeholder values
this.quickFilterCounts = {
disney: 12,
coasters: 156,
top_rated: 89,
major_parks: 78
};
}
}))
})
}));
// Tooltip directive
Alpine.directive('tooltip', (el, { expression }) => {
el._tooltip = expression;
});
// Global tooltip function
window.$tooltip = function(text, event) {
// Simple tooltip implementation - could be enhanced with a library
const tooltip = document.createElement('div');
tooltip.className = 'fixed z-50 bg-gray-900 text-white text-sm rounded py-1 px-2 pointer-events-none';
tooltip.textContent = text;
tooltip.style.left = event.pageX + 10 + 'px';
tooltip.style.top = event.pageY - 30 + 'px';
document.body.appendChild(tooltip);
setTimeout(() => {
if (tooltip.parentNode) {
tooltip.parentNode.removeChild(tooltip);
}
}, 3000);
};
});
// Enhanced debouncing for text inputs
document.addEventListener('input', function(e) {
if (e.target.type === 'text' || e.target.type === 'search') {
clearTimeout(e.target._debounceTimer);
e.target._debounceTimer = setTimeout(() => {
htmx.trigger(e.target.form, 'change');
}, 300);
}
});
</script>

29
templates/core/search/layouts/filtered_list.html
View File

@@ -1,26 +1,29 @@
{% extends "base.html" %}
{% extends "base/base.html" %}
{% load static %}
{% block title %}{{ view.model|model_name_plural|title }} - ThrillWiki{% endblock %}
{% block title %}Parks - ThrillWiki{% endblock %}
{% block content %}
<div class="container mx-auto px-4 py-8">
<div class="flex flex-col lg:flex-row gap-8">
<div class="flex flex-col lg:flex-row gap-6">
{# Filters Sidebar #}
<div class="lg:w-1/4">
{% include "search/components/filter_form.html" %}
<div class="lg:w-1/4 lg:sticky lg:top-4 lg:self-start">
{% block filter_section %}
<!-- DEBUG: base filtered_list.html filter_section block - timestamp: 2025-08-21 -->
{% include "core/search/components/filter_form.html" %}
{% endblock %}
</div>
{# Results Section #}
<div class="lg:w-3/4">
<div id="results-container">
{# Result count and sorting #}
<div class="bg-white rounded-lg shadow mb-4">
<div class="p-4 border-b">
<div class="flex justify-between items-center">
<h2 class="text-xl font-bold">
{{ view.model|model_name_plural|title }}
<span class="text-sm font-normal text-gray-500">({{ page_obj.paginator.count }} found)</span>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 mb-6">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
<h2 class="text-xl font-bold text-gray-900 dark:text-white">
Parks
<span class="text-sm font-normal text-gray-500 dark:text-gray-400">({{ page_obj.paginator.count }} found)</span>
</h2>
{% block list_actions %}
@@ -32,14 +35,14 @@
{# Results list #}
{% block results_list %}
<div class="bg-white rounded-lg shadow">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
{% include results_template|default:"search/partials/generic_results.html" %}
</div>
{% endblock %}
{# Pagination #}
{% if is_paginated %}
<div class="mt-4">
<div class="mt-6">
{% include "search/components/pagination.html" %}
</div>
{% endif %}