mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-21 23:11:08 -05:00
weird header stuff
This commit is contained in:
pacnpal
@@ -122,7 +122,7 @@ document.addEventListener('alpine:init', () => {
|
||||
uploadProgress: 0,
|
||||
error: null,
|
||||
showCaptionModal: false,
|
||||
editingPhoto: null,
|
||||
editingPhoto: { caption: '' },
|
||||
|
||||
get canAddMorePhotos() {
|
||||
return this.photos.length < maxFiles;
|
||||
@@ -234,7 +234,7 @@ document.addEventListener('alpine:init', () => {
|
||||
);
|
||||
|
||||
this.showCaptionModal = false;
|
||||
this.editingPhoto = null;
|
||||
this.editingPhoto = { caption: '' };
|
||||
} catch (err) {
|
||||
this.error = err.message || 'Failed to update caption';
|
||||
console.error('Caption update error:', err);
|
||||
|
||||
@@ -3,114 +3,147 @@
|
||||
|
||||
{% block title %}{{ park.name }} - ThrillWiki{% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
{% if park.latitude and park.longitude %}
|
||||
<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">
|
||||
<!-- Header with Quick Facts -->
|
||||
<div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<div class="flex flex-col lg:flex-row lg:items-start lg:justify-between">
|
||||
<div class="mb-6 lg:mb-0 lg:mr-6 lg:flex-1">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h1 class="mb-2 text-3xl font-bold text-gray-900 dark:text-white">{{ park.name }}</h1>
|
||||
{% if park.city or park.state or park.country %}
|
||||
{% spaceless %}
|
||||
<p class="mb-2 text-gray-600 dark:text-gray-400">
|
||||
<i class="mr-1 fas fa-map-marker-alt"></i> {% if park.city %}{{ park.city }}{% endif %}{% if park.city and park.state %}, {% endif %}{% if park.state %}{{ park.state }}{% endif %}{% if park.country and park.state or park.city %}, {% endif %}{% if park.country %}{{ park.country }}{% endif %}
|
||||
</p>
|
||||
{% endspaceless %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if user.is_authenticated %}
|
||||
<div class="flex gap-2">
|
||||
<a href="{% url 'parks:park_update' park.slug %}" class="btn-secondary">
|
||||
<i class="mr-2 fas fa-pencil-alt"></i>Edit
|
||||
</a>
|
||||
{% if perms.media.add_photo %}
|
||||
<button class="btn-secondary" @click="$dispatch('show-photo-upload')">
|
||||
<i class="mr-2 fas fa-camera"></i>Upload Photo
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mt-3">
|
||||
<span class="status-badge {% 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 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 %}
|
||||
<!-- Action Buttons - Above header -->
|
||||
{% if user.is_authenticated %}
|
||||
<div class="flex justify-end gap-3 mb-4">
|
||||
<a href="{% url 'parks:park_update' park.slug %}"
|
||||
class="transition-transform btn-secondary hover:scale-105">
|
||||
<i class="mr-2 fas fa-pencil-alt"></i>Edit
|
||||
</a>
|
||||
{% if perms.media.add_photo %}
|
||||
<button class="transition-transform btn-secondary hover:scale-105"
|
||||
@click="$dispatch('show-photo-upload')">
|
||||
<i class="mr-2 fas fa-camera"></i>Upload Photo
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Header Grid -->
|
||||
<div class="grid h-[340px] gap-4 mb-6 grid-cols-1 sm:grid-cols-6 md:grid-cols-12">
|
||||
<!-- Park Info Card -->
|
||||
<div class="flex flex-col h-full col-span-1 p-4 overflow-auto bg-white rounded-lg shadow-lg sm:col-span-2 md:col-span-3 dark:bg-gray-800">
|
||||
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">{{ park.name }}</h1>
|
||||
|
||||
{% if park.formatted_location %}
|
||||
<div class="flex items-center mt-2 text-gray-600 dark:text-gray-400">
|
||||
<i class="mr-2 fas fa-map-marker-alt"></i>
|
||||
<p>{{ park.formatted_location }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2 mt-3">
|
||||
<span class="status-badge text-sm font-medium {% 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 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>
|
||||
|
||||
<!-- Stats and Quick Facts -->
|
||||
<div class="grid h-full grid-cols-1 col-span-1 gap-4 sm:grid-cols-6 sm:col-span-4 md:grid-cols-12 md:col-span-9">
|
||||
<!-- Stats Column -->
|
||||
<div class="flex flex-col col-span-1 gap-4 sm:col-span-2 md:col-span-4">
|
||||
<!-- Total Rides Card -->
|
||||
{% if park.total_rides %}
|
||||
<a href="{% url 'parks:rides:ride_list' park.slug %}"
|
||||
class="flex flex-col flex-1 p-4 transition-transform bg-white rounded-lg shadow-lg hover:scale-[1.02] dark:bg-gray-800">
|
||||
<dt class="text-lg font-semibold text-gray-900 dark:text-white">Total Rides</dt>
|
||||
<dd class="mt-2 text-4xl font-bold text-gray-900 dark:text-white">{{ park.total_rides }}</dd>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<!-- Total Roller Coasters Card -->
|
||||
{% if park.total_roller_coasters %}
|
||||
<div class="flex flex-col flex-1 p-4 bg-white rounded-lg shadow-lg dark:bg-gray-800">
|
||||
<dt class="text-lg font-semibold text-gray-900 dark:text-white">Total Roller Coasters</dt>
|
||||
<dd class="mt-2 text-4xl font-bold text-gray-900 dark:text-white">{{ park.total_roller_coasters }}</dd>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Quick Facts in Header -->
|
||||
<div class="lg:w-1/3">
|
||||
<dl class="grid grid-cols-2 gap-4">
|
||||
{% if park.owner %}
|
||||
<div>
|
||||
<dt class="text-sm text-gray-500">Owner/Operator</dt>
|
||||
<dd class="font-medium text-gray-900 dark:text-white">
|
||||
<a href="{% url 'companies:company_detail' park.owner.slug %}"
|
||||
class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
|
||||
{{ park.owner.name }}
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if park.opening_date %}
|
||||
<div>
|
||||
<dt class="text-sm text-gray-500">Opening Date</dt>
|
||||
<dd class="font-medium text-gray-900 dark:text-white">{{ park.opening_date }}</dd>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if park.operating_season %}
|
||||
<div>
|
||||
<dt class="text-sm text-gray-500">Operating Season</dt>
|
||||
<dd class="font-medium text-gray-900 dark:text-white">{{ park.operating_season }}</dd>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if park.size_acres %}
|
||||
<div>
|
||||
<dt class="text-sm text-gray-500">Size</dt>
|
||||
<dd class="font-medium text-gray-900 dark:text-white">{{ park.size_acres }} acres</dd>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if park.total_rides %}
|
||||
<div>
|
||||
<dt class="text-sm text-gray-500">Total Rides</dt>
|
||||
<dd class="font-medium text-gray-900 dark:text-white">{{ park.total_rides }}</dd>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if park.total_roller_coasters %}
|
||||
<div>
|
||||
<dt class="text-sm text-gray-500">Roller Coasters</dt>
|
||||
<dd class="font-medium text-gray-900 dark:text-white">{{ park.total_roller_coasters }}</dd>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if park.website %}
|
||||
<div class="col-span-2">
|
||||
<dt class="text-sm text-gray-500">Website</dt>
|
||||
<dd class="font-medium text-gray-900 dark:text-white">
|
||||
<a href="{{ park.website }}"
|
||||
class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
||||
target="_blank" rel="noopener noreferrer">
|
||||
<i class="mr-2 fas fa-external-link-alt"></i>Official Website
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
{% endif %}
|
||||
</dl>
|
||||
<!-- Quick Facts Grid -->
|
||||
<div class="grid h-full grid-cols-2 col-span-1 gap-4 p-4 bg-white rounded-lg shadow-lg sm:grid-cols-2 sm:col-span-4 md:grid-cols-4 md:col-span-8 lg:grid-cols-6 dark:bg-gray-800">
|
||||
{% if park.owner %}
|
||||
<div class="flex flex-col items-center justify-center text-center lg:col-span-2">
|
||||
<i class="mb-1 text-lg text-blue-600 fas fa-building dark:text-blue-400"></i>
|
||||
<dt class="text-xs font-medium text-gray-500 dark:text-gray-400">Owner/Operator</dt>
|
||||
<dd class="mt-0.5">
|
||||
<a href="{% url 'companies:company_detail' park.owner.slug %}"
|
||||
class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
|
||||
{{ park.owner.name }}
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if park.opening_date %}
|
||||
<div class="flex flex-col items-center justify-center text-center">
|
||||
<i class="mb-1 text-lg text-blue-600 fas fa-calendar-alt dark:text-blue-400"></i>
|
||||
<dt class="text-xs font-medium text-gray-500 dark:text-gray-400">Opening Date</dt>
|
||||
<dd class="mt-0.5 text-sm text-gray-900 dark:text-white">{{ park.opening_date }}</dd>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if park.operating_season %}
|
||||
<div class="flex flex-col items-center justify-center text-center">
|
||||
<i class="mb-1 text-lg text-blue-600 fas fa-clock dark:text-blue-400"></i>
|
||||
<dt class="text-xs font-medium text-gray-500 dark:text-gray-400">Operating Season</dt>
|
||||
<dd class="mt-0.5 text-sm text-gray-900 dark:text-white">{{ park.operating_season }}</dd>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if park.size_acres %}
|
||||
<div class="flex flex-col items-center justify-center text-center">
|
||||
<i class="mb-1 text-lg text-blue-600 fas fa-ruler-combined dark:text-blue-400"></i>
|
||||
<dt class="text-xs font-medium text-gray-500 dark:text-gray-400">Size</dt>
|
||||
<dd class="mt-0.5 text-sm text-gray-900 dark:text-white">{{ park.size_acres }} acres</dd>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if park.website %}
|
||||
<div class="flex flex-col items-center justify-center text-center lg:col-span-2">
|
||||
<i class="mb-1 text-lg text-blue-600 fas fa-globe dark:text-blue-400"></i>
|
||||
<dt class="text-xs font-medium text-gray-500 dark:text-gray-400">Website</dt>
|
||||
<dd class="mt-0.5">
|
||||
<a href="{{ park.website }}"
|
||||
class="inline-flex items-center text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
||||
target="_blank" rel="noopener noreferrer">
|
||||
Official Website
|
||||
<i class="ml-1 fas fa-external-link-alt"></i>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Photos -->
|
||||
{% if park.photos.exists %}
|
||||
<div class="p-6 mb-8 bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
@@ -171,7 +204,7 @@
|
||||
{% if park.latitude and park.longitude %}
|
||||
<div class="p-6 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="map" class="relative rounded-lg" style="z-index: 0;"></div>
|
||||
<div id="park-map" class="relative rounded-lg" style="z-index: 0;"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -189,10 +222,14 @@
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
{% for field, changes in record.diff_against_previous.items %}
|
||||
<div class="text-sm">
|
||||
<span class="font-medium">{{ field }}:</span>
|
||||
{{ changes.old }} → {{ changes.new }}
|
||||
</div>
|
||||
{% 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>
|
||||
@@ -203,12 +240,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Photo Upload Modal -->
|
||||
{% if perms.media.add_photo %}
|
||||
<div x-data="{ show: false }"
|
||||
@show-photo-upload.window="show = true"
|
||||
<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 bg-opacity-50"
|
||||
@click.self="show = false">
|
||||
@@ -227,37 +270,13 @@
|
||||
{% if park.latitude and park.longitude %}
|
||||
{% block extra_js %}
|
||||
<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() {
|
||||
// Make map container square based on its width
|
||||
const mapContainer = document.getElementById('map');
|
||||
const width = mapContainer.offsetWidth;
|
||||
mapContainer.style.height = width + 'px';
|
||||
|
||||
const map = L.map('map').setView([{{ park.latitude }}, {{ park.longitude }}], 13);
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© OpenStreetMap contributors'
|
||||
}).addTo(map);
|
||||
|
||||
L.marker([{{ park.latitude }}, {{ park.longitude }}])
|
||||
.addTo(map)
|
||||
.bindPopup("{{ park.name }}");
|
||||
|
||||
// Update map size when window is resized
|
||||
window.addEventListener('resize', function() {
|
||||
const width = mapContainer.offsetWidth;
|
||||
mapContainer.style.height = width + 'px';
|
||||
map.invalidateSize();
|
||||
});
|
||||
initParkMap({{ park.latitude }}, {{ park.longitude }}, "{{ park.name }}");
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% endif %}
|
||||
|
||||
{% block extra_head %}
|
||||
{% if park.latitude and park.longitude %}
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user