mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 10:31:09 -05:00
6d30131f2c
Refactor park detail template to use data attributes on the map div for latitude, longitude, and park name, simplifying map initialization and handling missing location data gracefully. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 48ecdb60-d0f0-4b75-95c9-34e409ef35fb Replit-Commit-Checkpoint-Type: intermediate_checkpoint
293 lines
13 KiB
HTML
293 lines
13 KiB
HTML
{% extends "base/base.html" %}
|
|
{% load static %}
|
|
{% load park_tags %}
|
|
{% load cotton %}
|
|
|
|
{% 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>
|
|
|
|
<!-- 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">
|
|
<span class="status-badge text-sm font-medium py-1 px-3 {% if park.status == 'OPERATING' %}status-operating
|
|
{% elif park.status == 'CLOSED_TEMP' or park.status == 'CLOSED_PERM' %}status-closed
|
|
{% elif park.status == 'UNDER_CONSTRUCTION' %}status-construction
|
|
{% elif park.status == 'DEMOLISHED' %}status-demolished
|
|
{% elif park.status == 'RELOCATED' %}status-relocated{% endif %}">
|
|
{{ park.get_status_display }}
|
|
</span>
|
|
{% 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">
|
|
<span class="text-sm font-bold text-sky-900 dark:text-sky-400">
|
|
{{ park.property_owner.name }}
|
|
</span>
|
|
</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-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
|
|
{% for ride in park.rides.all|slice:":6" %}
|
|
<c-ride_card :ride="ride" url_variant="park" />
|
|
{% 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>
|
|
{% with location=park.location.first %}
|
|
{% if location.latitude is not None and location.longitude is not None %}
|
|
<div id="park-map" class="relative rounded-lg" style="z-index: 0;"
|
|
data-latitude="{{ location.latitude|default_if_none:'' }}"
|
|
data-longitude="{{ location.longitude|default_if_none:'' }}"
|
|
data-park-name="{{ park.name|escape }}"></div>
|
|
{% else %}
|
|
<div class="relative rounded-lg p-4 text-center text-gray-500 dark:text-gray-400">
|
|
<i class="fas fa-map-marker-alt text-2xl mb-2"></i>
|
|
<p>Location information not available</p>
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- History Panel -->
|
|
<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">History</h2>
|
|
<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() {
|
|
var mapElement = document.getElementById('park-map');
|
|
if (mapElement && mapElement.dataset.latitude && mapElement.dataset.longitude) {
|
|
var latitude = parseFloat(mapElement.dataset.latitude);
|
|
var longitude = parseFloat(mapElement.dataset.longitude);
|
|
var parkName = mapElement.dataset.parkName;
|
|
|
|
if (!isNaN(latitude) && !isNaN(longitude) && parkName) {
|
|
initParkMap(latitude, longitude, parkName);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{% endif %}
|
|
{% endblock %}
|