bitstream/fuel-price
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add fuel type and radius selects to SearchBar

Browse Source
This commit is contained in:
Ovidiu U
2026-04-11 17:23:56 +01:00
parent 66c662f471
commit b5ee25db67
1 changed files with 56 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
resources/js/components/SearchBar.vue
View File

@@ -1,24 +1,50 @@
<template> <template>
<div class="relative flex flex-col sm:flex-row gap-3 max-w-md w-full"> <div class="flex flex-col gap-3 max-w-md w-full">
<div class="relative flex-1"> <!-- Row 1: postcode + button -->
<span class="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500"> <div class="relative flex flex-col sm:flex-row gap-3">
<iconify-icon icon="lucide:map-pin" style="font-size:1.25rem"></iconify-icon> <div class="relative flex-1">
</span> <span class="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500">
<input <iconify-icon icon="lucide:map-pin" style="font-size:1.25rem"></iconify-icon>
v-model="postcode" </span>
@input="onInput" <input
type="text" v-model="postcode"
placeholder="Enter postcode, e.g. SW1A 1AA" type="text"
class="w-full h-14 pl-12 pr-4 bg-white border border-zinc-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent shadow-inner text-base" placeholder="Enter postcode, e.g. SW1A 1AA"
/> class="w-full h-14 pl-12 pr-4 bg-white border border-zinc-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent shadow-inner text-base"
/>
</div>
<button
@click="onSearch"
:disabled="!postcode.trim()"
class="h-14 px-8 bg-accent text-white rounded-xl font-bold text-base shadow-xl hover:bg-accent-content transition-all disabled:opacity-50 disabled:cursor-not-allowed"
>
Find Prices
</button>
</div>
<!-- Row 2: fuel type + radius -->
<div class="flex gap-3">
<select
v-model="fuelType"
class="flex-1 h-10 px-3 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="e10">Petrol (E10)</option>
<option value="e5">Premium Petrol (E5)</option>
<option value="b7_standard">Diesel (B7)</option>
<option value="b7_premium">Premium Diesel (B7)</option>
<option value="b10">Diesel (B10)</option>
<option value="hvo">HVO</option>
</select>
<select
v-model="radius"
class="w-32 h-10 px-3 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>
</div> </div>
<button
@click="emit('search', postcode)"
:disabled="!postcode.trim()"
class="h-14 px-8 bg-accent text-white rounded-xl font-bold text-base shadow-xl hover:bg-accent-content transition-all disabled:opacity-50 disabled:cursor-not-allowed"
>
Find Prices
</button>
</div> </div>
</template> </template>
@@ -26,15 +52,17 @@
import { ref } from 'vue' import { ref } from 'vue'
const emit = defineEmits(['search']) const emit = defineEmits(['search'])
const postcode = ref('')
let debounceTimer = null
function onInput() { const postcode = ref('')
clearTimeout(debounceTimer) const fuelType = ref('e10')
debounceTimer = setTimeout(() => { const radius = ref(10)
if (postcode.value.trim().length >= 2) {
emit('search', postcode.value.trim()) function onSearch() {
} if (!postcode.value.trim()) return
}, 400) emit('search', {
postcode: postcode.value.trim(),
fuelType: fuelType.value,
radius: radius.value,
})
} }
</script> </script>