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

fixed the damn discord button

Browse Source
This commit is contained in:
pacnpal
2024-10-31 16:13:05 +00:00
parent 0075f7da6c
commit c1591af871
31 changed files with 1184 additions and 500 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
templates/parks/park_list.html
View File

@@ -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 %}