mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 10:11:09 -05:00
Add search suggestions feature with improved filtering and UI
This commit is contained in:
pacnpal
@@ -31,28 +31,100 @@
|
||||
</svg>
|
||||
Add Ride
|
||||
</a>
|
||||
{% else %}
|
||||
<!-- No add ride button in global view - rides must be added from park pages -->
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Quick Filters -->
|
||||
<div class="flex flex-wrap items-center gap-3 pb-4 mb-4">
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Quick Filters:</span>
|
||||
{% for filter in quick_filters %}
|
||||
<button
|
||||
hx-get="{% if park %}{% url 'parks:rides:ride_list' park.slug %}{% else %}{% url 'rides:global_ride_list' %}{% endif %}"
|
||||
hx-include="[name='search']"
|
||||
hx-target="#rides-grid"
|
||||
hx-push-url="true"
|
||||
hx-vals='{{ filter.params|safe }}'
|
||||
hx-indicator=".loading-indicator"
|
||||
class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-full hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700">
|
||||
<i class="mr-2 fa {{ filter.icon }}"></i>
|
||||
{{ filter.name }}
|
||||
</button>
|
||||
{% endfor %}
|
||||
<!-- Enhanced Loading Indicator -->
|
||||
<div class="loading-indicator htmx-indicator">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></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>
|
||||
<span>Updating results...</span>
|
||||
<span class="loading-timestamp text-xs opacity-75"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="p-4 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<form class="grid grid-cols-1 gap-4 md:grid-cols-3"
|
||||
hx-get="{% if park %}{% url 'parks:rides:ride_list' park.slug %}{% else %}{% url 'rides:global_ride_list' %}{% endif %}"
|
||||
hx-trigger="change from:select, input from:input[type='text']"
|
||||
hx-target="#rides-grid"
|
||||
hx-push-url="true">
|
||||
<div>
|
||||
<label for="search" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Search</label>
|
||||
<input type="text" name="search" id="search"
|
||||
value="{{ current_filters.search }}"
|
||||
class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
placeholder="Search rides...">
|
||||
<div class="p-4 mb-6 bg-white rounded-lg shadow dark:bg-gray-800" x-data="{ showAdvanced: localStorage.getItem('showAdvancedFilters') === 'true' }">
|
||||
<!-- Active Filters -->
|
||||
{% if current_filters.search or current_filters.category or current_filters.status %}
|
||||
<div class="flex flex-wrap items-center gap-2 mb-4 -mt-2">
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Active Filters:</span>
|
||||
{% for name, value in current_filters.items %}
|
||||
{% if value %}
|
||||
<button
|
||||
hx-get="{% if park %}{% url 'parks:rides:ride_list' park.slug %}{% else %}{% url 'rides:global_ride_list' %}{% endif %}"
|
||||
hx-include="form"
|
||||
hx-target="#rides-grid"
|
||||
hx-push-url="true"
|
||||
@click="$dispatch('clear-filter', '{{ name }}')"
|
||||
class="inline-flex items-center px-2 py-1 text-sm bg-blue-100 border border-blue-200 rounded-full dark:bg-blue-900 dark:border-blue-800">
|
||||
<span class="mr-1">{{ name|title }}: {{ value }}</span>
|
||||
<i class="text-gray-500 fa fa-times dark:text-gray-400"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div>
|
||||
<label for="category" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Category</label>
|
||||
{% endif %}
|
||||
|
||||
<form class="grid grid-cols-1 gap-4"
|
||||
x-data
|
||||
hx-get="{% if park %}{% url 'parks:rides:ride_list' park.slug %}{% else %}{% url 'rides:global_ride_list' %}{% endif %}"
|
||||
x-init="$watch('showAdvanced', value => { if (!value) window.scrollTo({ top: 0, behavior: 'smooth' }) })"
|
||||
hx-trigger="change from:select, input[type='number'] delay:500ms, input[type='text'] changed delay:300ms, search"
|
||||
hx-target="#rides-grid"
|
||||
hx-push-url="true"
|
||||
hx-indicator=".htmx-indicator"
|
||||
@reset.prevent="$dispatch('clear-filters'); localStorage.removeItem('rideFilters')"
|
||||
@clear-filters.window="$el.reset(); htmx.trigger(this, 'change')"
|
||||
@filter-changed.window="htmx.trigger(this, 'change')">
|
||||
<!-- Search Input -->
|
||||
<div class="md:col-span-2">
|
||||
<div x-data="rideSearch" class="relative">
|
||||
<label for="search" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Search by name, park, or description
|
||||
</label>
|
||||
<input type="text"
|
||||
name="search"
|
||||
id="search"
|
||||
x-model="searchQuery"
|
||||
@input="handleInput"
|
||||
@focus="handleInput"
|
||||
@keydown="handleKeydown"
|
||||
class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
placeholder="Example: steel coaster at universal"
|
||||
:value="searchQuery"
|
||||
x-init="searchQuery = '{{ current_filters.search }}'"
|
||||
autocomplete="off">
|
||||
<div class="absolute w-full mt-1 bg-white rounded-lg shadow-lg dark:bg-gray-800"
|
||||
id="search-suggestions"
|
||||
x-show="showSuggestions"
|
||||
x-cloak>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Basic Filters -->
|
||||
<div class="md:col-span-2">
|
||||
<label for="category" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Ride Type</label>
|
||||
<select name="category" id="category"
|
||||
class="w-full border-gray-300 rounded-lg form-select dark:border-gray-600 dark:bg-gray-700 dark:text-white">
|
||||
<option value="">All Categories</option>
|
||||
@@ -64,8 +136,9 @@
|
||||
<option value="OT" {% if current_filters.category == 'OT' %}selected{% endif %}>Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="status" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Status</label>
|
||||
|
||||
<div class="md:col-span-2">
|
||||
<label for="status" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Operating Status</label>
|
||||
<select name="status" id="status"
|
||||
class="w-full border-gray-300 rounded-lg form-select dark:border-gray-600 dark:bg-gray-700 dark:text-white">
|
||||
<option value="">All Statuses</option>
|
||||
@@ -77,103 +150,69 @@
|
||||
<option value="RELOCATED" {% if current_filters.status == 'RELOCATED' %}selected{% endif %}>Relocated</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Rides Grid -->
|
||||
<div id="rides-grid" class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{% for ride in rides %}
|
||||
<div class="overflow-hidden transition-transform transform bg-white rounded-lg shadow-lg dark:bg-gray-800 hover:-translate-y-1">
|
||||
<div class="aspect-w-16 aspect-h-9">
|
||||
<a href="{% url 'parks:rides:ride_detail' ride.park.slug ride.slug %}"
|
||||
class="text-gray-900 hover:text-blue-600 dark:text-white dark:hover:text-blue-400">
|
||||
{{ ride.name }}
|
||||
{% if ride.photos.exists %}
|
||||
<img src="{{ ride.photos.first.image.url }}"
|
||||
alt="{{ ride.name }}"
|
||||
class="object-cover w-full">
|
||||
{% else %}
|
||||
<img src="{% get_ride_placeholder_image ride.category %}"
|
||||
alt="{{ ride.name }}"
|
||||
class="object-cover w-full">
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h2 class="mb-2 text-xl font-bold">
|
||||
<a href="{% url 'parks:rides:ride_detail' ride.park.slug ride.slug %}"
|
||||
class="text-gray-900 hover:text-blue-600 dark:text-white dark:hover:text-blue-400">
|
||||
{{ ride.name }}
|
||||
</a>
|
||||
</h2>
|
||||
{% if not park %}
|
||||
<p class="mb-3 text-gray-600 dark:text-gray-400">
|
||||
at <a href="{% url 'parks:park_detail' ride.park.slug %}"
|
||||
class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
|
||||
{{ ride.park.name }}
|
||||
</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="text-blue-800 bg-blue-100 status-badge dark:bg-blue-400/30 dark:text-blue-200 dark:ring-1 dark:ring-blue-400/30">
|
||||
{{ ride.get_category_display }}
|
||||
</span>
|
||||
<span class="status-badge {% if ride.status == 'OPERATING' %}status-operating
|
||||
{% elif ride.status == 'CLOSED_TEMP' or ride.status == 'CLOSED_PERM' %}status-closed
|
||||
{% elif ride.status == 'UNDER_CONSTRUCTION' %}status-construction
|
||||
{% elif ride.status == 'DEMOLISHED' %}status-demolished
|
||||
{% elif ride.status == 'RELOCATED' %}status-relocated{% endif %}">
|
||||
{{ ride.get_status_display }}
|
||||
</span>
|
||||
{% if ride.average_rating %}
|
||||
<span class="text-yellow-800 bg-yellow-100 status-badge dark:bg-yellow-400/30 dark:text-yellow-200 dark:ring-1 dark:ring-yellow-400/30">
|
||||
<i class="mr-1 text-yellow-500 fas fa-star dark:text-yellow-300"></i>
|
||||
{{ ride.average_rating|floatformat:1 }}/10
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if ride.coaster_stats %}
|
||||
<div class="grid grid-cols-2 gap-2 mt-4">
|
||||
{% if ride.coaster_stats.height_ft %}
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Height: {{ ride.coaster_stats.height_ft }}ft
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if ride.coaster_stats.speed_mph %}
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Speed: {{ ride.coaster_stats.speed_mph }}mph
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<!-- Advanced Filters Toggle -->
|
||||
<div class="flex items-center justify-between md:col-span-6">
|
||||
<button type="button"
|
||||
@click="showAdvanced = !showAdvanced; localStorage.setItem('showAdvancedFilters', showAdvanced)"
|
||||
class="flex items-center text-sm text-gray-600 dark:text-gray-400">
|
||||
<span x-text="showAdvanced ? 'Hide Advanced Filters' : 'Show Advanced Filters'"></span>
|
||||
<i class="ml-1 fa" :class="showAdvanced ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
|
||||
</button>
|
||||
</div>
|
||||
{% empty %}
|
||||
<div class="col-span-3 py-8 text-center">
|
||||
<p class="text-gray-500 dark:text-gray-400">No rides found matching your criteria.</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
{% if is_paginated %}
|
||||
<div class="flex justify-center mt-6">
|
||||
<div class="inline-flex rounded-md shadow-sm">
|
||||
{% if page_obj.has_previous %}
|
||||
<a href="?page=1{{ request.GET.urlencode }}" class="px-3 py-2 text-gray-700 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700">« First</a>
|
||||
<a href="?page={{ page_obj.previous_page_number }}{{ request.GET.urlencode }}" class="px-3 py-2 text-gray-700 bg-white border-t border-b border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700">Previous</a>
|
||||
{% endif %}
|
||||
<!-- Advanced Filters -->
|
||||
<div x-show="showAdvanced"
|
||||
x-cloak
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 transform -translate-y-2"
|
||||
x-transition:enter-end="opacity-100 transform translate-y-0"
|
||||
class="grid grid-cols-1 gap-4 md:grid-cols-6 md:col-span-6">
|
||||
<div class="md:col-span-2">
|
||||
<label for="manufacturer" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Manufacturer</label>
|
||||
<select name="manufacturer" id="manufacturer"
|
||||
class="w-full border-gray-300 rounded-lg form-select dark:border-gray-600 dark:bg-gray-700 dark:text-white">
|
||||
<option value="">All Manufacturers</option>
|
||||
{% for mfr in manufacturers %}
|
||||
<option value="{{ mfr.id }}" {% if current_filters.manufacturer == mfr.id %}selected{% endif %}>
|
||||
{{ mfr.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<label for="track_material" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Track Material</label>
|
||||
<select name="track_material" id="track_material"
|
||||
class="w-full border-gray-300 rounded-lg form-select dark:border-gray-600 dark:bg-gray-700 dark:text-white">
|
||||
<option value="">All Materials</option>
|
||||
<option value="STEEL" {% if current_filters.track_material == 'STEEL' %}selected{% endif %}>Steel</option>
|
||||
<option value="WOOD" {% if current_filters.track_material == 'WOOD' %}selected{% endif %}>Wood</option>
|
||||
<option value="HYBRID" {% if current_filters.track_material == 'HYBRID' %}selected{% endif %}>Hybrid</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<label for="coaster_type" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Coaster Type</label>
|
||||
<select name="coaster_type" id="coaster_type"
|
||||
class="w-full border-gray-300 rounded-lg form-select dark:border-gray-600 dark:bg-gray-700 dark:text-white">
|
||||
<option value="">All Types</option>
|
||||
<option value="SITDOWN" {% if current_filters.coaster_type == 'SITDOWN' %}selected{% endif %}>Sit Down</option>
|
||||
<option value="INVERTED" {% if current_filters.coaster_type == 'INVERTED' %}selected{% endif %}>Inverted</option>
|
||||
<option value="FLYING" {% if current_filters.coaster_type == 'FLYING' %}selected{% endif %}>Flying</option>
|
||||
<option value="STANDUP" {% if current_filters.coaster_type == 'STANDUP' %}selected{% endif %}>Stand Up</option>
|
||||
<option value="WING" {% if current_filters.coaster_type == 'WING' %}selected{% endif %}>Wing</option>
|
||||
<option value="DIVE" {% if current_filters.coaster_type == 'DIVE' %}selected{% endif %}>Dive</option>
|
||||
<option value="FAMILY" {% if current_filters.coaster_type == 'FAMILY' %}selected{% endif %}>Family</option>
|
||||
<option value="WILD_MOUSE" {% if current_filters.coaster_type == 'WILD_MOUSE' %}selected{% endif %}>Wild Mouse</option>
|
||||
<option value="SPINNING" {% if current_filters.coaster_type == 'SPINNING' %}selected{% endif %}>Spinning</option>
|
||||
<option value="FOURTH_DIMENSION" {% if current_filters.coaster_type == 'FOURTH_DIMENSION' %}selected{% endif %}>4th Dimension</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<span class="px-3 py-2 text-gray-700 bg-white border border-gray-300 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300">
|
||||
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
|
||||
</span>
|
||||
|
||||
{% if page_obj.has_next %}
|
||||
<a href="?page={{ page_obj.next_page_number }}{{ request.GET.urlencode }}" class="px-3 py-2 text-gray-700 bg-white border-t border-b border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700">Next</a>
|
||||
<a href="?page={{ page_obj.paginator.num_pages }}{{ request.GET.urlencode }}" class="px-3 py-2 text-gray-700 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700">Last »</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
<!-- Stats Filters -->
|
||||
<div class="md:col-span-2">
|
||||
<label for="min_height" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Min Height (ft)</label>
|
||||
<input type="number" name="min_height" id="min_height"
|
||||
value="{{ current_filters.min_height }}"
|
||||
class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white">
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
|
||||
Reference in New Issue
Block a user