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

6
.prettierignore Normal file
View File

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

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'

View File

@@ -1,25 +1,20 @@
{% 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 %} {% endfor %} {% for error in form.non_field_errors %}
{% endfor %}
{% for error in form.non_field_errors %}
<li>{{ error }}</li> <li>{{ error }}</li>
{% endfor %} {% endfor %}
</ul> </ul>
@@ -30,18 +25,14 @@
{% csrf_token %} {% csrf_token %}
<!-- Hidden fields --> <!-- Hidden fields -->
{{ form.country }} {{ form.country }} {{ form.region }} {{ form.city }}
{{ form.region }}
{{ form.city }}
<!-- Name field --> <!-- Name field -->
<div> <div>
<label for="{{ form.name.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300"> <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> </label>
<div> <div>{{ form.name }}</div>
{{ form.name }}
</div>
{% if form.name.errors %} {% if form.name.errors %}
<div class="mt-1 text-sm text-red-600 dark:text-red-400"> <div class="mt-1 text-sm text-red-600 dark:text-red-400">
{{ form.name.errors }} {{ form.name.errors }}
@@ -51,10 +42,14 @@
<!-- Location fields --> <!-- Location fields -->
<div x-data="locationAutocomplete('country', false)" class="relative"> <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"> <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> </label>
<input type="text" <input
type="text"
id="id_country_name" id="id_country_name"
name="country_name" name="country_name"
x-model="query" x-model="query"
@@ -64,25 +59,33 @@
class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white" class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
placeholder="Select country..." placeholder="Select country..."
value="{{ form.country_name.value|default:'' }}" value="{{ form.country_name.value|default:'' }}"
autocomplete="off"> autocomplete="off"
/>
<!-- Suggestions Dropdown --> <!-- Suggestions Dropdown -->
<ul x-show="suggestions.length > 0" <ul
x-show="suggestions.length > 0"
x-cloak 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"> 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"> <template x-for="suggestion in suggestions" :key="suggestion.id">
<li @click="selectSuggestion(suggestion)" <li
@click="selectSuggestion(suggestion)"
x-text="suggestion.name" 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"> class="px-4 py-2 text-gray-700 cursor-pointer dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600"
</li> ></li>
</template> </template>
</ul> </ul>
</div> </div>
<div x-data="locationAutocomplete('region', false)" class="relative"> <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"> <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 Region/State
</label> </label>
<input type="text" <input
type="text"
id="id_region_name" id="id_region_name"
name="region_name" name="region_name"
x-model="query" x-model="query"
@@ -92,25 +95,33 @@
class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white" 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..." placeholder="Select region/state..."
value="{{ form.region_name.value|default:'' }}" value="{{ form.region_name.value|default:'' }}"
autocomplete="off"> autocomplete="off"
/>
<!-- Suggestions Dropdown --> <!-- Suggestions Dropdown -->
<ul x-show="suggestions.length > 0" <ul
x-show="suggestions.length > 0"
x-cloak 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"> 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"> <template x-for="suggestion in suggestions" :key="suggestion.id">
<li @click="selectSuggestion(suggestion)" <li
@click="selectSuggestion(suggestion)"
x-text="suggestion.name" 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"> class="px-4 py-2 text-gray-700 cursor-pointer dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600"
</li> ></li>
</template> </template>
</ul> </ul>
</div> </div>
<div x-data="locationAutocomplete('city', false)" class="relative"> <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"> <label
for="{{ form.city_name.id_for_label }}"
class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300"
>
City City
</label> </label>
<input type="text" <input
type="text"
id="id_city_name" id="id_city_name"
name="city_name" name="city_name"
x-model="query" x-model="query"
@@ -120,77 +131,99 @@
class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white" class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
placeholder="Select city..." placeholder="Select city..."
value="{{ form.city_name.value|default:'' }}" value="{{ form.city_name.value|default:'' }}"
autocomplete="off"> autocomplete="off"
/>
<!-- Suggestions Dropdown --> <!-- Suggestions Dropdown -->
<ul x-show="suggestions.length > 0" <ul
x-show="suggestions.length > 0"
x-cloak 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"> 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"> <template x-for="suggestion in suggestions" :key="suggestion.id">
<li @click="selectSuggestion(suggestion)" <li
@click="selectSuggestion(suggestion)"
x-text="suggestion.name" 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"> class="px-4 py-2 text-gray-700 cursor-pointer dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600"
</li> ></li>
</template> </template>
</ul> </ul>
</div> </div>
<!-- Other fields --> <!-- Other fields -->
{% for field in form %} {% for field in form %} {% if field.name not in 'name,country,region,city,country_name,region_name,city_name' %}
{% if field.name not in 'name,country,region,city,country_name,region_name,city_name' %}
<div> <div>
<label for="{{ field.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300"> <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 %} {{ field.label }}{% if field.field.required %} *{% endif %}
</label> </label>
<div> <div>{{ field }}</div>
{{ field }}
</div>
{% if field.help_text %} {% if field.help_text %}
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ field.help_text }}</p> <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
{% endif %} {{ field.help_text }}
{% if field.errors %} </p>
{% endif %} {% if field.errors %}
<div class="mt-1 text-sm text-red-600 dark:text-red-400"> <div class="mt-1 text-sm text-red-600 dark:text-red-400">
{{ field.errors }} {{ field.errors }}
</div> </div>
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %} {% endfor %} {% if not user.role == 'MODERATOR' and not user.role == 'ADMIN' and not user.role == 'SUPERUSER' %}
{% endfor %} <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"
{% 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>
<p>Your submission will be reviewed by a moderator before being published.</p> Your submission will be reviewed by a moderator before being
published.
</p>
</div> </div>
<div class="space-y-4"> <div class="space-y-4">
<div> <div>
<label for="reason" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300"> <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 %} * Reason for {% if is_edit %}Edit{% else %}Addition{% endif %} *
</label> </label>
<textarea name="reason" <textarea
name="reason"
id="reason" id="reason"
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="3" rows="3"
required required
placeholder="Please explain why you're {% if is_edit %}editing{% else %}adding{% endif %} 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>
<div> <div>
<label for="source" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300"> <label
for="source"
class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300"
>
Source (Optional) Source (Optional)
</label> </label>
<input type="text" <input
type="text"
name="source" name="source"
id="source" id="source"
class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white" 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"> placeholder="Link to official website, news article, or other source"
/>
</div> </div>
</div> </div>
{% endif %} {% endif %}
<div class="flex justify-end space-x-4"> <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 %}" <a
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"> 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 Cancel
</a> </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"> <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 %} {% if is_edit %}Save Changes{% else %}Submit{% endif %}
</button> </button>
</div> </div>

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

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">