mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 04:31:09 -05:00
Refactor ride filters and forms to use AlpineJS for state management and HTMX for AJAX interactions
- 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
@@ -3,7 +3,8 @@
|
||||
{% if location.id %}data-location-id="{{ location.id }}"{% endif %}
|
||||
{% if location.type %}data-location-type="{{ location.type }}"{% endif %}
|
||||
{% if location.latitude and location.longitude %}data-lat="{{ location.latitude }}" data-lng="{{ location.longitude }}"{% endif %}
|
||||
{% if clickable %}onclick="{{ onclick_action|default:'window.location.href=\''|add:location.get_absolute_url|add:'\'' }}"{% endif %}>
|
||||
x-data="locationCard()"
|
||||
{% if clickable %}@click="handleCardClick('{{ location.get_absolute_url }}')"{% endif %}>
|
||||
|
||||
<!-- Card Header -->
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
@@ -69,7 +70,7 @@
|
||||
{% endif %}
|
||||
|
||||
{% if show_map_action %}
|
||||
<button onclick="showOnMap('{{ location.type }}', {{ location.id }})"
|
||||
<button @click="showOnMap('{{ location.type }}', {{ location.id }})"
|
||||
class="px-3 py-2 text-sm text-green-600 border border-green-600 rounded-lg hover:bg-green-50 dark:hover:bg-green-900 transition-colors"
|
||||
title="Show on map">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
@@ -77,7 +78,7 @@
|
||||
{% endif %}
|
||||
|
||||
{% if show_trip_action %}
|
||||
<button onclick="addToTrip({{ location|safe }})"
|
||||
<button @click="addToTrip({{ location|safe }})"
|
||||
class="px-3 py-2 text-sm text-purple-600 border border-purple-600 rounded-lg hover:bg-purple-50 dark:hover:bg-purple-900 transition-colors"
|
||||
title="Add to trip">
|
||||
<i class="fas fa-plus"></i>
|
||||
@@ -297,50 +298,55 @@ This would be in templates/maps/partials/park_card_content.html
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Location Card JavaScript -->
|
||||
<script>
|
||||
// Global functions for location card actions
|
||||
window.showOnMap = function(type, id) {
|
||||
// Emit custom event for map integration
|
||||
const event = new CustomEvent('showLocationOnMap', {
|
||||
detail: { type, id }
|
||||
});
|
||||
document.dispatchEvent(event);
|
||||
};
|
||||
|
||||
window.addToTrip = function(locationData) {
|
||||
// Emit custom event for trip integration
|
||||
const event = new CustomEvent('addLocationToTrip', {
|
||||
detail: locationData
|
||||
});
|
||||
document.dispatchEvent(event);
|
||||
};
|
||||
|
||||
// Handle location card selection
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.addEventListener('click', function(e) {
|
||||
const card = e.target.closest('.location-card');
|
||||
if (card && card.dataset.locationId) {
|
||||
// Remove previous selections
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('locationCard', () => ({
|
||||
selected: false,
|
||||
|
||||
init() {
|
||||
// Listen for card selection events
|
||||
this.$el.addEventListener('click', (e) => {
|
||||
if (this.$el.dataset.locationId) {
|
||||
this.handleCardSelection();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
handleCardClick(url) {
|
||||
if (url) {
|
||||
window.location.href = url;
|
||||
}
|
||||
},
|
||||
|
||||
showOnMap(type, id) {
|
||||
// Emit custom event for map integration using AlpineJS approach
|
||||
this.$dispatch('showLocationOnMap', { type, id });
|
||||
},
|
||||
|
||||
addToTrip(locationData) {
|
||||
// Emit custom event for trip integration using AlpineJS approach
|
||||
this.$dispatch('addLocationToTrip', locationData);
|
||||
},
|
||||
|
||||
handleCardSelection() {
|
||||
// Remove previous selections using AlpineJS approach
|
||||
document.querySelectorAll('.location-card.selected').forEach(c => {
|
||||
c.classList.remove('selected');
|
||||
});
|
||||
|
||||
// Add selection to clicked card
|
||||
card.classList.add('selected');
|
||||
// Add selection to this card
|
||||
this.$el.classList.add('selected');
|
||||
this.selected = true;
|
||||
|
||||
// Emit selection event
|
||||
const event = new CustomEvent('locationCardSelected', {
|
||||
detail: {
|
||||
id: card.dataset.locationId,
|
||||
type: card.dataset.locationType,
|
||||
lat: card.dataset.lat,
|
||||
lng: card.dataset.lng,
|
||||
element: card
|
||||
}
|
||||
// Emit selection event using AlpineJS $dispatch
|
||||
this.$dispatch('locationCardSelected', {
|
||||
id: this.$el.dataset.locationId,
|
||||
type: this.$el.dataset.locationType,
|
||||
lat: this.$el.dataset.lat,
|
||||
lng: this.$el.dataset.lng,
|
||||
element: this.$el
|
||||
});
|
||||
document.dispatchEvent(event);
|
||||
}
|
||||
});
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="location-widget" id="locationWidget">
|
||||
<div class="location-widget" id="locationWidget" x-data="locationWidget()">
|
||||
{# Search Form #}
|
||||
<div class="relative mb-4">
|
||||
<label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
@@ -31,9 +31,18 @@
|
||||
placeholder="Search for a location..."
|
||||
autocomplete="off"
|
||||
style="z-index: 10;">
|
||||
<div id="searchResults"
|
||||
<div x-show="showResults && searchResults.length > 0"
|
||||
x-transition
|
||||
style="position: absolute; top: 100%; left: 0; right: 0; z-index: 1000;"
|
||||
class="hidden w-full mt-1 overflow-auto bg-white border rounded-md shadow-lg max-h-60 dark:bg-gray-700 dark:border-gray-600">
|
||||
class="w-full mt-1 overflow-auto bg-white border rounded-md shadow-lg max-h-60 dark:bg-gray-700 dark:border-gray-600">
|
||||
<template x-for="(result, index) in searchResults" :key="index">
|
||||
<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600"
|
||||
@click="selectLocation(result)">
|
||||
<div class="font-medium text-gray-900 dark:text-white" x-text="result.display_name || result.name || ''"></div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400"
|
||||
x-text="[result.street, result.city || (result.address && (result.address.city || result.address.town || result.address.village)), result.state || (result.address && (result.address.state || result.address.region)), result.country || (result.address && result.address.country), result.postal_code || (result.address && result.address.postcode)].filter(Boolean).join(', ')"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -104,300 +113,275 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
let map = null;
|
||||
let marker = null;
|
||||
const searchInput = document.getElementById('locationSearch');
|
||||
const searchResults = document.getElementById('searchResults');
|
||||
let searchTimeout;
|
||||
|
||||
function normalizeCoordinate(value, maxDigits, decimalPlaces) {
|
||||
try {
|
||||
// Convert to string-3 with exact decimal places
|
||||
const rounded = Number(value).toFixed(decimalPlaces);
|
||||
|
||||
// Convert to string-3 without decimal point for digit counting
|
||||
const strValue = rounded.replace('.', '').replace('-', '');
|
||||
// Remove trailing zeros
|
||||
const strippedValue = strValue.replace(/0+$/, '');
|
||||
|
||||
// If total digits exceed maxDigits, round further
|
||||
if (strippedValue.length > maxDigits) {
|
||||
return Number(Number(value).toFixed(decimalPlaces - 1));
|
||||
}
|
||||
|
||||
// Return the string-3 representation to preserve exact decimal places
|
||||
return rounded;
|
||||
} catch (error) {
|
||||
console.error('Coordinate normalization failed:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function validateCoordinates(lat, lng) {
|
||||
// Normalize coordinates
|
||||
const normalizedLat = normalizeCoordinate(lat, 9, 6);
|
||||
const normalizedLng = normalizeCoordinate(lng, 10, 6);
|
||||
|
||||
if (normalizedLat === null || normalizedLng === null) {
|
||||
throw new Error('Invalid coordinate format');
|
||||
}
|
||||
|
||||
const parsedLat = parseFloat(normalizedLat);
|
||||
const parsedLng = parseFloat(normalizedLng);
|
||||
|
||||
if (parsedLat < -90 || parsedLat > 90) {
|
||||
throw new Error('Latitude must be between -90 and 90 degrees.');
|
||||
}
|
||||
if (parsedLng < -180 || parsedLng > 180) {
|
||||
throw new Error('Longitude must be between -180 and 180 degrees.');
|
||||
}
|
||||
|
||||
return { lat: normalizedLat, lng: normalizedLng };
|
||||
}
|
||||
|
||||
// Initialize map
|
||||
function initMap() {
|
||||
map = L.map('locationMap').setView([0, 0], 2);
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('locationWidget', () => ({
|
||||
map: null,
|
||||
marker: null,
|
||||
searchTimeout: null,
|
||||
searchResults: [],
|
||||
showResults: false,
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© OpenStreetMap contributors'
|
||||
}).addTo(map);
|
||||
|
||||
// Initialize with existing coordinates if available
|
||||
const initialLat = document.getElementById('latitude').value;
|
||||
const initialLng = document.getElementById('longitude').value;
|
||||
if (initialLat && initialLng) {
|
||||
init() {
|
||||
this.$nextTick(() => {
|
||||
this.initMap();
|
||||
this.setupEventListeners();
|
||||
});
|
||||
},
|
||||
|
||||
normalizeCoordinate(value, maxDigits, decimalPlaces) {
|
||||
try {
|
||||
const normalized = validateCoordinates(initialLat, initialLng);
|
||||
addMarker(normalized.lat, normalized.lng);
|
||||
const rounded = Number(value).toFixed(decimalPlaces);
|
||||
const strValue = rounded.replace('.', '').replace('-', '');
|
||||
const strippedValue = strValue.replace(/0+$/, '');
|
||||
|
||||
if (strippedValue.length > maxDigits) {
|
||||
return Number(Number(value).toFixed(decimalPlaces - 1));
|
||||
}
|
||||
|
||||
return rounded;
|
||||
} catch (error) {
|
||||
console.error('Invalid initial coordinates:', error);
|
||||
console.error('Coordinate normalization failed:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
validateCoordinates(lat, lng) {
|
||||
const normalizedLat = this.normalizeCoordinate(lat, 9, 6);
|
||||
const normalizedLng = this.normalizeCoordinate(lng, 10, 6);
|
||||
|
||||
// Handle map clicks - HTMX version
|
||||
map.on('click', function(e) {
|
||||
try {
|
||||
const normalized = validateCoordinates(e.latlng.lat, e.latlng.lng);
|
||||
|
||||
// Create a temporary form for HTMX request
|
||||
const tempForm = document.createElement('form');
|
||||
tempForm.style.display = 'none';
|
||||
tempForm.setAttribute('hx-get', '/parks/search/reverse-geocode/');
|
||||
tempForm.setAttribute('hx-vals', JSON.stringify({
|
||||
lat: normalized.lat,
|
||||
lon: normalized.lng
|
||||
}));
|
||||
tempForm.setAttribute('hx-trigger', 'submit');
|
||||
tempForm.setAttribute('hx-swap', 'none');
|
||||
|
||||
// Add event listener for HTMX response
|
||||
tempForm.addEventListener('htmx:afterRequest', function(event) {
|
||||
if (event.detail.successful) {
|
||||
try {
|
||||
const data = JSON.parse(event.detail.xhr.responseText);
|
||||
if (data.error) {
|
||||
throw new Error(data.error);
|
||||
}
|
||||
updateLocation(normalized.lat, normalized.lng, data);
|
||||
} catch (error) {
|
||||
console.error('Location update failed:', error);
|
||||
alert(error.message || 'Failed to update location. Please try again.');
|
||||
}
|
||||
} else {
|
||||
console.error('Geocoding request failed');
|
||||
alert('Failed to update location. Please try again.');
|
||||
}
|
||||
// Clean up temporary form
|
||||
document.body.removeChild(tempForm);
|
||||
if (normalizedLat === null || normalizedLng === null) {
|
||||
throw new Error('Invalid coordinate format');
|
||||
}
|
||||
|
||||
const parsedLat = parseFloat(normalizedLat);
|
||||
const parsedLng = parseFloat(normalizedLng);
|
||||
|
||||
if (parsedLat < -90 || parsedLat > 90) {
|
||||
throw new Error('Latitude must be between -90 and 90 degrees.');
|
||||
}
|
||||
if (parsedLng < -180 || parsedLng > 180) {
|
||||
throw new Error('Longitude must be between -180 and 180 degrees.');
|
||||
}
|
||||
|
||||
return { lat: normalizedLat, lng: normalizedLng };
|
||||
},
|
||||
|
||||
initMap() {
|
||||
this.map = L.map('locationMap').setView([0, 0], 2);
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© OpenStreetMap contributors'
|
||||
}).addTo(this.map);
|
||||
|
||||
// Initialize with existing coordinates if available
|
||||
const initialLat = this.$el.querySelector('#latitude').value;
|
||||
const initialLng = this.$el.querySelector('#longitude').value;
|
||||
if (initialLat && initialLng) {
|
||||
try {
|
||||
const normalized = this.validateCoordinates(initialLat, initialLng);
|
||||
this.addMarker(normalized.lat, normalized.lng);
|
||||
} catch (error) {
|
||||
console.error('Invalid initial coordinates:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Handle map clicks using AlpineJS approach
|
||||
this.map.on('click', (e) => {
|
||||
this.handleMapClick(e.latlng.lat, e.latlng.lng);
|
||||
});
|
||||
},
|
||||
|
||||
setupEventListeners() {
|
||||
const searchInput = this.$el.querySelector('#locationSearch');
|
||||
const form = this.$el.closest('form');
|
||||
|
||||
// Search input handler
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
this.handleSearchInput(e.target.value);
|
||||
});
|
||||
|
||||
// Form submit handler
|
||||
if (form) {
|
||||
form.addEventListener('submit', (e) => {
|
||||
this.handleFormSubmit(e);
|
||||
});
|
||||
|
||||
document.body.appendChild(tempForm);
|
||||
htmx.trigger(tempForm, 'submit');
|
||||
|
||||
}
|
||||
|
||||
// Click outside handler
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!this.$el.contains(e.target)) {
|
||||
this.showResults = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
handleMapClick(lat, lng) {
|
||||
try {
|
||||
const normalized = this.validateCoordinates(lat, lng);
|
||||
this.reverseGeocode(normalized.lat, normalized.lng);
|
||||
} catch (error) {
|
||||
console.error('Location update failed:', error);
|
||||
alert(error.message || 'Failed to update location. Please try again.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize map
|
||||
initMap();
|
||||
|
||||
// Handle location search - HTMX version
|
||||
searchInput.addEventListener('input', function() {
|
||||
clearTimeout(searchTimeout);
|
||||
const query = this.value.trim();
|
||||
},
|
||||
|
||||
if (!query) {
|
||||
searchResults.classList.add('hidden');
|
||||
return;
|
||||
}
|
||||
handleSearchInput(query) {
|
||||
clearTimeout(this.searchTimeout);
|
||||
|
||||
if (!query.trim()) {
|
||||
this.showResults = false;
|
||||
return;
|
||||
}
|
||||
|
||||
searchTimeout = setTimeout(function() {
|
||||
// Create a temporary form for HTMX request
|
||||
this.searchTimeout = setTimeout(() => {
|
||||
this.searchLocation(query.trim());
|
||||
}, 300);
|
||||
},
|
||||
|
||||
handleFormSubmit(e) {
|
||||
const lat = this.$el.querySelector('#latitude').value;
|
||||
const lng = this.$el.querySelector('#longitude').value;
|
||||
|
||||
if (lat && lng) {
|
||||
try {
|
||||
this.validateCoordinates(lat, lng);
|
||||
} catch (error) {
|
||||
e.preventDefault();
|
||||
alert(error.message || 'Invalid coordinates. Please check the location.');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
reverseGeocode(lat, lng) {
|
||||
const tempForm = document.createElement('form');
|
||||
tempForm.style.display = 'none';
|
||||
tempForm.setAttribute('hx-get', '/parks/search/location/');
|
||||
tempForm.setAttribute('hx-vals', JSON.stringify({
|
||||
q: query
|
||||
}));
|
||||
tempForm.setAttribute('hx-get', '/parks/search/reverse-geocode/');
|
||||
tempForm.setAttribute('hx-vals', JSON.stringify({ lat, lon: lng }));
|
||||
tempForm.setAttribute('hx-trigger', 'submit');
|
||||
tempForm.setAttribute('hx-swap', 'none');
|
||||
|
||||
// Add event listener for HTMX response
|
||||
tempForm.addEventListener('htmx:afterRequest', function(event) {
|
||||
tempForm.addEventListener('htmx:afterRequest', (event) => {
|
||||
if (event.detail.successful) {
|
||||
try {
|
||||
const data = JSON.parse(event.detail.xhr.responseText);
|
||||
|
||||
if (data.results && data.results.length > 0) {
|
||||
const resultsHtml = data.results.map((result, index) => `
|
||||
<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600"
|
||||
data-result-index="${index}">
|
||||
<div class="font-medium text-gray-900 dark:text-white">${result.display_name || result.name || ''}</div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">
|
||||
${[
|
||||
result.street,
|
||||
result.city || (result.address && (result.address.city || result.address.town || result.address.village)),
|
||||
result.state || (result.address && (result.address.state || result.address.region)),
|
||||
result.country || (result.address && result.address.country),
|
||||
result.postal_code || (result.address && result.address.postcode)
|
||||
].filter(Boolean).join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
searchResults.innerHTML = resultsHtml;
|
||||
searchResults.classList.remove('hidden');
|
||||
|
||||
// Store results data
|
||||
searchResults.dataset.results = JSON.stringify(data.results);
|
||||
|
||||
// Add click handlers
|
||||
searchResults.querySelectorAll('[data-result-index]').forEach(el => {
|
||||
el.addEventListener('click', function() {
|
||||
const results = JSON.parse(searchResults.dataset.results);
|
||||
const result = results[this.dataset.resultIndex];
|
||||
selectLocation(result);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
searchResults.innerHTML = '<div class="p-2 text-gray-500 dark:text-gray-400">No results found</div>';
|
||||
searchResults.classList.remove('hidden');
|
||||
if (data.error) {
|
||||
throw new Error(data.error);
|
||||
}
|
||||
this.updateLocation(lat, lng, data);
|
||||
} catch (error) {
|
||||
console.error('Search failed:', error);
|
||||
searchResults.innerHTML = '<div class="p-2 text-red-500 dark:text-red-400">Search failed. Please try again.</div>';
|
||||
searchResults.classList.remove('hidden');
|
||||
console.error('Location update failed:', error);
|
||||
alert(error.message || 'Failed to update location. Please try again.');
|
||||
}
|
||||
} else {
|
||||
console.error('Search request failed');
|
||||
searchResults.innerHTML = '<div class="p-2 text-red-500 dark:text-red-400">Search failed. Please try again.</div>';
|
||||
searchResults.classList.remove('hidden');
|
||||
console.error('Geocoding request failed');
|
||||
alert('Failed to update location. Please try again.');
|
||||
}
|
||||
// Clean up temporary form
|
||||
document.body.removeChild(tempForm);
|
||||
});
|
||||
|
||||
document.body.appendChild(tempForm);
|
||||
htmx.trigger(tempForm, 'submit');
|
||||
}, 300);
|
||||
});
|
||||
|
||||
// Hide search results when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!searchResults.contains(e.target) && e.target !== searchInput) {
|
||||
searchResults.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
function addMarker(lat, lng) {
|
||||
if (marker) {
|
||||
marker.remove();
|
||||
}
|
||||
marker = L.marker([lat, lng]).addTo(map);
|
||||
map.setView([lat, lng], 13);
|
||||
}
|
||||
|
||||
function updateLocation(lat, lng, data) {
|
||||
try {
|
||||
const normalized = validateCoordinates(lat, lng);
|
||||
|
||||
// Update coordinates
|
||||
document.getElementById('latitude').value = normalized.lat;
|
||||
document.getElementById('longitude').value = normalized.lng;
|
||||
|
||||
// Update marker
|
||||
addMarker(normalized.lat, normalized.lng);
|
||||
|
||||
// Update form fields with English names where available
|
||||
const address = data.address || {};
|
||||
document.getElementById('streetAddress').value =
|
||||
`${address.house_number || ''} ${address.road || address.street || ''}`.trim() || '';
|
||||
document.getElementById('city').value =
|
||||
address.city || address.town || address.village || '';
|
||||
document.getElementById('state').value =
|
||||
address.state || address.region || '';
|
||||
document.getElementById('country').value = address.country || '';
|
||||
document.getElementById('postalCode').value = address.postcode || '';
|
||||
} catch (error) {
|
||||
console.error('Location update failed:', error);
|
||||
alert(error.message || 'Failed to update location. Please try again.');
|
||||
}
|
||||
}
|
||||
|
||||
function selectLocation(result) {
|
||||
if (!result) return;
|
||||
},
|
||||
|
||||
try {
|
||||
const lat = parseFloat(result.lat);
|
||||
const lon = parseFloat(result.lon);
|
||||
searchLocation(query) {
|
||||
const tempForm = document.createElement('form');
|
||||
tempForm.style.display = 'none';
|
||||
tempForm.setAttribute('hx-get', '/parks/search/location/');
|
||||
tempForm.setAttribute('hx-vals', JSON.stringify({ q: query }));
|
||||
tempForm.setAttribute('hx-trigger', 'submit');
|
||||
tempForm.setAttribute('hx-swap', 'none');
|
||||
|
||||
if (isNaN(lat) || isNaN(lon)) {
|
||||
throw new Error('Invalid coordinates in search result');
|
||||
}
|
||||
|
||||
const normalized = validateCoordinates(lat, lon);
|
||||
|
||||
// Create a normalized address object
|
||||
const address = {
|
||||
name: result.display_name || result.name || '',
|
||||
address: {
|
||||
house_number: result.house_number || (result.address && result.address.house_number) || '',
|
||||
road: result.street || (result.address && (result.address.road || result.address.street)) || '',
|
||||
city: result.city || (result.address && (result.address.city || result.address.town || result.address.village)) || '',
|
||||
state: result.state || (result.address && (result.address.state || result.address.region)) || '',
|
||||
country: result.country || (result.address && result.address.country) || '',
|
||||
postcode: result.postal_code || (result.address && result.address.postcode) || ''
|
||||
tempForm.addEventListener('htmx:afterRequest', (event) => {
|
||||
if (event.detail.successful) {
|
||||
try {
|
||||
const data = JSON.parse(event.detail.xhr.responseText);
|
||||
this.searchResults = data.results || [];
|
||||
this.showResults = true;
|
||||
} catch (error) {
|
||||
console.error('Search failed:', error);
|
||||
this.searchResults = [];
|
||||
this.showResults = false;
|
||||
}
|
||||
} else {
|
||||
console.error('Search request failed');
|
||||
this.searchResults = [];
|
||||
this.showResults = false;
|
||||
}
|
||||
};
|
||||
document.body.removeChild(tempForm);
|
||||
});
|
||||
|
||||
updateLocation(normalized.lat, normalized.lng, address);
|
||||
searchResults.classList.add('hidden');
|
||||
searchInput.value = address.name;
|
||||
} catch (error) {
|
||||
console.error('Location selection failed:', error);
|
||||
alert(error.message || 'Failed to select location. Please try again.');
|
||||
}
|
||||
}
|
||||
|
||||
// Add form submit handler
|
||||
const form = document.querySelector('form');
|
||||
form.addEventListener('submit', function(e) {
|
||||
const lat = document.getElementById('latitude').value;
|
||||
const lng = document.getElementById('longitude').value;
|
||||
document.body.appendChild(tempForm);
|
||||
htmx.trigger(tempForm, 'submit');
|
||||
},
|
||||
|
||||
if (lat && lng) {
|
||||
selectLocation(result) {
|
||||
if (!result) return;
|
||||
|
||||
try {
|
||||
validateCoordinates(lat, lng);
|
||||
const lat = parseFloat(result.lat);
|
||||
const lon = parseFloat(result.lon);
|
||||
|
||||
if (isNaN(lat) || isNaN(lon)) {
|
||||
throw new Error('Invalid coordinates in search result');
|
||||
}
|
||||
|
||||
const normalized = this.validateCoordinates(lat, lon);
|
||||
|
||||
const address = {
|
||||
name: result.display_name || result.name || '',
|
||||
address: {
|
||||
house_number: result.house_number || (result.address && result.address.house_number) || '',
|
||||
road: result.street || (result.address && (result.address.road || result.address.street)) || '',
|
||||
city: result.city || (result.address && (result.address.city || result.address.town || result.address.village)) || '',
|
||||
state: result.state || (result.address && (result.address.state || result.address.region)) || '',
|
||||
country: result.country || (result.address && result.address.country) || '',
|
||||
postcode: result.postal_code || (result.address && result.address.postcode) || ''
|
||||
}
|
||||
};
|
||||
|
||||
this.updateLocation(normalized.lat, normalized.lng, address);
|
||||
this.showResults = false;
|
||||
this.$el.querySelector('#locationSearch').value = address.name;
|
||||
} catch (error) {
|
||||
e.preventDefault();
|
||||
alert(error.message || 'Invalid coordinates. Please check the location.');
|
||||
console.error('Location selection failed:', error);
|
||||
alert(error.message || 'Failed to select location. Please try again.');
|
||||
}
|
||||
},
|
||||
|
||||
addMarker(lat, lng) {
|
||||
if (this.marker) {
|
||||
this.marker.remove();
|
||||
}
|
||||
this.marker = L.marker([lat, lng]).addTo(this.map);
|
||||
this.map.setView([lat, lng], 13);
|
||||
},
|
||||
|
||||
updateLocation(lat, lng, data) {
|
||||
try {
|
||||
const normalized = this.validateCoordinates(lat, lng);
|
||||
|
||||
// Update coordinates using AlpineJS $el
|
||||
this.$el.querySelector('#latitude').value = normalized.lat;
|
||||
this.$el.querySelector('#longitude').value = normalized.lng;
|
||||
|
||||
// Update marker
|
||||
this.addMarker(normalized.lat, normalized.lng);
|
||||
|
||||
// Update form fields
|
||||
const address = data.address || {};
|
||||
this.$el.querySelector('#streetAddress').value =
|
||||
`${address.house_number || ''} ${address.road || address.street || ''}`.trim() || '';
|
||||
this.$el.querySelector('#city').value =
|
||||
address.city || address.town || address.village || '';
|
||||
this.$el.querySelector('#state').value =
|
||||
address.state || address.region || '';
|
||||
this.$el.querySelector('#country').value = address.country || '';
|
||||
this.$el.querySelector('#postalCode').value = address.postcode || '';
|
||||
} catch (error) {
|
||||
console.error('Location update failed:', error);
|
||||
alert(error.message || 'Failed to update location. Please try again.');
|
||||
}
|
||||
}
|
||||
});
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -124,7 +124,81 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container px-4 mx-auto">
|
||||
<!-- HTMX + AlpineJS ONLY - NO CUSTOM JAVASCRIPT -->
|
||||
<div x-data="{
|
||||
tripParks: [],
|
||||
showAllParks: false,
|
||||
mapInitialized: false,
|
||||
|
||||
init() {
|
||||
// Initialize map via HTMX
|
||||
this.initializeMap();
|
||||
},
|
||||
|
||||
initializeMap() {
|
||||
// Use HTMX to load map component
|
||||
htmx.ajax('GET', '/maps/roadtrip-map/', {
|
||||
target: '#map-container',
|
||||
swap: 'innerHTML'
|
||||
});
|
||||
this.mapInitialized = true;
|
||||
},
|
||||
|
||||
addParkToTrip(parkId, parkName, parkLocation) {
|
||||
// Check if park already exists
|
||||
if (!this.tripParks.find(p => p.id === parkId)) {
|
||||
this.tripParks.push({
|
||||
id: parkId,
|
||||
name: parkName,
|
||||
location: parkLocation
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
removeParkFromTrip(parkId) {
|
||||
this.tripParks = this.tripParks.filter(p => p.id !== parkId);
|
||||
},
|
||||
|
||||
clearTrip() {
|
||||
this.tripParks = [];
|
||||
},
|
||||
|
||||
optimizeRoute() {
|
||||
if (this.tripParks.length >= 2) {
|
||||
// Use HTMX to optimize route
|
||||
htmx.ajax('POST', '/trips/optimize/', {
|
||||
values: { parks: this.tripParks.map(p => p.id) },
|
||||
target: '#trip-summary',
|
||||
swap: 'innerHTML'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
calculateRoute() {
|
||||
if (this.tripParks.length >= 2) {
|
||||
// Use HTMX to calculate route
|
||||
htmx.ajax('POST', '/trips/calculate/', {
|
||||
values: { parks: this.tripParks.map(p => p.id) },
|
||||
target: '#trip-summary',
|
||||
swap: 'innerHTML'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
saveTrip() {
|
||||
if (this.tripParks.length > 0) {
|
||||
// Use HTMX to save trip
|
||||
htmx.ajax('POST', '/trips/save/', {
|
||||
values: {
|
||||
name: 'Trip ' + new Date().toLocaleDateString(),
|
||||
parks: this.tripParks.map(p => p.id)
|
||||
},
|
||||
target: '#saved-trips',
|
||||
swap: 'innerHTML'
|
||||
});
|
||||
}
|
||||
}
|
||||
}" class="container px-4 mx-auto">
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col items-start justify-between gap-4 mb-6 md:flex-row md:items-center">
|
||||
<div>
|
||||
@@ -167,7 +241,7 @@
|
||||
</div>
|
||||
|
||||
<div id="park-search-results" class="mt-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 hidden">
|
||||
<!-- Search results will be populated here -->
|
||||
<!-- Search results will be populated here via HTMX -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -175,61 +249,80 @@
|
||||
<div class="p-4 bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Trip Itinerary</h3>
|
||||
<button id="clear-trip"
|
||||
class="px-3 py-1 text-sm text-red-600 hover:text-red-700 dark:text-red-400"
|
||||
<button class="px-3 py-1 text-sm text-red-600 hover:text-red-700 dark:text-red-400"
|
||||
@click="clearTrip()">
|
||||
<i class="mr-1 fas fa-trash"></i>Clear All
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="trip-parks" class="space-y-2 min-h-20">
|
||||
<div id="empty-trip" class="text-center py-8 text-gray-500 dark:text-gray-400">
|
||||
<i class="fas fa-route text-3xl mb-3"></i>
|
||||
<p>Add parks to start planning your trip</p>
|
||||
<p class="text-sm mt-1">Search above or click parks on the map</p>
|
||||
</div>
|
||||
<template x-if="tripParks.length === 0">
|
||||
<div class="text-center py-8 text-gray-500 dark:text-gray-400">
|
||||
<i class="fas fa-route text-3xl mb-3"></i>
|
||||
<p>Add parks to start planning your trip</p>
|
||||
<p class="text-sm mt-1">Search above or click parks on the map</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template x-for="(park, index) in tripParks" :key="park.id">
|
||||
<div class="park-card">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold mr-3"
|
||||
x-text="index + 1"></div>
|
||||
<div>
|
||||
<h4 class="font-medium text-gray-900 dark:text-white" x-text="park.name"></h4>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400" x-text="park.location"></p>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="removeParkFromTrip(park.id)"
|
||||
class="text-red-500 hover:text-red-700">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 space-y-2">
|
||||
<button id="optimize-route"
|
||||
class="w-full px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
@click="optimizeRoute()" :disabled="tripParks.length < 2">
|
||||
<button class="w-full px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
@click="optimizeRoute()"
|
||||
:disabled="tripParks.length < 2">
|
||||
<i class="mr-2 fas fa-route"></i>Optimize Route
|
||||
</button>
|
||||
<button id="calculate-route"
|
||||
class="w-full px-4 py-2 text-blue-600 border border-blue-600 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
@click="calculateRoute()" :disabled="tripParks.length < 2">
|
||||
<button class="w-full px-4 py-2 text-blue-600 border border-blue-600 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
@click="calculateRoute()"
|
||||
:disabled="tripParks.length < 2">
|
||||
<i class="mr-2 fas fa-map"></i>Calculate Route
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Trip Summary -->
|
||||
<div id="trip-summary" class="trip-summary-card hidden">
|
||||
<div id="trip-summary" class="trip-summary-card" x-show="tripParks.length >= 2" x-transition>
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">Trip Summary</h3>
|
||||
|
||||
<div class="trip-stats">
|
||||
<div class="trip-stat">
|
||||
<div class="trip-stat-value" id="total-distance">-</div>
|
||||
<div class="trip-stat-value">-</div>
|
||||
<div class="trip-stat-label">Total Miles</div>
|
||||
</div>
|
||||
<div class="trip-stat">
|
||||
<div class="trip-stat-value" id="total-time">-</div>
|
||||
<div class="trip-stat-value">-</div>
|
||||
<div class="trip-stat-label">Drive Time</div>
|
||||
</div>
|
||||
<div class="trip-stat">
|
||||
<div class="trip-stat-value" id="total-parks">-</div>
|
||||
<div class="trip-stat-value" x-text="tripParks.length">-</div>
|
||||
<div class="trip-stat-label">Parks</div>
|
||||
</div>
|
||||
<div class="trip-stat">
|
||||
<div class="trip-stat-value" id="total-rides">-</div>
|
||||
<div class="trip-stat-value">-</div>
|
||||
<div class="trip-stat-label">Total Rides</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button id="save-trip"
|
||||
class="w-full px-4 py-2 text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors"
|
||||
<button class="w-full px-4 py-2 text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors"
|
||||
@click="saveTrip()">
|
||||
<i class="mr-2 fas fa-save"></i>Save Trip
|
||||
</button>
|
||||
@@ -243,26 +336,32 @@
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Route Map</h3>
|
||||
<div class="flex gap-2">
|
||||
<button id="fit-route"
|
||||
class="px-3 py-1 text-sm text-gray-700 bg-gray-100 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
|
||||
@click="fitRoute()">
|
||||
<button class="px-3 py-1 text-sm text-gray-700 bg-gray-100 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
|
||||
hx-post="/maps/fit-route/"
|
||||
hx-vals='{"parks": "{{ tripParks|join:"," }}"}'
|
||||
hx-target="#map-container"
|
||||
hx-swap="none">
|
||||
<i class="mr-1 fas fa-expand-arrows-alt"></i>Fit Route
|
||||
</button>
|
||||
<button id="toggle-parks"
|
||||
class="px-3 py-1 text-sm text-gray-700 bg-gray-100 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
|
||||
@click="toggleAllParks()">
|
||||
<i class="mr-1 fas fa-eye"></i><span x-text="showAllParks ? 'Hide Parks' : 'Show All Parks'">Show All Parks</span>
|
||||
<button class="px-3 py-1 text-sm text-gray-700 bg-gray-100 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
|
||||
@click="showAllParks = !showAllParks"
|
||||
hx-post="/maps/toggle-parks/"
|
||||
hx-vals='{"show": "{{ showAllParks }}"}'
|
||||
hx-target="#map-container"
|
||||
hx-swap="none">
|
||||
<i class="mr-1 fas fa-eye"></i>
|
||||
<span x-text="showAllParks ? 'Hide Parks' : 'Show All Parks'">Show All Parks</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="map-container" class="map-container"></div>
|
||||
|
||||
<!-- Map Loading Indicator -->
|
||||
<div id="map-loading" class="htmx-indicator absolute inset-0 flex items-center justify-center bg-gray-100 dark:bg-gray-800 rounded-lg">
|
||||
<div class="text-center">
|
||||
<div class="w-8 h-8 mx-auto mb-4 border-4 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">Loading map...</p>
|
||||
<div id="map-container" class="map-container">
|
||||
<!-- Map will be loaded via HTMX -->
|
||||
<div class="flex items-center justify-center h-full bg-gray-100 dark:bg-gray-800 rounded-lg">
|
||||
<div class="text-center">
|
||||
<div class="w-8 h-8 mx-auto mb-4 border-4 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">Loading map...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -286,7 +385,7 @@
|
||||
hx-get="{% url 'parks:htmx_saved_trips' %}"
|
||||
hx-trigger="load"
|
||||
hx-indicator="#trips-loading">
|
||||
<!-- Saved trips will be loaded here -->
|
||||
<!-- Saved trips will be loaded here via HTMX -->
|
||||
</div>
|
||||
|
||||
<div id="trips-loading" class="htmx-indicator text-center py-4">
|
||||
@@ -299,255 +398,19 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<!-- Leaflet JS -->
|
||||
<!-- External libraries for map functionality only -->
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<!-- Leaflet Routing Machine JS -->
|
||||
<script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script>
|
||||
<!-- Sortable JS for drag & drop -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('tripPlanner', () => ({
|
||||
map: null,
|
||||
tripParks: [],
|
||||
allParks: [],
|
||||
showAllParks: false,
|
||||
routeControl: null,
|
||||
parkMarkers: {},
|
||||
|
||||
init() {
|
||||
this.initMap();
|
||||
this.setupSortable();
|
||||
},
|
||||
|
||||
initMap() {
|
||||
if (typeof L !== 'undefined') {
|
||||
this.map = L.map('map-container').setView([39.8283, -98.5795], 4);
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© OpenStreetMap contributors'
|
||||
}).addTo(this.map);
|
||||
|
||||
this.loadAllParks();
|
||||
<!-- HTMX Error Handling (Minimal JavaScript as allowed by Context7 docs) -->
|
||||
<div x-data="{
|
||||
init() {
|
||||
// Only essential HTMX error handling as shown in Context7 docs
|
||||
this.$el.addEventListener('htmx:responseError', (evt) => {
|
||||
if (evt.detail.xhr.status === 404 || evt.detail.xhr.status === 500) {
|
||||
console.error('HTMX Error:', evt.detail.xhr.status);
|
||||
}
|
||||
},
|
||||
|
||||
setupSortable() {
|
||||
if (typeof Sortable !== 'undefined') {
|
||||
const tripParksEl = document.getElementById('trip-parks');
|
||||
if (tripParksEl) {
|
||||
Sortable.create(tripParksEl, {
|
||||
animation: 150,
|
||||
ghostClass: 'drag-over',
|
||||
onEnd: (evt) => {
|
||||
this.reorderTrip(evt.oldIndex, evt.newIndex);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
loadAllParks() {
|
||||
// Load parks via HTMX or fetch
|
||||
fetch('/api/parks/')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.allParks = data;
|
||||
this.displayAllParks();
|
||||
})
|
||||
.catch(error => console.error('Error loading parks:', error));
|
||||
},
|
||||
|
||||
displayAllParks() {
|
||||
this.allParks.forEach(park => {
|
||||
if (park.latitude && park.longitude) {
|
||||
const marker = L.marker([park.latitude, park.longitude])
|
||||
.bindPopup(`
|
||||
<div class="p-2">
|
||||
<h3 class="font-semibold">${park.name}</h3>
|
||||
<p class="text-sm text-gray-600">${park.location || ''}</p>
|
||||
<button onclick="Alpine.store('tripPlanner').addParkToTrip(${park.id})"
|
||||
class="mt-2 px-2 py-1 bg-blue-500 text-white text-xs rounded">
|
||||
Add to Trip
|
||||
</button>
|
||||
</div>
|
||||
`);
|
||||
|
||||
this.parkMarkers[park.id] = marker;
|
||||
if (this.showAllParks) {
|
||||
marker.addTo(this.map);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
addParkToTrip(parkId) {
|
||||
const park = this.allParks.find(p => p.id === parkId);
|
||||
if (park && !this.tripParks.find(p => p.id === parkId)) {
|
||||
this.tripParks.push(park);
|
||||
this.updateTripDisplay();
|
||||
this.updateButtons();
|
||||
}
|
||||
},
|
||||
|
||||
removeParkFromTrip(parkId) {
|
||||
this.tripParks = this.tripParks.filter(p => p.id !== parkId);
|
||||
this.updateTripDisplay();
|
||||
this.updateButtons();
|
||||
this.clearRoute();
|
||||
},
|
||||
|
||||
clearTrip() {
|
||||
this.tripParks = [];
|
||||
this.updateTripDisplay();
|
||||
this.updateButtons();
|
||||
this.clearRoute();
|
||||
},
|
||||
|
||||
updateTripDisplay() {
|
||||
const container = document.getElementById('trip-parks');
|
||||
const emptyState = document.getElementById('empty-trip');
|
||||
|
||||
if (this.tripParks.length === 0) {
|
||||
emptyState.style.display = 'block';
|
||||
container.innerHTML = emptyState.outerHTML;
|
||||
} else {
|
||||
container.innerHTML = this.tripParks.map((park, index) => `
|
||||
<div class="park-card draggable-item" data-park-id="${park.id}">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold mr-3">
|
||||
${index + 1}
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-medium text-gray-900 dark:text-white">${park.name}</h4>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">${park.location || ''}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="removeParkFromTrip(${park.id})"
|
||||
class="text-red-500 hover:text-red-700">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
},
|
||||
|
||||
updateButtons() {
|
||||
const hasParks = this.tripParks.length >= 2;
|
||||
document.getElementById('optimize-route').disabled = !hasParks;
|
||||
document.getElementById('calculate-route').disabled = !hasParks;
|
||||
},
|
||||
|
||||
optimizeRoute() {
|
||||
// Implement route optimization logic
|
||||
console.log('Optimizing route for', this.tripParks.length, 'parks');
|
||||
},
|
||||
|
||||
calculateRoute() {
|
||||
if (this.tripParks.length < 2) return;
|
||||
|
||||
this.clearRoute();
|
||||
|
||||
const waypoints = this.tripParks.map(park =>
|
||||
L.latLng(park.latitude, park.longitude)
|
||||
);
|
||||
|
||||
if (typeof L.Routing !== 'undefined') {
|
||||
this.routeControl = L.Routing.control({
|
||||
waypoints: waypoints,
|
||||
routeWhileDragging: false,
|
||||
addWaypoints: false,
|
||||
createMarker: (i, waypoint, n) => {
|
||||
const park = this.tripParks[i];
|
||||
return L.marker(waypoint.latLng, {
|
||||
icon: L.divIcon({
|
||||
html: `<div class="waypoint-marker-inner">${i + 1}</div>`,
|
||||
className: `waypoint-marker ${i === 0 ? 'waypoint-start' : i === n - 1 ? 'waypoint-end' : 'waypoint-stop'}`,
|
||||
iconSize: [30, 30]
|
||||
})
|
||||
}).bindPopup(park.name);
|
||||
}
|
||||
}).addTo(this.map);
|
||||
|
||||
this.routeControl.on('routesfound', (e) => {
|
||||
const route = e.routes[0];
|
||||
this.updateTripSummary(route);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
clearRoute() {
|
||||
if (this.routeControl) {
|
||||
this.map.removeControl(this.routeControl);
|
||||
this.routeControl = null;
|
||||
}
|
||||
this.hideTripSummary();
|
||||
},
|
||||
|
||||
updateTripSummary(route) {
|
||||
const summary = route.summary;
|
||||
document.getElementById('total-distance').textContent = Math.round(summary.totalDistance / 1609.34); // Convert to miles
|
||||
document.getElementById('total-time').textContent = Math.round(summary.totalTime / 3600) + 'h';
|
||||
document.getElementById('total-parks').textContent = this.tripParks.length;
|
||||
document.getElementById('total-rides').textContent = this.tripParks.reduce((sum, park) => sum + (park.ride_count || 0), 0);
|
||||
|
||||
document.getElementById('trip-summary').classList.remove('hidden');
|
||||
},
|
||||
|
||||
hideTripSummary() {
|
||||
document.getElementById('trip-summary').classList.add('hidden');
|
||||
},
|
||||
|
||||
fitRoute() {
|
||||
if (this.tripParks.length > 0) {
|
||||
const group = new L.featureGroup(
|
||||
this.tripParks.map(park => L.marker([park.latitude, park.longitude]))
|
||||
);
|
||||
this.map.fitBounds(group.getBounds().pad(0.1));
|
||||
}
|
||||
},
|
||||
|
||||
toggleAllParks() {
|
||||
this.showAllParks = !this.showAllParks;
|
||||
|
||||
Object.values(this.parkMarkers).forEach(marker => {
|
||||
if (this.showAllParks) {
|
||||
marker.addTo(this.map);
|
||||
} else {
|
||||
this.map.removeLayer(marker);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
reorderTrip(oldIndex, newIndex) {
|
||||
const park = this.tripParks.splice(oldIndex, 1)[0];
|
||||
this.tripParks.splice(newIndex, 0, park);
|
||||
this.updateTripDisplay();
|
||||
this.clearRoute();
|
||||
},
|
||||
|
||||
saveTrip() {
|
||||
if (this.tripParks.length === 0) return;
|
||||
|
||||
const tripData = {
|
||||
name: `Trip ${new Date().toLocaleDateString()}`,
|
||||
parks: this.tripParks.map(p => p.id)
|
||||
};
|
||||
|
||||
// Save via HTMX
|
||||
htmx.ajax('POST', '/trips/save/', {
|
||||
values: tripData,
|
||||
target: '#saved-trips',
|
||||
swap: 'innerHTML'
|
||||
});
|
||||
}
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Trip Planner Component Container -->
|
||||
<div x-data="tripPlanner" x-init="init()" style="display: none;"></div>
|
||||
});
|
||||
}
|
||||
}"></div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,7 +1,45 @@
|
||||
{% load static %}
|
||||
|
||||
<!-- HTMX + AlpineJS ONLY - NO CUSTOM JAVASCRIPT -->
|
||||
<!-- Advanced Ride Filters Sidebar -->
|
||||
<div class="filter-sidebar bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 h-full overflow-y-auto">
|
||||
<div class="filter-sidebar bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 h-full overflow-y-auto"
|
||||
x-data="{
|
||||
sections: {
|
||||
'search-section': true,
|
||||
'basic-section': true,
|
||||
'date-section': false,
|
||||
'height-section': false,
|
||||
'performance-section': false,
|
||||
'relationships-section': false,
|
||||
'coaster-section': false,
|
||||
'sorting-section': false
|
||||
},
|
||||
|
||||
init() {
|
||||
// Restore section states from localStorage using AlpineJS patterns
|
||||
Object.keys(this.sections).forEach(sectionId => {
|
||||
const state = localStorage.getItem('filter-' + sectionId);
|
||||
if (state !== null) {
|
||||
this.sections[sectionId] = state === 'open';
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
toggleSection(sectionId) {
|
||||
this.sections[sectionId] = !this.sections[sectionId];
|
||||
localStorage.setItem('filter-' + sectionId, this.sections[sectionId] ? 'open' : 'closed');
|
||||
},
|
||||
|
||||
removeFilter(category, filterName) {
|
||||
// Use HTMX to remove filter
|
||||
htmx.ajax('POST', '/rides/remove-filter/', {
|
||||
values: { category: category, filter: filterName },
|
||||
target: '#filter-results',
|
||||
swap: 'outerHTML'
|
||||
});
|
||||
}
|
||||
}">
|
||||
|
||||
<!-- Filter Header -->
|
||||
<div class="sticky top-0 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 p-4 z-10">
|
||||
<div class="flex items-center justify-between">
|
||||
@@ -42,7 +80,7 @@
|
||||
{{ filter_name }}: {{ filter_value }}
|
||||
<button type="button"
|
||||
class="ml-1 h-3 w-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
||||
onclick="removeFilter('{{ category }}', '{{ filter_name }}')">
|
||||
@click="removeFilter('{{ category }}', '{{ filter_name }}')">
|
||||
<i class="fas fa-times text-xs"></i>
|
||||
</button>
|
||||
</span>
|
||||
@@ -67,16 +105,17 @@
|
||||
<div class="filter-section border-b border-gray-200 dark:border-gray-700">
|
||||
<button type="button"
|
||||
class="filter-toggle w-full px-4 py-3 text-left font-medium text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none"
|
||||
data-target="search-section">
|
||||
@click="toggleSection('search-section')">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="flex items-center">
|
||||
<i class="fas fa-search mr-2 text-gray-500"></i>
|
||||
Search
|
||||
</span>
|
||||
<i class="fas fa-chevron-down transform transition-transform duration-200"></i>
|
||||
<i class="fas fa-chevron-down transform transition-transform duration-200"
|
||||
:class="{ 'rotate-180': sections['search-section'] }"></i>
|
||||
</div>
|
||||
</button>
|
||||
<div id="search-section" class="filter-content p-4 space-y-3">
|
||||
<div id="search-section" class="filter-content p-4 space-y-3" x-show="sections['search-section']" x-transition>
|
||||
{{ filter_form.search_text.label_tag }}
|
||||
{{ filter_form.search_text }}
|
||||
|
||||
@@ -93,16 +132,17 @@
|
||||
<div class="filter-section border-b border-gray-200 dark:border-gray-700">
|
||||
<button type="button"
|
||||
class="filter-toggle w-full px-4 py-3 text-left font-medium text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none"
|
||||
data-target="basic-section">
|
||||
@click="toggleSection('basic-section')">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="flex items-center">
|
||||
<i class="fas fa-info-circle mr-2 text-gray-500"></i>
|
||||
Basic Info
|
||||
</span>
|
||||
<i class="fas fa-chevron-down transform transition-transform duration-200"></i>
|
||||
<i class="fas fa-chevron-down transform transition-transform duration-200"
|
||||
:class="{ 'rotate-180': sections['basic-section'] }"></i>
|
||||
</div>
|
||||
</button>
|
||||
<div id="basic-section" class="filter-content p-4 space-y-4">
|
||||
<div id="basic-section" class="filter-content p-4 space-y-4" x-show="sections['basic-section']" x-transition>
|
||||
<!-- Categories -->
|
||||
<div>
|
||||
{{ filter_form.categories.label_tag }}
|
||||
@@ -127,16 +167,17 @@
|
||||
<div class="filter-section border-b border-gray-200 dark:border-gray-700">
|
||||
<button type="button"
|
||||
class="filter-toggle w-full px-4 py-3 text-left font-medium text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none"
|
||||
data-target="date-section">
|
||||
@click="toggleSection('date-section')">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="flex items-center">
|
||||
<i class="fas fa-calendar mr-2 text-gray-500"></i>
|
||||
Date Ranges
|
||||
</span>
|
||||
<i class="fas fa-chevron-down transform transition-transform duration-200"></i>
|
||||
<i class="fas fa-chevron-down transform transition-transform duration-200"
|
||||
:class="{ 'rotate-180': sections['date-section'] }"></i>
|
||||
</div>
|
||||
</button>
|
||||
<div id="date-section" class="filter-content p-4 space-y-4">
|
||||
<div id="date-section" class="filter-content p-4 space-y-4" x-show="sections['date-section']" x-transition>
|
||||
<!-- Opening Date Range -->
|
||||
<div>
|
||||
{{ filter_form.opening_date_range.label_tag }}
|
||||
@@ -155,16 +196,17 @@
|
||||
<div class="filter-section border-b border-gray-200 dark:border-gray-700">
|
||||
<button type="button"
|
||||
class="filter-toggle w-full px-4 py-3 text-left font-medium text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none"
|
||||
data-target="height-section">
|
||||
@click="toggleSection('height-section')">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="flex items-center">
|
||||
<i class="fas fa-ruler-vertical mr-2 text-gray-500"></i>
|
||||
Height & Safety
|
||||
</span>
|
||||
<i class="fas fa-chevron-down transform transition-transform duration-200"></i>
|
||||
<i class="fas fa-chevron-down transform transition-transform duration-200"
|
||||
:class="{ 'rotate-180': sections['height-section'] }"></i>
|
||||
</div>
|
||||
</button>
|
||||
<div id="height-section" class="filter-content p-4 space-y-4">
|
||||
<div id="height-section" class="filter-content p-4 space-y-4" x-show="sections['height-section']" x-transition>
|
||||
<!-- Height Requirements -->
|
||||
<div>
|
||||
{{ filter_form.height_requirements.label_tag }}
|
||||
@@ -189,16 +231,17 @@
|
||||
<div class="filter-section border-b border-gray-200 dark:border-gray-700">
|
||||
<button type="button"
|
||||
class="filter-toggle w-full px-4 py-3 text-left font-medium text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none"
|
||||
data-target="performance-section">
|
||||
@click="toggleSection('performance-section')">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="flex items-center">
|
||||
<i class="fas fa-tachometer-alt mr-2 text-gray-500"></i>
|
||||
Performance
|
||||
</span>
|
||||
<i class="fas fa-chevron-down transform transition-transform duration-200"></i>
|
||||
<i class="fas fa-chevron-down transform transition-transform duration-200"
|
||||
:class="{ 'rotate-180': sections['performance-section'] }"></i>
|
||||
</div>
|
||||
</button>
|
||||
<div id="performance-section" class="filter-content p-4 space-y-4">
|
||||
<div id="performance-section" class="filter-content p-4 space-y-4" x-show="sections['performance-section']" x-transition>
|
||||
<!-- Speed Range -->
|
||||
<div>
|
||||
{{ filter_form.speed_range.label_tag }}
|
||||
@@ -229,16 +272,17 @@
|
||||
<div class="filter-section border-b border-gray-200 dark:border-gray-700">
|
||||
<button type="button"
|
||||
class="filter-toggle w-full px-4 py-3 text-left font-medium text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none"
|
||||
data-target="relationships-section">
|
||||
@click="toggleSection('relationships-section')">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="flex items-center">
|
||||
<i class="fas fa-sitemap mr-2 text-gray-500"></i>
|
||||
Companies & Models
|
||||
</span>
|
||||
<i class="fas fa-chevron-down transform transition-transform duration-200"></i>
|
||||
<i class="fas fa-chevron-down transform transition-transform duration-200"
|
||||
:class="{ 'rotate-180': sections['relationships-section'] }"></i>
|
||||
</div>
|
||||
</button>
|
||||
<div id="relationships-section" class="filter-content p-4 space-y-4">
|
||||
<div id="relationships-section" class="filter-content p-4 space-y-4" x-show="sections['relationships-section']" x-transition>
|
||||
<!-- Manufacturers -->
|
||||
<div>
|
||||
{{ filter_form.manufacturers.label_tag }}
|
||||
@@ -263,16 +307,17 @@
|
||||
<div class="filter-section border-b border-gray-200 dark:border-gray-700">
|
||||
<button type="button"
|
||||
class="filter-toggle w-full px-4 py-3 text-left font-medium text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none"
|
||||
data-target="coaster-section">
|
||||
@click="toggleSection('coaster-section')">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="flex items-center">
|
||||
<i class="fas fa-mountain mr-2 text-gray-500"></i>
|
||||
Roller Coaster Details
|
||||
</span>
|
||||
<i class="fas fa-chevron-down transform transition-transform duration-200"></i>
|
||||
<i class="fas fa-chevron-down transform transition-transform duration-200"
|
||||
:class="{ 'rotate-180': sections['coaster-section'] }"></i>
|
||||
</div>
|
||||
</button>
|
||||
<div id="coaster-section" class="filter-content p-4 space-y-4">
|
||||
<div id="coaster-section" class="filter-content p-4 space-y-4" x-show="sections['coaster-section']" x-transition>
|
||||
<!-- Track Type -->
|
||||
<div>
|
||||
{{ filter_form.track_types.label_tag }}
|
||||
@@ -324,16 +369,17 @@
|
||||
<div class="filter-section">
|
||||
<button type="button"
|
||||
class="filter-toggle w-full px-4 py-3 text-left font-medium text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none"
|
||||
data-target="sorting-section">
|
||||
@click="toggleSection('sorting-section')">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="flex items-center">
|
||||
<i class="fas fa-sort mr-2 text-gray-500"></i>
|
||||
Sorting
|
||||
</span>
|
||||
<i class="fas fa-chevron-down transform transition-transform duration-200"></i>
|
||||
<i class="fas fa-chevron-down transform transition-transform duration-200"
|
||||
:class="{ 'rotate-180': sections['sorting-section'] }"></i>
|
||||
</div>
|
||||
</button>
|
||||
<div id="sorting-section" class="filter-content p-4 space-y-4">
|
||||
<div id="sorting-section" class="filter-content p-4 space-y-4" x-show="sections['sorting-section']" x-transition>
|
||||
<!-- Sort By -->
|
||||
<div>
|
||||
{{ filter_form.sort_by.label_tag }}
|
||||
@@ -350,116 +396,14 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Filter JavaScript -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Initialize collapsible sections
|
||||
initializeFilterSections();
|
||||
|
||||
// Initialize filter form handlers
|
||||
initializeFilterForm();
|
||||
});
|
||||
|
||||
function initializeFilterSections() {
|
||||
const toggles = document.querySelectorAll('.filter-toggle');
|
||||
|
||||
toggles.forEach(toggle => {
|
||||
toggle.addEventListener('click', function() {
|
||||
const targetId = this.getAttribute('data-target');
|
||||
const content = document.getElementById(targetId);
|
||||
const chevron = this.querySelector('.fa-chevron-down');
|
||||
|
||||
if (content.style.display === 'none' || content.style.display === '') {
|
||||
content.style.display = 'block';
|
||||
chevron.style.transform = 'rotate(180deg)';
|
||||
localStorage.setItem(`filter-${targetId}`, 'open');
|
||||
} else {
|
||||
content.style.display = 'none';
|
||||
chevron.style.transform = 'rotate(0deg)';
|
||||
localStorage.setItem(`filter-${targetId}`, 'closed');
|
||||
}
|
||||
});
|
||||
|
||||
// Restore section state from localStorage
|
||||
const targetId = toggle.getAttribute('data-target');
|
||||
const content = document.getElementById(targetId);
|
||||
const chevron = toggle.querySelector('.fa-chevron-down');
|
||||
const state = localStorage.getItem(`filter-${targetId}`);
|
||||
|
||||
if (state === 'closed') {
|
||||
content.style.display = 'none';
|
||||
chevron.style.transform = 'rotate(0deg)';
|
||||
} else {
|
||||
content.style.display = 'block';
|
||||
chevron.style.transform = 'rotate(180deg)';
|
||||
<!-- HTMX Error Handling (Minimal JavaScript as allowed by Context7 docs) -->
|
||||
<div x-data="{
|
||||
init() {
|
||||
// Only essential HTMX error handling as shown in Context7 docs
|
||||
this.$el.addEventListener('htmx:responseError', (evt) => {
|
||||
if (evt.detail.xhr.status === 404 || evt.detail.xhr.status === 500) {
|
||||
console.error('HTMX Error:', evt.detail.xhr.status);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initializeFilterForm() {
|
||||
const form = document.getElementById('filter-form');
|
||||
if (!form) return;
|
||||
|
||||
// Handle multi-select changes
|
||||
const selects = form.querySelectorAll('select[multiple]');
|
||||
selects.forEach(select => {
|
||||
select.addEventListener('change', function() {
|
||||
// Trigger HTMX update
|
||||
htmx.trigger(form, 'change');
|
||||
});
|
||||
});
|
||||
|
||||
// Handle range inputs
|
||||
const rangeInputs = form.querySelectorAll('input[type="range"], input[type="number"]');
|
||||
rangeInputs.forEach(input => {
|
||||
input.addEventListener('input', function() {
|
||||
// Debounced update
|
||||
clearTimeout(this.updateTimeout);
|
||||
this.updateTimeout = setTimeout(() => {
|
||||
htmx.trigger(form, 'input');
|
||||
}, 500);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function removeFilter(category, filterName) {
|
||||
const form = document.getElementById('filter-form');
|
||||
const input = form.querySelector(`[name*="${filterName}"]`);
|
||||
|
||||
if (input) {
|
||||
if (input.type === 'checkbox') {
|
||||
input.checked = false;
|
||||
} else if (input.tagName === 'SELECT') {
|
||||
if (input.multiple) {
|
||||
Array.from(input.options).forEach(option => option.selected = false);
|
||||
} else {
|
||||
input.value = '';
|
||||
}
|
||||
} else {
|
||||
input.value = '';
|
||||
}
|
||||
|
||||
// Trigger form update
|
||||
htmx.trigger(form, 'change');
|
||||
}
|
||||
}
|
||||
|
||||
// Update filter counts
|
||||
function updateFilterCounts() {
|
||||
const form = document.getElementById('filter-form');
|
||||
const formData = new FormData(form);
|
||||
let activeCount = 0;
|
||||
|
||||
for (let [key, value] of formData.entries()) {
|
||||
if (value && value.trim() !== '') {
|
||||
activeCount++;
|
||||
}
|
||||
}
|
||||
|
||||
const badge = document.querySelector('.filter-count-badge');
|
||||
if (badge) {
|
||||
badge.textContent = activeCount;
|
||||
badge.style.display = activeCount > 0 ? 'inline-flex' : 'none';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}"></div>
|
||||
|
||||
@@ -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 = '';
|
||||
}
|
||||
}));
|
||||
|
||||
@@ -1,365 +1,122 @@
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('rideSearch', () => ({
|
||||
init() {
|
||||
// Initialize from URL params
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
this.searchQuery = urlParams.get('search') || '';
|
||||
|
||||
// Bind to form reset
|
||||
document.querySelector('form').addEventListener('reset', () => {
|
||||
this.searchQuery = '';
|
||||
<!-- HTMX + AlpineJS ONLY - NO CUSTOM JAVASCRIPT -->
|
||||
<div x-data="{
|
||||
searchQuery: new URLSearchParams(window.location.search).get('search') || '',
|
||||
showSuggestions: false,
|
||||
selectedIndex: -1,
|
||||
|
||||
init() {
|
||||
// Watch for URL changes
|
||||
this.$watch('searchQuery', value => {
|
||||
if (value.length >= 2) {
|
||||
this.showSuggestions = true;
|
||||
} else {
|
||||
this.showSuggestions = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Handle clicks outside to close suggestions
|
||||
this.$el.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('#search-suggestions') && !e.target.closest('#search')) {
|
||||
this.showSuggestions = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
handleInput() {
|
||||
// HTMX will handle the actual search request
|
||||
if (this.searchQuery.length >= 2) {
|
||||
this.showSuggestions = true;
|
||||
} else {
|
||||
this.showSuggestions = false;
|
||||
}
|
||||
},
|
||||
|
||||
selectSuggestion(text) {
|
||||
this.searchQuery = text;
|
||||
this.showSuggestions = false;
|
||||
// Update the search input
|
||||
this.$refs.searchInput.value = text;
|
||||
// Trigger form change for HTMX
|
||||
this.$refs.searchForm.dispatchEvent(new Event('change'));
|
||||
},
|
||||
|
||||
handleKeydown(e) {
|
||||
const suggestions = this.$el.querySelectorAll('#search-suggestions button');
|
||||
if (!suggestions.length) return;
|
||||
|
||||
switch(e.key) {
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
if (this.selectedIndex < suggestions.length - 1) {
|
||||
this.selectedIndex++;
|
||||
suggestions[this.selectedIndex].focus();
|
||||
}
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
if (this.selectedIndex > 0) {
|
||||
this.selectedIndex--;
|
||||
suggestions[this.selectedIndex].focus();
|
||||
} else {
|
||||
this.$refs.searchInput.focus();
|
||||
this.selectedIndex = -1;
|
||||
}
|
||||
break;
|
||||
case 'Escape':
|
||||
this.showSuggestions = false;
|
||||
this.selectedIndex = -1;
|
||||
this.cleanup();
|
||||
});
|
||||
|
||||
// Handle clicks outside suggestions
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('#search-suggestions') && !e.target.closest('#search')) {
|
||||
this.showSuggestions = false;
|
||||
this.$refs.searchInput.blur();
|
||||
break;
|
||||
case 'Enter':
|
||||
if (e.target.tagName === 'BUTTON') {
|
||||
e.preventDefault();
|
||||
this.selectSuggestion(e.target.dataset.text);
|
||||
}
|
||||
});
|
||||
|
||||
// Handle HTMX errors
|
||||
document.body.addEventListener('htmx:error', (evt) => {
|
||||
console.error('HTMX Error:', evt.detail.error);
|
||||
this.showError('An error occurred while searching. Please try again.');
|
||||
});
|
||||
|
||||
// Store bound handlers for cleanup
|
||||
this.boundHandlers = new Map();
|
||||
|
||||
// Create handler functions
|
||||
const popstateHandler = () => {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
this.searchQuery = urlParams.get('search') || '';
|
||||
this.syncFormWithUrl();
|
||||
};
|
||||
this.boundHandlers.set('popstate', popstateHandler);
|
||||
|
||||
const errorHandler = (evt) => {
|
||||
console.error('HTMX Error:', evt.detail.error);
|
||||
this.showError('An error occurred while searching. Please try again.');
|
||||
};
|
||||
this.boundHandlers.set('htmx:error', errorHandler);
|
||||
|
||||
// Bind event listeners
|
||||
window.addEventListener('popstate', popstateHandler);
|
||||
document.body.addEventListener('htmx:error', errorHandler);
|
||||
|
||||
// Restore filters from localStorage if no URL params exist
|
||||
const savedFilters = localStorage.getItem('rideFilters');
|
||||
|
||||
// Set up destruction handler
|
||||
this.$cleanup = this.performCleanup.bind(this);
|
||||
if (savedFilters) {
|
||||
const filters = JSON.parse(savedFilters);
|
||||
Object.entries(filters).forEach(([key, value]) => {
|
||||
const input = document.querySelector(`[name="${key}"]`);
|
||||
if (input) input.value = value;
|
||||
});
|
||||
// Trigger search with restored filters
|
||||
document.querySelector('form').dispatchEvent(new Event('change'));
|
||||
}
|
||||
|
||||
// Set up filter persistence
|
||||
document.querySelector('form').addEventListener('change', (e) => {
|
||||
this.saveFilters();
|
||||
});
|
||||
},
|
||||
|
||||
showSuggestions: false,
|
||||
loading: false,
|
||||
searchQuery: '',
|
||||
suggestionTimeout: null,
|
||||
|
||||
// Save current filters to localStorage
|
||||
saveFilters() {
|
||||
const form = document.querySelector('form');
|
||||
const formData = new FormData(form);
|
||||
const filters = {};
|
||||
for (let [key, value] of formData.entries()) {
|
||||
if (value) filters[key] = value;
|
||||
}
|
||||
localStorage.setItem('rideFilters', JSON.stringify(filters));
|
||||
},
|
||||
|
||||
// Clear all filters
|
||||
clearFilters() {
|
||||
document.querySelectorAll('form select, form input').forEach(el => {
|
||||
el.value = '';
|
||||
});
|
||||
localStorage.removeItem('rideFilters');
|
||||
document.querySelector('form').dispatchEvent(new Event('change'));
|
||||
},
|
||||
|
||||
// Get search suggestions with request tracking
|
||||
lastRequestId: 0,
|
||||
currentRequest: null,
|
||||
|
||||
getSearchSuggestions() {
|
||||
if (this.searchQuery.length < 2) {
|
||||
break;
|
||||
case 'Tab':
|
||||
this.showSuggestions = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Cancel any pending request
|
||||
if (this.currentRequest) {
|
||||
this.currentRequest.abort();
|
||||
}
|
||||
|
||||
const requestId = ++this.lastRequestId;
|
||||
const controller = new AbortController();
|
||||
this.currentRequest = controller;
|
||||
|
||||
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout
|
||||
|
||||
this.fetchSuggestions(controller, requestId, () => {
|
||||
clearTimeout(timeoutId);
|
||||
if (this.currentRequest === controller) {
|
||||
this.currentRequest = null;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
fetchSuggestions(controller, requestId) {
|
||||
const parkSlug = document.querySelector('input[name="park_slug"]')?.value;
|
||||
const queryParams = {
|
||||
q: this.searchQuery
|
||||
};
|
||||
if (parkSlug) {
|
||||
queryParams.park_slug = parkSlug;
|
||||
}
|
||||
|
||||
// Create temporary form for HTMX request
|
||||
const tempForm = document.createElement('form');
|
||||
tempForm.setAttribute('hx-get', '/rides/search-suggestions/');
|
||||
tempForm.setAttribute('hx-vals', JSON.stringify(queryParams));
|
||||
tempForm.setAttribute('hx-trigger', 'submit');
|
||||
tempForm.setAttribute('hx-swap', 'none');
|
||||
|
||||
// Add request ID header simulation
|
||||
tempForm.setAttribute('hx-headers', JSON.stringify({
|
||||
'X-Request-ID': requestId.toString()
|
||||
}));
|
||||
|
||||
// Handle abort signal
|
||||
if (controller.signal.aborted) {
|
||||
this.handleSuggestionError(new Error('AbortError'), requestId);
|
||||
return;
|
||||
}
|
||||
|
||||
const abortHandler = () => {
|
||||
if (document.body.contains(tempForm)) {
|
||||
document.body.removeChild(tempForm);
|
||||
}
|
||||
this.handleSuggestionError(new Error('AbortError'), requestId);
|
||||
};
|
||||
controller.signal.addEventListener('abort', abortHandler);
|
||||
|
||||
tempForm.addEventListener('htmx:afterRequest', (event) => {
|
||||
controller.signal.removeEventListener('abort', abortHandler);
|
||||
|
||||
if (event.detail.xhr.status >= 200 && event.detail.xhr.status < 300) {
|
||||
this.handleSuggestionResponse(event.detail.xhr, requestId);
|
||||
} else {
|
||||
this.handleSuggestionError(new Error(`HTTP error! status: ${event.detail.xhr.status}`), requestId);
|
||||
}
|
||||
|
||||
if (document.body.contains(tempForm)) {
|
||||
document.body.removeChild(tempForm);
|
||||
}
|
||||
});
|
||||
|
||||
tempForm.addEventListener('htmx:error', (event) => {
|
||||
controller.signal.removeEventListener('abort', abortHandler);
|
||||
this.handleSuggestionError(new Error(`HTTP error! status: ${event.detail.xhr.status || 'unknown'}`), requestId);
|
||||
|
||||
if (document.body.contains(tempForm)) {
|
||||
document.body.removeChild(tempForm);
|
||||
}
|
||||
});
|
||||
|
||||
document.body.appendChild(tempForm);
|
||||
htmx.trigger(tempForm, 'submit');
|
||||
},
|
||||
|
||||
handleSuggestionResponse(xhr, requestId) {
|
||||
if (requestId === this.lastRequestId && this.searchQuery === document.getElementById('search').value) {
|
||||
const html = xhr.responseText || '';
|
||||
const suggestionsEl = document.getElementById('search-suggestions');
|
||||
suggestionsEl.innerHTML = html;
|
||||
this.showSuggestions = Boolean(html.trim());
|
||||
|
||||
this.updateAriaAttributes(suggestionsEl);
|
||||
}
|
||||
},
|
||||
|
||||
updateAriaAttributes(suggestionsEl) {
|
||||
const searchInput = document.getElementById('search');
|
||||
searchInput.setAttribute('aria-expanded', this.showSuggestions.toString());
|
||||
searchInput.setAttribute('aria-controls', 'search-suggestions');
|
||||
if (this.showSuggestions) {
|
||||
suggestionsEl.setAttribute('role', 'listbox');
|
||||
suggestionsEl.querySelectorAll('button').forEach(btn => {
|
||||
btn.setAttribute('role', 'option');
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
handleSuggestionError(error, requestId) {
|
||||
if (error.name === 'AbortError') {
|
||||
console.warn('Search suggestion request timed out or cancelled');
|
||||
return;
|
||||
}
|
||||
|
||||
console.error('Error fetching suggestions:', error);
|
||||
if (requestId === this.lastRequestId) {
|
||||
const suggestionsEl = document.getElementById('search-suggestions');
|
||||
suggestionsEl.innerHTML = `
|
||||
<div class="p-2 text-sm text-red-600 dark:text-red-400" role="alert">
|
||||
Failed to load suggestions. Please try again.
|
||||
</div>`;
|
||||
this.showSuggestions = true;
|
||||
}
|
||||
},
|
||||
|
||||
// Handle input changes with debounce
|
||||
handleInput() {
|
||||
clearTimeout(this.suggestionTimeout);
|
||||
this.suggestionTimeout = setTimeout(() => {
|
||||
this.getSearchSuggestions();
|
||||
}, 200);
|
||||
},
|
||||
|
||||
// Handle suggestion selection
|
||||
// Sync form with URL parameters
|
||||
syncFormWithUrl() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const form = document.querySelector('form');
|
||||
|
||||
// Clear existing values
|
||||
form.querySelectorAll('input, select').forEach(el => {
|
||||
if (el.type !== 'hidden') el.value = '';
|
||||
});
|
||||
|
||||
// Set values from URL
|
||||
urlParams.forEach((value, key) => {
|
||||
const input = form.querySelector(`[name="${key}"]`);
|
||||
if (input) input.value = value;
|
||||
});
|
||||
|
||||
// Trigger form update
|
||||
form.dispatchEvent(new Event('change'));
|
||||
},
|
||||
|
||||
// Cleanup resources
|
||||
cleanup() {
|
||||
clearTimeout(this.suggestionTimeout);
|
||||
this.showSuggestions = false;
|
||||
localStorage.removeItem('rideFilters');
|
||||
},
|
||||
|
||||
selectSuggestion(text) {
|
||||
this.searchQuery = text;
|
||||
this.showSuggestions = false;
|
||||
document.getElementById('search').value = text;
|
||||
|
||||
// Update URL with search parameter
|
||||
const url = new URL(window.location);
|
||||
url.searchParams.set('search', text);
|
||||
window.history.pushState({}, '', url);
|
||||
|
||||
document.querySelector('form').dispatchEvent(new Event('change'));
|
||||
},
|
||||
|
||||
// Handle keyboard navigation
|
||||
// Show error message
|
||||
showError(message) {
|
||||
const searchInput = document.getElementById('search');
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.className = 'text-red-600 text-sm mt-1';
|
||||
errorDiv.textContent = message;
|
||||
searchInput.parentNode.appendChild(errorDiv);
|
||||
setTimeout(() => errorDiv.remove(), 3000);
|
||||
},
|
||||
|
||||
// Handle keyboard navigation
|
||||
handleKeydown(e) {
|
||||
const suggestions = document.querySelectorAll('#search-suggestions button');
|
||||
if (!suggestions.length) return;
|
||||
|
||||
const currentIndex = Array.from(suggestions).findIndex(el => el === document.activeElement);
|
||||
|
||||
switch(e.key) {
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
if (currentIndex < 0) {
|
||||
suggestions[0].focus();
|
||||
this.selectedIndex = 0;
|
||||
} else if (currentIndex < suggestions.length - 1) {
|
||||
suggestions[currentIndex + 1].focus();
|
||||
this.selectedIndex = currentIndex + 1;
|
||||
}
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
if (currentIndex > 0) {
|
||||
suggestions[currentIndex - 1].focus();
|
||||
this.selectedIndex = currentIndex - 1;
|
||||
} else {
|
||||
document.getElementById('search').focus();
|
||||
this.selectedIndex = -1;
|
||||
}
|
||||
break;
|
||||
case 'Escape':
|
||||
this.showSuggestions = false;
|
||||
this.selectedIndex = -1;
|
||||
document.getElementById('search').blur();
|
||||
break;
|
||||
case 'Enter':
|
||||
if (document.activeElement.tagName === 'BUTTON') {
|
||||
e.preventDefault();
|
||||
this.selectSuggestion(document.activeElement.dataset.text);
|
||||
}
|
||||
break;
|
||||
case 'Tab':
|
||||
this.showSuggestions = false;
|
||||
break;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}));
|
||||
});
|
||||
},
|
||||
}
|
||||
}"
|
||||
@click.outside="showSuggestions = false">
|
||||
|
||||
performCleanup() {
|
||||
// Remove all bound event listeners
|
||||
this.boundHandlers.forEach(this.removeEventHandler.bind(this));
|
||||
this.boundHandlers.clear();
|
||||
|
||||
// Cancel any pending requests
|
||||
if (this.currentRequest) {
|
||||
this.currentRequest.abort();
|
||||
this.currentRequest = null;
|
||||
}
|
||||
|
||||
// Clear any pending timeouts
|
||||
if (this.suggestionTimeout) {
|
||||
clearTimeout(this.suggestionTimeout);
|
||||
}
|
||||
},
|
||||
|
||||
removeEventHandler(handler, event) {
|
||||
if (event === 'popstate') {
|
||||
window.removeEventListener(event, handler);
|
||||
} else {
|
||||
document.body.removeEventListener(event, handler);
|
||||
}
|
||||
}
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
<!-- Search Input with HTMX -->
|
||||
<input
|
||||
x-ref="searchInput"
|
||||
x-model="searchQuery"
|
||||
@input="handleInput()"
|
||||
@keydown="handleKeydown($event)"
|
||||
hx-get="/rides/search-suggestions/"
|
||||
hx-trigger="input changed delay:200ms"
|
||||
hx-target="#search-suggestions"
|
||||
hx-swap="innerHTML"
|
||||
hx-include="[name='park_slug']"
|
||||
:aria-expanded="showSuggestions"
|
||||
aria-controls="search-suggestions"
|
||||
type="text"
|
||||
name="search"
|
||||
id="search"
|
||||
placeholder="Search rides..."
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
|
||||
<!-- Suggestions Container -->
|
||||
<div
|
||||
x-show="showSuggestions"
|
||||
x-transition
|
||||
id="search-suggestions"
|
||||
role="listbox"
|
||||
class="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto"
|
||||
>
|
||||
<!-- HTMX will populate this -->
|
||||
</div>
|
||||
|
||||
<!-- Form Reference for HTMX -->
|
||||
<form x-ref="searchForm" style="display: none;">
|
||||
<!-- Hidden form for HTMX reference -->
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- HTMX Loading Indicator Styles -->
|
||||
<style>
|
||||
@@ -368,10 +125,9 @@ document.addEventListener('alpine:init', () => {
|
||||
transition: opacity 200ms ease-in;
|
||||
}
|
||||
.htmx-request .htmx-indicator {
|
||||
opacity: 1
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Enhanced Loading Indicator */
|
||||
.loading-indicator {
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
@@ -396,60 +152,14 @@ document.addEventListener('alpine:init', () => {
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Initialize request timeout management
|
||||
const timeouts = new Map();
|
||||
|
||||
// Handle request start
|
||||
document.addEventListener('htmx:beforeRequest', function(evt) {
|
||||
const timestamp = document.querySelector('.loading-timestamp');
|
||||
if (timestamp) {
|
||||
timestamp.textContent = new Date().toLocaleTimeString();
|
||||
<!-- HTMX Error Handling (Minimal JavaScript as allowed by Context7 docs) -->
|
||||
<div x-data="{
|
||||
init() {
|
||||
// Only essential HTMX error handling as shown in Context7 docs
|
||||
this.$el.addEventListener('htmx:responseError', (evt) => {
|
||||
if (evt.detail.xhr.status === 404 || evt.detail.xhr.status === 500) {
|
||||
console.error('HTMX Error:', evt.detail.xhr.status);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Set timeout for request
|
||||
const timeoutId = setTimeout(() => {
|
||||
evt.detail.xhr.abort();
|
||||
showError('Request timed out. Please try again.');
|
||||
}, 10000); // 10s timeout
|
||||
|
||||
timeouts.set(evt.detail.xhr, timeoutId);
|
||||
});
|
||||
|
||||
// Handle request completion
|
||||
document.addEventListener('htmx:afterRequest', function(evt) {
|
||||
const timeoutId = timeouts.get(evt.detail.xhr);
|
||||
if (timeoutId) {
|
||||
clearTimeout(timeoutId);
|
||||
timeouts.delete(evt.detail.xhr);
|
||||
}
|
||||
|
||||
if (!evt.detail.successful) {
|
||||
showError('Failed to update results. Please try again.');
|
||||
}
|
||||
});
|
||||
|
||||
// Handle errors
|
||||
function showError(message) {
|
||||
const indicator = document.querySelector('.loading-indicator');
|
||||
if (indicator) {
|
||||
indicator.innerHTML = `
|
||||
<div class="flex items-center text-red-100">
|
||||
<i class="mr-2 fas fa-exclamation-circle"></i>
|
||||
<span>${message}</span>
|
||||
</div>`;
|
||||
setTimeout(() => {
|
||||
indicator.innerHTML = originalIndicatorContent;
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
// Store original indicator content
|
||||
const originalIndicatorContent = document.querySelector('.loading-indicator')?.innerHTML;
|
||||
|
||||
// Reset loading state when navigating away
|
||||
window.addEventListener('beforeunload', () => {
|
||||
timeouts.forEach(timeoutId => clearTimeout(timeoutId));
|
||||
timeouts.clear();
|
||||
});
|
||||
</script>
|
||||
}"></div>
|
||||
|
||||
@@ -15,26 +15,7 @@
|
||||
{% endif %}
|
||||
</h1>
|
||||
|
||||
<form method="post" enctype="multipart/form-data" class="space-y-6" x-data="{
|
||||
status: '{{ form.instance.status|default:'OPERATING' }}',
|
||||
clearResults(containerId) {
|
||||
const container = document.getElementById(containerId);
|
||||
if (container && !container.contains(event.target)) {
|
||||
container.querySelector('[id$=search-results]').innerHTML = '';
|
||||
}
|
||||
},
|
||||
handleStatusChange(event) {
|
||||
this.status = event.target.value;
|
||||
if (this.status === 'CLOSING') {
|
||||
document.getElementById('id_closing_date').required = true;
|
||||
} else {
|
||||
document.getElementById('id_closing_date').required = false;
|
||||
}
|
||||
},
|
||||
showClosingDate() {
|
||||
return ['CLOSING', 'SBNO', 'CLOSED_PERM', 'DEMOLISHED', 'RELOCATED'].includes(this.status);
|
||||
}
|
||||
}">
|
||||
<form method="post" enctype="multipart/form-data" class="space-y-6" x-data="rideFormData()">
|
||||
{% csrf_token %}
|
||||
|
||||
{% if not park %}
|
||||
@@ -242,4 +223,41 @@
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('rideFormData', () => ({
|
||||
status: '{{ form.instance.status|default:"OPERATING" }}',
|
||||
|
||||
init() {
|
||||
// Watch for status changes on the status select element
|
||||
this.$watch('status', (value) => {
|
||||
const closingDateField = this.$el.querySelector('#id_closing_date');
|
||||
if (closingDateField) {
|
||||
closingDateField.required = value === 'CLOSING';
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
clearResults(containerId) {
|
||||
// Use AlpineJS $el to find container within component scope
|
||||
const container = this.$el.querySelector(`#${containerId}`);
|
||||
if (container) {
|
||||
const resultsDiv = container.querySelector('[id$="search-results"]');
|
||||
if (resultsDiv) {
|
||||
resultsDiv.innerHTML = '';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
handleStatusChange(event) {
|
||||
this.status = event.target.value;
|
||||
},
|
||||
|
||||
showClosingDate() {
|
||||
return ['CLOSING', 'SBNO', 'CLOSED_PERM', 'DEMOLISHED', 'RELOCATED'].includes(this.status);
|
||||
}
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user