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

feat: implement StationSearch view with form, results list, and all UI states

Browse Source
This commit is contained in:
Ovidiu U
2026-04-05 20:34:17 +01:00
parent 649772f65f
commit 93bd63aefb
1 changed files with 106 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
resources/views/livewire/public/station-search.blade.php Normal file
View File

@@ -0,0 +1,106 @@
<div>
<flux:heading size="xl" class="mb-1">Find Cheap Fuel Near You</flux:heading>
<flux:subheading class="mb-6">Search by postcode, town or city</flux:subheading>
<form wire:submit="findStations">
<div class="flex flex-col gap-3 sm:flex-row sm:items-end">
<div class="flex-1">
<flux:input
wire:model="search"
name="search"
label="Location"
placeholder="Postcode, town or city"
/>
@error('search')
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
@enderror
</div>
<div class="w-full sm:w-48">
<flux:select wire:model="fuelType" name="fuelType" label="Fuel type">
<flux:select.option value="">Select fuel type</flux:select.option>
<flux:select.option value="petrol">Petrol (E10)</flux:select.option>
<flux:select.option value="e5">Super Unleaded (E5)</flux:select.option>
<flux:select.option value="diesel">Diesel</flux:select.option>
<flux:select.option value="b7_premium">Premium Diesel</flux:select.option>
<flux:select.option value="b10">B10 Biodiesel</flux:select.option>
<flux:select.option value="hvo">HVO</flux:select.option>
</flux:select>
@error('fuelType')
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
@enderror
</div>
<div class="w-full sm:w-36">
<flux:select wire:model="radius" name="radius" label="Radius">
<flux:select.option value="1">1 mile</flux:select.option>
<flux:select.option value="2">2 miles</flux:select.option>
<flux:select.option value="5">5 miles</flux:select.option>
<flux:select.option value="10">10 miles</flux:select.option>
<flux:select.option value="20">20 miles</flux:select.option>
</flux:select>
</div>
<div>
<flux:button type="submit" variant="primary" wire:loading.attr="disabled">
<span wire:loading.remove wire:target="findStations">Search</span>
<span wire:loading wire:target="findStations">Searching…</span>
</flux:button>
</div>
</div>
</form>
@if ($apiError)
<div class="mt-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-400">
{{ $apiError }}
</div>
@endif
@if (! empty($meta))
<div class="mt-6">
@if (! empty($results))
<p class="mb-3 text-sm text-zinc-500 dark:text-zinc-400">
{{ $meta['count'] }} {{ Str::plural('station', $meta['count']) }} found
&middot; Cheapest: {{ number_format($meta['lowest_pence'] / 100, 1) }}p
&middot; Average: {{ number_format($meta['avg_pence'] / 100, 1) }}p
</p>
<div class="space-y-2">
@foreach ($results as $station)
<div class="flex items-center justify-between rounded-xl border border-neutral-200 px-4 py-3 dark:border-neutral-700">
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2">
<p class="truncate font-semibold text-zinc-900 dark:text-zinc-100">
{{ $station['name'] }}
</p>
@if ($station['is_supermarket'])
<flux:badge color="lime" size="sm">Supermarket</flux:badge>
@endif
</div>
<p class="truncate text-sm text-zinc-500 dark:text-zinc-400">
{{ $station['address'] }}, {{ $station['postcode'] }}
</p>
<p class="text-sm text-zinc-400 dark:text-zinc-500">
{{ number_format($station['distance_km'] * 0.621371, 1) }} miles away
</p>
</div>
<div class="ml-4 shrink-0 text-right">
<p class="text-xl font-bold text-zinc-900 dark:text-zinc-100">
{{ $station['price'] }}p
</p>
<p class="text-xs text-zinc-400 dark:text-zinc-500">
{{ \Carbon\Carbon::parse($station['price_updated_at'])->diffForHumans() }}
</p>
</div>
</div>
@endforeach
</div>
@else
<p class="text-sm text-zinc-500 dark:text-zinc-400">
No stations found within {{ $radius }} {{ Str::plural('mile', $radius) }} of "{{ $search }}".
</p>
@endif
</div>
@endif
</div>