mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-23 11:11:10 -05:00
fixed the damn discord button
This commit is contained in:
pacnpal
@@ -12,57 +12,89 @@
|
||||
<form method="post" class="space-y-6">
|
||||
{% csrf_token %}
|
||||
|
||||
{% for field in form %}
|
||||
<!-- Hidden fields -->
|
||||
{{ form.country }}
|
||||
{{ form.region }}
|
||||
{{ form.city }}
|
||||
|
||||
<!-- Name field -->
|
||||
<div>
|
||||
<label for="{{ field.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ field.label }}
|
||||
<label for="{{ form.name.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Name
|
||||
</label>
|
||||
{% if field.name == 'country' %}
|
||||
<div class="relative">
|
||||
<input type="text"
|
||||
name="{{ field.name }}"
|
||||
id="country-input"
|
||||
value="{{ field.value|default:'' }}"
|
||||
class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
hx-get="{% url 'parks:search_countries' %}"
|
||||
hx-trigger="keyup changed delay:200ms"
|
||||
hx-target="#country-results"
|
||||
hx-params="q"
|
||||
{% if field.field.required %}required{% endif %}>
|
||||
<div id="country-results" class="relative"></div>
|
||||
</div>
|
||||
{% elif field.field.widget.input_type == 'text' or field.field.widget.input_type == 'date' %}
|
||||
<input type="{{ field.field.widget.input_type }}"
|
||||
name="{{ field.name }}"
|
||||
id="{{ field.id_for_label }}"
|
||||
value="{{ field.value|default:'' }}"
|
||||
class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
{% if field.field.required %}required{% endif %}>
|
||||
{% elif field.field.widget.input_type == 'select' %}
|
||||
<select name="{{ field.name }}"
|
||||
id="{{ field.id_for_label }}"
|
||||
class="w-full border-gray-300 rounded-lg form-select dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
{% if field.field.required %}required{% endif %}>
|
||||
{% for value, label in field.field.choices %}
|
||||
<option value="{{ value }}" {% if field.value == value %}selected{% endif %}>{{ label }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% elif field.field.widget.input_type == 'textarea' %}
|
||||
<textarea name="{{ field.name }}"
|
||||
id="{{ field.id_for_label }}"
|
||||
class="w-full border-gray-300 rounded-lg form-textarea dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
rows="4"
|
||||
{% if field.field.required %}required{% endif %}>{{ field.value|default:'' }}</textarea>
|
||||
{% endif %}
|
||||
{% 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>
|
||||
{{ form.name }}
|
||||
</div>
|
||||
{% if form.name.errors %}
|
||||
<div class="mt-1 text-sm text-red-600 dark:text-red-400">
|
||||
{{ field.errors }}
|
||||
{{ form.name.errors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Location fields -->
|
||||
<div>
|
||||
<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>
|
||||
<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 %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<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 %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<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 %}
|
||||
</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 }}
|
||||
</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' %}
|
||||
@@ -104,3 +136,100 @@
|
||||
</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 %}
|
||||
|
||||
Reference in New Issue
Block a user