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

Refactor moderation dashboard and advanced search components to utilize Alpine.js for improved state management. Enhanced event handling and user experience by replacing legacy JavaScript functions with Alpine.js reactive methods. Updated auth modal comparison and button comparison tests to leverage Alpine.js for better interactivity and functionality.

Browse Source
This commit is contained in:
pacnpal
2025-09-26 14:48:13 -04:00
parent e53414d795
commit f7b1296263
4 changed files with 469 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
templates/search/advanced_search.html
View File

@@ -7,7 +7,7 @@
{% block content %}
<!-- Advanced Search Page -->
<div class="min-h-screen bg-gradient-to-br from-white via-blue-50/30 to-indigo-50/30 dark:from-gray-950 dark:via-indigo-950/30 dark:to-purple-950/30">
<div class="min-h-screen bg-gradient-to-br from-white via-blue-50/30 to-indigo-50/30 dark:from-gray-950 dark:via-indigo-950/30 dark:to-purple-950/30" x-data="advancedSearch()">
<!-- Search Header -->
<section class="py-16 bg-gradient-to-r from-thrill-primary/10 via-purple-500/10 to-pink-500/10 backdrop-blur-sm">
@@ -238,7 +238,8 @@
<!-- Clear Filters -->
<button type="button"
id="clear-filters"
class="btn-ghost w-full">
class="btn-ghost w-full"
@click="clearFilters()">
<i class="fas fa-times mr-2"></i>
Clear All Filters
</button>
@@ -259,10 +260,10 @@
<!-- View Toggle -->
<div class="flex items-center space-x-2 bg-white dark:bg-neutral-800 rounded-lg p-1 border border-neutral-200 dark:border-neutral-700">
<button class="p-2 rounded-md bg-thrill-primary text-white" id="grid-view">
<button class="p-2 rounded-md bg-thrill-primary text-white" id="grid-view" @click="setViewMode('grid')">
<i class="fas fa-th-large"></i>
</button>
<button class="p-2 rounded-md text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-700" id="list-view">
<button class="p-2 rounded-md text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-700" id="list-view" @click="setViewMode('list')">
<i class="fas fa-list"></i>
</button>
</div>
@@ -299,22 +300,150 @@
</div>
<!-- AlpineJS Advanced Search Component (HTMX + AlpineJS Only) -->
<div x-data="{
searchType: 'parks',
viewMode: 'grid',
toggleSearchType(type) {
this.searchType = type;
},
clearFilters() {
document.getElementById('advanced-search-form').reset();
this.searchType = 'parks';
},
setViewMode(mode) {
this.viewMode = mode;
}
}" style="display: none;">
<!-- Advanced search functionality handled by AlpineJS + HTMX -->
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('advancedSearch', () => ({
searchType: 'parks',
viewMode: 'grid',
init() {
// Initialize range sliders
this.updateRangeValues();
this.setupRadioButtons();
this.setupCheckboxes();
},
toggleSearchType(type) {
this.searchType = type;
const parkFilters = this.$el.querySelector('#park-filters');
const rideFilters = this.$el.querySelector('#ride-filters');
if (type === 'parks') {
parkFilters?.classList.remove('hidden');
rideFilters?.classList.add('hidden');
} else {
parkFilters?.classList.add('hidden');
rideFilters?.classList.remove('hidden');
}
},
clearFilters() {
const form = this.$el.querySelector('#advanced-search-form');
if (form) {
form.reset();
this.searchType = 'parks';
this.toggleSearchType('parks');
this.updateRangeValues();
this.setupRadioButtons();
this.setupCheckboxes();
}
},
setViewMode(mode) {
this.viewMode = mode;
const gridBtn = this.$el.querySelector('#grid-view');
const listBtn = this.$el.querySelector('#list-view');
const resultsContainer = this.$el.querySelector('#search-results');
if (mode === 'grid') {
gridBtn?.classList.add('bg-thrill-primary', 'text-white');
gridBtn?.classList.remove('text-neutral-600', 'dark:text-neutral-400', 'hover:bg-neutral-100', 'dark:hover:bg-neutral-700');
listBtn?.classList.remove('bg-thrill-primary', 'text-white');
listBtn?.classList.add('text-neutral-600', 'dark:text-neutral-400', 'hover:bg-neutral-100', 'dark:hover:bg-neutral-700');
resultsContainer?.classList.remove('list-view');
resultsContainer?.classList.add('grid-view');
} else {
listBtn?.classList.add('bg-thrill-primary', 'text-white');
listBtn?.classList.remove('text-neutral-600', 'dark:text-neutral-400', 'hover:bg-neutral-100', 'dark:hover:bg-neutral-700');
gridBtn?.classList.remove('bg-thrill-primary', 'text-white');
gridBtn?.classList.add('text-neutral-600', 'dark:text-neutral-400', 'hover:bg-neutral-100', 'dark:hover:bg-neutral-700');
resultsContainer?.classList.remove('grid-view');
resultsContainer?.classList.add('list-view');
}
},
updateRangeValues() {
const minRidesSlider = this.$el.querySelector('input[name="min_rides"]');
const minRidesValue = this.$el.querySelector('#min-rides-value');
const minHeightSlider = this.$el.querySelector('input[name="min_height"]');
const minHeightValue = this.$el.querySelector('#min-height-value');
const minSpeedSlider = this.$el.querySelector('input[name="min_speed"]');
const minSpeedValue = this.$el.querySelector('#min-speed-value');
if (minRidesSlider && minRidesValue) {
minRidesValue.textContent = minRidesSlider.value;
minRidesSlider.addEventListener('input', (e) => {
minRidesValue.textContent = e.target.value;
});
}
if (minHeightSlider && minHeightValue) {
minHeightValue.textContent = minHeightSlider.value + 'ft';
minHeightSlider.addEventListener('input', (e) => {
minHeightValue.textContent = e.target.value + 'ft';
});
}
if (minSpeedSlider && minSpeedValue) {
minSpeedValue.textContent = minSpeedSlider.value + 'mph';
minSpeedSlider.addEventListener('input', (e) => {
minSpeedValue.textContent = e.target.value + 'mph';
});
}
},
setupRadioButtons() {
const radioButtons = this.$el.querySelectorAll('input[type="radio"]');
radioButtons.forEach(radio => {
const indicator = radio.parentElement.querySelector('div');
const dot = indicator?.querySelector('div');
if (radio.checked && dot) {
dot.style.opacity = '1';
}
radio.addEventListener('change', () => {
// Reset all radio buttons in the same group
const groupName = radio.name;
const groupRadios = this.$el.querySelectorAll(`input[name="${groupName}"]`);
groupRadios.forEach(groupRadio => {
const groupIndicator = groupRadio.parentElement.querySelector('div');
const groupDot = groupIndicator?.querySelector('div');
if (groupDot) {
groupDot.style.opacity = groupRadio.checked ? '1' : '0';
}
});
if (radio.name === 'search_type') {
this.toggleSearchType(radio.value);
}
});
});
},
setupCheckboxes() {
const checkboxes = this.$el.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
const customCheckbox = checkbox.parentElement.querySelector('.checkbox-custom');
if (checkbox.checked && customCheckbox) {
customCheckbox.classList.add('checked');
}
checkbox.addEventListener('change', () => {
if (customCheckbox) {
if (checkbox.checked) {
customCheckbox.classList.add('checked');
} else {
customCheckbox.classList.remove('checked');
}
}
});
});
}
}));
});
</script>
<!-- Custom CSS for checkboxes and enhanced styling -->
<style>