pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2026-04-10 11:48:45 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat: Complete Phase 5 of Django Unicorn refactoring for park detail templates

Browse Source 
- 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
2025-09-02 22:58:11 -04:00
parent 0fd6dc2560
commit 8069589b8a
54 changed files with 10472 additions and 1858 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
backend/templates/rides/partials/ride_filter_sidebar.html Normal file
View File

@@ -0,0 +1,218 @@
<!-- Simplified Ride Filter Sidebar for Django Unicorn -->
<div class="filter-sidebar bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 h-full overflow-y-auto w-80">
<!-- Filter Header -->
<div class="sticky top-0 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 p-4 z-10">
<div class="flex items-center justify-between">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
<i class="fas fa-filter mr-2 text-blue-600 dark:text-blue-400"></i>
Filters
</h2>
<div class="flex items-center space-x-2">
<!-- Filter Count Badge -->
{% if get_active_filter_count > 0 %}
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
{{ get_active_filter_count }} active
</span>
{% endif %}
<!-- Clear All Filters -->
{% if has_filters %}
<button unicorn:click="clear_all"
class="text-sm text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 font-medium">
Clear All
</button>
{% endif %}
</div>
</div>
</div>
<!-- Filter Content -->
<div class="p-4 space-y-6">
<!-- Basic Category Filter -->
<div class="filter-section">
<h3 class="text-sm font-medium text-gray-900 dark:text-white mb-3">
<i class="fas fa-tags mr-2 text-gray-500"></i>
Category
</h3>
<div class="space-y-2">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox text-blue-600">
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Roller Coaster</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="form-checkbox text-blue-600">
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Water Ride</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="form-checkbox text-blue-600">
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Flat Ride</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="form-checkbox text-blue-600">
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Dark Ride</span>
</label>
</div>
</div>
<!-- Status Filter -->
<div class="filter-section border-t border-gray-200 dark:border-gray-700 pt-6">
<h3 class="text-sm font-medium text-gray-900 dark:text-white mb-3">
<i class="fas fa-power-off mr-2 text-gray-500"></i>
Status
</h3>
<div class="space-y-2">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox text-green-600">
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Operating</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="form-checkbox text-yellow-600">
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Temporarily Closed</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="form-checkbox text-red-600">
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Permanently Closed</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="form-checkbox text-blue-600">
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Under Construction</span>
</label>
</div>
</div>
<!-- Height Range Filter -->
<div class="filter-section border-t border-gray-200 dark:border-gray-700 pt-6">
<h3 class="text-sm font-medium text-gray-900 dark:text-white mb-3">
<i class="fas fa-ruler-vertical mr-2 text-gray-500"></i>
Height Range (ft)
</h3>
<div class="grid grid-cols-2 gap-3">
<div>
<label class="block text-xs text-gray-600 dark:text-gray-400 mb-1">Min</label>
<input type="number"
placeholder="0"
class="w-full 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">
</div>
<div>
<label class="block text-xs text-gray-600 dark:text-gray-400 mb-1">Max</label>
<input type="number"
placeholder="500"
class="w-full 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">
</div>
</div>
</div>
<!-- Speed Range Filter -->
<div class="filter-section border-t border-gray-200 dark:border-gray-700 pt-6">
<h3 class="text-sm font-medium text-gray-900 dark:text-white mb-3">
<i class="fas fa-tachometer-alt mr-2 text-gray-500"></i>
Speed Range (mph)
</h3>
<div class="grid grid-cols-2 gap-3">
<div>
<label class="block text-xs text-gray-600 dark:text-gray-400 mb-1">Min</label>
<input type="number"
placeholder="0"
class="w-full 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">
</div>
<div>
<label class="block text-xs text-gray-600 dark:text-gray-400 mb-1">Max</label>
<input type="number"
placeholder="150"
class="w-full 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">
</div>
</div>
</div>
<!-- Opening Date Range -->
<div class="filter-section border-t border-gray-200 dark:border-gray-700 pt-6">
<h3 class="text-sm font-medium text-gray-900 dark:text-white mb-3">
<i class="fas fa-calendar mr-2 text-gray-500"></i>
Opening Date Range
</h3>
<div class="grid grid-cols-2 gap-3">
<div>
<label class="block text-xs text-gray-600 dark:text-gray-400 mb-1">From</label>
<input type="date"
class="w-full 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">
</div>
<div>
<label class="block text-xs text-gray-600 dark:text-gray-400 mb-1">To</label>
<input type="date"
class="w-full 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">
</div>
</div>
</div>
<!-- Manufacturer Filter -->
<div class="filter-section border-t border-gray-200 dark:border-gray-700 pt-6">
<h3 class="text-sm font-medium text-gray-900 dark:text-white mb-3">
<i class="fas fa-industry mr-2 text-gray-500"></i>
Manufacturer
</h3>
<div class="space-y-2 max-h-32 overflow-y-auto">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox text-blue-600">
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Bolliger & Mabillard</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="form-checkbox text-blue-600">
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Intamin</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="form-checkbox text-blue-600">
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Vekoma</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="form-checkbox text-blue-600">
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Arrow Dynamics</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="form-checkbox text-blue-600">
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Gerstlauer</span>
</label>
</div>
</div>
<!-- Roller Coaster Features -->
<div class="filter-section border-t border-gray-200 dark:border-gray-700 pt-6">
<h3 class="text-sm font-medium text-gray-900 dark:text-white mb-3">
<i class="fas fa-mountain mr-2 text-gray-500"></i>
Features
</h3>
<div class="space-y-2">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox text-purple-600">
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Has Inversions</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="form-checkbox text-red-600">
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Has Launch</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="form-checkbox text-green-600">
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Steel Track</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="form-checkbox text-yellow-600">
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Wood Track</span>
</label>
</div>
</div>
<!-- Apply Filters Button -->
<div class="filter-section border-t border-gray-200 dark:border-gray-700 pt-6">
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors">
<i class="fas fa-search mr-2"></i>
Apply Filters
</button>
</div>
</div>
</div>
<!-- CSS for form elements -->
<style>
.form-checkbox {
@apply w-4 h-4 border-gray-300 rounded focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600;
}
</style>