mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 11:31:07 -05:00
fixed the damn discord button
This commit is contained in:
pacnpal
37
templates/environment_and_settings.html
Normal file
37
templates/environment_and_settings.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Django Environment and Settings</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Django Environment Variables</h1>
|
||||
<table border="1">
|
||||
<tr>
|
||||
<th>Variable</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
{% for key, value in env_vars.items %}
|
||||
<tr>
|
||||
<td>{{ key }}</td>
|
||||
<td>{{ value }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
|
||||
<h1>Django Settings</h1>
|
||||
<table border="1">
|
||||
<tr>
|
||||
<th>Setting</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
{% for key, value in settings_vars.items %}
|
||||
<tr>
|
||||
<td>{{ key }}</td>
|
||||
<td>{{ value }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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 %}
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<div class="p-4 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<form class="grid grid-cols-1 gap-4 md:grid-cols-3"
|
||||
hx-get="{% url 'parks:park_list' %}"
|
||||
hx-trigger="change from:select, input from:input[type='text']"
|
||||
hx-trigger="change from:select, input[type='text'] delay:500ms"
|
||||
hx-target="#parks-grid"
|
||||
hx-push-url="true">
|
||||
<div>
|
||||
@@ -30,15 +30,10 @@
|
||||
</div>
|
||||
<div>
|
||||
<label for="location" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Location</label>
|
||||
<select name="location" id="location"
|
||||
class="w-full border-gray-300 rounded-lg form-select dark:border-gray-600 dark:bg-gray-700 dark:text-white">
|
||||
<option value="">All Locations</option>
|
||||
{% for location in locations %}
|
||||
<option value="{{ location }}" {% if current_filters.location == location %}selected{% endif %}>
|
||||
{{ location }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<input type="text" name="location" id="location"
|
||||
value="{{ current_filters.location }}"
|
||||
class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
placeholder="Search locations...">
|
||||
</div>
|
||||
<div>
|
||||
<label for="status" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Status</label>
|
||||
@@ -62,3 +57,54 @@
|
||||
</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() {
|
||||
var locationInput = document.getElementById('location');
|
||||
if (locationInput) {
|
||||
var locationList = new Awesomplete(locationInput, {
|
||||
minChars: 1,
|
||||
maxItems: 10,
|
||||
autoFirst: true
|
||||
});
|
||||
|
||||
locationInput.addEventListener('input', function() {
|
||||
fetch(`/parks/ajax/locations/?q=${encodeURIComponent(this.value)}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
locationList.list = data;
|
||||
});
|
||||
});
|
||||
|
||||
// Trigger HTMX request when a location is selected
|
||||
locationInput.addEventListener('awesomplete-select', function(event) {
|
||||
htmx.trigger(this, 'change');
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
4
templates/parks/partials/city_dropdown_list.html
Normal file
4
templates/parks/partials/city_dropdown_list.html
Normal file
@@ -0,0 +1,4 @@
|
||||
<option value="">---------</option>
|
||||
{% for city in cities %}
|
||||
<option value="{{ city.pk }}">{{ city.name }}</option>
|
||||
{% endfor %}
|
||||
4
templates/parks/partials/region_dropdown_list.html
Normal file
4
templates/parks/partials/region_dropdown_list.html
Normal file
@@ -0,0 +1,4 @@
|
||||
<option value="">---------</option>
|
||||
{% for region in regions %}
|
||||
<option value="{{ region.pk }}">{{ region.name }}</option>
|
||||
{% endfor %}
|
||||
Reference in New Issue
Block a user