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

okay fine

Browse Source
This commit is contained in:
pacnpal
2024-11-03 17:47:26 +00:00
parent 387c4740e7
commit 27f3326e22
10020 changed files with 1935769 additions and 2364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
templates/parks/park_list.html
View File

@@ -30,26 +30,26 @@
</div>
<!-- Country Field -->
<div x-data="locationAutocomplete('country', true)" class="relative">
<div x-data="locationSearch('country')" class="relative">
<label for="country" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Country</label>
<input type="text"
name="country"
id="country"
x-model="query"
@input.debounce.300ms="fetchSuggestions()"
@focus="fetchSuggestions()"
@click.away="suggestions = []"
@input.debounce.300ms="search()"
@focus="search()"
@click.away="results = []"
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="{{ current_filters.country }}"
autocomplete="off">
<!-- Suggestions Dropdown -->
<ul x-show="suggestions.length > 0"
<!-- Results Dropdown -->
<ul x-show="results.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"
<template x-for="result in results" :key="result.address.country">
<li @click="select(result)"
x-text="result.address.country"
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>
@@ -57,26 +57,26 @@
</div>
<!-- Region Field -->
<div x-data="locationAutocomplete('region', true)" class="relative">
<div x-data="locationSearch('state')" class="relative">
<label for="region" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">State/Region</label>
<input type="text"
name="region"
id="region"
x-model="query"
@input.debounce.300ms="fetchSuggestions()"
@focus="fetchSuggestions()"
@click.away="suggestions = []"
@input.debounce.300ms="search()"
@focus="search()"
@click.away="results = []"
class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
placeholder="Select state/region..."
value="{{ current_filters.region }}"
autocomplete="off">
<!-- Suggestions Dropdown -->
<ul x-show="suggestions.length > 0"
<!-- Results Dropdown -->
<ul x-show="results.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"
<template x-for="result in results" :key="result.address.state">
<li @click="select(result)"
x-text="result.address.state"
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>
@@ -84,26 +84,26 @@
</div>
<!-- City Field -->
<div x-data="locationAutocomplete('city', true)" class="relative">
<div x-data="locationSearch('city')" class="relative">
<label for="city" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">City</label>
<input type="text"
name="city"
id="city"
x-model="query"
@input.debounce.300ms="fetchSuggestions()"
@focus="fetchSuggestions()"
@click.away="suggestions = []"
@input.debounce.300ms="search()"
@focus="search()"
@click.away="results = []"
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="{{ current_filters.city }}"
autocomplete="off">
<!-- Suggestions Dropdown -->
<ul x-show="suggestions.length > 0"
<!-- Results Dropdown -->
<ul x-show="results.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"
<template x-for="result in results" :key="result.address.city">
<li @click="select(result)"
x-text="result.address.city"
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>
@@ -165,6 +165,45 @@
</div>
<script>
function locationSearch(type) {
return {
query: '',
results: [],
async search() {
if (!this.query.trim()) {
this.results = [];
return;
}
try {
const response = await fetch(`/location/search/?q=${encodeURIComponent(this.query)}&type=${type}&filter_parks=true`);
const data = await response.json();
this.results = data.results;
} catch (error) {
console.error('Search failed:', error);
this.results = [];
}
},
select(result) {
let value = '';
switch (type) {
case 'country':
value = result.address.country;
break;
case 'state':
value = result.address.state;
break;
case 'city':
value = result.address.city;
break;
}
this.query = value;
this.results = [];
document.getElementById('park-filters').dispatchEvent(new Event('change'));
}
};
}
function toggleStatus(button, status) {
const form = document.getElementById('park-filters');
const existingInputs = form.querySelectorAll(`input[name="status"][value="${status}"]`);