pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-20 06:31:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

here we go

Browse Source
This commit is contained in:
pacnpal
2024-10-31 22:32:01 +00:00
parent 71272e36a6
commit 3cbda93094
68 changed files with 3114 additions and 1485 deletions
Download Patch File Download Diff File Expand all files Collapse all files

233
templates/parks/park_form.html
View File

@@ -1,15 +1,31 @@
{% extends 'base/base.html' %}
{% load static %}
{% block title %}Add Park - ThrillWiki{% endblock %}
{% block title %}{% if is_edit %}Edit{% else %}Add{% endif %} Park - ThrillWiki{% endblock %}
{% block content %}
<div class="container px-4 mx-auto">
<div class="max-w-3xl mx-auto">
<div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
<h1 class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">Add Park</h1>
<h1 class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">{% if is_edit %}Edit{% else %}Add{% endif %} Park</h1>
<form method="post" class="space-y-6">
{% if form.errors %}
<div class="p-4 mb-6 text-red-700 bg-red-100 border border-red-400 rounded-lg dark:bg-red-900 dark:text-red-100 dark:border-red-700">
<p class="font-medium">Please correct the following errors:</p>
<ul class="ml-4 list-disc">
{% for field in form %}
{% for error in field.errors %}
<li>{{ field.label }}: {{ error }}</li>
{% endfor %}
{% endfor %}
{% for error in form.non_field_errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
<form method="post" class="space-y-6" id="park-form">
{% csrf_token %}
<!-- Hidden fields -->
@@ -20,7 +36,7 @@
<!-- Name field -->
<div>
<label for="{{ form.name.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
Name
Name *
</label>
<div>
{{ form.name }}
@@ -33,46 +49,88 @@
</div>
<!-- Location fields -->
<div>
<div x-data="locationAutocomplete('country', false)" class="relative">
<label for="{{ form.country_name.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
Country
Country *
</label>
<div>
{{ form.country_name }}
</div>
{% if form.country_name.errors %}
<div class="mt-1 text-sm text-red-600 dark:text-red-400">
{{ form.country_name.errors }}
</div>
{% endif %}
<input type="text"
id="id_country_name"
name="country_name"
x-model="query"
@input.debounce.300ms="fetchSuggestions()"
@focus="fetchSuggestions()"
@click.away="suggestions = []"
class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
placeholder="Select country..."
value="{{ form.country_name.value|default:'' }}"
autocomplete="off">
<!-- Suggestions Dropdown -->
<ul x-show="suggestions.length > 0"
x-cloak
class="absolute z-50 w-full py-1 mt-1 overflow-auto bg-white rounded-md shadow-lg dark:bg-gray-700 max-h-60">
<template x-for="suggestion in suggestions" :key="suggestion.id">
<li @click="selectSuggestion(suggestion)"
x-text="suggestion.name"
class="px-4 py-2 text-gray-700 cursor-pointer dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600">
</li>
</template>
</ul>
</div>
<div>
<div x-data="locationAutocomplete('region', false)" class="relative">
<label for="{{ form.region_name.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
Region/State
</label>
<div>
{{ form.region_name }}
</div>
{% if form.region_name.errors %}
<div class="mt-1 text-sm text-red-600 dark:text-red-400">
{{ form.region_name.errors }}
</div>
{% endif %}
<input type="text"
id="id_region_name"
name="region_name"
x-model="query"
@input.debounce.300ms="fetchSuggestions()"
@focus="fetchSuggestions()"
@click.away="suggestions = []"
class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
placeholder="Select region/state..."
value="{{ form.region_name.value|default:'' }}"
autocomplete="off">
<!-- Suggestions Dropdown -->
<ul x-show="suggestions.length > 0"
x-cloak
class="absolute z-50 w-full py-1 mt-1 overflow-auto bg-white rounded-md shadow-lg dark:bg-gray-700 max-h-60">
<template x-for="suggestion in suggestions" :key="suggestion.id">
<li @click="selectSuggestion(suggestion)"
x-text="suggestion.name"
class="px-4 py-2 text-gray-700 cursor-pointer dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600">
</li>
</template>
</ul>
</div>
<div>
<div x-data="locationAutocomplete('city', false)" class="relative">
<label for="{{ form.city_name.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
City
</label>
<div>
{{ form.city_name }}
</div>
{% if form.city_name.errors %}
<div class="mt-1 text-sm text-red-600 dark:text-red-400">
{{ form.city_name.errors }}
</div>
{% endif %}
<input type="text"
id="id_city_name"
name="city_name"
x-model="query"
@input.debounce.300ms="fetchSuggestions()"
@focus="fetchSuggestions()"
@click.away="suggestions = []"
class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
placeholder="Select city..."
value="{{ form.city_name.value|default:'' }}"
autocomplete="off">
<!-- Suggestions Dropdown -->
<ul x-show="suggestions.length > 0"
x-cloak
class="absolute z-50 w-full py-1 mt-1 overflow-auto bg-white rounded-md shadow-lg dark:bg-gray-700 max-h-60">
<template x-for="suggestion in suggestions" :key="suggestion.id">
<li @click="selectSuggestion(suggestion)"
x-text="suggestion.name"
class="px-4 py-2 text-gray-700 cursor-pointer dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600">
</li>
</template>
</ul>
</div>
<!-- Other fields -->
@@ -80,7 +138,7 @@
{% if field.name not in 'name,country,region,city,country_name,region_name,city_name' %}
<div>
<label for="{{ field.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
{{ field.label }}
{{ field.label }}{% if field.field.required %} *{% endif %}
</label>
<div>
{{ field }}
@@ -98,17 +156,20 @@
{% endfor %}
{% if not user.role == 'MODERATOR' and not user.role == 'ADMIN' and not user.role == 'SUPERUSER' %}
<div class="p-4 mb-4 text-blue-700 bg-blue-100 border border-blue-400 rounded-lg dark:bg-blue-900 dark:text-blue-100 dark:border-blue-700">
<p>Your submission will be reviewed by a moderator before being published.</p>
</div>
<div class="space-y-4">
<div>
<label for="reason" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
Reason for Addition
Reason for {% if is_edit %}Edit{% else %}Addition{% endif %} *
</label>
<textarea name="reason"
id="reason"
class="w-full border-gray-300 rounded-lg form-textarea dark:border-gray-600 dark:bg-gray-700 dark:text-white"
rows="3"
required
placeholder="Please explain why you're adding this park and provide any relevant details."></textarea>
placeholder="Please explain why you're {% if is_edit %}editing{% else %}adding{% endif %} this park and provide any relevant details."></textarea>
</div>
<div>
<label for="source" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
@@ -124,11 +185,12 @@
{% endif %}
<div class="flex justify-end space-x-4">
<a href="{% url 'parks:park_list' %}" class="px-4 py-2 text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500">
<a href="{% if is_edit %}{% url 'parks:park_detail' slug=object.slug %}{% else %}{% url 'parks:park_list' %}{% endif %}"
class="px-4 py-2 text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500">
Cancel
</a>
<button type="submit" class="px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">
Submit
{% if is_edit %}Save Changes{% else %}Submit{% endif %}
</button>
</div>
</form>
@@ -136,100 +198,3 @@
</div>
</div>
{% endblock %}
{% block extra_css %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.css" />
<style>
.awesomplete {
width: 100%;
}
.awesomplete > ul {
@apply bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg;
}
.awesomplete > ul > li {
@apply px-4 py-2 cursor-pointer text-gray-700 dark:text-gray-300;
}
.awesomplete > ul > li:hover,
.awesomplete > ul > li[aria-selected="true"] {
@apply bg-gray-100 dark:bg-gray-600;
}
.awesomplete mark {
@apply bg-blue-100 dark:bg-blue-900;
}
</style>
{% endblock %}
{% block extra_js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Helper function to initialize Awesomplete
function initAwesomplete(input, url, params = {}) {
if (!input) return null;
var awesomplete = new Awesomplete(input, {
minChars: 1,
maxItems: 10,
autoFirst: true
});
input.addEventListener('input', function() {
// Build query parameters
const queryParams = new URLSearchParams({
q: this.value,
...Object.fromEntries(
Object.entries(params).map(([key, value]) => [key, typeof value === 'function' ? value() : value])
)
});
fetch(`${url}?${queryParams}`)
.then(response => response.json())
.then(data => {
awesomplete.list = data;
});
});
return awesomplete;
}
// Initialize Awesomplete for each location field
var countryInput = document.getElementById('id_country_name');
var regionInput = document.getElementById('id_region_name');
var cityInput = document.getElementById('id_city_name');
var countryHidden = document.getElementById('id_country');
var regionHidden = document.getElementById('id_region');
var cityHidden = document.getElementById('id_city');
var countryAwesomplete = initAwesomplete(countryInput, '/parks/ajax/countries/');
if (regionInput) {
var regionAwesomplete = initAwesomplete(regionInput, '/parks/ajax/regions/', {
country: () => countryInput ? countryInput.value : ''
});
// Clear dependent fields when country changes
countryInput.addEventListener('awesomplete-select', function(event) {
regionInput.value = '';
regionHidden.value = '';
if (cityInput) {
cityInput.value = '';
cityHidden.value = '';
}
});
}
if (cityInput) {
var cityAwesomplete = initAwesomplete(cityInput, '/parks/ajax/cities/', {
country: () => countryInput ? countryInput.value : '',
region: () => regionInput ? regionInput.value : ''
});
// Clear city when region changes
regionInput.addEventListener('awesomplete-select', function(event) {
cityInput.value = '';
cityHidden.value = '';
});
}
});
</script>
{% endblock %}