5acb99c9e3
- Delete unused Livewire Search test and fuel type select Blade component - Move subscription webhook listener from EventServiceProvider to AppServiceProvider - Add FUEL_TYPES global config to app layout for client-side use - Add Billable trait to User model and include email_verified_at in fillable - Implement monthly/annual cadence toggle with pricing display and smart CTA routing on homepage - Update VerifyApiKeyMiddlewareTest to use e10 instead of petrol - Refactor PollFuelPrices to auto-refresh stale stations based on last_seen_at - Add incremental polling with cached timestamp and effective-start-timestamp param to FuelPriceService - Normalize amenities/fuel_types from API objects to flat arrays, skip stations missing required fields - Log response body on API failures in ApiLogger - Default homepage sort to 'reliable' instead of 'price'
116 lines
4.6 KiB
Vue
116 lines
4.6 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-3 max-w-md w-full">
|
|
<!-- Row 1: postcode + button -->
|
|
<div class="flex flex-col sm:flex-row gap-3">
|
|
<div class="relative flex-1">
|
|
<label for="postcode-input" class="sr-only">Postcode or city</label>
|
|
<button
|
|
:disabled="locating"
|
|
aria-label="Use my location"
|
|
class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1.5 px-3 py-1.5
|
|
bg-primary/85
|
|
text-white rounded-sm text-sm font-semibold transition-opacity hover:opacity-80"
|
|
type="button"
|
|
@click="useMyLocation"
|
|
>
|
|
<iconify-icon :class="{ 'animate-spin': locating }" :icon="locating ? 'lucide:loader-circle' : 'lucide:map-pin'" style="font-size:1rem"></iconify-icon>
|
|
<span class="hidden md:inline-flex">Near me</span>
|
|
</button>
|
|
<input
|
|
id="postcode-input"
|
|
v-model="postcode"
|
|
type="text"
|
|
placeholder="Enter postcode, e.g. SW1A 1AA"
|
|
class="w-full h-14 pr-28 pl-4 bg-white border border-zinc-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent shadow-inner text-base"
|
|
@keyup.enter="onSearch"
|
|
/>
|
|
</div>
|
|
<button
|
|
@click="onSearch"
|
|
:disabled="!postcode.trim()"
|
|
class="h-14 px-8 bg-primary text-white rounded-xl font-bold text-base shadow-xl hover:bg-primary-dark transition-all disabled:cursor-not-allowed"
|
|
>
|
|
Find Prices
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Row 2: fuel type + radius + sort -->
|
|
<div class="grid grid-cols-3 gap-2">
|
|
<select
|
|
v-model="fuelType"
|
|
aria-label="Fuel type"
|
|
class="min-w-0 h-10 px-2 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-700 focus:outline-none focus:ring-2 focus:ring-accent truncate"
|
|
>
|
|
<option v-for="fuel in FUEL_TYPES" :key="fuel.value" :value="fuel.value">
|
|
{{ fuel.label }}
|
|
</option>
|
|
</select>
|
|
<select
|
|
v-model="radius"
|
|
aria-label="Search radius"
|
|
class="min-w-0 h-10 px-2 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-700 focus:outline-none focus:ring-2 focus:ring-accent"
|
|
>
|
|
<option :value="2">2 miles</option>
|
|
<option :value="5">5 miles</option>
|
|
<option :value="10">10 miles</option>
|
|
<option :value="20">20 miles</option>
|
|
</select>
|
|
<select
|
|
v-model="sort"
|
|
aria-label="Sort by"
|
|
class="min-w-0 h-10 px-2 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-700 focus:outline-none focus:ring-2 focus:ring-accent"
|
|
>
|
|
<option value="reliable">Reliable</option>
|
|
<option value="price">Price</option>
|
|
<option value="distance">Distance</option>
|
|
<option value="updated">Updated</option>
|
|
<option value="brand">Brand</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { FUEL_TYPES } from '../constants/fuelTypes.js'
|
|
|
|
const emit = defineEmits(['search'])
|
|
|
|
const postcode = ref('')
|
|
const fuelType = ref('e10')
|
|
const radius = ref(10)
|
|
const sort = ref('reliable')
|
|
const locating = ref(false)
|
|
|
|
function useMyLocation() {
|
|
if (!navigator.geolocation) return
|
|
locating.value = true
|
|
navigator.geolocation.getCurrentPosition(
|
|
async ({ coords }) => {
|
|
try {
|
|
const res = await fetch(`https://api.postcodes.io/postcodes?lon=${coords.longitude}&lat=${coords.latitude}&limit=1`)
|
|
const json = await res.json()
|
|
if (json.result?.[0]?.postcode) {
|
|
postcode.value = json.result[0].postcode
|
|
onSearch()
|
|
}
|
|
} finally {
|
|
locating.value = false
|
|
}
|
|
},
|
|
() => { locating.value = false },
|
|
{ timeout: 8000, enableHighAccuracy: false, maximumAge: 30000 },
|
|
)
|
|
}
|
|
|
|
function onSearch() {
|
|
if (!postcode.value.trim()) return
|
|
emit('search', {
|
|
postcode: postcode.value.trim(),
|
|
fuelType: fuelType.value,
|
|
radius: radius.value,
|
|
sort: sort.value,
|
|
})
|
|
}
|
|
</script>
|