- replace inline filter pills with a single "Filters" popover containing small pill buttons for fuel/radius/sort/brand (no native <select>s) - map polish: Carto Positron tiles, hidden zoom buttons, locate-me floating button + accuracy ring, smooth flyTo transitions, slim ⓘ attribution - map markers no longer open Leaflet popups; clicking a marker selects the station and surfaces the existing StationCard inline over the map, with swipe-down-to-close and a small overlay × button - price colour now reflects deal quality (cheap / average / expensive vs search avg ± 3p) on both list and map — stable across sort/filter - promote the "X ago" timestamp into the card header so it stays visible in the expanded state Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
63 lines
1.9 KiB
JavaScript
63 lines
1.9 KiB
JavaScript
import { ref } from 'vue'
|
|
import api from '../axios.js'
|
|
|
|
const DEAL_THRESHOLD_PENCE = 300
|
|
|
|
function classifyDeal(price_pence, baseline_pence) {
|
|
if (baseline_pence == null) return 'average'
|
|
if (price_pence <= baseline_pence - DEAL_THRESHOLD_PENCE) return 'cheap'
|
|
if (price_pence >= baseline_pence + DEAL_THRESHOLD_PENCE) return 'expensive'
|
|
return 'average'
|
|
}
|
|
|
|
export function useStations() {
|
|
const stations = ref([])
|
|
const meta = ref(null)
|
|
const prediction = ref(null)
|
|
const loading = ref(false)
|
|
const error = ref(null)
|
|
|
|
async function search({ postcode, lat, lng, fuelType = 'e10', radius = 10, sort = 'price' }) {
|
|
loading.value = true
|
|
error.value = null
|
|
stations.value = []
|
|
meta.value = null
|
|
prediction.value = null
|
|
|
|
const params = { fuel_type: fuelType, radius, sort }
|
|
|
|
if (postcode) {
|
|
params.postcode = postcode
|
|
} else if (lat && lng) {
|
|
params.lat = lat
|
|
params.lng = lng
|
|
}
|
|
|
|
try {
|
|
const response = await api.get('/stations', { params })
|
|
const baseline = response.data.meta?.avg_pence ?? null
|
|
stations.value = response.data.data.map(s => ({
|
|
...s,
|
|
deal_quality: classifyDeal(s.price_pence, baseline),
|
|
}))
|
|
meta.value = response.data.meta
|
|
prediction.value = response.data.prediction ?? null
|
|
} catch (err) {
|
|
error.value = err.response?.data?.errors
|
|
?? { general: ['Unable to load stations. Please try again.'] }
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function reset() {
|
|
stations.value = []
|
|
meta.value = null
|
|
prediction.value = null
|
|
error.value = null
|
|
loading.value = false
|
|
}
|
|
|
|
return { stations, meta, prediction, loading, error, search, reset }
|
|
}
|