Add park and ride card components with advanced search functionality

- Implemented park card component with image, status badge, favorite button, and quick stats overlay. - Developed ride card component featuring thrill level badge, status badge, favorite button, and detailed stats. - Created advanced search page with filters for parks and rides, including location, type, status, and thrill level. - Added dynamic quick search functionality with results display. - Enhanced user experience with JavaScript for filter toggling, range slider updates, and view switching. - Included custom CSS for improved styling of checkboxes and search results layout.
2025-12-20 05:11:09 -05:00 · 2025-09-24 23:10:48 -04:00
parent 4373d18176
commit b1c369c1bb
39 changed files with 5202 additions and 824 deletions
--- a/static/js/backup/location-autocomplete.js
+++ b/static/js/backup/location-autocomplete.js
@@ -0,0 +1,81 @@
+function locationAutocomplete(field, filterParks = false) {
+    return {
+        query: '',
+        suggestions: [],
+        fetchSuggestions() {
+            let url;
+            const params = new URLSearchParams({
+                q: this.query,
+                filter_parks: filterParks
+            });
+
+            switch (field) {
+                case 'country':
+                    url = '/parks/ajax/countries/';
+                    break;
+                case 'region':
+                    url = '/parks/ajax/regions/';
+                    // Add country parameter if we're fetching regions
+                    const countryInput = document.getElementById(filterParks ? 'country' : 'id_country_name');
+                    if (countryInput && countryInput.value) {
+                        params.append('country', countryInput.value);
+                    }
+                    break;
+                case 'city':
+                    url = '/parks/ajax/cities/';
+                    // Add country and region parameters if we're fetching cities
+                    const regionInput = document.getElementById(filterParks ? 'region' : 'id_region_name');
+                    const cityCountryInput = document.getElementById(filterParks ? 'country' : 'id_country_name');
+                    if (regionInput && regionInput.value && cityCountryInput && cityCountryInput.value) {
+                        params.append('country', cityCountryInput.value);
+                        params.append('region', regionInput.value);
+                    }
+                    break;
+            }
+
+            if (url) {
+                fetch(`${url}?${params}`)
+                    .then(response => response.json())
+                    .then(data => {
+                        this.suggestions = data;
+                    });
+            }
+        },
+        selectSuggestion(suggestion) {
+            this.query = suggestion.name;
+            this.suggestions = [];
+
+            // If this is a form field (not filter), update hidden fields
+            if (!filterParks) {
+                const hiddenField = document.getElementById(`id_${field}`);
+                if (hiddenField) {
+                    hiddenField.value = suggestion.id;
+                }
+
+                // Clear dependent fields when parent field changes
+                if (field === 'country') {
+                    const regionInput = document.getElementById('id_region_name');
+                    const cityInput = document.getElementById('id_city_name');
+                    const regionHidden = document.getElementById('id_region');
+                    const cityHidden = document.getElementById('id_city');
+                    
+                    if (regionInput) regionInput.value = '';
+                    if (cityInput) cityInput.value = '';
+                    if (regionHidden) regionHidden.value = '';
+                    if (cityHidden) cityHidden.value = '';
+                } else if (field === 'region') {
+                    const cityInput = document.getElementById('id_city_name');
+                    const cityHidden = document.getElementById('id_city');
+                    
+                    if (cityInput) cityInput.value = '';
+                    if (cityHidden) cityHidden.value = '';
+                }
+            }
+
+            // Trigger form submission for filters
+            if (filterParks) {
+                htmx.trigger('#park-filters', 'change');
+            }
+        }
+    };
+}