adf0b93a45
- HeroSearch: round lat/lng to 3 decimal places (~111m precision) before emit to prevent exact location leakage in shareable URLs and server logs - Home: move duplicate-search guard into runSearch (single choke point) instead of watcher, eliminating race between route.query sync and direct onSearch call - Add inline documentation referencing .claude/rules/frontend.md privacy guidance
115 lines
4.4 KiB
Vue
115 lines
4.4 KiB
Vue
<template>
|
|
<form class="w-full max-w-xl" @submit.prevent="submitPostcode">
|
|
<label class="flex items-center gap-2 h-14 md:h-15 pl-3.5 md:pl-4 pr-1.5 md:pr-2 bg-white md:bg-surface border border-zinc-200 rounded-2xl focus-within:border-primary transition-colors md:shadow-[0_20px_40px_-20px_rgba(0,0,0,0.12)]">
|
|
<iconify-icon class="text-zinc-400 text-lg shrink-0" icon="lucide:map-pin"></iconify-icon>
|
|
<input
|
|
v-model="postcode"
|
|
autocomplete="postal-code"
|
|
class="flex-1 min-w-0 bg-transparent outline-none text-[15px] md:text-base placeholder:text-zinc-400"
|
|
placeholder="Postcode"
|
|
type="text"
|
|
/>
|
|
|
|
<!-- Geolocation icon-button — visible on mobile AND desktop -->
|
|
<button
|
|
:disabled="locating"
|
|
aria-label="Use my location"
|
|
class="w-11 h-11 rounded-[10px] bg-zinc-100 text-primary inline-flex items-center justify-center shrink-0 hover:bg-zinc-200 transition-colors disabled:opacity-70"
|
|
type="button"
|
|
@click="useMyLocation"
|
|
>
|
|
<iconify-icon :class="{ 'animate-spin': locating }" :icon="locating ? 'lucide:loader-circle' : 'lucide:locate-fixed'" class="text-lg"></iconify-icon>
|
|
</button>
|
|
|
|
<!-- Mobile-only inline "Go" submit — sits next to the locate button -->
|
|
<button
|
|
class="md:hidden h-11 px-4 -ml-1 rounded-[10px] bg-primary text-white font-medium text-sm inline-flex items-center justify-center shrink-0 hover:opacity-90 transition"
|
|
type="submit"
|
|
>
|
|
Go
|
|
</button>
|
|
|
|
<!-- Desktop-only inline submit -->
|
|
<button
|
|
class="hidden md:inline-flex h-12 px-5 ml-1 rounded-xl bg-primary text-white font-medium text-[15px] items-center gap-2 hover:opacity-90 transition"
|
|
type="submit"
|
|
>
|
|
Check prices
|
|
<iconify-icon icon="lucide:arrow-right"></iconify-icon>
|
|
</button>
|
|
</label>
|
|
|
|
<div class="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-zinc-400 justify-center md:justify-start">
|
|
<span class="hidden md:inline text-zinc-300">·</span>
|
|
<span class="hidden md:inline font-mono">Try SW1A 1AA · M1 1AD · EH1 1YZ</span>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from 'vue'
|
|
|
|
const props = defineProps({
|
|
initial: { type: Object, default: () => ({}) },
|
|
fuelType: { type: String, default: 'e10' },
|
|
radius: { type: Number, default: 10 },
|
|
sort: { type: String, default: 'reliable' },
|
|
})
|
|
|
|
const emit = defineEmits(['search'])
|
|
|
|
// Coarsen GPS coordinates to ~111 m (3 dp) before they leave the browser.
|
|
// "Use my location" coords flow into the shareable URL, the /api/stations
|
|
// request, and server/access logs — full precision would broadcast the user's
|
|
// exact position to anyone they share the resulting link with. 3 dp is ample
|
|
// for a radius station search. See .claude/rules/frontend.md.
|
|
const COORDINATE_DECIMALS = 3
|
|
|
|
function coarsenCoordinate(value) {
|
|
const factor = 10 ** COORDINATE_DECIMALS
|
|
return Math.round(value * factor) / factor
|
|
}
|
|
|
|
const postcode = ref('')
|
|
const locating = ref(false)
|
|
|
|
watch(() => props.initial, (v) => {
|
|
if (!v) return
|
|
if (typeof v.postcode === 'string') postcode.value = v.postcode
|
|
}, { immediate: true, deep: true })
|
|
|
|
function submitPostcode() {
|
|
const trimmed = postcode.value.trim()
|
|
if (!trimmed) return
|
|
emit('search', {
|
|
postcode: trimmed,
|
|
lat: null,
|
|
lng: null,
|
|
fuelType: props.fuelType,
|
|
radius: props.radius,
|
|
sort: props.sort,
|
|
})
|
|
}
|
|
|
|
function useMyLocation() {
|
|
if (!navigator.geolocation) return
|
|
locating.value = true
|
|
navigator.geolocation.getCurrentPosition(
|
|
({ coords }) => {
|
|
locating.value = false
|
|
postcode.value = ''
|
|
emit('search', {
|
|
postcode: null,
|
|
lat: coarsenCoordinate(coords.latitude),
|
|
lng: coarsenCoordinate(coords.longitude),
|
|
fuelType: props.fuelType,
|
|
radius: props.radius,
|
|
sort: props.sort,
|
|
})
|
|
},
|
|
() => { locating.value = false },
|
|
{ timeout: 8000, enableHighAccuracy: false, maximumAge: 30000 },
|
|
)
|
|
}
|
|
</script>
|