mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-23 05:11:10 -05:00
feat: Add detailed park and ride pages with HTMX integration
- Implemented park detail page with dynamic content loading for rides and weather. - Created park list page with filters and search functionality. - Developed ride detail page showcasing ride stats, reviews, and similar rides. - Added ride list page with filtering options and dynamic loading. - Introduced search results page with tabs for parks, rides, and users. - Added HTMX tests for global search functionality.
This commit is contained in:
pacnpal
177
templates/pages/rides/detail.html
Normal file
177
templates/pages/rides/detail.html
Normal file
@@ -0,0 +1,177 @@
|
||||
{% extends "base/htmx-base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}{{ ride.name }} - {{ ride.park.name }} - ThrillWiki{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div class="container py-8">
|
||||
<!-- Breadcrumbs -->
|
||||
<nav class="flex mb-6 text-sm text-muted-foreground">
|
||||
<a href="{% url 'home' %}" class="hover:text-foreground">Home</a>
|
||||
<span class="mx-2">/</span>
|
||||
<a href="{% url 'parks:park_list' %}" class="hover:text-foreground">Parks</a>
|
||||
<span class="mx-2">/</span>
|
||||
<a href="{% url 'parks:park_detail' ride.park.id %}" class="hover:text-foreground">{{ ride.park.name }}</a>
|
||||
<span class="mx-2">/</span>
|
||||
<span class="text-foreground">{{ ride.name }}</span>
|
||||
</nav>
|
||||
|
||||
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
|
||||
<!-- Main Content -->
|
||||
<div class="space-y-8 lg:col-span-2">
|
||||
<!-- Ride Header -->
|
||||
<div class="relative overflow-hidden border rounded-lg shadow-sm bg-card text-card-foreground">
|
||||
<div class="relative aspect-video">
|
||||
{% if ride.image %}
|
||||
<img src="{{ ride.image.url }}" alt="{{ ride.name }}" class="object-cover w-full h-full">
|
||||
{% else %}
|
||||
<div class="flex items-center justify-center w-full h-full bg-muted">
|
||||
<span class="text-muted-foreground">No image available</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
|
||||
<div class="absolute text-white bottom-6 left-6">
|
||||
<h1 class="mb-2 text-4xl font-bold">{{ ride.name }}</h1>
|
||||
<div class="flex items-center gap-4 text-sm">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
{{ ride.park.name }}
|
||||
</span>
|
||||
<span class="px-2 py-0.5 rounded-full bg-white/20 backdrop-blur-sm border border-white/20">
|
||||
{{ ride.get_status_display }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex flex-col items-center p-3 rounded-lg bg-muted/50">
|
||||
<span class="text-2xl font-bold">{{ ride.average_rating|default:"-" }}</span>
|
||||
<span class="text-xs text-muted-foreground">Rating</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center p-3 rounded-lg bg-muted/50">
|
||||
<span class="text-2xl font-bold">{{ ride.top_speed|default:"-" }}</span>
|
||||
<span class="text-xs text-muted-foreground">mph</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center p-3 rounded-lg bg-muted/50">
|
||||
<span class="text-2xl font-bold">{{ ride.height|default:"-" }}</span>
|
||||
<span class="text-xs text-muted-foreground">ft</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
{% include "components/ui/button.html" with label="Rate Ride" variant="outline" icon='<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" /></svg>' %}
|
||||
{% include "components/ui/button.html" with label="Add to Credits" variant="default" icon='<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" /></svg>' %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prose dark:prose-invert max-w-none">
|
||||
<h3 class="mb-2 text-lg font-semibold">Description</h3>
|
||||
<p class="text-muted-foreground">{{ ride.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Grid -->
|
||||
<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
|
||||
<div class="p-4 border rounded-lg shadow-sm bg-card text-card-foreground">
|
||||
<dt class="text-sm font-medium text-muted-foreground">Manufacturer</dt>
|
||||
<dd class="mt-1 text-lg font-semibold">{{ ride.manufacturer.name|default:"Unknown" }}</dd>
|
||||
</div>
|
||||
<div class="p-4 border rounded-lg shadow-sm bg-card text-card-foreground">
|
||||
<dt class="text-sm font-medium text-muted-foreground">Opened</dt>
|
||||
<dd class="mt-1 text-lg font-semibold">{{ ride.opening_date|date:"Y"|default:"Unknown" }}</dd>
|
||||
</div>
|
||||
<div class="p-4 border rounded-lg shadow-sm bg-card text-card-foreground">
|
||||
<dt class="text-sm font-medium text-muted-foreground">Length</dt>
|
||||
<dd class="mt-1 text-lg font-semibold">{{ ride.length|default:"-" }} ft</dd>
|
||||
</div>
|
||||
<div class="p-4 border rounded-lg shadow-sm bg-card text-card-foreground">
|
||||
<dt class="text-sm font-medium text-muted-foreground">Inversions</dt>
|
||||
<dd class="mt-1 text-lg font-semibold">{{ ride.inversions|default:"0" }}</dd>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reviews Section -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-2xl font-bold tracking-tight">Reviews</h2>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm text-muted-foreground">{{ ride.review_count }} reviews</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="reviews-list"
|
||||
hx-get="{% url 'api:ride-reviews' ride.id %}"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML">
|
||||
<!-- Loading State -->
|
||||
{% for i in "123"|make_list %}
|
||||
<div class="p-6 space-y-4 border rounded-lg shadow-sm bg-card text-card-foreground">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-muted animate-pulse"></div>
|
||||
<div class="space-y-2">
|
||||
<div class="w-24 h-4 rounded bg-muted animate-pulse"></div>
|
||||
<div class="w-16 h-3 rounded bg-muted animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-16 h-8 rounded bg-muted animate-pulse"></div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="w-full h-4 rounded bg-muted animate-pulse"></div>
|
||||
<div class="w-5/6 h-4 rounded bg-muted animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="space-y-6">
|
||||
<!-- Similar Rides -->
|
||||
<div class="border rounded-lg shadow-sm bg-card text-card-foreground">
|
||||
<div class="p-4 border-b">
|
||||
<h3 class="font-semibold">Similar Rides</h3>
|
||||
</div>
|
||||
<div class="divide-y"
|
||||
hx-get="{% url 'api:ride-similar' ride.id %}"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML">
|
||||
{% for i in "123"|make_list %}
|
||||
<div class="flex gap-4 p-4">
|
||||
<div class="w-16 h-16 rounded bg-muted animate-pulse shrink-0"></div>
|
||||
<div class="flex-1 space-y-2">
|
||||
<div class="w-3/4 h-4 rounded bg-muted animate-pulse"></div>
|
||||
<div class="w-1/2 h-3 rounded bg-muted animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- POV Video -->
|
||||
{% if ride.pov_video_url %}
|
||||
<div class="overflow-hidden border rounded-lg shadow-sm bg-card text-card-foreground">
|
||||
<div class="p-4 border-b">
|
||||
<h3 class="font-semibold">On-Ride POV</h3>
|
||||
</div>
|
||||
<div class="relative aspect-video bg-muted">
|
||||
<!-- Video Embed -->
|
||||
<iframe src="{{ ride.pov_video_url }}"
|
||||
class="absolute inset-0 w-full h-full"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
130
templates/pages/rides/list.html
Normal file
130
templates/pages/rides/list.html
Normal file
@@ -0,0 +1,130 @@
|
||||
{% extends "base/htmx-base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}Explore Rides - ThrillWiki{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div class="container py-8">
|
||||
<div class="flex flex-col gap-8 md:flex-row">
|
||||
<!-- Sidebar Filters -->
|
||||
<aside class="w-full md:w-64 shrink-0"
|
||||
x-data="{ showFilters: false }">
|
||||
<div class="flex items-center justify-between mb-4 md:hidden">
|
||||
<h2 class="text-lg font-semibold">Filters</h2>
|
||||
<button @click="showFilters = !showFilters"
|
||||
class="text-sm text-primary hover:underline">
|
||||
<span x-text="showFilters ? 'Hide' : 'Show'"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6"
|
||||
:class="{'hidden': !showFilters, 'block': showFilters}"
|
||||
class="md:block">
|
||||
|
||||
<form id="ride-filters"
|
||||
hx-get="{% url 'api:ride-list' %}"
|
||||
hx-target="#ride-grid"
|
||||
hx-trigger="change delay:300ms, submit">
|
||||
|
||||
<!-- Search -->
|
||||
<div class="mb-6 space-y-2">
|
||||
<label class="text-sm font-medium">Search</label>
|
||||
<input type="text"
|
||||
name="q"
|
||||
placeholder="Search rides..."
|
||||
class="w-full px-3 py-1 text-sm transition-colors border rounded-md shadow-sm h-9 border-input bg-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
|
||||
</div>
|
||||
|
||||
<!-- Type Filter -->
|
||||
<div class="mb-6 space-y-2">
|
||||
<label class="text-sm font-medium">Ride Type</label>
|
||||
<select name="type"
|
||||
class="w-full px-3 py-1 text-sm transition-colors border rounded-md shadow-sm h-9 border-input bg-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
|
||||
<option value="">All Types</option>
|
||||
<option value="Roller Coaster">Roller Coaster</option>
|
||||
<option value="Water Ride">Water Ride</option>
|
||||
<option value="Dark Ride">Dark Ride</option>
|
||||
<option value="Flat Ride">Flat Ride</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Intensity Filter -->
|
||||
<div class="mb-6 space-y-3">
|
||||
<label class="text-sm font-medium">Thrill Level</label>
|
||||
<div class="space-y-2">
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="checkbox" name="intensity" value="Extreme" class="rounded border-primary text-primary focus:ring-primary">
|
||||
<span class="text-sm">Extreme</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="checkbox" name="intensity" value="High" class="rounded border-primary text-primary focus:ring-primary">
|
||||
<span class="text-sm">High</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="checkbox" name="intensity" value="Moderate" class="rounded border-primary text-primary focus:ring-primary">
|
||||
<span class="text-sm">Moderate</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="checkbox" name="intensity" value="Low" class="rounded border-primary text-primary focus:ring-primary">
|
||||
<span class="text-sm">Low</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-3xl font-bold tracking-tight">Rides</h1>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm text-muted-foreground" id="ride-count">
|
||||
Showing all results
|
||||
</span>
|
||||
<!-- View Toggle -->
|
||||
<div class="flex items-center border rounded-md" x-data="{ view: 'grid' }">
|
||||
<button @click="view = 'grid'"
|
||||
:class="{'bg-muted': view === 'grid'}"
|
||||
class="p-2 transition-colors hover:bg-muted/50">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="view = 'list'"
|
||||
:class="{'bg-muted': view === 'list'}"
|
||||
class="p-2 transition-colors hover:bg-muted/50">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ride Grid -->
|
||||
<div id="ride-grid"
|
||||
class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3"
|
||||
hx-get="{% url 'api:ride-list' %}"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML">
|
||||
<!-- Loading State -->
|
||||
{% for i in "123456"|make_list %}
|
||||
<div class="rounded-lg border bg-card text-card-foreground shadow-sm h-[380px]">
|
||||
<div class="p-0">
|
||||
<div class="w-full h-48 rounded-t-lg bg-muted animate-pulse"></div>
|
||||
<div class="p-6 space-y-4">
|
||||
<div class="w-3/4 h-6 rounded bg-muted animate-pulse"></div>
|
||||
<div class="space-y-2">
|
||||
<div class="w-full h-4 rounded bg-muted animate-pulse"></div>
|
||||
<div class="w-2/3 h-4 rounded bg-muted animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user