$refs.locInput?.focus())"
x-data="{
open: false,
geoLoading: false,
geoError: '',
acSuggestions: [],
acOpen: false,
acTimer: null,
onLocInput(v) {
clearTimeout(this.acTimer);
if (v.length < 2) { this.acSuggestions = []; this.acOpen = false; return; }
this.acTimer = setTimeout(async () => {
try {
const r = await fetch('/location-suggest/?q=' + encodeURIComponent(v));
const data = await r.json();
this.acSuggestions = (data.suggestions || []).map(s => s.label);
this.acOpen = this.acSuggestions.length > 0;
} catch { this.acSuggestions = []; this.acOpen = false; }
}, 300);
},
async setLocation(label) {
const trimmed = (label || '').trim();
if (!trimmed) return;
const fd = new FormData();
fd.append('location', trimmed);
fd.append('csrfmiddlewaretoken', 'g3uHzD4aPq9K7QpD3xKvniN3zVcBSqj27T4r2OIXM2F37IW1h6u5Y7eoJXURIwG7');
const r = await fetch('/set-location/', { method: 'POST', body: fd });
const u = new URL(window.location.href);
if (r.ok) {
const data = await r.json();
if (data.lat) {
u.searchParams.set('lat', data.lat);
u.searchParams.set('lng', data.lng);
u.searchParams.set('filter_loc', data.label);
} else {
u.searchParams.delete('lat');
u.searchParams.delete('lng');
u.searchParams.delete('filter_loc');
}
}
window.location.href = u.toString();
},
selectSuggestion(label) {
this.acSuggestions = [];
this.acOpen = false;
this.setLocation(label);
},
async useDeviceLocation() {
if (!navigator.geolocation) { this.geoError = 'Not supported'; return; }
this.geoLoading = true;
this.geoError = '';
navigator.geolocation.getCurrentPosition(
async (pos) => {
try {
const fd = new FormData();
fd.append('lat', pos.coords.latitude);
fd.append('lng', pos.coords.longitude);
fd.append('csrfmiddlewaretoken', 'g3uHzD4aPq9K7QpD3xKvniN3zVcBSqj27T4r2OIXM2F37IW1h6u5Y7eoJXURIwG7');
const r = await fetch('/set-location-coords/', { method: 'POST', body: fd });
const u = new URL(window.location.href);
if (r.ok) {
const data = await r.json();
u.searchParams.set('lat', data.lat);
u.searchParams.set('lng', data.lng);
u.searchParams.set('filter_loc', data.label);
}
window.location.href = u.toString();
} catch {
this.geoError = 'Could not get location';
this.geoLoading = false;
}
},
(err) => {
this.geoError = err.code === 1 ? 'Access denied' : 'Could not get location';
this.geoLoading = false;
},
{ timeout: 10000 }
);
}
}"
>