7dc41ba9ee
- Support geolocation search (lat/lng) as alternative to postcode with automatic fallback - Redesign StationCard with expanded layout showing address, distance in miles, reliability status, directions link, and optional remove button - Add directions integration with Google Maps including origin parameter support - Persist search parameters (postcode/coords, fuel type, radius, sort) in URL query and hydrate on mount - Implement compact map markers with inline directions link and click-to-zoom behavior - Auto-trigger search when filters change (fuel type, radius, sort) if search already performed - Add removable prop to StationCard for watchlist integration - Display reliability status (Current/Stale/Outdated) with color-coded pricing - Remove 2-mile radius option from search filters
120 lines
4.7 KiB
Vue
120 lines
4.7 KiB
Vue
<template>
|
||
<div class="space-y-3">
|
||
<!-- Sort tabs -->
|
||
<div class="flex gap-2 flex-wrap">
|
||
<button
|
||
v-for="option in sortOptions"
|
||
:key="option.value"
|
||
@click="emit('sort', option.value)"
|
||
:class="[
|
||
'px-4 py-1.5 rounded-full text-sm font-bold transition-colors',
|
||
currentSort === option.value
|
||
? 'bg-accent text-white'
|
||
: 'bg-white border border-zinc-300 text-zinc-500 hover:border-accent'
|
||
]"
|
||
>
|
||
{{ option.label }}
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Count -->
|
||
<p class="text-sm text-zinc-500 font-medium">
|
||
{{ stations.length }} station{{ stations.length !== 1 ? 's' : '' }} found
|
||
</p>
|
||
|
||
<!-- Grouped results when sorting by reliability -->
|
||
<template v-if="currentSort === 'reliable'">
|
||
<section v-if="reliable.length" class="space-y-2">
|
||
<header class="flex items-center gap-2 pt-2">
|
||
<iconify-icon class="text-status-good text-lg" icon="lucide:shield-check"></iconify-icon>
|
||
<h3 class="font-black text-zinc-800">Reliable</h3>
|
||
<span class="text-xs text-zinc-500 font-medium">Updated in the last 3 days</span>
|
||
</header>
|
||
<StationCard
|
||
v-for="station in reliable"
|
||
:key="station.station_id"
|
||
:lowest-price="lowestPrice"
|
||
:origin="origin"
|
||
:station="station"
|
||
/>
|
||
</section>
|
||
|
||
<section v-if="stale.length" class="space-y-2 pt-4">
|
||
<header class="flex items-center gap-2">
|
||
<iconify-icon class="text-status-warn text-lg" icon="lucide:clock"></iconify-icon>
|
||
<h3 class="font-black text-zinc-800">Older prices</h3>
|
||
<span class="text-xs text-zinc-500 font-medium">3–7 days old — verify before driving</span>
|
||
</header>
|
||
<div class="opacity-80">
|
||
<StationCard
|
||
v-for="station in stale"
|
||
:key="station.station_id"
|
||
:lowest-price="lowestPrice"
|
||
:station="station"
|
||
class="mb-2"
|
||
/>
|
||
</div>
|
||
</section>
|
||
|
||
<section v-if="outdated.length" class="space-y-2 pt-4">
|
||
<header class="flex items-center gap-2">
|
||
<iconify-icon class="text-status-bad text-lg" icon="lucide:triangle-alert"></iconify-icon>
|
||
<h3 class="font-black text-zinc-800">Outdated</h3>
|
||
<span class="text-xs text-zinc-500 font-medium">Over 7 days old — likely inaccurate</span>
|
||
</header>
|
||
<div class="opacity-60">
|
||
<StationCard
|
||
v-for="station in outdated"
|
||
:key="station.station_id"
|
||
:lowest-price="lowestPrice"
|
||
:station="station"
|
||
class="mb-2"
|
||
/>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<!-- Flat list for other sort modes -->
|
||
<div v-else class="space-y-2">
|
||
<StationCard
|
||
v-for="station in stations"
|
||
:key="station.station_id"
|
||
:station="station"
|
||
:lowest-price="lowestPrice"
|
||
:origin="origin"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue'
|
||
import StationCard from './StationCard.vue'
|
||
|
||
const props = defineProps({
|
||
stations: { type: Array, required: true },
|
||
currentSort: { type: String, default: 'reliable' },
|
||
origin: { type: Object, default: null },
|
||
})
|
||
|
||
const emit = defineEmits(['sort'])
|
||
|
||
const sortOptions = [
|
||
{ label: 'Reliable', value: 'reliable' },
|
||
{ label: 'Price', value: 'price' },
|
||
{ label: 'Distance', value: 'distance' },
|
||
{ label: 'Updated', value: 'updated' },
|
||
{ label: 'Brand', value: 'brand' },
|
||
]
|
||
|
||
const reliable = computed(() => props.stations.filter(s => s.reliability === 'reliable'))
|
||
const stale = computed(() => props.stations.filter(s => s.reliability === 'stale'))
|
||
const outdated = computed(() => props.stations.filter(s => s.reliability === 'outdated'))
|
||
|
||
const lowestPrice = computed(() => {
|
||
if (!reliable.value.length && !props.stations.length) return null
|
||
const pool = reliable.value.length ? reliable.value : props.stations
|
||
return Math.min(...pool.map(s => s.price_pence))
|
||
})
|
||
</script>
|