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'
70 lines
2.6 KiB
Vue
70 lines
2.6 KiB
Vue
<template>
|
|
<div class="space-y-6 max-w-lg">
|
|
<h1 class="text-2xl font-black text-zinc-800">Preferences</h1>
|
|
|
|
<form class="space-y-5 p-6 bg-white rounded-2xl border border-zinc-300" @submit.prevent="save">
|
|
<div class="space-y-2">
|
|
<label class="text-sm font-bold text-zinc-800">Default fuel type</label>
|
|
<select
|
|
v-model="form.preferred_fuel_type"
|
|
class="w-full h-12 px-4 bg-zinc-50 border border-zinc-300 rounded-xl font-medium text-zinc-800 focus:outline-none focus:ring-2 focus:ring-accent"
|
|
>
|
|
<option v-for="fuel in FUEL_TYPES" :key="fuel.value" :value="fuel.value">
|
|
{{ fuel.label }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<label class="text-sm font-bold text-zinc-800">Home postcode</label>
|
|
<input
|
|
v-model="form.postcode"
|
|
type="text"
|
|
placeholder="e.g. SW1A 1AA"
|
|
maxlength="8"
|
|
class="w-full h-12 px-4 bg-zinc-50 border border-zinc-300 rounded-xl font-medium text-zinc-800 focus:outline-none focus:ring-2 focus:ring-accent"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<button
|
|
type="submit"
|
|
:disabled="saving"
|
|
class="px-8 py-3 bg-accent text-white rounded-xl font-bold hover:bg-accent-content transition-all disabled:opacity-50"
|
|
>
|
|
{{ saving ? 'Saving…' : 'Save preferences' }}
|
|
</button>
|
|
<p v-if="saved" class="text-sm font-bold text-green-600">Saved!</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import api from '../../axios.js'
|
|
import { FUEL_TYPES } from '../../constants/fuelTypes.js'
|
|
|
|
const form = ref({ preferred_fuel_type: 'e10', postcode: '' })
|
|
const saving = ref(false)
|
|
const saved = ref(false)
|
|
|
|
onMounted(async () => {
|
|
const response = await api.get('/user/preferences')
|
|
form.value.preferred_fuel_type = response.data.preferred_fuel_type ?? 'e10'
|
|
form.value.postcode = response.data.postcode ?? ''
|
|
})
|
|
|
|
async function save() {
|
|
saving.value = true
|
|
saved.value = false
|
|
try {
|
|
await api.put('/user/preferences', form.value)
|
|
saved.value = true
|
|
setTimeout(() => { saved.value = false }, 3000)
|
|
} finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
</script>
|