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

Refactor location results, universal map, and road trip planner templates to utilize Alpine.js for state management and event handling. Enhanced geolocation button functionality, improved map initialization, and streamlined trip management interactions.

Browse Source
This commit is contained in:
pacnpal
2025-09-26 13:55:06 -04:00
parent d4431acb39
commit 757ad1be89
3 changed files with 414 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
templates/core/search/location_results.html
View File

@@ -67,9 +67,11 @@
{{ search_form.lng }}
<div class="flex gap-2">
<button type="button"
id="use-my-location"
class="flex-1 px-3 py-1 text-xs bg-blue-100 text-blue-700 rounded hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-300">
📍 Use My Location
x-data="geolocationButton"
@click="getLocation()"
:disabled="loading"
class="flex-1 px-3 py-1 text-xs bg-blue-100 text-blue-700 rounded hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-300 disabled:opacity-50">
<span x-text="buttonText">📍 Use My Location</span>
</button>
</div>
</div>
@@ -290,43 +292,58 @@
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Geolocation support
const useLocationBtn = document.getElementById('use-my-location');
const latInput = document.getElementById('lat-input');
const lngInput = document.getElementById('lng-input');
const locationInput = document.getElementById('location-input');
if (useLocationBtn && 'geolocation' in navigator) {
useLocationBtn.addEventListener('click', function() {
this.textContent = '📍 Getting location...';
this.disabled = true;
document.addEventListener('alpine:init', () => {
// Geolocation Button Component
Alpine.data('geolocationButton', () => ({
loading: false,
buttonText: '📍 Use My Location',
init() {
// Hide button if geolocation is not supported
if (!('geolocation' in navigator)) {
this.$el.style.display = 'none';
}
},
getLocation() {
if (!('geolocation' in navigator)) return;
this.loading = true;
this.buttonText = '📍 Getting location...';
navigator.geolocation.getCurrentPosition(
function(position) {
latInput.value = position.coords.latitude;
lngInput.value = position.coords.longitude;
locationInput.value = `${position.coords.latitude}, ${position.coords.longitude}`;
useLocationBtn.textContent = '✅ Location set';
(position) => {
// Find form inputs
const form = this.$el.closest('form');
const latInput = form.querySelector('input[name="lat"]');
const lngInput = form.querySelector('input[name="lng"]');
const locationInput = form.querySelector('input[name="location"]');
if (latInput) latInput.value = position.coords.latitude;
if (lngInput) lngInput.value = position.coords.longitude;
if (locationInput) {
locationInput.value = `${position.coords.latitude}, ${position.coords.longitude}`;
}
this.buttonText = '✅ Location set';
this.loading = false;
setTimeout(() => {
useLocationBtn.textContent = '📍 Use My Location';
useLocationBtn.disabled = false;
this.buttonText = '📍 Use My Location';
}, 2000);
},
function(error) {
useLocationBtn.textContent = '❌ Location failed';
(error) => {
console.error('Geolocation error:', error);
this.buttonText = '❌ Location failed';
this.loading = false;
setTimeout(() => {
useLocationBtn.textContent = '📍 Use My Location';
useLocationBtn.disabled = false;
this.buttonText = '📍 Use My Location';
}, 2000);
}
);
});
} else if (useLocationBtn) {
useLocationBtn.style.display = 'none';
}
}
}));
});
</script>
<script src="{% static 'js/location-search.js' %}"></script>
{% endblock %}