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

Refactor templates to utilize AlpineJS for state management and interactions, replacing custom JavaScript. Updated navigation links for parks and rides, streamlined mobile filter functionality, and enhanced advanced search features. Removed legacy JavaScript code for improved performance and maintainability.

Browse Source
This commit is contained in:
pacnpal
2025-09-26 13:43:14 -04:00
parent 9b2124867a
commit 8c0c3df21a
28 changed files with 114 additions and 9888 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
templates/search/advanced_search.html
View File

@@ -298,135 +298,23 @@
</section>
</div>
<!-- Enhanced JavaScript for Advanced Search -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Search type toggle functionality
const searchTypeRadios = document.querySelectorAll('input[name="search_type"]');
const parkFilters = document.getElementById('park-filters');
const rideFilters = document.getElementById('ride-filters');
searchTypeRadios.forEach(radio => {
radio.addEventListener('change', function() {
if (this.value === 'parks') {
parkFilters.classList.remove('hidden');
rideFilters.classList.add('hidden');
} else {
parkFilters.classList.add('hidden');
rideFilters.classList.remove('hidden');
}
// Update radio button visual state
searchTypeRadios.forEach(r => {
const indicator = r.parentElement.querySelector('div div');
if (r.checked) {
indicator.classList.remove('opacity-0');
indicator.classList.add('opacity-100');
} else {
indicator.classList.remove('opacity-100');
indicator.classList.add('opacity-0');
}
});
});
});
// Range slider updates
const rangeInputs = document.querySelectorAll('input[type="range"]');
rangeInputs.forEach(input => {
const updateValue = () => {
const valueSpan = document.getElementById(input.name + '-value');
if (valueSpan) {
let value = input.value;
if (input.name.includes('height')) value += 'ft';
if (input.name.includes('speed')) value += 'mph';
valueSpan.textContent = value;
}
};
input.addEventListener('input', updateValue);
updateValue(); // Initial update
});
// Checkbox styling
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
const customCheckbox = checkbox.parentElement.querySelector('.checkbox-custom');
if (customCheckbox) {
checkbox.addEventListener('change', function() {
if (this.checked) {
customCheckbox.classList.add('checked');
} else {
customCheckbox.classList.remove('checked');
}
});
}
});
// Clear filters functionality
document.getElementById('clear-filters').addEventListener('click', function() {
const form = document.getElementById('advanced-search-form');
form.reset();
// Reset visual states
searchTypeRadios[0].checked = true;
searchTypeRadios[0].dispatchEvent(new Event('change'));
rangeInputs.forEach(input => {
input.value = input.min;
input.dispatchEvent(new Event('input'));
});
checkboxes.forEach(checkbox => {
checkbox.checked = false;
const customCheckbox = checkbox.parentElement.querySelector('.checkbox-custom');
if (customCheckbox) {
customCheckbox.classList.remove('checked');
}
});
// Clear results
document.getElementById('search-results').innerHTML = `
<div class="text-center py-16">
<div class="w-24 h-24 bg-gradient-to-r from-thrill-primary to-purple-500 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-search text-3xl text-white"></i>
</div>
<h3 class="text-2xl font-bold mb-4">Ready to Explore?</h3>
<p class="text-neutral-600 dark:text-neutral-400 max-w-md mx-auto">
Use the filters on the left to discover amazing theme parks and thrilling rides that match your preferences.
</p>
</div>
`;
});
// View toggle functionality
const gridViewBtn = document.getElementById('grid-view');
const listViewBtn = document.getElementById('list-view');
gridViewBtn.addEventListener('click', function() {
this.classList.add('bg-thrill-primary', 'text-white');
this.classList.remove('text-neutral-600', 'dark:text-neutral-400');
listViewBtn.classList.remove('bg-thrill-primary', 'text-white');
listViewBtn.classList.add('text-neutral-600', 'dark:text-neutral-400');
// Update results view
const resultsContainer = document.getElementById('search-results');
resultsContainer.classList.remove('list-view');
resultsContainer.classList.add('grid-view');
});
listViewBtn.addEventListener('click', function() {
this.classList.add('bg-thrill-primary', 'text-white');
this.classList.remove('text-neutral-600', 'dark:text-neutral-400');
gridViewBtn.classList.remove('bg-thrill-primary', 'text-white');
gridViewBtn.classList.add('text-neutral-600', 'dark:text-neutral-400');
// Update results view
const resultsContainer = document.getElementById('search-results');
resultsContainer.classList.remove('grid-view');
resultsContainer.classList.add('list-view');
});
});
</script>
<!-- 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>
<!-- Custom CSS for checkboxes and enhanced styling -->
<style>