mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 06:51:08 -05:00
191 lines
9.6 KiB
HTML
191 lines
9.6 KiB
HTML
{% extends 'base/base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Parks - ThrillWiki{% endblock %}
|
|
|
|
{% block content %}
|
|
<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">
|
|
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">Parks</h1>
|
|
{% if user.is_authenticated %}
|
|
<a href="{% url 'parks:park_create' %}" class="btn-primary">
|
|
<i class="mr-2 fas fa-plus"></i>Add Park
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="p-4 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
|
<form id="park-filters" class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4"
|
|
hx-get="{% url 'parks:park_list' %}"
|
|
hx-trigger="change from:select, input from:input[type='text'] delay:500ms, click from:.status-filter"
|
|
hx-target="#parks-grid"
|
|
hx-push-url="true">
|
|
<div>
|
|
<label for="search" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Search</label>
|
|
<input type="text" name="search" id="search"
|
|
value="{{ current_filters.search }}"
|
|
class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="Search parks...">
|
|
</div>
|
|
|
|
<!-- Country Field -->
|
|
<div x-data="locationAutocomplete('country', true)" 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 = []"
|
|
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"
|
|
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"
|
|
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>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Region Field -->
|
|
<div x-data="locationAutocomplete('region', true)" 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 = []"
|
|
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"
|
|
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"
|
|
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>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- City Field -->
|
|
<div x-data="locationAutocomplete('city', true)" 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 = []"
|
|
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"
|
|
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"
|
|
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>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Hidden inputs for selected statuses -->
|
|
{% for status in current_filters.statuses %}
|
|
<input type="hidden" name="status" value="{{ status }}">
|
|
{% endfor %}
|
|
</form>
|
|
|
|
<!-- Status Filter Icons -->
|
|
<div class="flex flex-wrap gap-2 mt-4">
|
|
<label class="block w-full mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Status Filter</label>
|
|
<button type="button"
|
|
class="status-filter status-badge status-operating {% if 'OPERATING' in current_filters.statuses %}ring-2 ring-blue-500{% endif %}"
|
|
data-status="OPERATING"
|
|
onclick="toggleStatus(this, 'OPERATING')">
|
|
<i class="mr-1 fas fa-check-circle"></i>Operating
|
|
</button>
|
|
<button type="button"
|
|
class="status-filter status-badge status-closed {% if 'CLOSED_TEMP' in current_filters.statuses %}ring-2 ring-blue-500{% endif %}"
|
|
data-status="CLOSED_TEMP"
|
|
onclick="toggleStatus(this, 'CLOSED_TEMP')">
|
|
<i class="mr-1 fas fa-clock"></i>Temporarily Closed
|
|
</button>
|
|
<button type="button"
|
|
class="status-filter status-badge status-closed {% if 'CLOSED_PERM' in current_filters.statuses %}ring-2 ring-blue-500{% endif %}"
|
|
data-status="CLOSED_PERM"
|
|
onclick="toggleStatus(this, 'CLOSED_PERM')">
|
|
<i class="mr-1 fas fa-times-circle"></i>Permanently Closed
|
|
</button>
|
|
<button type="button"
|
|
class="status-filter status-badge status-construction {% if 'UNDER_CONSTRUCTION' in current_filters.statuses %}ring-2 ring-blue-500{% endif %}"
|
|
data-status="UNDER_CONSTRUCTION"
|
|
onclick="toggleStatus(this, 'UNDER_CONSTRUCTION')">
|
|
<i class="mr-1 fas fa-hard-hat"></i>Under Construction
|
|
</button>
|
|
<button type="button"
|
|
class="status-filter status-badge status-demolished {% if 'DEMOLISHED' in current_filters.statuses %}ring-2 ring-blue-500{% endif %}"
|
|
data-status="DEMOLISHED"
|
|
onclick="toggleStatus(this, 'DEMOLISHED')">
|
|
<i class="mr-1 fas fa-ban"></i>Demolished
|
|
</button>
|
|
<button type="button"
|
|
class="status-filter status-badge status-relocated {% if 'RELOCATED' in current_filters.statuses %}ring-2 ring-blue-500{% endif %}"
|
|
data-status="RELOCATED"
|
|
onclick="toggleStatus(this, 'RELOCATED')">
|
|
<i class="mr-1 fas fa-truck-moving"></i>Relocated
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Parks Grid -->
|
|
<div id="parks-grid">
|
|
{% include "parks/partials/park_list.html" %}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleStatus(button, status) {
|
|
const form = document.getElementById('park-filters');
|
|
const existingInputs = form.querySelectorAll(`input[name="status"][value="${status}"]`);
|
|
|
|
if (existingInputs.length > 0) {
|
|
// Status is already selected, remove it
|
|
existingInputs.forEach(input => input.remove());
|
|
button.classList.remove('ring-2', 'ring-blue-500');
|
|
} else {
|
|
// Status is not selected, add it
|
|
const input = document.createElement('input');
|
|
input.type = 'hidden';
|
|
input.name = 'status';
|
|
input.value = status;
|
|
form.appendChild(input);
|
|
button.classList.add('ring-2', 'ring-blue-500');
|
|
}
|
|
|
|
// Trigger form submission
|
|
form.dispatchEvent(new Event('change'));
|
|
}
|
|
</script>
|
|
{% endblock %}
|