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

ok

Browse Source
This commit is contained in:
pacnpal
2024-11-01 03:35:53 +00:00
parent 6265f82193
commit 01c6004a79
5 changed files with 246 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.prettierignore Normal file
View File

@@ -0,0 +1,6 @@
# Ignore artifacts:
build
coverage
# Ignore all HTML files:
**/*.html

2
parks/forms.py
View File

@@ -85,7 +85,7 @@ class ParkForm(forms.ModelForm):
}), }),
'description': forms.Textarea(attrs={ 'description': forms.Textarea(attrs={
'class': 'w-full border-gray-300 rounded-lg form-textarea dark:border-gray-600 dark:bg-gray-700 dark:text-white', 'class': 'w-full border-gray-300 rounded-lg form-textarea dark:border-gray-600 dark:bg-gray-700 dark:text-white',
'rows': 4 'rows': 2
}), }),
'owner': forms.Select(attrs={ 'owner': forms.Select(attrs={
'class': 'w-full border-gray-300 rounded-lg form-select dark:border-gray-600 dark:bg-gray-700 dark:text-white' 'class': 'w-full border-gray-300 rounded-lg form-select dark:border-gray-600 dark:bg-gray-700 dark:text-white'

425
templates/parks/park_form.html
View File

@@ -1,208 +1,241 @@
{% extends 'base/base.html' %} {% extends 'base/base.html' %} {% load static %} {% block title %}{% if is_edit %}Edit {{ object.name }}{% else %}Add Park{% endif %} - ThrillWiki{% endblock %}
{% load static %}
{% block title %}{% if is_edit %}Edit{% else %}Add{% endif %} Park - ThrillWiki{% endblock %}
{% block content %} {% block content %}
<div class="container px-4 mx-auto"> <div class="container px-4 mx-auto">
<div class="max-w-3xl mx-auto"> <div class="max-w-3xl mx-auto">
<!-- Park Form --> <!-- Park Form -->
<div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800"> <div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
<h1 class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">{% if is_edit %}Edit{% else %}Add{% endif %} Park</h1> <h1 class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">
{% if is_edit %}Edit {{ object.name }}{% else %}Add Park{% endif %}
</h1>
{% if form.errors %} {% 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"> <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> <p class="font-medium">Please correct the following errors:</p>
<ul class="ml-4 list-disc"> <ul class="ml-4 list-disc">
{% for field in form %} {% for field in form %} {% for error in field.errors %}
{% for error in field.errors %} <li>{{ field.label }}: {{ error }}</li>
<li>{{ field.label }}: {{ error }}</li> {% endfor %} {% endfor %} {% for error in form.non_field_errors %}
{% endfor %} <li>{{ error }}</li>
{% endfor %} {% endfor %}
{% for error in form.non_field_errors %} </ul>
<li>{{ error }}</li> </div>
{% endfor %} {% endif %}
</ul>
</div>
{% endif %}
<form method="post" class="space-y-6" id="park-form"> <form method="post" class="space-y-6" id="park-form">
{% csrf_token %} {% csrf_token %}
<!-- Hidden fields -->
{{ form.country }}
{{ form.region }}
{{ form.city }}
<!-- 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 *
</label>
<div>
{{ form.name }}
</div>
{% if form.name.errors %}
<div class="mt-1 text-sm text-red-600 dark:text-red-400">
{{ form.name.errors }}
</div>
{% endif %}
</div>
<!-- Location fields --> <!-- Hidden fields -->
<div x-data="locationAutocomplete('country', false)" class="relative"> {{ form.country }} {{ form.region }} {{ form.city }}
<label for="{{ form.country_name.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
Country *
</label>
<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 x-data="locationAutocomplete('region', false)" class="relative"> <!-- Name field -->
<label for="{{ form.region_name.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300"> <div>
Region/State <label for="{{ form.name.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
</label> Name *
<input type="text" </label>
id="id_region_name" <div>{{ form.name }}</div>
name="region_name" {% if form.name.errors %}
x-model="query" <div class="mt-1 text-sm text-red-600 dark:text-red-400">
@input.debounce.300ms="fetchSuggestions()" {{ form.name.errors }}
@focus="fetchSuggestions()" </div>
@click.away="suggestions = []" {% endif %}
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 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>
<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 -->
{% for field in form %}
{% 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 }}{% if field.field.required %} *{% endif %}
</label>
<div>
{{ field }}
</div>
{% if field.help_text %}
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ field.help_text }}</p>
{% endif %}
{% if field.errors %}
<div class="mt-1 text-sm text-red-600 dark:text-red-400">
{{ field.errors }}
</div>
{% endif %}
</div>
{% endif %}
{% 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 {% 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 {% 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">
Source (Optional)
</label>
<input type="text"
name="source"
id="source"
class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
placeholder="Link to official website, news article, or other source">
</div>
</div>
{% endif %}
<div class="flex justify-end space-x-4">
<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">
{% if is_edit %}Save Changes{% else %}Submit{% endif %}
</button>
</div>
</form>
</div> </div>
<!-- Photos Section (only shown on edit) --> <!-- Location fields -->
{% if is_edit %} <div x-data="locationAutocomplete('country', false)" class="relative">
<div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800" id="photos"> <label
{% include "media/partials/photo_manager.html" with photos=object.photos.all content_type="parks.park" object_id=object.id %} for="{{ form.country_name.id_for_label }}"
</div> class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300"
>
Country *
</label>
<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 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>
<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 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>
<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 -->
{% for field in form %} {% 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 }}{% if field.field.required %} *{% endif %}
</label>
<div>{{ field }}</div>
{% if field.help_text %}
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
{{ field.help_text }}
</p>
{% endif %} {% if field.errors %}
<div class="mt-1 text-sm text-red-600 dark:text-red-400">
{{ field.errors }}
</div>
{% endif %}
</div>
{% endif %} {% 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 {% 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 {% 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"
>
Source (Optional)
</label>
<input
type="text"
name="source"
id="source"
class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
placeholder="Link to official website, news article, or other source"
/>
</div>
</div>
{% endif %} {% endif %}
<div class="flex justify-end space-x-4">
<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"
>
{% if is_edit %}Save Changes{% else %}Submit{% endif %}
</button>
</div>
</form>
</div> </div>
<!-- Photos Section (only shown on edit) -->
{% if is_edit %}
<div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800" id="photos">
{% include "media/partials/photo_manager.html" with photos=object.photos.all content_type="parks.park" object_id=object.id %}
</div>
{% endif %}
</div>
</div> </div>
{% endblock %} {% endblock %}

2
templates/parks/park_list.html
View File

@@ -6,7 +6,7 @@
{% block content %} {% block content %}
<div class="container px-4 mx-auto"> <div class="container px-4 mx-auto">
<div class="flex flex-col items-start justify-between gap-4 mb-6 md:flex-row md:items-center"> <div class="flex flex-col items-start justify-between gap-4 mb-6 md:flex-row md:items-center">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">Parks</h1> <h1 class="text-3xl font-bold text-gray-900 dark:text-white">All Parks</h1>
{% if user.is_authenticated %} {% if user.is_authenticated %}
<a href="{% url 'parks:park_create' %}" class="btn-primary"> <a href="{% url 'parks:park_create' %}" class="btn-primary">
<i class="mr-2 fas fa-plus"></i>Add Park <i class="mr-2 fas fa-plus"></i>Add Park

12
templates/rides/ride_form.html
View File

@@ -1,7 +1,7 @@
{% extends 'base/base.html' %} {% extends 'base/base.html' %}
{% load static %} {% load static %}
{% block title %}{% if is_edit %}Edit{% else %}Add{% endif %} Ride at {{ park.name }} - ThrillWiki{% endblock %} {% block title %}{% if is_edit %}Edit {{ ride.name }} {% else %}Add Ride {% endif %}at {{ park.name }} - ThrillWiki{% endblock %}
{% block content %} {% block content %}
<div class="container px-4 mx-auto"> <div class="container px-4 mx-auto">
@@ -9,10 +9,16 @@
<!-- Ride Form --> <!-- Ride Form -->
<div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800"> <div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
<div class="mb-6"> <div class="mb-6">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">{% if is_edit %}Edit{% else %}Add{% endif %} Ride at {{ park.name }}</h1> <h1 class="text-3xl font-bold text-gray-900 dark:text-white">{% if is_edit %}Edit {{ ride.name }}{% else %}Add Ride{% endif %} at {{ park.name }}</h1>
<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"> {% if is_edit %}
<a href="{% url 'parks:rides:ride_detail' ride.park.slug ride.slug %}" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
Back to {{ ride.name }}
</a>
{% else %}
<a href="{% url 'parks:park_detail' park.slug %}" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
Back to {{ park.name }} Rides Back to {{ park.name }} Rides
</a> </a>
{% endif %}
</div> </div>
<form method="post" class="space-y-6"> <form method="post" class="space-y-6">