mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-21 16:11:09 -05:00
1208af9696
Correctly initialize Alpine.js components by removing unnecessary function calls, ensuring proper scope and state management for UI elements like modals, search, theme toggles, and forms. Replit-Commit-Author: Agent Replit-Commit-Session-Id: eff39de1-3afa-446d-a965-acaf61837fc7 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/eff39de1-3afa-446d-a965-acaf61837fc7/cGHPY6T
322 lines
14 KiB
HTML
322 lines
14 KiB
HTML
{% extends "base/base.html" %}
|
|
{% load static %}
|
|
|
|
{% block extra_head %}
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<style>
|
|
.photo-preview {
|
|
transition: all 0.3s ease;
|
|
}
|
|
.photo-preview.uploading {
|
|
opacity: 0.5;
|
|
}
|
|
.photo-preview.error {
|
|
border-color: red;
|
|
}
|
|
.photo-preview.success {
|
|
border-color: green;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container px-4 py-8 mx-auto">
|
|
<div class="max-w-4xl mx-auto">
|
|
<h1 class="mb-6 text-3xl font-bold">
|
|
{% if is_edit %}Edit{% else %}Create{% endif %} Park
|
|
</h1>
|
|
|
|
<form method="post" enctype="multipart/form-data" class="space-y-6" x-data="parkForm">
|
|
{% csrf_token %}
|
|
|
|
{# Basic Information #}
|
|
<div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
|
<h2 class="mb-4 text-xl font-semibold">Basic Information</h2>
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<div class="col-span-2">
|
|
<label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Name
|
|
</label>
|
|
{{ form.name }}
|
|
</div>
|
|
<div class="col-span-2">
|
|
<label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Description
|
|
</label>
|
|
{{ form.description }}
|
|
</div>
|
|
<div>
|
|
<label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Owner/Operator
|
|
</label>
|
|
{{ form.owner }}
|
|
</div>
|
|
<div>
|
|
<label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Status
|
|
</label>
|
|
{{ form.status }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Location #}
|
|
<div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
|
<h2 class="mb-4 text-xl font-semibold">Location</h2>
|
|
{% include "parks/partials/location_widget.html" %}
|
|
</div>
|
|
|
|
{# Photos #}
|
|
<div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
|
<h2 class="mb-4 text-xl font-semibold">Photos</h2>
|
|
|
|
{# Existing Photos #}
|
|
{% if park.photos.exists %}
|
|
<div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{% for photo in park.photos.all %}
|
|
<div class="relative overflow-hidden rounded-lg aspect-w-16 aspect-h-9">
|
|
<img src="{{ photo.image.url }}"
|
|
alt="{{ photo.caption|default:park.name }}"
|
|
class="object-cover w-full h-full">
|
|
<div class="absolute top-0 right-0 p-2">
|
|
<button type="button"
|
|
class="p-2 text-white bg-red-600 rounded-full hover:bg-red-700"
|
|
@click="removePhoto('{{ photo.id }}')">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Photo Upload #}
|
|
<div class="space-y-4">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Add Photos
|
|
</label>
|
|
<div class="relative">
|
|
<input type="file"
|
|
multiple
|
|
accept="image/*"
|
|
class="hidden"
|
|
x-ref="fileInput"
|
|
@change="handleFileSelect">
|
|
<button type="button"
|
|
class="w-full px-4 py-2 text-gray-700 border-2 border-dashed rounded-lg dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
|
|
@click="$refs.fileInput.click()">
|
|
<span x-show="!previews.length">
|
|
<i class="mr-2 fas fa-upload"></i>
|
|
Click to upload photos
|
|
</span>
|
|
<span x-show="previews.length">
|
|
<i class="mr-2 fas fa-plus"></i>
|
|
Add more photos
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
{# Photo Previews #}
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
<template x-for="(preview, index) in previews" :key="preview.id">
|
|
<div class="relative overflow-hidden transition-all duration-300 rounded-lg aspect-w-16 aspect-h-9 photo-preview"
|
|
:class="{
|
|
'uploading': preview.uploading,
|
|
'error': preview.error,
|
|
'success': preview.uploaded
|
|
}">
|
|
<img :src="preview.url"
|
|
class="object-cover w-full h-full">
|
|
<div class="absolute top-0 right-0 p-2">
|
|
<button type="button"
|
|
class="p-2 text-white bg-red-600 rounded-full hover:bg-red-700"
|
|
@click="removePreview(index)">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div x-show="preview.uploading"
|
|
class="absolute inset-0 flex items-center justify-center bg-black/50">
|
|
<div class="w-16 h-16 border-4 border-blue-500 rounded-full animate-spin border-t-transparent"></div>
|
|
</div>
|
|
<div x-show="preview.error"
|
|
class="absolute bottom-0 left-0 right-0 p-2 text-sm text-white bg-red-500">
|
|
Upload failed
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Additional Details #}
|
|
<div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
|
<h2 class="mb-4 text-xl font-semibold">Additional Details</h2>
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<div>
|
|
<label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Opening Date
|
|
</label>
|
|
{{ form.opening_date }}
|
|
</div>
|
|
<div>
|
|
<label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Closing Date
|
|
</label>
|
|
{{ form.closing_date }}
|
|
</div>
|
|
<div>
|
|
<label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Operating Season
|
|
</label>
|
|
{{ form.operating_season }}
|
|
</div>
|
|
<div>
|
|
<label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Size (acres)
|
|
</label>
|
|
{{ form.size_acres }}
|
|
</div>
|
|
<div class="col-span-2">
|
|
<label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Website
|
|
</label>
|
|
{{ form.website }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Submission Details #}
|
|
<div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
|
<h2 class="mb-4 text-xl font-semibold">Submission Details</h2>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Reason for Changes
|
|
</label>
|
|
<textarea name="reason" rows="2"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg form-textarea dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="Explain why you're making these changes"></textarea>
|
|
</div>
|
|
<div>
|
|
<label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Source
|
|
</label>
|
|
<input type="text" name="source"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="Where did you get this information?">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Submit Button #}
|
|
<div class="flex justify-end">
|
|
<button type="submit"
|
|
class="px-6 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800"
|
|
:disabled="uploading"
|
|
x-text="uploading ? 'Uploading...' : '{% if is_edit %}Save Changes{% else %}Create Park{% endif %}'">
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script>
|
|
function parkForm() {
|
|
return {
|
|
previews: [],
|
|
uploading: false,
|
|
|
|
handleFileSelect(event) {
|
|
const files = event.target.files;
|
|
if (!files.length) return;
|
|
|
|
for (let i = 0; i < files.length; i++) {
|
|
const file = files[i];
|
|
if (!file.type.startsWith('image/')) continue;
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
this.previews.push({
|
|
id: Date.now() + i,
|
|
file: file,
|
|
url: e.target.result,
|
|
uploading: false,
|
|
uploaded: false,
|
|
error: false
|
|
});
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
|
|
// Reset file input
|
|
event.target.value = '';
|
|
},
|
|
|
|
removePreview(index) {
|
|
this.previews.splice(index, 1);
|
|
},
|
|
|
|
async uploadPhotos() {
|
|
if (!this.previews.length) return true;
|
|
|
|
this.uploading = true;
|
|
let allUploaded = true;
|
|
|
|
for (let preview of this.previews) {
|
|
if (preview.uploaded || preview.error) continue;
|
|
|
|
preview.uploading = true;
|
|
const formData = new FormData();
|
|
formData.append('image', preview.file);
|
|
formData.append('app_label', 'parks');
|
|
formData.append('model', 'park');
|
|
formData.append('object_id', '{{ park.id }}');
|
|
|
|
try {
|
|
const response = await fetch('/photos/upload/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
|
|
},
|
|
body: formData
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Upload failed');
|
|
|
|
const result = await response.json();
|
|
preview.uploading = false;
|
|
preview.uploaded = true;
|
|
} catch (error) {
|
|
console.error('Upload failed:', error);
|
|
preview.uploading = false;
|
|
preview.error = true;
|
|
allUploaded = false;
|
|
}
|
|
}
|
|
|
|
this.uploading = false;
|
|
return allUploaded;
|
|
},
|
|
|
|
removePhoto(photoId) {
|
|
if (confirm('Are you sure you want to remove this photo?')) {
|
|
fetch(`/photos/${photoId}/delete/`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
|
|
},
|
|
}).then(response => {
|
|
if (response.ok) {
|
|
window.location.reload();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|