Files
fuel-alert/resources/js/composables/useStations.js
Ovidiu U 11a3b433ff feat(ui): consolidate map filters and rework station selection
- 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>
2026-05-05 12:16:13 +01:00

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 }
}