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
107 lines
4.2 KiB
Vue
107 lines
4.2 KiB
Vue
<template>
|
|
<div class="bg-zinc-50 p-4 rounded-xl border border-zinc-300 shadow-sm flex flex-col gap-4">
|
|
<div class="flex justify-between items-start gap-3">
|
|
<div class="space-y-0.5 min-w-0 flex-1">
|
|
<h4 class="font-bold text-lg text-zinc-800 truncate">{{ station.name }}</h4>
|
|
<p class="text-xs text-zinc-500 flex items-center gap-1">
|
|
<iconify-icon class="text-xs" icon="lucide:map-pin"></iconify-icon>
|
|
<span class="truncate">{{ locationLine }}</span>
|
|
</p>
|
|
</div>
|
|
<a
|
|
:href="directionsUrl"
|
|
aria-label="Directions"
|
|
class="hidden md:inline-flex w-10 h-10 items-center justify-center rounded-lg bg-accent/10 text-accent active:bg-accent/20 flex-shrink-0"
|
|
rel="noopener"
|
|
target="_blank"
|
|
>
|
|
<iconify-icon class="text-lg" icon="lucide:navigation"></iconify-icon>
|
|
</a>
|
|
<div class="text-right flex-shrink-0">
|
|
<div :class="priceColor" class="text-xl font-black">
|
|
{{ station.price }}<span class="text-sm font-bold uppercase ml-0.5">p</span>
|
|
</div>
|
|
<p :class="priceColor" class="text-[10px] font-bold uppercase tracking-wider">
|
|
{{ statusLabel }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-end gap-2 md:hidden">
|
|
<button
|
|
v-if="removable"
|
|
aria-label="Remove"
|
|
class="w-10 h-10 flex items-center justify-center rounded-lg bg-zinc-200 text-zinc-500 active:bg-zinc-300"
|
|
type="button"
|
|
@click="emit('remove', station)"
|
|
>
|
|
<iconify-icon class="text-lg" icon="lucide:trash-2"></iconify-icon>
|
|
</button>
|
|
<a
|
|
:href="directionsUrl"
|
|
class="flex-1 h-10 flex items-center justify-center gap-2 rounded-lg bg-accent/10 text-accent font-bold text-sm active:bg-accent/20"
|
|
rel="noopener"
|
|
target="_blank"
|
|
>
|
|
<iconify-icon class="text-lg" icon="lucide:navigation"></iconify-icon>
|
|
Directions
|
|
</a>
|
|
</div>
|
|
<div v-if="removable" class="hidden md:flex justify-end">
|
|
<button
|
|
aria-label="Remove"
|
|
class="w-10 h-10 flex items-center justify-center rounded-lg bg-zinc-200 text-zinc-500 active:bg-zinc-300"
|
|
type="button"
|
|
@click="emit('remove', station)"
|
|
>
|
|
<iconify-icon class="text-lg" icon="lucide:trash-2"></iconify-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
station: { type: Object, required: true },
|
|
lowestPrice: { type: Number, default: null },
|
|
removable: { type: Boolean, default: false },
|
|
origin: { type: Object, default: null },
|
|
})
|
|
|
|
const emit = defineEmits(['remove'])
|
|
|
|
const RELIABILITY_MAP = {
|
|
reliable: { label: 'Current', color: 'text-status-good' },
|
|
stale: { label: 'Stale', color: 'text-status-warn' },
|
|
outdated: { label: 'Outdated', color: 'text-status-bad' },
|
|
}
|
|
|
|
const reliabilityInfo = computed(() => RELIABILITY_MAP[props.station.reliability] ?? RELIABILITY_MAP.reliable)
|
|
|
|
const priceColor = computed(() => {
|
|
if (props.lowestPrice && props.station.price_pence === props.lowestPrice) {
|
|
return 'text-status-good'
|
|
}
|
|
return reliabilityInfo.value.color
|
|
})
|
|
|
|
const statusLabel = computed(() => reliabilityInfo.value.label)
|
|
|
|
const distanceMiles = computed(() => (props.station.distance_km * 0.621371).toFixed(1))
|
|
|
|
const locationLine = computed(() => {
|
|
const parts = [props.station.address, `${distanceMiles.value} mi`].filter(Boolean)
|
|
return parts.join(' • ')
|
|
})
|
|
|
|
const directionsUrl = computed(() => {
|
|
const { lat, lng } = props.station
|
|
const base = `https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`
|
|
if (props.origin?.lat != null && props.origin?.lng != null) {
|
|
return `${base}&origin=${props.origin.lat},${props.origin.lng}`
|
|
}
|
|
return base
|
|
})
|
|
</script>
|