831637380c
- Add `/stats/live` endpoint returning station count and latest price timestamp with 5-minute cache - Transform StationCard into expandable component with click/keyboard interaction showing full details - Display brand label, badges (24h/Supermarket/Motorway), fuel types, amenities, opening hours, and price delta vs average - Add brand filter dropdown to StationList with dynamic brand extraction from results - Calculate and display price comparison against filtered stations average - Redesign map markers to simpler price display; move directions link to popup alongside station details - Add "locate-me" button to SearchBar for geolocation trigger - Show "Live" indicator with station count and last-update time on homepage hero - Remove standalone directions link from marker HTML; consolidate in popup with click propagation handling - Persist `avgPence` calculation across StationList and pass to cards for delta display - Add `@iconify-json/lucide` dev dependency and register collection on app mount - Stop click propagation on card action buttons (directions, remove)
312 lines
12 KiB
Vue
312 lines
12 KiB
Vue
<template>
|
|
<div
|
|
:aria-expanded="expanded"
|
|
:class="[
|
|
'bg-zinc-50 p-4 rounded-xl border shadow-sm flex flex-col gap-4 cursor-pointer transition-colors',
|
|
expanded ? 'border-accent' : 'border-zinc-300 hover:border-zinc-400',
|
|
]"
|
|
role="button"
|
|
tabindex="0"
|
|
@click="toggle"
|
|
@keydown.enter.prevent="toggle"
|
|
@keydown.space.prevent="toggle"
|
|
>
|
|
<div class="flex justify-between items-start gap-3">
|
|
<div class="space-y-0.5 min-w-0 flex-1">
|
|
<p v-if="brandLabel" class="text-[10px] font-black uppercase tracking-widest text-zinc-500">
|
|
{{ brandLabel }}
|
|
</p>
|
|
<h4 class="font-bold text-lg text-zinc-800 truncate">{{ station.name }}</h4>
|
|
<template v-if="!expanded">
|
|
<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>
|
|
<p v-if="updatedAgo" :class="[priceColor, 'text-xs flex items-center gap-1 font-semibold']">
|
|
<iconify-icon class="text-xs" icon="lucide:clock"></iconify-icon>
|
|
<span>Updated {{ updatedAgo }}</span>
|
|
</p>
|
|
</template>
|
|
</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"
|
|
@click.stop
|
|
>
|
|
<iconify-icon class="text-lg" icon="lucide:navigation"></iconify-icon>
|
|
</a>
|
|
<div class="text-right 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>
|
|
<p v-if="priceDelta" :class="priceDeltaColor" class="text-[10px] font-bold mt-0.5">
|
|
{{ priceDelta }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Transition
|
|
enter-active-class="transition duration-200 ease-out"
|
|
enter-from-class="opacity-0 -translate-y-1"
|
|
enter-to-class="opacity-100 translate-y-0"
|
|
leave-active-class="transition duration-150 ease-in"
|
|
leave-from-class="opacity-100"
|
|
leave-to-class="opacity-0"
|
|
>
|
|
<div v-if="expanded" class="border-t border-zinc-200 pt-3 space-y-3">
|
|
<div v-if="badges.length" class="flex flex-wrap gap-1.5">
|
|
<span
|
|
v-for="badge in badges"
|
|
:key="badge.label"
|
|
:class="[badge.class, 'inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider']"
|
|
>
|
|
<iconify-icon v-if="badge.icon" :icon="badge.icon"></iconify-icon>
|
|
{{ badge.label }}
|
|
</span>
|
|
</div>
|
|
|
|
<div v-if="fuelTypes.length" class="flex flex-wrap gap-1.5">
|
|
<span
|
|
v-for="type in fuelTypes"
|
|
:key="type"
|
|
class="inline-block bg-zinc-200 text-zinc-600 text-[10px] font-bold px-2 py-0.5 rounded"
|
|
>
|
|
{{ type }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap items-center gap-2 text-xs text-zinc-500">
|
|
<span>{{ distanceMiles }} mi</span>
|
|
<span
|
|
v-if="openStatus"
|
|
:class="[
|
|
openChipClass,
|
|
'inline-flex items-center gap-1 px-2 py-0.5 rounded text-[11px] font-bold',
|
|
]"
|
|
>
|
|
<span
|
|
:class="[openDotClass, 'inline-block size-1.5 rounded-full']"
|
|
aria-hidden="true"
|
|
></span>
|
|
{{ openStatus }}
|
|
</span>
|
|
</div>
|
|
|
|
<div v-if="amenityItems.length" class="flex flex-wrap gap-3 text-xs text-zinc-500">
|
|
<span
|
|
v-for="item in amenityItems"
|
|
:key="item.key"
|
|
class="inline-flex items-center gap-1"
|
|
>
|
|
<iconify-icon :icon="item.icon" class="text-sm"></iconify-icon>
|
|
{{ item.label }}
|
|
</span>
|
|
</div>
|
|
|
|
<p class="text-[11px] text-zinc-400">
|
|
{{ fullAddress }}<span v-if="updatedAgo"> · Updated {{ updatedAgo }}</span>
|
|
</p>
|
|
</div>
|
|
</Transition>
|
|
|
|
<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.stop="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"
|
|
@click.stop
|
|
>
|
|
<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.stop="emit('remove', station)"
|
|
>
|
|
<iconify-icon class="text-lg" icon="lucide:trash-2"></iconify-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from 'vue'
|
|
|
|
const props = defineProps({
|
|
station: { type: Object, required: true },
|
|
lowestPrice: { type: Number, default: null },
|
|
avgPence: { type: Number, default: null },
|
|
removable: { type: Boolean, default: false },
|
|
origin: { type: Object, default: null },
|
|
})
|
|
|
|
const emit = defineEmits(['remove'])
|
|
|
|
const expanded = ref(false)
|
|
|
|
function toggle() {
|
|
expanded.value = !expanded.value
|
|
}
|
|
|
|
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 AMENITY_META = {
|
|
customer_toilets: { icon: 'lucide:toilet', label: 'WC' },
|
|
car_wash: { icon: 'lucide:spray-can', label: 'Wash' },
|
|
air_pump_or_screenwash: { icon: 'lucide:wind', label: 'Air' },
|
|
adblue_pumps: { icon: 'lucide:fuel', label: 'AdBlue' },
|
|
adblue_packaged: { icon: 'lucide:package', label: 'AdBlue' },
|
|
lpg_pumps: { icon: 'lucide:flame', label: 'LPG' },
|
|
water_filling: { icon: 'lucide:droplets', label: 'Water' },
|
|
}
|
|
|
|
const AMENITY_ORDER = [
|
|
'customer_toilets',
|
|
'car_wash',
|
|
'air_pump_or_screenwash',
|
|
'adblue_pumps',
|
|
'adblue_packaged',
|
|
'lpg_pumps',
|
|
'water_filling',
|
|
]
|
|
|
|
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 fullAddress = computed(() => {
|
|
const parts = [props.station.address, props.station.postcode].filter(Boolean)
|
|
return parts.join(', ')
|
|
})
|
|
|
|
const updatedAgo = computed(() => {
|
|
if (!props.station.price_updated_at) return ''
|
|
const diffMin = Math.floor((Date.now() - new Date(props.station.price_updated_at)) / 60000)
|
|
if (diffMin < 60) return `${Math.max(diffMin, 0)}m ago`
|
|
const hours = Math.floor(diffMin / 60)
|
|
if (hours < 24) return `${hours}h ago`
|
|
const days = Math.floor(hours / 24)
|
|
return `${days} day${days === 1 ? '' : 's'} ago`
|
|
})
|
|
|
|
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
|
|
})
|
|
|
|
const brandLabel = computed(() => {
|
|
const brand = props.station.brand
|
|
if (!brand) return ''
|
|
if (brand === props.station.name) return ''
|
|
return brand
|
|
})
|
|
|
|
const badges = computed(() => {
|
|
const list = []
|
|
if (props.station.is_supermarket) {
|
|
list.push({ label: 'Supermarket', icon: 'lucide:shopping-cart', class: 'bg-lime-500/15 text-lime-700' })
|
|
}
|
|
if (props.station.open_today?.is_24_hours || props.station.amenities?.includes('twenty_four_hour_fuel')) {
|
|
list.push({ label: '24h', icon: 'lucide:clock', class: 'bg-zinc-800 text-white' })
|
|
}
|
|
if (props.station.is_motorway) {
|
|
list.push({ label: 'Motorway', icon: 'lucide:road', class: 'bg-blue-500/15 text-blue-700' })
|
|
}
|
|
return list
|
|
})
|
|
|
|
const fuelTypes = computed(() => {
|
|
const types = props.station.fuel_types_available
|
|
if (!Array.isArray(types)) return []
|
|
return types.map(t => t.replace('_STANDARD', '').replace('_PREMIUM', '+').toUpperCase())
|
|
})
|
|
|
|
const amenityItems = computed(() => {
|
|
const amenities = props.station.amenities
|
|
if (!Array.isArray(amenities)) return []
|
|
return AMENITY_ORDER
|
|
.filter(key => amenities.includes(key) && AMENITY_META[key])
|
|
.map(key => ({ key, ...AMENITY_META[key] }))
|
|
})
|
|
|
|
const openStatus = computed(() => {
|
|
const open = props.station.open_today
|
|
if (!open) return ''
|
|
if (open.is_24_hours) return ''
|
|
if (open.is_open_now) return open.close ? `Open until ${open.close}` : 'Open now'
|
|
return open.open ? `Closed — opens ${open.open}` : 'Closed'
|
|
})
|
|
|
|
const isOpenNow = computed(() => {
|
|
const open = props.station.open_today
|
|
return Boolean(open?.is_24_hours || open?.is_open_now)
|
|
})
|
|
|
|
const openChipClass = computed(() => (
|
|
isOpenNow.value
|
|
? 'bg-status-good/15 text-status-good'
|
|
: 'bg-status-bad/10 text-status-bad'
|
|
))
|
|
|
|
const openDotClass = computed(() => (
|
|
isOpenNow.value ? 'bg-status-good' : 'bg-status-bad'
|
|
))
|
|
|
|
const priceDelta = computed(() => {
|
|
if (props.avgPence == null) return ''
|
|
const delta = props.station.price_pence - props.avgPence
|
|
const pence = Math.abs(delta) / 100
|
|
if (pence < 0.1) return 'as expected'
|
|
return `${pence.toFixed(1)}p ${delta < 0 ? 'below' : 'above'} average`
|
|
})
|
|
|
|
const priceDeltaColor = computed(() => {
|
|
if (props.avgPence == null) return 'text-zinc-500'
|
|
if (props.station.price_pence < props.avgPence) return 'text-status-good'
|
|
if (props.station.price_pence > props.avgPence) return 'text-status-bad'
|
|
return 'text-zinc-500'
|
|
})
|
|
</script>
|