mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 07:31:07 -05:00
Add search suggestions feature with category filtering and display; enhance ride list view with improved search functionality
This commit is contained in:
pacnpal
324
core/templates/base.html
Normal file
324
core/templates/base.html
Normal file
@@ -0,0 +1,324 @@
|
|||||||
|
{% load static %}
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="csrf-token" content="{{ csrf_token }}" />
|
||||||
|
<title>{% block title %}ThrillWiki{% endblock %}</title>
|
||||||
|
|
||||||
|
<!-- Google Fonts -->
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Prevent flash of wrong theme -->
|
||||||
|
<script>
|
||||||
|
let theme = localStorage.getItem("theme");
|
||||||
|
if (!theme) {
|
||||||
|
theme = window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||||
|
? "dark"
|
||||||
|
: "light";
|
||||||
|
localStorage.setItem("theme", theme);
|
||||||
|
}
|
||||||
|
if (theme === "dark") {
|
||||||
|
document.documentElement.classList.add("dark");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- HTMX -->
|
||||||
|
<script src="https://unpkg.com/htmx.org@1.9.6"></script>
|
||||||
|
|
||||||
|
<!-- Alpine.js -->
|
||||||
|
<script defer src="{% static 'js/alpine.min.js' %}"></script>
|
||||||
|
|
||||||
|
<!-- Location Autocomplete -->
|
||||||
|
<script src="{% static 'js/location-autocomplete.js' %}"></script>
|
||||||
|
|
||||||
|
<!-- Tailwind CSS -->
|
||||||
|
<link href="{% static 'css/tailwind.css' %}" rel="stylesheet" />
|
||||||
|
<link href="{% static 'css/alerts.css' %}" rel="stylesheet" />
|
||||||
|
|
||||||
|
<!-- Font Awesome -->
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
[x-cloak] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.dropdown-menu {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
width: 12rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||||
|
z-index: 50;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.htmx-indicator {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.htmx-request .htmx-indicator {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.htmx-request.htmx-indicator {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
{% block extra_head %}{% endblock %}
|
||||||
|
</head>
|
||||||
|
<body
|
||||||
|
class="flex flex-col min-h-screen text-gray-900 bg-gradient-to-br from-white via-blue-50 to-indigo-50 dark:from-gray-950 dark:via-indigo-950 dark:to-purple-950 dark:text-white"
|
||||||
|
>
|
||||||
|
<!-- Header -->
|
||||||
|
<header
|
||||||
|
class="sticky top-0 z-40 border-b shadow-lg bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50"
|
||||||
|
>
|
||||||
|
<nav class="container mx-auto nav-container">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="flex items-center">
|
||||||
|
<a
|
||||||
|
href="{% url 'home' %}"
|
||||||
|
class="font-bold text-transparent transition-transform site-logo bg-gradient-to-r from-primary to-secondary bg-clip-text hover:scale-105"
|
||||||
|
>
|
||||||
|
ThrillWiki
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation Links (Always Visible) -->
|
||||||
|
<div class="flex items-center space-x-2 sm:space-x-4">
|
||||||
|
<a href="{% url 'parks:park_list' %}" class="nav-link">
|
||||||
|
<i class="fas fa-map-marker-alt"></i>
|
||||||
|
<span>Parks</span>
|
||||||
|
</a>
|
||||||
|
<a href="{% url 'rides:global_ride_list' %}" class="nav-link">
|
||||||
|
<i class="fas fa-rocket"></i>
|
||||||
|
<span>Rides</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Search Bar -->
|
||||||
|
<div class="flex-1 hidden max-w-md mx-8 lg:flex">
|
||||||
|
<form action="{% url 'search' %}" method="get" class="w-full">
|
||||||
|
<div class="relative">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="q"
|
||||||
|
placeholder="Search parks and rides..."
|
||||||
|
class="form-input"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right Side Menu -->
|
||||||
|
<div class="flex items-center space-x-2 sm:space-x-6">
|
||||||
|
<!-- Theme Toggle -->
|
||||||
|
<label for="theme-toggle" class="cursor-pointer">
|
||||||
|
<input type="checkbox" id="theme-toggle" class="hidden" />
|
||||||
|
<div
|
||||||
|
class="inline-flex items-center justify-center p-2 text-gray-500 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary theme-toggle-btn"
|
||||||
|
role="button"
|
||||||
|
aria-label="Toggle dark mode"
|
||||||
|
>
|
||||||
|
<i class="text-xl fas"></i>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<!-- User Menu -->
|
||||||
|
{% if user.is_authenticated %} {% if has_moderation_access %}
|
||||||
|
<a href="{% url 'moderation:dashboard' %}" class="nav-link">
|
||||||
|
<i class="fas fa-shield-alt"></i>
|
||||||
|
<span>Moderation</span>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
<div
|
||||||
|
class="relative"
|
||||||
|
x-data="{ open: false }"
|
||||||
|
@click.outside="open = false"
|
||||||
|
>
|
||||||
|
<!-- Profile Picture Button -->
|
||||||
|
{% if user.profile.avatar %}
|
||||||
|
<img
|
||||||
|
@click="open = !open"
|
||||||
|
src="{{ user.profile.avatar.url }}"
|
||||||
|
alt="{{ user.username }}"
|
||||||
|
class="w-8 h-8 transition-transform rounded-full cursor-pointer ring-2 ring-primary/20 hover:scale-105"
|
||||||
|
/>
|
||||||
|
{% else %}
|
||||||
|
<div
|
||||||
|
@click="open = !open"
|
||||||
|
class="flex items-center justify-center w-8 h-8 text-white transition-transform rounded-full cursor-pointer bg-gradient-to-br from-primary to-secondary hover:scale-105"
|
||||||
|
>
|
||||||
|
{{ user.username.0|upper }}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<!-- Dropdown Menu -->
|
||||||
|
<div
|
||||||
|
x-cloak
|
||||||
|
x-show="open"
|
||||||
|
x-transition:enter="transition ease-out duration-100"
|
||||||
|
x-transition:enter-start="transform opacity-0 scale-95"
|
||||||
|
x-transition:enter-end="transform opacity-100 scale-100"
|
||||||
|
x-transition:leave="transition ease-in duration-75"
|
||||||
|
x-transition:leave-start="transform opacity-100 scale-100"
|
||||||
|
x-transition:leave-end="transform opacity-0 scale-95"
|
||||||
|
class="bg-white dropdown-menu dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<a href="{% url 'profile' user.username %}" class="menu-item">
|
||||||
|
<i class="w-5 fas fa-user"></i>
|
||||||
|
<span>Profile</span>
|
||||||
|
</a>
|
||||||
|
<a href="{% url 'settings' %}" class="menu-item">
|
||||||
|
<i class="w-5 fas fa-cog"></i>
|
||||||
|
<span>Settings</span>
|
||||||
|
</a>
|
||||||
|
{% if has_admin_access %}
|
||||||
|
<a href="{% url 'admin:index' %}" class="menu-item">
|
||||||
|
<i class="w-5 fas fa-shield-alt"></i>
|
||||||
|
<span>Admin</span>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
<form method="post" action="{% url 'account_logout' %}">
|
||||||
|
{% csrf_token %}
|
||||||
|
<button type="submit" class="w-full menu-item">
|
||||||
|
<i class="w-5 fas fa-sign-out-alt"></i>
|
||||||
|
<span>Logout</span>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<!-- Generic Profile Icon for Unauthenticated Users -->
|
||||||
|
<div
|
||||||
|
class="relative"
|
||||||
|
x-data="{ open: false }"
|
||||||
|
@click.outside="open = false"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
@click="open = !open"
|
||||||
|
class="flex items-center justify-center w-8 h-8 text-gray-500 transition-transform rounded-full cursor-pointer hover:text-primary dark:text-gray-400 dark:hover:text-primary hover:scale-105"
|
||||||
|
>
|
||||||
|
<i class="text-xl fas fa-user"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Auth Menu -->
|
||||||
|
<div
|
||||||
|
x-cloak
|
||||||
|
x-show="open"
|
||||||
|
x-transition:enter="transition ease-out duration-100"
|
||||||
|
x-transition:enter-start="transform opacity-0 scale-95"
|
||||||
|
x-transition:enter-end="transform opacity-100 scale-100"
|
||||||
|
x-transition:leave="transition ease-in duration-75"
|
||||||
|
x-transition:leave-start="transform opacity-100 scale-100"
|
||||||
|
x-transition:leave-end="transform opacity-0 scale-95"
|
||||||
|
class="bg-white dropdown-menu dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
hx-get="{% url 'account_login' %}"
|
||||||
|
hx-target="body"
|
||||||
|
hx-swap="beforeend"
|
||||||
|
class="cursor-pointer menu-item"
|
||||||
|
>
|
||||||
|
<i class="w-5 fas fa-sign-in-alt"></i>
|
||||||
|
<span>Login</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
hx-get="{% url 'account_signup' %}"
|
||||||
|
hx-target="body"
|
||||||
|
hx-swap="beforeend"
|
||||||
|
class="cursor-pointer menu-item"
|
||||||
|
>
|
||||||
|
<i class="w-5 fas fa-user-plus"></i>
|
||||||
|
<span>Register</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<!-- Mobile Menu Button -->
|
||||||
|
<button
|
||||||
|
id="mobileMenuBtn"
|
||||||
|
class="p-2 text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-400"
|
||||||
|
aria-label="Toggle mobile menu"
|
||||||
|
>
|
||||||
|
<i class="text-2xl fas fa-bars"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile Menu -->
|
||||||
|
<div id="mobileMenu">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<!-- Search (Mobile) -->
|
||||||
|
<form action="{% url 'search' %}" method="get" class="mb-4">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="q"
|
||||||
|
placeholder="Search parks and rides..."
|
||||||
|
class="form-input"
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Flash Messages -->
|
||||||
|
{% if messages %}
|
||||||
|
<div class="fixed top-0 right-0 z-50 p-4 space-y-4">
|
||||||
|
{% for message in messages %}
|
||||||
|
<div
|
||||||
|
class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}"
|
||||||
|
>
|
||||||
|
{{ message }}
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="container flex-grow px-6 py-8 mx-auto">
|
||||||
|
{% block content %}{% endblock %}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer
|
||||||
|
class="mt-auto border-t bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50"
|
||||||
|
>
|
||||||
|
<div class="container px-6 py-6 mx-auto">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="text-gray-600 dark:text-gray-400">
|
||||||
|
<p>© {% now "Y" %} ThrillWiki. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-x-4">
|
||||||
|
<a
|
||||||
|
href="{% url 'terms' %}"
|
||||||
|
class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary"
|
||||||
|
>Terms</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="{% url 'privacy' %}"
|
||||||
|
class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary"
|
||||||
|
>Privacy</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- Custom JavaScript -->
|
||||||
|
<script src="{% static 'js/main.js' %}"></script>
|
||||||
|
<script src="{% static 'js/alerts.js' %}"></script>
|
||||||
|
{% block extra_js %}{% endblock %}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
26
rides/templates/rides/partials/search_suggestions.html
Normal file
26
rides/templates/rides/partials/search_suggestions.html
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
{% if suggestions %}
|
||||||
|
<div id="search-suggestions" class="search-suggestions">
|
||||||
|
{% for suggestion in suggestions %}
|
||||||
|
<div class="suggestion"
|
||||||
|
data-type="{{ suggestion.type }}"
|
||||||
|
data-suggestion="{{ suggestion.text|escape }}"
|
||||||
|
role="option">
|
||||||
|
{% if suggestion.type == 'ride' %}
|
||||||
|
<span class="icon">🎢</span>
|
||||||
|
<span class="text">{{ suggestion.text }}</span>
|
||||||
|
<span class="count">({{ suggestion.count }} rides)</span>
|
||||||
|
{% elif suggestion.type == 'park' %}
|
||||||
|
<span class="icon">🎪</span>
|
||||||
|
<span class="text">{{ suggestion.text }}</span>
|
||||||
|
{% if suggestion.location %}
|
||||||
|
<span class="location">{{ suggestion.location }}</span>
|
||||||
|
{% endif %}
|
||||||
|
{% elif suggestion.type == 'category' %}
|
||||||
|
<span class="icon">📂</span>
|
||||||
|
<span class="text">{{ suggestion.text }}</span>
|
||||||
|
<span class="count">({{ suggestion.count }} rides)</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
214
rides/templates/rides/ride_list.html
Normal file
214
rides/templates/rides/ride_list.html
Normal file
@@ -0,0 +1,214 @@
|
|||||||
|
{% extends "base/base.html" %}
|
||||||
|
{% load static %}
|
||||||
|
{% load ride_tags %}
|
||||||
|
|
||||||
|
{% block title %}
|
||||||
|
{% if park %}
|
||||||
|
Rides at {{ park.name }} - ThrillWiki
|
||||||
|
{% else %}
|
||||||
|
All Rides - ThrillWiki
|
||||||
|
{% endif %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<div class="container mx-auto px-4 py-8">
|
||||||
|
<div class="mb-8">
|
||||||
|
<h1 class="text-3xl font-bold mb-4">
|
||||||
|
{% if park %}
|
||||||
|
Rides at {{ park.name }}
|
||||||
|
{% else %}
|
||||||
|
All Rides
|
||||||
|
{% endif %}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
{# Search Section #}
|
||||||
|
<div class="relative">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="text"
|
||||||
|
id="ride-search"
|
||||||
|
name="q"
|
||||||
|
class="w-full p-4 border rounded-lg shadow-sm"
|
||||||
|
placeholder="Search rides by name, park, or category..."
|
||||||
|
hx-get="."
|
||||||
|
hx-trigger="keyup changed delay:500ms, search"
|
||||||
|
hx-target="#ride-list-results"
|
||||||
|
hx-push-url="true"
|
||||||
|
hx-indicator="#search-loading"
|
||||||
|
autocomplete="off">
|
||||||
|
|
||||||
|
<div id="search-loading" class="loading-indicator htmx-indicator">
|
||||||
|
<i class="ml-3 fa fa-spinner fa-spin text-gray-400"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Search Suggestions #}
|
||||||
|
<div id="search-suggestions-wrapper"
|
||||||
|
hx-get="{% url 'rides:search_suggestions' %}"
|
||||||
|
hx-trigger="keyup from:#ride-search delay:200ms"
|
||||||
|
class="absolute w-full bg-white border rounded-lg shadow-lg mt-1 z-50">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Quick Filter Buttons #}
|
||||||
|
<div class="flex flex-wrap gap-2 mt-4">
|
||||||
|
<button class="filter-btn active"
|
||||||
|
hx-get="."
|
||||||
|
hx-target="#ride-list-results"
|
||||||
|
hx-push-url="true"
|
||||||
|
hx-include="[name='q']">
|
||||||
|
All Rides
|
||||||
|
</button>
|
||||||
|
<button class="filter-btn"
|
||||||
|
hx-get="."
|
||||||
|
hx-target="#ride-list-results"
|
||||||
|
hx-push-url="true"
|
||||||
|
hx-include="[name='q']"
|
||||||
|
hx-vals='{"operating": "true"}'>
|
||||||
|
Operating
|
||||||
|
</button>
|
||||||
|
{% for code, name in category_choices %}
|
||||||
|
<button class="filter-btn"
|
||||||
|
hx-get="."
|
||||||
|
hx-target="#ride-list-results"
|
||||||
|
hx-push-url="true"
|
||||||
|
hx-include="[name='q']"
|
||||||
|
hx-vals='{"category": "{{ code }}"}'>
|
||||||
|
{{ name }}
|
||||||
|
</button>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Active Filter Tags #}
|
||||||
|
<div id="active-filters" class="flex flex-wrap gap-2 mt-4">
|
||||||
|
{% if request.GET.q %}
|
||||||
|
<span class="filter-tag">
|
||||||
|
Search: {{ request.GET.q }}
|
||||||
|
<button class="ml-2"
|
||||||
|
hx-get="."
|
||||||
|
hx-target="#ride-list-results"
|
||||||
|
hx-push-url="true"
|
||||||
|
title="Clear search">×</button>
|
||||||
|
</span>
|
||||||
|
{% endif %}
|
||||||
|
{% if request.GET.category %}
|
||||||
|
<span class="filter-tag">
|
||||||
|
Category: {{ request.GET.category|get_category_display }}
|
||||||
|
<button class="ml-2"
|
||||||
|
hx-get="."
|
||||||
|
hx-target="#ride-list-results"
|
||||||
|
hx-push-url="true"
|
||||||
|
hx-include="[name='q']"
|
||||||
|
title="Clear category">×</button>
|
||||||
|
</span>
|
||||||
|
{% endif %}
|
||||||
|
{% if request.GET.operating %}
|
||||||
|
<span class="filter-tag">
|
||||||
|
Operating Only
|
||||||
|
<button class="ml-2"
|
||||||
|
hx-get="."
|
||||||
|
hx-target="#ride-list-results"
|
||||||
|
hx-push-url="true"
|
||||||
|
hx-include="[name='q']"
|
||||||
|
title="Clear operating filter">×</button>
|
||||||
|
</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Results Section #}
|
||||||
|
<div id="ride-list-results" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{% include "rides/partials/ride_list_results.html" %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block extra_js %}
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// Handle suggestion selection
|
||||||
|
document.addEventListener('click', function(e) {
|
||||||
|
const suggestion = e.target.closest('.suggestion');
|
||||||
|
if (suggestion) {
|
||||||
|
const searchInput = document.getElementById('ride-search');
|
||||||
|
searchInput.value = suggestion.dataset.suggestion;
|
||||||
|
searchInput.dispatchEvent(new Event('keyup')); // Trigger HTMX search
|
||||||
|
document.getElementById('search-suggestions-wrapper').innerHTML = '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle filter button UI
|
||||||
|
document.querySelectorAll('.filter-btn').forEach(btn => {
|
||||||
|
btn.addEventListener('click', function() {
|
||||||
|
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
||||||
|
this.classList.add('active');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initialize active state based on URL params
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
const category = urlParams.get('category');
|
||||||
|
const operating = urlParams.get('operating');
|
||||||
|
|
||||||
|
document.querySelectorAll('.filter-btn').forEach(btn => {
|
||||||
|
const btnVals = btn.getAttribute('hx-vals');
|
||||||
|
if (
|
||||||
|
(category && btnVals && btnVals.includes(category)) ||
|
||||||
|
(operating && btnVals && btnVals.includes('operating')) ||
|
||||||
|
(!category && !operating && btn.textContent.trim() === 'All Rides')
|
||||||
|
) {
|
||||||
|
btn.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.filter-tag {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
background-color: #e5e7eb;
|
||||||
|
color: #374151;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-tag button {
|
||||||
|
color: #6b7280;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-tag button:hover {
|
||||||
|
color: #374151;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-indicator {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.htmx-request .loading-indicator {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
background-color: #f3f4f6;
|
||||||
|
color: #374151;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn:hover {
|
||||||
|
background-color: #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn.active {
|
||||||
|
background-color: #3b82f6;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
{% endblock %}
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
from django import template
|
from django import template
|
||||||
from django.templatetags.static import static
|
from django.templatetags.static import static
|
||||||
|
from ..models import CATEGORY_CHOICES
|
||||||
|
|
||||||
register = template.Library()
|
register = template.Library()
|
||||||
|
|
||||||
@@ -22,3 +23,9 @@ def get_ride_placeholder_image(category):
|
|||||||
def get_park_placeholder_image():
|
def get_park_placeholder_image():
|
||||||
"""Return placeholder image for parks"""
|
"""Return placeholder image for parks"""
|
||||||
return static("images/placeholders/default-park.jpg")
|
return static("images/placeholders/default-park.jpg")
|
||||||
|
|
||||||
|
|
||||||
|
@register.filter
|
||||||
|
def get_category_display(code):
|
||||||
|
"""Convert category code to display name"""
|
||||||
|
return dict(CATEGORY_CHOICES).get(code, code)
|
||||||
|
|||||||
@@ -219,25 +219,55 @@ class RideListView(ListView):
|
|||||||
context_object_name = 'rides'
|
context_object_name = 'rides'
|
||||||
|
|
||||||
def get_queryset(self):
|
def get_queryset(self):
|
||||||
"""Get all rides or filter by park if park_slug is provided"""
|
"""Get filtered rides based on search and filters"""
|
||||||
queryset = Ride.objects.all().select_related(
|
queryset = Ride.objects.all().select_related(
|
||||||
'park',
|
'park',
|
||||||
'ride_model',
|
'ride_model',
|
||||||
'ride_model__manufacturer'
|
'ride_model__manufacturer'
|
||||||
).prefetch_related('photos')
|
).prefetch_related('photos')
|
||||||
|
|
||||||
|
# Park filter
|
||||||
if 'park_slug' in self.kwargs:
|
if 'park_slug' in self.kwargs:
|
||||||
self.park = get_object_or_404(Park, slug=self.kwargs['park_slug'])
|
self.park = get_object_or_404(Park, slug=self.kwargs['park_slug'])
|
||||||
queryset = queryset.filter(park=self.park)
|
queryset = queryset.filter(park=self.park)
|
||||||
|
|
||||||
|
# Search term handling
|
||||||
|
search = self.request.GET.get('q', '').strip()
|
||||||
|
if search:
|
||||||
|
# Split search terms for more flexible matching
|
||||||
|
search_terms = search.split()
|
||||||
|
search_query = Q()
|
||||||
|
|
||||||
|
for term in search_terms:
|
||||||
|
term_query = Q(
|
||||||
|
name__icontains=term
|
||||||
|
) | Q(
|
||||||
|
park__name__icontains=term
|
||||||
|
) | Q(
|
||||||
|
description__icontains=term
|
||||||
|
)
|
||||||
|
search_query &= term_query
|
||||||
|
|
||||||
|
queryset = queryset.filter(search_query)
|
||||||
|
|
||||||
|
# Category filter
|
||||||
|
category = self.request.GET.get('category')
|
||||||
|
if category and category != 'all':
|
||||||
|
queryset = queryset.filter(category=category)
|
||||||
|
|
||||||
|
# Operating status filter
|
||||||
|
if self.request.GET.get('operating') == 'true':
|
||||||
|
queryset = queryset.filter(status='operating')
|
||||||
|
|
||||||
return queryset
|
return queryset
|
||||||
|
|
||||||
def get_context_data(self, **kwargs):
|
def get_context_data(self, **kwargs):
|
||||||
"""Add park to context if park_slug is provided"""
|
"""Add park and category choices to context"""
|
||||||
context = super().get_context_data(**kwargs)
|
context = super().get_context_data(**kwargs)
|
||||||
if hasattr(self, 'park'):
|
if hasattr(self, 'park'):
|
||||||
context['park'] = self.park
|
context['park'] = self.park
|
||||||
context['park_slug'] = self.kwargs['park_slug']
|
context['park_slug'] = self.kwargs['park_slug']
|
||||||
|
context['category_choices'] = CATEGORY_CHOICES
|
||||||
return context
|
return context
|
||||||
|
|
||||||
|
|
||||||
@@ -336,3 +366,63 @@ def search_ride_models(request: HttpRequest) -> HttpResponse:
|
|||||||
{"ride_models": ride_models, "search_term": query,
|
{"ride_models": ride_models, "search_term": query,
|
||||||
"manufacturer_id": manufacturer_id},
|
"manufacturer_id": manufacturer_id},
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
|
def get_search_suggestions(request: HttpRequest) -> HttpResponse:
|
||||||
|
"""Get smart search suggestions for rides
|
||||||
|
|
||||||
|
Returns suggestions including:
|
||||||
|
- Common matching ride names
|
||||||
|
- Matching parks
|
||||||
|
- Matching categories
|
||||||
|
"""
|
||||||
|
query = request.GET.get('q', '').strip().lower()
|
||||||
|
suggestions = []
|
||||||
|
|
||||||
|
if query:
|
||||||
|
# Get common ride names
|
||||||
|
matching_names = Ride.objects.filter(
|
||||||
|
name__icontains=query
|
||||||
|
).values('name').annotate(
|
||||||
|
count=Count('id')
|
||||||
|
).order_by('-count')[:3]
|
||||||
|
|
||||||
|
for match in matching_names:
|
||||||
|
suggestions.append({
|
||||||
|
'type': 'ride',
|
||||||
|
'text': match['name'],
|
||||||
|
'count': match['count']
|
||||||
|
})
|
||||||
|
|
||||||
|
# Get matching parks
|
||||||
|
matching_parks = Park.objects.filter(
|
||||||
|
Q(name__icontains=query) |
|
||||||
|
Q(location__city__icontains=query)
|
||||||
|
)[:3]
|
||||||
|
|
||||||
|
for park in matching_parks:
|
||||||
|
suggestions.append({
|
||||||
|
'type': 'park',
|
||||||
|
'text': park.name,
|
||||||
|
'location': park.location.city if park.location else None
|
||||||
|
})
|
||||||
|
|
||||||
|
# Add category matches
|
||||||
|
for code, name in CATEGORY_CHOICES:
|
||||||
|
if query in name.lower():
|
||||||
|
ride_count = Ride.objects.filter(category=code).count()
|
||||||
|
suggestions.append({
|
||||||
|
'type': 'category',
|
||||||
|
'code': code,
|
||||||
|
'text': name,
|
||||||
|
'count': ride_count
|
||||||
|
})
|
||||||
|
|
||||||
|
return render(
|
||||||
|
request,
|
||||||
|
'rides/partials/search_suggestions.html',
|
||||||
|
{
|
||||||
|
'suggestions': suggestions,
|
||||||
|
'query': query
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|||||||
324
templates/base.html
Normal file
324
templates/base.html
Normal file
@@ -0,0 +1,324 @@
|
|||||||
|
{% load static %}
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="csrf-token" content="{{ csrf_token }}" />
|
||||||
|
<title>{% block title %}ThrillWiki{% endblock %}</title>
|
||||||
|
|
||||||
|
<!-- Google Fonts -->
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Prevent flash of wrong theme -->
|
||||||
|
<script>
|
||||||
|
let theme = localStorage.getItem("theme");
|
||||||
|
if (!theme) {
|
||||||
|
theme = window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||||
|
? "dark"
|
||||||
|
: "light";
|
||||||
|
localStorage.setItem("theme", theme);
|
||||||
|
}
|
||||||
|
if (theme === "dark") {
|
||||||
|
document.documentElement.classList.add("dark");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- HTMX -->
|
||||||
|
<script src="https://unpkg.com/htmx.org@1.9.6"></script>
|
||||||
|
|
||||||
|
<!-- Alpine.js -->
|
||||||
|
<script defer src="{% static 'js/alpine.min.js' %}"></script>
|
||||||
|
|
||||||
|
<!-- Location Autocomplete -->
|
||||||
|
<script src="{% static 'js/location-autocomplete.js' %}"></script>
|
||||||
|
|
||||||
|
<!-- Tailwind CSS -->
|
||||||
|
<link href="{% static 'css/tailwind.css' %}" rel="stylesheet" />
|
||||||
|
<link href="{% static 'css/alerts.css' %}" rel="stylesheet" />
|
||||||
|
|
||||||
|
<!-- Font Awesome -->
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
[x-cloak] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.dropdown-menu {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
width: 12rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||||
|
z-index: 50;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.htmx-indicator {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.htmx-request .htmx-indicator {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.htmx-request.htmx-indicator {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
{% block extra_head %}{% endblock %}
|
||||||
|
</head>
|
||||||
|
<body
|
||||||
|
class="flex flex-col min-h-screen text-gray-900 bg-gradient-to-br from-white via-blue-50 to-indigo-50 dark:from-gray-950 dark:via-indigo-950 dark:to-purple-950 dark:text-white"
|
||||||
|
>
|
||||||
|
<!-- Header -->
|
||||||
|
<header
|
||||||
|
class="sticky top-0 z-40 border-b shadow-lg bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50"
|
||||||
|
>
|
||||||
|
<nav class="container mx-auto nav-container">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="flex items-center">
|
||||||
|
<a
|
||||||
|
href="{% url 'home' %}"
|
||||||
|
class="font-bold text-transparent transition-transform site-logo bg-gradient-to-r from-primary to-secondary bg-clip-text hover:scale-105"
|
||||||
|
>
|
||||||
|
ThrillWiki
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation Links (Always Visible) -->
|
||||||
|
<div class="flex items-center space-x-2 sm:space-x-4">
|
||||||
|
<a href="{% url 'parks:park_list' %}" class="nav-link">
|
||||||
|
<i class="fas fa-map-marker-alt"></i>
|
||||||
|
<span>Parks</span>
|
||||||
|
</a>
|
||||||
|
<a href="{% url 'rides:global_ride_list' %}" class="nav-link">
|
||||||
|
<i class="fas fa-rocket"></i>
|
||||||
|
<span>Rides</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Search Bar -->
|
||||||
|
<div class="flex-1 hidden max-w-md mx-8 lg:flex">
|
||||||
|
<form action="{% url 'search' %}" method="get" class="w-full">
|
||||||
|
<div class="relative">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="q"
|
||||||
|
placeholder="Search parks and rides..."
|
||||||
|
class="form-input"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right Side Menu -->
|
||||||
|
<div class="flex items-center space-x-2 sm:space-x-6">
|
||||||
|
<!-- Theme Toggle -->
|
||||||
|
<label for="theme-toggle" class="cursor-pointer">
|
||||||
|
<input type="checkbox" id="theme-toggle" class="hidden" />
|
||||||
|
<div
|
||||||
|
class="inline-flex items-center justify-center p-2 text-gray-500 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary theme-toggle-btn"
|
||||||
|
role="button"
|
||||||
|
aria-label="Toggle dark mode"
|
||||||
|
>
|
||||||
|
<i class="text-xl fas"></i>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<!-- User Menu -->
|
||||||
|
{% if user.is_authenticated %} {% if has_moderation_access %}
|
||||||
|
<a href="{% url 'moderation:dashboard' %}" class="nav-link">
|
||||||
|
<i class="fas fa-shield-alt"></i>
|
||||||
|
<span>Moderation</span>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
<div
|
||||||
|
class="relative"
|
||||||
|
x-data="{ open: false }"
|
||||||
|
@click.outside="open = false"
|
||||||
|
>
|
||||||
|
<!-- Profile Picture Button -->
|
||||||
|
{% if user.profile.avatar %}
|
||||||
|
<img
|
||||||
|
@click="open = !open"
|
||||||
|
src="{{ user.profile.avatar.url }}"
|
||||||
|
alt="{{ user.username }}"
|
||||||
|
class="w-8 h-8 transition-transform rounded-full cursor-pointer ring-2 ring-primary/20 hover:scale-105"
|
||||||
|
/>
|
||||||
|
{% else %}
|
||||||
|
<div
|
||||||
|
@click="open = !open"
|
||||||
|
class="flex items-center justify-center w-8 h-8 text-white transition-transform rounded-full cursor-pointer bg-gradient-to-br from-primary to-secondary hover:scale-105"
|
||||||
|
>
|
||||||
|
{{ user.username.0|upper }}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<!-- Dropdown Menu -->
|
||||||
|
<div
|
||||||
|
x-cloak
|
||||||
|
x-show="open"
|
||||||
|
x-transition:enter="transition ease-out duration-100"
|
||||||
|
x-transition:enter-start="transform opacity-0 scale-95"
|
||||||
|
x-transition:enter-end="transform opacity-100 scale-100"
|
||||||
|
x-transition:leave="transition ease-in duration-75"
|
||||||
|
x-transition:leave-start="transform opacity-100 scale-100"
|
||||||
|
x-transition:leave-end="transform opacity-0 scale-95"
|
||||||
|
class="bg-white dropdown-menu dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<a href="{% url 'profile' user.username %}" class="menu-item">
|
||||||
|
<i class="w-5 fas fa-user"></i>
|
||||||
|
<span>Profile</span>
|
||||||
|
</a>
|
||||||
|
<a href="{% url 'settings' %}" class="menu-item">
|
||||||
|
<i class="w-5 fas fa-cog"></i>
|
||||||
|
<span>Settings</span>
|
||||||
|
</a>
|
||||||
|
{% if has_admin_access %}
|
||||||
|
<a href="{% url 'admin:index' %}" class="menu-item">
|
||||||
|
<i class="w-5 fas fa-shield-alt"></i>
|
||||||
|
<span>Admin</span>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
<form method="post" action="{% url 'account_logout' %}">
|
||||||
|
{% csrf_token %}
|
||||||
|
<button type="submit" class="w-full menu-item">
|
||||||
|
<i class="w-5 fas fa-sign-out-alt"></i>
|
||||||
|
<span>Logout</span>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<!-- Generic Profile Icon for Unauthenticated Users -->
|
||||||
|
<div
|
||||||
|
class="relative"
|
||||||
|
x-data="{ open: false }"
|
||||||
|
@click.outside="open = false"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
@click="open = !open"
|
||||||
|
class="flex items-center justify-center w-8 h-8 text-gray-500 transition-transform rounded-full cursor-pointer hover:text-primary dark:text-gray-400 dark:hover:text-primary hover:scale-105"
|
||||||
|
>
|
||||||
|
<i class="text-xl fas fa-user"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Auth Menu -->
|
||||||
|
<div
|
||||||
|
x-cloak
|
||||||
|
x-show="open"
|
||||||
|
x-transition:enter="transition ease-out duration-100"
|
||||||
|
x-transition:enter-start="transform opacity-0 scale-95"
|
||||||
|
x-transition:enter-end="transform opacity-100 scale-100"
|
||||||
|
x-transition:leave="transition ease-in duration-75"
|
||||||
|
x-transition:leave-start="transform opacity-100 scale-100"
|
||||||
|
x-transition:leave-end="transform opacity-0 scale-95"
|
||||||
|
class="bg-white dropdown-menu dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
hx-get="{% url 'account_login' %}"
|
||||||
|
hx-target="body"
|
||||||
|
hx-swap="beforeend"
|
||||||
|
class="cursor-pointer menu-item"
|
||||||
|
>
|
||||||
|
<i class="w-5 fas fa-sign-in-alt"></i>
|
||||||
|
<span>Login</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
hx-get="{% url 'account_signup' %}"
|
||||||
|
hx-target="body"
|
||||||
|
hx-swap="beforeend"
|
||||||
|
class="cursor-pointer menu-item"
|
||||||
|
>
|
||||||
|
<i class="w-5 fas fa-user-plus"></i>
|
||||||
|
<span>Register</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<!-- Mobile Menu Button -->
|
||||||
|
<button
|
||||||
|
id="mobileMenuBtn"
|
||||||
|
class="p-2 text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-400"
|
||||||
|
aria-label="Toggle mobile menu"
|
||||||
|
>
|
||||||
|
<i class="text-2xl fas fa-bars"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile Menu -->
|
||||||
|
<div id="mobileMenu">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<!-- Search (Mobile) -->
|
||||||
|
<form action="{% url 'search' %}" method="get" class="mb-4">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="q"
|
||||||
|
placeholder="Search parks and rides..."
|
||||||
|
class="form-input"
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Flash Messages -->
|
||||||
|
{% if messages %}
|
||||||
|
<div class="fixed top-0 right-0 z-50 p-4 space-y-4">
|
||||||
|
{% for message in messages %}
|
||||||
|
<div
|
||||||
|
class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}"
|
||||||
|
>
|
||||||
|
{{ message }}
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="container flex-grow px-6 py-8 mx-auto">
|
||||||
|
{% block content %}{% endblock %}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer
|
||||||
|
class="mt-auto border-t bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50"
|
||||||
|
>
|
||||||
|
<div class="container px-6 py-6 mx-auto">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="text-gray-600 dark:text-gray-400">
|
||||||
|
<p>© {% now "Y" %} ThrillWiki. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-x-4">
|
||||||
|
<a
|
||||||
|
href="{% url 'terms' %}"
|
||||||
|
class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary"
|
||||||
|
>Terms</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="{% url 'privacy' %}"
|
||||||
|
class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary"
|
||||||
|
>Privacy</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- Custom JavaScript -->
|
||||||
|
<script src="{% static 'js/main.js' %}"></script>
|
||||||
|
<script src="{% static 'js/alerts.js' %}"></script>
|
||||||
|
{% block extra_js %}{% endblock %}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -1,218 +0,0 @@
|
|||||||
{% extends 'base/base.html' %}
|
|
||||||
{% load static %}
|
|
||||||
{% load ride_tags %}
|
|
||||||
|
|
||||||
{% block title %}
|
|
||||||
{% if park %}
|
|
||||||
Rides at {{ park.name }} - ThrillWiki
|
|
||||||
{% else %}
|
|
||||||
All Rides - ThrillWiki
|
|
||||||
{% endif %}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
<div class="container px-4 mx-auto">
|
|
||||||
<div class="flex flex-col items-start justify-between gap-4 mb-6 md:flex-row md:items-center">
|
|
||||||
<div>
|
|
||||||
{% if park %}
|
|
||||||
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">Rides at {{ park.name }}</h1>
|
|
||||||
<a href="{% url 'parks:park_detail' park.slug %}" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
|
|
||||||
Back to {{ park.name }}
|
|
||||||
</a>
|
|
||||||
{% else %}
|
|
||||||
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">All Rides</h1>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
{% if user.is_authenticated %}
|
|
||||||
{% if park %}
|
|
||||||
<a href="{% url 'parks:rides:ride_create' park.slug %}" class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">
|
|
||||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
|
|
||||||
</svg>
|
|
||||||
Add Ride
|
|
||||||
</a>
|
|
||||||
{% 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" 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>
|
|
||||||
{% 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>
|
|
||||||
<option value="RC" {% if current_filters.category == 'RC' %}selected{% endif %}>Roller Coaster</option>
|
|
||||||
<option value="DR" {% if current_filters.category == 'DR' %}selected{% endif %}>Dark Ride</option>
|
|
||||||
<option value="FR" {% if current_filters.category == 'FR' %}selected{% endif %}>Flat Ride</option>
|
|
||||||
<option value="WR" {% if current_filters.category == 'WR' %}selected{% endif %}>Water Ride</option>
|
|
||||||
<option value="TR" {% if current_filters.category == 'TR' %}selected{% endif %}>Transport</option>
|
|
||||||
<option value="OT" {% if current_filters.category == 'OT' %}selected{% endif %}>Other</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
<option value="OPERATING" {% if current_filters.status == 'OPERATING' %}selected{% endif %}>Operating</option>
|
|
||||||
<option value="CLOSED_TEMP" {% if current_filters.status == 'CLOSED_TEMP' %}selected{% endif %}>Temporarily Closed</option>
|
|
||||||
<option value="CLOSED_PERM" {% if current_filters.status == 'CLOSED_PERM' %}selected{% endif %}>Permanently Closed</option>
|
|
||||||
<option value="UNDER_CONSTRUCTION" {% if current_filters.status == 'UNDER_CONSTRUCTION' %}selected{% endif %}>Under Construction</option>
|
|
||||||
<option value="DEMOLISHED" {% if current_filters.status == 'DEMOLISHED' %}selected{% endif %}>Demolished</option>
|
|
||||||
<option value="RELOCATED" {% if current_filters.status == 'RELOCATED' %}selected{% endif %}>Relocated</option>
|
|
||||||
</select>
|
|
||||||
</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>
|
|
||||||
|
|
||||||
<!-- 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>
|
|
||||||
|
|
||||||
<!-- 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