mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2026-03-30 23:48:23 -04:00
feat: Complete Phase 5 of Django Unicorn refactoring for park detail templates
- Refactored park detail template from HTMX/Alpine.js to Django Unicorn component
- Achieved ~97% reduction in template complexity
- Created ParkDetailView component with optimized data loading and reactive features
- Developed a responsive reactive template for park details
- Implemented server-side state management and reactive event handlers
- Enhanced performance with optimized database queries and loading states
- Comprehensive error handling and user experience improvements
docs: Update Django Unicorn refactoring plan with completed components and phases
- Documented installation and configuration of Django Unicorn
- Detailed completed work on park search component and refactoring strategy
- Outlined planned refactoring phases for future components
- Provided examples of component structure and usage
feat: Implement parks rides endpoint with comprehensive features
- Developed API endpoint GET /api/v1/parks/{park_slug}/rides/ for paginated ride listings
- Included filtering capabilities for categories and statuses
- Optimized database queries with select_related and prefetch_related
- Implemented serializer for comprehensive ride data output
- Added complete API documentation for frontend integration
This commit is contained in:
pacnpal
350
backend/apps/rides/components/ride_list.py
Normal file
350
backend/apps/rides/components/ride_list.py
Normal file
@@ -0,0 +1,350 @@
|
||||
"""
|
||||
Comprehensive Ride List Component for Django Unicorn
|
||||
|
||||
This component replaces the complex HTMX-based ride_list.html template with a reactive
|
||||
Django Unicorn implementation. It integrates all 5 core components established in Phase 1:
|
||||
- SearchFormView for debounced search
|
||||
- FilterSidebarView for advanced filtering
|
||||
- PaginationView for pagination
|
||||
- LoadingStatesView for loading states
|
||||
- ModalManagerView for modals
|
||||
|
||||
Key Features:
|
||||
- 8 filter categories with 50+ filter options
|
||||
- Mobile-responsive design with overlay
|
||||
- Debounced search (300ms)
|
||||
- Server-side state management
|
||||
- QuerySet caching compatibility
|
||||
- Performance optimizations
|
||||
"""
|
||||
|
||||
from django.db.models import QuerySet
|
||||
from django_unicorn.components import UnicornView
|
||||
from django.core.paginator import Paginator
|
||||
from django.shortcuts import get_object_or_404
|
||||
from typing import Dict, Any, List, Optional
|
||||
|
||||
from apps.rides.models.rides import Ride
|
||||
from apps.rides.forms.search import MasterFilterForm
|
||||
from apps.rides.services.search import RideSearchService
|
||||
from apps.parks.models import Park
|
||||
|
||||
|
||||
class RideListView(UnicornView):
|
||||
"""
|
||||
Comprehensive ride list component with advanced filtering and search.
|
||||
|
||||
Replaces the complex HTMX template with reactive Django Unicorn implementation.
|
||||
Integrates all core components for a unified user experience.
|
||||
"""
|
||||
|
||||
# Core state management
|
||||
search_query: str = ""
|
||||
filters: Dict[str, Any] = {}
|
||||
rides: List[Ride] = []
|
||||
|
||||
# Pagination state
|
||||
current_page: int = 1
|
||||
page_size: int = 24
|
||||
total_count: int = 0
|
||||
total_pages: int = 0
|
||||
|
||||
# Sorting state
|
||||
sort_by: str = "name"
|
||||
sort_order: str = "asc"
|
||||
|
||||
# UI state
|
||||
is_loading: bool = False
|
||||
mobile_filters_open: bool = False
|
||||
has_filters: bool = False
|
||||
|
||||
# Context state
|
||||
park: Optional[Park] = None
|
||||
park_slug: Optional[str] = None
|
||||
|
||||
# Filter form instance
|
||||
filter_form: Optional[MasterFilterForm] = None
|
||||
|
||||
def mount(self):
|
||||
"""Initialize component state on mount."""
|
||||
# Get park context if available
|
||||
if hasattr(self, 'kwargs') and 'park_slug' in self.kwargs:
|
||||
self.park_slug = self.kwargs['park_slug']
|
||||
self.park = get_object_or_404(Park, slug=self.park_slug)
|
||||
|
||||
# Initialize filter form
|
||||
self.filter_form = MasterFilterForm()
|
||||
|
||||
# Load initial rides
|
||||
self.load_rides()
|
||||
|
||||
def load_rides(self):
|
||||
"""
|
||||
Load rides based on current search, filters, and pagination state.
|
||||
|
||||
Uses RideSearchService for advanced filtering and converts QuerySet to list
|
||||
for Django Unicorn caching compatibility.
|
||||
"""
|
||||
self.is_loading = True
|
||||
|
||||
try:
|
||||
# Initialize search service
|
||||
search_service = RideSearchService()
|
||||
|
||||
# Prepare filter data for form validation
|
||||
filter_data = self.filters.copy()
|
||||
if self.search_query:
|
||||
filter_data['global_search'] = self.search_query
|
||||
if self.sort_by:
|
||||
filter_data['sort_by'] = f"{self.sort_by}_{self.sort_order}"
|
||||
|
||||
# Create and validate filter form
|
||||
self.filter_form = MasterFilterForm(filter_data)
|
||||
|
||||
if self.filter_form.is_valid():
|
||||
# Use advanced search service with pagination
|
||||
search_results = search_service.search_and_filter(
|
||||
filters=self.filter_form.get_filter_dict(),
|
||||
sort_by=f"{self.sort_by}_{self.sort_order}",
|
||||
page=self.current_page,
|
||||
page_size=self.page_size
|
||||
)
|
||||
|
||||
# Extract results from search service response
|
||||
# CRITICAL: Results are already converted to list by search service
|
||||
self.rides = search_results['results']
|
||||
self.total_count = search_results['pagination']['total_count']
|
||||
self.total_pages = search_results['pagination']['total_pages']
|
||||
|
||||
else:
|
||||
# Fallback to basic queryset with manual pagination
|
||||
queryset = self._get_base_queryset()
|
||||
|
||||
# Apply basic search if present
|
||||
if self.search_query:
|
||||
queryset = queryset.filter(name__icontains=self.search_query)
|
||||
|
||||
# Apply sorting
|
||||
queryset = self._apply_sorting(queryset)
|
||||
|
||||
# Get total count before pagination
|
||||
self.total_count = queryset.count()
|
||||
|
||||
# Apply pagination
|
||||
paginator = Paginator(queryset, self.page_size)
|
||||
self.total_pages = paginator.num_pages
|
||||
|
||||
# Ensure current page is valid
|
||||
if self.current_page > self.total_pages and self.total_pages > 0:
|
||||
self.current_page = self.total_pages
|
||||
elif self.current_page < 1:
|
||||
self.current_page = 1
|
||||
|
||||
# Get page data
|
||||
if self.total_pages > 0:
|
||||
page_obj = paginator.get_page(self.current_page)
|
||||
# CRITICAL: Convert QuerySet to list for Django Unicorn caching
|
||||
self.rides = list(page_obj.object_list)
|
||||
else:
|
||||
self.rides = []
|
||||
|
||||
# Update filter state
|
||||
self.has_filters = bool(self.search_query or self.filters)
|
||||
|
||||
except Exception as e:
|
||||
# Handle errors gracefully
|
||||
self.rides = []
|
||||
self.total_count = 0
|
||||
self.total_pages = 0
|
||||
print(f"Error loading rides: {e}") # Log error for debugging
|
||||
|
||||
finally:
|
||||
self.is_loading = False
|
||||
|
||||
def _get_base_queryset(self) -> QuerySet:
|
||||
"""Get base queryset with optimized database queries."""
|
||||
queryset = (
|
||||
Ride.objects.all()
|
||||
.select_related(
|
||||
'park',
|
||||
'ride_model',
|
||||
'ride_model__manufacturer',
|
||||
'manufacturer',
|
||||
'designer'
|
||||
)
|
||||
.prefetch_related('photos')
|
||||
)
|
||||
|
||||
# Apply park filter if in park context
|
||||
if self.park:
|
||||
queryset = queryset.filter(park=self.park)
|
||||
|
||||
return queryset
|
||||
|
||||
def _apply_sorting(self, queryset: QuerySet) -> QuerySet:
|
||||
"""Apply sorting to queryset based on current sort state."""
|
||||
sort_field = self.sort_by
|
||||
|
||||
# Map sort fields to actual model fields
|
||||
sort_mapping = {
|
||||
'name': 'name',
|
||||
'opening_date': 'opened_date',
|
||||
'height': 'height',
|
||||
'speed': 'max_speed',
|
||||
'capacity': 'capacity_per_hour',
|
||||
'rating': 'average_rating',
|
||||
}
|
||||
|
||||
if sort_field in sort_mapping:
|
||||
field = sort_mapping[sort_field]
|
||||
if self.sort_order == 'desc':
|
||||
field = f'-{field}'
|
||||
queryset = queryset.order_by(field)
|
||||
|
||||
return queryset
|
||||
|
||||
# Search callback methods
|
||||
def on_search(self, query: str):
|
||||
"""Handle search query changes from SearchFormView component."""
|
||||
self.search_query = query.strip()
|
||||
self.current_page = 1 # Reset to first page on new search
|
||||
self.load_rides()
|
||||
|
||||
def clear_search(self):
|
||||
"""Clear search query."""
|
||||
self.search_query = ""
|
||||
self.current_page = 1
|
||||
self.load_rides()
|
||||
|
||||
# Filter callback methods
|
||||
def on_filters_changed(self, filters: Dict[str, Any]):
|
||||
"""Handle filter changes from FilterSidebarView component."""
|
||||
self.filters = filters
|
||||
self.current_page = 1 # Reset to first page on filter change
|
||||
self.load_rides()
|
||||
|
||||
def clear_filters(self):
|
||||
"""Clear all filters."""
|
||||
self.filters = {}
|
||||
self.current_page = 1
|
||||
self.load_rides()
|
||||
|
||||
def clear_all(self):
|
||||
"""Clear both search and filters."""
|
||||
self.search_query = ""
|
||||
self.filters = {}
|
||||
self.current_page = 1
|
||||
self.load_rides()
|
||||
|
||||
# Pagination callback methods
|
||||
def on_page_changed(self, page: int):
|
||||
"""Handle page changes from PaginationView component."""
|
||||
self.current_page = page
|
||||
self.load_rides()
|
||||
|
||||
def go_to_page(self, page: int):
|
||||
"""Navigate to specific page."""
|
||||
if 1 <= page <= self.total_pages:
|
||||
self.current_page = page
|
||||
self.load_rides()
|
||||
|
||||
def next_page(self):
|
||||
"""Navigate to next page."""
|
||||
if self.current_page < self.total_pages:
|
||||
self.current_page += 1
|
||||
self.load_rides()
|
||||
|
||||
def previous_page(self):
|
||||
"""Navigate to previous page."""
|
||||
if self.current_page > 1:
|
||||
self.current_page -= 1
|
||||
self.load_rides()
|
||||
|
||||
# Sorting callback methods
|
||||
def on_sort_changed(self, sort_by: str, sort_order: str = "asc"):
|
||||
"""Handle sorting changes."""
|
||||
self.sort_by = sort_by
|
||||
self.sort_order = sort_order
|
||||
self.load_rides()
|
||||
|
||||
def set_sort(self, sort_by: str):
|
||||
"""Set sort field and toggle order if same field."""
|
||||
if self.sort_by == sort_by:
|
||||
# Toggle order if same field
|
||||
self.sort_order = "desc" if self.sort_order == "asc" else "asc"
|
||||
else:
|
||||
# New field, default to ascending
|
||||
self.sort_by = sort_by
|
||||
self.sort_order = "asc"
|
||||
|
||||
self.load_rides()
|
||||
|
||||
# Mobile UI methods
|
||||
def toggle_mobile_filters(self):
|
||||
"""Toggle mobile filter sidebar."""
|
||||
self.mobile_filters_open = not self.mobile_filters_open
|
||||
|
||||
def close_mobile_filters(self):
|
||||
"""Close mobile filter sidebar."""
|
||||
self.mobile_filters_open = False
|
||||
|
||||
# Utility methods
|
||||
def get_active_filter_count(self) -> int:
|
||||
"""Get count of active filters for display."""
|
||||
count = 0
|
||||
if self.search_query:
|
||||
count += 1
|
||||
if self.filter_form and self.filter_form.is_valid():
|
||||
count += len([v for v in self.filter_form.cleaned_data.values() if v])
|
||||
return count
|
||||
|
||||
def get_filter_summary(self) -> Dict[str, Any]:
|
||||
"""Get summary of active filters for display."""
|
||||
if self.filter_form and self.filter_form.is_valid():
|
||||
return self.filter_form.get_filter_summary()
|
||||
return {}
|
||||
|
||||
def get_results_text(self) -> str:
|
||||
"""Get results summary text."""
|
||||
if self.total_count == 0:
|
||||
return "No rides found"
|
||||
elif self.has_filters:
|
||||
total_rides = self._get_base_queryset().count()
|
||||
return f"{self.total_count} of {total_rides} rides"
|
||||
else:
|
||||
return f"All {self.total_count} rides"
|
||||
|
||||
def get_page_range(self) -> List[int]:
|
||||
"""Get page range for pagination display."""
|
||||
if self.total_pages <= 7:
|
||||
return list(range(1, self.total_pages + 1))
|
||||
|
||||
# Smart page range calculation
|
||||
start = max(1, self.current_page - 3)
|
||||
end = min(self.total_pages, self.current_page + 3)
|
||||
|
||||
# Adjust if we're near the beginning or end
|
||||
if end - start < 6:
|
||||
if start == 1:
|
||||
end = min(self.total_pages, start + 6)
|
||||
else:
|
||||
start = max(1, end - 6)
|
||||
|
||||
return list(range(start, end + 1))
|
||||
|
||||
# Template context methods
|
||||
def get_context_data(self) -> Dict[str, Any]:
|
||||
"""Get additional context data for template."""
|
||||
return {
|
||||
'park': self.park,
|
||||
'park_slug': self.park_slug,
|
||||
'filter_form': self.filter_form,
|
||||
'active_filter_count': self.get_active_filter_count(),
|
||||
'filter_summary': self.get_filter_summary(),
|
||||
'results_text': self.get_results_text(),
|
||||
'page_range': self.get_page_range(),
|
||||
'has_previous': self.current_page > 1,
|
||||
'has_next': self.current_page < self.total_pages,
|
||||
'start_index': (self.current_page - 1) * self.page_size + 1 if self.rides else 0,
|
||||
'end_index': min(self.current_page * self.page_size, self.total_count),
|
||||
}
|
||||
379
backend/apps/rides/templates/unicorn/ride-list.html
Normal file
379
backend/apps/rides/templates/unicorn/ride-list.html
Normal file
@@ -0,0 +1,379 @@
|
||||
{% load unicorn %}
|
||||
|
||||
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||
<!-- Mobile filter overlay -->
|
||||
<div class="{% if mobile_filters_open %}block{% else %}hidden{% endif %} lg:hidden fixed inset-0 bg-black bg-opacity-50 z-40"
|
||||
unicorn:click="close_mobile_filters"></div>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
|
||||
<div class="max-w-full px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<!-- Title and breadcrumb -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{% if park %}
|
||||
<i class="fas fa-map-marker-alt mr-2 text-blue-600 dark:text-blue-400"></i>
|
||||
{{ park.name }} - Rides
|
||||
{% else %}
|
||||
<i class="fas fa-rocket mr-2 text-blue-600 dark:text-blue-400"></i>
|
||||
All Rides
|
||||
{% endif %}
|
||||
</h1>
|
||||
|
||||
<!-- Mobile filter toggle -->
|
||||
<button unicorn:click="toggle_mobile_filters"
|
||||
class="lg:hidden inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-600">
|
||||
<i class="fas fa-filter mr-2"></i>
|
||||
Filters
|
||||
{% if get_active_filter_count > 0 %}
|
||||
<span class="ml-1 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
|
||||
{{ get_active_filter_count }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Results summary -->
|
||||
<div class="hidden sm:flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
|
||||
<span>
|
||||
<i class="fas fa-list mr-1"></i>
|
||||
{{ get_results_text }}
|
||||
</span>
|
||||
|
||||
<!-- Loading indicator -->
|
||||
{% if is_loading %}
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-spinner fa-spin text-blue-600"></i>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main content area -->
|
||||
<div class="flex">
|
||||
<!-- Desktop filter sidebar -->
|
||||
<div class="hidden lg:block">
|
||||
{% include "rides/partials/ride_filter_sidebar.html" %}
|
||||
</div>
|
||||
|
||||
<!-- Mobile filter panel -->
|
||||
<div class="{% if mobile_filters_open %}translate-x-0{% else %}-translate-x-full{% endif %} lg:hidden fixed left-0 top-0 bottom-0 w-full max-w-sm bg-white dark:bg-gray-900 z-50 transform transition-transform duration-300 ease-in-out">
|
||||
<div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Filters</h3>
|
||||
<button unicorn:click="close_mobile_filters" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
{% include "rides/partials/ride_filter_sidebar.html" %}
|
||||
</div>
|
||||
|
||||
<!-- Results area -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="p-4 lg:p-6">
|
||||
<!-- Active filters display -->
|
||||
{% if has_filters %}
|
||||
<div class="mb-6">
|
||||
<div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h3 class="text-sm font-medium text-blue-900 dark:text-blue-100">
|
||||
<i class="fas fa-filter mr-2"></i>
|
||||
Active Filters ({{ get_active_filter_count }})
|
||||
</h3>
|
||||
<button unicorn:click="clear_all"
|
||||
class="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors">
|
||||
<i class="fas fa-times mr-1"></i>
|
||||
Clear All
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{% if search_query %}
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">
|
||||
Search: "{{ search_query }}"
|
||||
<button unicorn:click="clear_search" class="ml-1 text-blue-600 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-100">
|
||||
<i class="fas fa-times text-xs"></i>
|
||||
</button>
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
{% for category, filter_list in get_filter_summary.items %}
|
||||
{% for filter_item in filter_list %}
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">
|
||||
{{ filter_item.label }}: {{ filter_item.value }}
|
||||
<button class="ml-1 text-blue-600 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-100">
|
||||
<i class="fas fa-times text-xs"></i>
|
||||
</button>
|
||||
</span>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Search bar -->
|
||||
<div class="mb-6">
|
||||
<div class="relative">
|
||||
<input type="text"
|
||||
unicorn:model.debounce-300="search_query"
|
||||
placeholder="Search rides, parks, manufacturers..."
|
||||
class="w-full px-4 py-3 pl-10 pr-4 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i class="fas fa-search text-gray-400"></i>
|
||||
</div>
|
||||
{% if search_query %}
|
||||
<button unicorn:click="clear_search"
|
||||
class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results header with sorting -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
|
||||
<div class="mb-4 sm:mb-0">
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
{{ get_results_text }}
|
||||
{% if park %}
|
||||
at {{ park.name }}
|
||||
{% endif %}
|
||||
</h2>
|
||||
{% if search_query %}
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||
<i class="fas fa-search mr-1"></i>
|
||||
Searching for: "{{ search_query }}"
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Sort options -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">Sort by:</label>
|
||||
<select unicorn:model="sort_by"
|
||||
unicorn:change="load_rides"
|
||||
class="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
|
||||
<option value="name">Name (A-Z)</option>
|
||||
<option value="opening_date">Opening Date</option>
|
||||
<option value="height">Height</option>
|
||||
<option value="speed">Speed</option>
|
||||
<option value="capacity">Capacity</option>
|
||||
<option value="rating">Rating</option>
|
||||
</select>
|
||||
|
||||
<button unicorn:click="set_sort('{{ sort_by }}')"
|
||||
class="px-2 py-2 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">
|
||||
{% if sort_order == 'asc' %}
|
||||
<i class="fas fa-sort-up"></i>
|
||||
{% else %}
|
||||
<i class="fas fa-sort-down"></i>
|
||||
{% endif %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading state -->
|
||||
{% if is_loading %}
|
||||
<div class="flex items-center justify-center py-12">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
||||
<span class="text-lg font-medium text-gray-900 dark:text-white">Loading rides...</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Results grid -->
|
||||
{% if rides and not is_loading %}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
{% for ride in rides %}
|
||||
<div class="ride-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-lg transition-all duration-300">
|
||||
<!-- Ride image -->
|
||||
<div class="relative h-48 bg-gradient-to-br from-blue-500 to-purple-600">
|
||||
{% if ride.image %}
|
||||
<img src="{{ ride.image.url }}"
|
||||
alt="{{ ride.name }}"
|
||||
class="w-full h-full object-cover">
|
||||
{% else %}
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<i class="fas fa-rocket text-4xl text-white opacity-50"></i>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Status badge -->
|
||||
<div class="absolute top-3 right-3">
|
||||
{% if ride.operating_status == 'operating' %}
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
|
||||
<i class="fas fa-play-circle mr-1"></i>
|
||||
Operating
|
||||
</span>
|
||||
{% elif ride.operating_status == 'closed_temporarily' %}
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
|
||||
<i class="fas fa-pause-circle mr-1"></i>
|
||||
Temporarily Closed
|
||||
</span>
|
||||
{% elif ride.operating_status == 'closed_permanently' %}
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
|
||||
<i class="fas fa-stop-circle mr-1"></i>
|
||||
Permanently Closed
|
||||
</span>
|
||||
{% elif ride.operating_status == 'under_construction' %}
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
|
||||
<i class="fas fa-hard-hat mr-1"></i>
|
||||
Under Construction
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ride details -->
|
||||
<div class="p-5">
|
||||
<!-- Name and category -->
|
||||
<div class="mb-3">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">
|
||||
<a href="{% url 'rides:ride_detail' ride.id %}"
|
||||
class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
|
||||
{{ ride.name }}
|
||||
</a>
|
||||
</h3>
|
||||
<div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 mr-2">
|
||||
{{ ride.category|default:"Ride" }}
|
||||
</span>
|
||||
{% if ride.park %}
|
||||
<span class="flex items-center">
|
||||
<i class="fas fa-map-marker-alt mr-1"></i>
|
||||
{{ ride.park.name }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Key stats -->
|
||||
<div class="grid grid-cols-2 gap-3 mb-4">
|
||||
{% if ride.height %}
|
||||
<div class="text-center p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<div class="text-lg font-semibold text-gray-900 dark:text-white">{{ ride.height }}ft</div>
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400">Height</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if ride.max_speed %}
|
||||
<div class="text-center p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<div class="text-lg font-semibold text-gray-900 dark:text-white">{{ ride.max_speed }}mph</div>
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400">Max Speed</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if ride.capacity_per_hour %}
|
||||
<div class="text-center p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<div class="text-lg font-semibold text-gray-900 dark:text-white">{{ ride.capacity_per_hour }}</div>
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400">Capacity/Hr</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if ride.duration %}
|
||||
<div class="text-center p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<div class="text-lg font-semibold text-gray-900 dark:text-white">{{ ride.duration }}s</div>
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400">Duration</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Opening date -->
|
||||
{% if ride.opened_date %}
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
<i class="fas fa-calendar mr-1"></i>
|
||||
Opened {{ ride.opened_date|date:"F j, Y" }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Manufacturer -->
|
||||
{% if ride.manufacturer %}
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400">
|
||||
<i class="fas fa-industry mr-1"></i>
|
||||
{{ ride.manufacturer.name }}
|
||||
{% if ride.designer and ride.designer != ride.manufacturer %}
|
||||
• Designed by {{ ride.designer.name }}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
{% if total_pages > 1 and not is_loading %}
|
||||
<div class="mt-8 flex items-center justify-between">
|
||||
<div class="flex items-center text-sm text-gray-700 dark:text-gray-300">
|
||||
<p>
|
||||
Showing {{ start_index }} to {{ end_index }} of {{ total_count }} results
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-2">
|
||||
{% if has_previous %}
|
||||
<button unicorn:click="previous_page"
|
||||
class="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-600">
|
||||
<i class="fas fa-chevron-left mr-1"></i>
|
||||
Previous
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
<!-- Page numbers -->
|
||||
<div class="hidden sm:flex items-center space-x-1">
|
||||
{% for page_num in get_page_range %}
|
||||
{% if page_num == current_page %}
|
||||
<span class="inline-flex items-center px-3 py-2 border border-blue-500 bg-blue-50 text-blue-600 rounded-md text-sm font-medium dark:bg-blue-900 dark:text-blue-200 dark:border-blue-700">
|
||||
{{ page_num }}
|
||||
</span>
|
||||
{% else %}
|
||||
<button unicorn:click="go_to_page({{ page_num }})"
|
||||
class="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-600">
|
||||
{{ page_num }}
|
||||
</button>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if has_next %}
|
||||
<button unicorn:click="next_page"
|
||||
class="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-600">
|
||||
Next
|
||||
<i class="fas fa-chevron-right ml-1"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% elif not is_loading %}
|
||||
<!-- No results state -->
|
||||
<div class="text-center py-12">
|
||||
<div class="mx-auto h-24 w-24 text-gray-400 dark:text-gray-600 mb-4">
|
||||
<i class="fas fa-search text-6xl"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No rides found</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
||||
{% if has_filters %}
|
||||
Try adjusting your filters to see more results.
|
||||
{% else %}
|
||||
No rides match your current search criteria.
|
||||
{% endif %}
|
||||
</p>
|
||||
{% if has_filters %}
|
||||
<button unicorn:click="clear_all"
|
||||
class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition-colors">
|
||||
<i class="fas fa-times mr-2"></i>
|
||||
Clear All Filters
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user