mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-22 21:51:10 -05:00
45d97b6e68
- Introduced reusable test utilities in `backend/tests/utils` for FSM transitions, HTMX interactions, and common scenarios. - Added factory functions for creating test submissions, parks, rides, and photo submissions. - Implemented assertion helpers for verifying state changes, toast notifications, and transition logs. - Created comprehensive state machine diagrams for all FSM-enabled models in `docs/STATE_DIAGRAMS.md`, detailing states, transitions, and guard conditions.
320 lines
15 KiB
HTML
320 lines
15 KiB
HTML
{% extends "base/base.html" %}
|
|
{% load static %}
|
|
{% load park_tags %}
|
|
|
|
{% block title %}{{ park.name }} - ThrillWiki{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
{% if park.location.exists %}
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<script>
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data('photoUploadModal', () => ({
|
|
show: false,
|
|
editingPhoto: { caption: '' }
|
|
}))
|
|
})
|
|
</script>
|
|
|
|
<div class="container px-4 mx-auto sm:px-6 lg:px-8">
|
|
<!-- Action Buttons - Above header -->
|
|
<div hx-get="{% url 'parks:park_actions' park.slug %}"
|
|
hx-trigger="load, auth-changed from:body"
|
|
hx-swap="innerHTML">
|
|
</div>
|
|
|
|
<!-- Status Management Section (Moderators Only) -->
|
|
<div id="park-status-section"
|
|
hx-get="{% url 'parks:park_status_actions' park.slug %}"
|
|
hx-trigger="load"
|
|
hx-swap="outerHTML">
|
|
</div>
|
|
|
|
<!-- Park Header -->
|
|
<div class="p-compact mb-6 bg-white rounded-lg shadow-lg dark:bg-gray-800">
|
|
<div class="text-center">
|
|
<h1 class="text-3xl font-bold text-gray-900 dark:text-white lg:text-4xl">{{ park.name }}</h1>
|
|
{% if park.formatted_location %}
|
|
<div class="flex items-center justify-center mt-2 text-sm text-gray-600 dark:text-gray-400">
|
|
<i class="mr-1 fas fa-map-marker-alt"></i>
|
|
<p>{{ park.formatted_location }}</p>
|
|
</div>
|
|
{% endif %}
|
|
<div class="flex flex-wrap items-center justify-center gap-2 mt-3">
|
|
{% include "parks/partials/park_header_badge.html" with park=park %}
|
|
|
|
{% if park.average_rating %}
|
|
<span class="flex items-center px-3 py-1 text-sm font-medium text-yellow-800 bg-yellow-100 status-badge dark:bg-yellow-600 dark:text-yellow-50">
|
|
<span class="mr-1 text-yellow-500 dark:text-yellow-200">★</span>
|
|
{{ park.average_rating|floatformat:1 }}/10
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Horizontal Stats Bar -->
|
|
<div class="grid-stats mb-6">
|
|
<!-- Operator - Priority Card (First Position) -->
|
|
{% if park.operator %}
|
|
<div class="bg-white rounded-lg shadow-lg dark:bg-gray-800 p-compact card-stats card-stats-priority">
|
|
<div class="text-center">
|
|
<dt class="text-sm font-semibold text-gray-900 dark:text-white">Operator</dt>
|
|
<dd class="mt-1">
|
|
<span class="text-sm font-bold text-sky-900 dark:text-sky-400">
|
|
{{ park.operator.name }}
|
|
</a>
|
|
</dd>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Property Owner (if different from operator) -->
|
|
{% if park.property_owner and park.property_owner != park.operator %}
|
|
<div class="bg-white rounded-lg shadow-lg dark:bg-gray-800 p-compact card-stats">
|
|
<div class="text-center">
|
|
<dt class="text-sm font-semibold text-gray-900 dark:text-white">Property Owner</dt>
|
|
<dd class="mt-1">
|
|
<a href="{% url 'property_owners:property_owner_detail' park.property_owner.slug %}"
|
|
class="text-sm font-bold text-sky-900 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-300">
|
|
{{ park.property_owner.name }}
|
|
</a>
|
|
</dd>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Total Rides -->
|
|
<a href="{% url 'parks:rides:ride_list' park.slug %}"
|
|
class="bg-white rounded-lg shadow-lg dark:bg-gray-800 p-compact card-stats transition-transform hover:scale-[1.02]">
|
|
<div class="text-center">
|
|
<dt class="text-sm font-semibold text-gray-900 dark:text-white">Total Rides</dt>
|
|
<dd class="mt-1 text-2xl font-bold text-sky-900 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-300">{{ park.ride_count|default:"N/A" }}</dd>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Roller Coasters -->
|
|
<div class="bg-white rounded-lg shadow-lg dark:bg-gray-800 p-compact card-stats">
|
|
<div class="text-center">
|
|
<dt class="text-sm font-semibold text-gray-900 dark:text-white">Roller Coasters</dt>
|
|
<dd class="mt-1 text-2xl font-bold text-sky-900 dark:text-sky-400">{{ park.coaster_count|default:"N/A" }}</dd>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status -->
|
|
<div class="bg-white rounded-lg shadow-lg dark:bg-gray-800 p-compact card-stats">
|
|
<div class="text-center">
|
|
<dt class="text-sm font-semibold text-gray-900 dark:text-white">Status</dt>
|
|
<dd class="mt-1 text-sm font-bold text-sky-900 dark:text-sky-400">{{ park.get_status_display }}</dd>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Opened Date -->
|
|
{% if park.opening_date %}
|
|
<div class="bg-white rounded-lg shadow-lg dark:bg-gray-800 p-compact card-stats">
|
|
<div class="text-center">
|
|
<dt class="text-sm font-semibold text-gray-900 dark:text-white">Opened</dt>
|
|
<dd class="mt-1 text-sm font-bold text-sky-900 dark:text-sky-400">{{ park.opening_date }}</dd>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Website -->
|
|
{% if park.website %}
|
|
<div class="bg-white rounded-lg shadow-lg dark:bg-gray-800 p-compact card-stats">
|
|
<div class="text-center">
|
|
<dt class="text-sm font-semibold text-gray-900 dark:text-white">Website</dt>
|
|
<dd class="mt-1">
|
|
<a href="{{ park.website }}"
|
|
class="inline-flex items-center text-sm font-bold text-sky-900 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-300"
|
|
target="_blank" rel="noopener noreferrer">
|
|
Visit
|
|
<i class="ml-1 text-xs fas fa-external-link-alt"></i>
|
|
</a>
|
|
</dd>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Rest of the content remains unchanged -->
|
|
{% if park.photos.exists %}
|
|
<div class="p-optimized mb-8 bg-white rounded-lg shadow dark:bg-gray-800">
|
|
<h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">Photos</h2>
|
|
{% include "media/partials/photo_display.html" with photos=park.photos.all content_type="parks.park" object_id=park.id %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Main Content Grid -->
|
|
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
|
<!-- Left Column - Description and Rides -->
|
|
<div class="lg:col-span-2">
|
|
{% if park.description %}
|
|
<div class="p-optimized mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
|
<h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">About</h2>
|
|
<div class="prose dark:prose-invert max-w-none">
|
|
{{ park.description|linebreaks }}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Rides and Attractions -->
|
|
<div class="p-optimized mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Rides & Attractions</h2>
|
|
<a href="{% url 'parks:rides:ride_list' park.slug %}" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
|
|
View All
|
|
</a>
|
|
</div>
|
|
{% if park.rides.exists %}
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
{% for ride in park.rides.all|slice:":6" %}
|
|
<div class="p-4 transition-colors rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
|
|
<a href="{% url 'parks:rides:ride_detail' park.slug ride.slug %}" class="block">
|
|
<h3 class="mb-1 font-semibold text-gray-900 dark:text-white">{{ ride.name }}</h3>
|
|
<span class="text-blue-800 bg-blue-100 status-badge dark:bg-blue-700 dark:text-blue-50">
|
|
{{ ride.get_category_display }}
|
|
</span>
|
|
{% if ride.average_rating %}
|
|
<span class="flex items-center text-yellow-800 bg-yellow-100 status-badge dark:bg-yellow-600 dark:text-yellow-50">
|
|
<span class="mr-1 text-yellow-500 dark:text-yellow-200">★</span>
|
|
{{ ride.average_rating|floatformat:1 }}/10
|
|
</span>
|
|
{% endif %}
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<p class="text-gray-500 dark:text-gray-400">No rides or attractions listed yet.</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column - Map and Additional Info -->
|
|
<div class="lg:col-span-1">
|
|
<!-- Location Map -->
|
|
{% if park.location.exists %}
|
|
<div class="p-optimized mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
|
<h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">Location</h2>
|
|
<div id="park-map" class="relative rounded-lg" style="z-index: 0;"></div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- History Panel -->
|
|
<div class="p-optimized mb-6 bg-white rounded-lg shadow dark:bg-gray-800" x-data="{ showFsmHistory: false }">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">History</h2>
|
|
{% if perms.parks.change_park %}
|
|
<button type="button"
|
|
@click="showFsmHistory = !showFsmHistory"
|
|
class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-150">
|
|
<i class="mr-2 fas fa-history"></i>
|
|
<span x-text="showFsmHistory ? 'Hide Transitions' : 'Show Transitions'"></span>
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- FSM Transition History (Moderators Only) -->
|
|
{% if perms.parks.change_park %}
|
|
<div x-show="showFsmHistory" x-cloak class="mb-4">
|
|
<div id="park-fsm-history-container"
|
|
x-show="showFsmHistory"
|
|
x-init="$watch('showFsmHistory', value => { if(value && !$el.dataset.loaded) { htmx.trigger($el, 'load-history'); $el.dataset.loaded = 'true'; } })"
|
|
hx-get="{% url 'moderation:moderation-reports-all-history' %}?model_type=park&object_id={{ park.id }}"
|
|
hx-trigger="load-history"
|
|
hx-target="this"
|
|
hx-swap="innerHTML"
|
|
hx-indicator="#park-fsm-loading">
|
|
<!-- Loading State -->
|
|
<div id="park-fsm-loading" class="flex items-center justify-center py-4">
|
|
<i class="mr-2 text-blue-500 fas fa-spinner fa-spin"></i>
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">Loading transitions...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Regular History -->
|
|
<div class="space-y-4">
|
|
{% for record in history %}
|
|
<div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-700/50">
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">
|
|
{{ record.history_date|date:"M d, Y H:i" }}
|
|
{% if record.history_user %}
|
|
by {{ record.history_user.username }}
|
|
{% endif %}
|
|
</div>
|
|
<div class="mt-2">
|
|
{% for field, changes in record.diff_against_previous.items %}
|
|
{% if field != "updated_at" %}
|
|
<div class="text-sm">
|
|
<span class="font-medium">{{ field|title }}:</span>
|
|
<span class="text-red-600 dark:text-red-400">{{ changes.old }}</span>
|
|
<span class="mx-1">-></span>
|
|
<span class="text-green-600 dark:text-green-400">{{ changes.new }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<p class="text-gray-500">No history available.</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Photo Upload Modal -->
|
|
{% if perms.media.add_photo %}
|
|
<div x-cloak
|
|
x-data="{
|
|
show: false,
|
|
editingPhoto: null,
|
|
init() {
|
|
this.editingPhoto = { caption: '' };
|
|
}
|
|
}"
|
|
@show-photo-upload.window="show = true; init()"
|
|
x-show="show"
|
|
class="fixed inset-0 z-[60] flex items-center justify-center bg-black/50"
|
|
@click.self="show = false">
|
|
<div class="w-full max-w-2xl p-6 mx-4 bg-white rounded-lg shadow-xl dark:bg-gray-800">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Upload Photos</h3>
|
|
<button @click="show = false" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
|
|
<i class="text-xl fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
{% include "media/partials/photo_upload.html" with content_type="parks.park" object_id=park.id %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<!-- Photo Gallery Script -->
|
|
<script src="{% static 'js/photo-gallery.js' %}"></script>
|
|
|
|
<!-- Map Script (if location exists) -->
|
|
{% if park.location.exists %}
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="{% static 'js/park-map.js' %}"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
{% with location=park.location.first %}
|
|
initParkMap({{ location.latitude }}, {{ location.longitude }}, "{{ park.name }}");
|
|
{% endwith %}
|
|
});
|
|
</script>
|
|
{% endif %}
|
|
{% endblock %}
|