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

feat: add Leaflet map and colour legend to station search results

Browse Source
This commit is contained in:
Ovidiu U
2026-04-06 09:45:22 +01:00
parent ffdcb8baff
commit 40c0815a2c
1 changed files with 23 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
resources/views/livewire/public/station-search.blade.php
View File

@@ -43,6 +43,7 @@
<div class="w-full sm:w-40"> <div class="w-full sm:w-40">
<flux:select wire:model.live="sort" name="sort" label="Sort by"> <flux:select wire:model.live="sort" name="sort" label="Sort by">
<flux:select.option value="reliable">Best price (reliable)</flux:select.option>
<flux:select.option value="price">Cheapest first</flux:select.option> <flux:select.option value="price">Cheapest first</flux:select.option>
<flux:select.option value="distance">Nearest first</flux:select.option> <flux:select.option value="distance">Nearest first</flux:select.option>
<flux:select.option value="updated">Recently updated</flux:select.option> <flux:select.option value="updated">Recently updated</flux:select.option>
@@ -74,6 +75,20 @@
&middot; Average: {{ number_format($meta['avg_pence'] / 100, 1) }}p &middot; Average: {{ number_format($meta['avg_pence'] / 100, 1) }}p
</p> </p>
{{-- Map --}}
<div
x-data="stationMap(@entangle('results'))"
class="mb-4 h-72 overflow-hidden rounded-xl border border-neutral-200 sm:h-96 dark:border-neutral-700"
></div>
{{-- Legend --}}
<div class="mb-3 flex flex-wrap gap-3 text-xs text-zinc-500 dark:text-zinc-400">
<span class="flex items-center gap-1"><span class="inline-block size-3 rounded-full bg-green-500"></span> Current (&lt;24h)</span>
<span class="flex items-center gap-1"><span class="inline-block size-3 rounded-full bg-slate-500"></span> Recent (24–48h)</span>
<span class="flex items-center gap-1"><span class="inline-block size-3 rounded-full bg-amber-500"></span> Stale (2–5 days)</span>
<span class="flex items-center gap-1"><span class="inline-block size-3 rounded-full bg-red-500"></span> Outdated (5+ days)</span>
</div>
<div class="space-y-2"> <div class="space-y-2">
@foreach ($results as $station) @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="flex items-center justify-between rounded-xl border border-neutral-200 px-4 py-3 dark:border-neutral-700">
@@ -98,7 +113,14 @@
<p class="text-xl font-bold text-zinc-900 dark:text-zinc-100"> <p class="text-xl font-bold text-zinc-900 dark:text-zinc-100">
{{ number_format($station['price'], 1) }}p {{ number_format($station['price'], 1) }}p
</p> </p>
<p class="text-xs text-zinc-400 dark:text-zinc-500"> <p class="text-xs {{ match($station['price_classification']) {
'current' => 'text-green-500 dark:text-green-400',
'recent' => 'text-zinc-400 dark:text-zinc-500',
'stale' => 'text-amber-500 dark:text-amber-400',
'outdated' => 'text-red-500 dark:text-red-400',
} }}">
{{ $station['price_classification_label'] }}
&middot;
{{ $station['price_updated_at'] ? \Carbon\Carbon::parse($station['price_updated_at'])->diffForHumans() : 'Unknown' }} {{ $station['price_updated_at'] ? \Carbon\Carbon::parse($station['price_updated_at'])->diffForHumans() : 'Unknown' }}
</p> </p>
</div> </div>