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

Refactor ride filters and forms to use AlpineJS for state management and HTMX for AJAX interactions

Browse Source 
- Enhanced filter sidebar with AlpineJS for collapsible sections and localStorage persistence.
- Removed custom JavaScript in favor of AlpineJS for managing filter states and interactions.
- Updated ride form to utilize AlpineJS for handling manufacturer, designer, and ride model selections.
- Simplified search script to leverage AlpineJS for managing search input and suggestions.
- Improved error handling for HTMX requests with minimal JavaScript.
- Refactored ride form data handling to encapsulate logic within an AlpineJS component.
This commit is contained in:
pacnpal
2025-09-26 15:25:12 -04:00
parent c437ddbf28
commit de8b6f67a3
8 changed files with 706 additions and 1172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
templates/rides/partials/ride_form.html
View File

@@ -11,25 +11,27 @@ document.addEventListener('alpine:init', () => {
},
selectManufacturer(id, name) {
const manufacturerInput = document.getElementById('id_manufacturer');
const manufacturerSearch = document.getElementById('id_manufacturer_search');
const manufacturerResults = document.getElementById('manufacturer-search-results');
// Use AlpineJS $el to scope queries within component
const manufacturerInput = this.$el.querySelector('#id_manufacturer');
const manufacturerSearch = this.$el.querySelector('#id_manufacturer_search');
const manufacturerResults = this.$el.querySelector('#manufacturer-search-results');
if (manufacturerInput) manufacturerInput.value = id;
if (manufacturerSearch) manufacturerSearch.value = name;
if (manufacturerResults) manufacturerResults.innerHTML = '';
// Update ride model search to include manufacturer
const rideModelSearch = document.getElementById('id_ride_model_search');
const rideModelSearch = this.$el.querySelector('#id_ride_model_search');
if (rideModelSearch) {
rideModelSearch.setAttribute('hx-include', '[name="manufacturer"]');
}
},
selectDesigner(id, name) {
const designerInput = document.getElementById('id_designer');
const designerSearch = document.getElementById('id_designer_search');
const designerResults = document.getElementById('designer-search-results');
// Use AlpineJS $el to scope queries within component
const designerInput = this.$el.querySelector('#id_designer');
const designerSearch = this.$el.querySelector('#id_designer_search');
const designerResults = this.$el.querySelector('#designer-search-results');
if (designerInput) designerInput.value = id;
if (designerSearch) designerSearch.value = name;
@@ -37,9 +39,10 @@ document.addEventListener('alpine:init', () => {
},
selectRideModel(id, name) {
const rideModelInput = document.getElementById('id_ride_model');
const rideModelSearch = document.getElementById('id_ride_model_search');
const rideModelResults = document.getElementById('ride-model-search-results');
// Use AlpineJS $el to scope queries within component
const rideModelInput = this.$el.querySelector('#id_ride_model');
const rideModelSearch = this.$el.querySelector('#id_ride_model_search');
const rideModelResults = this.$el.querySelector('#ride-model-search-results');
if (rideModelInput) rideModelInput.value = id;
if (rideModelSearch) rideModelSearch.value = name;
@@ -47,9 +50,10 @@ document.addEventListener('alpine:init', () => {
},
clearAllSearchResults() {
const manufacturerResults = document.getElementById('manufacturer-search-results');
const designerResults = document.getElementById('designer-search-results');
const rideModelResults = document.getElementById('ride-model-search-results');
// Use AlpineJS $el to scope queries within component
const manufacturerResults = this.$el.querySelector('#manufacturer-search-results');
const designerResults = this.$el.querySelector('#designer-search-results');
const rideModelResults = this.$el.querySelector('#ride-model-search-results');
if (manufacturerResults) manufacturerResults.innerHTML = '';
if (designerResults) designerResults.innerHTML = '';
@@ -57,17 +61,20 @@ document.addEventListener('alpine:init', () => {
},
clearManufacturerResults() {
const manufacturerResults = document.getElementById('manufacturer-search-results');
// Use AlpineJS $el to scope queries within component
const manufacturerResults = this.$el.querySelector('#manufacturer-search-results');
if (manufacturerResults) manufacturerResults.innerHTML = '';
},
clearDesignerResults() {
const designerResults = document.getElementById('designer-search-results');
// Use AlpineJS $el to scope queries within component
const designerResults = this.$el.querySelector('#designer-search-results');
if (designerResults) designerResults.innerHTML = '';
},
clearRideModelResults() {
const rideModelResults = document.getElementById('ride-model-search-results');
// Use AlpineJS $el to scope queries within component
const rideModelResults = this.$el.querySelector('#ride-model-search-results');
if (rideModelResults) rideModelResults.innerHTML = '';
}
}));