working pages no maps
This commit is contained in:
@@ -1,9 +1,8 @@
|
||||
<!-- src/routes/(app)/[stateSlug]/[countySlug]/+page.svelte -->
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores
|
||||
';
|
||||
import { page } from '$app/stores';
|
||||
import { onMount } from 'svelte';
|
||||
import { newEnglandStates } from '$lib/states';
|
||||
import { newEnglandStates } from '../../../../lib/states';
|
||||
|
||||
interface Listing {
|
||||
id: number;
|
||||
@@ -18,6 +17,7 @@
|
||||
phone: string | null;
|
||||
online_ordering: string;
|
||||
county_id: number;
|
||||
town: string | null;
|
||||
user_id: number;
|
||||
last_edited: string;
|
||||
}
|
||||
@@ -157,7 +157,24 @@
|
||||
<p class="text-lg text-gray-600">No active listings found for this county.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="overflow-x-auto">
|
||||
<!-- Sort Controls -->
|
||||
<div class="mb-4 flex flex-wrap gap-2">
|
||||
<select class="select select-bordered select-sm" bind:value={sortColumn} on:change={sortListings}>
|
||||
<option value="company_name">Company</option>
|
||||
<option value="town">Town</option>
|
||||
<option value="price_per_gallon">Price per Gallon</option>
|
||||
<option value="bio_percent">Bio %</option>
|
||||
<option value="service">Service</option>
|
||||
<option value="phone">Contact</option>
|
||||
<option value="last_edited">Last Updated</option>
|
||||
</select>
|
||||
<button class="btn btn-sm" on:click={() => { sortDirection = sortDirection === 'asc' ? 'desc' : 'asc'; sortListings(); }}>
|
||||
{sortDirection === 'asc' ? '↑' : '↓'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Desktop Table View -->
|
||||
<div class="hidden md:block overflow-x-auto">
|
||||
<table class="table table-zebra w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -167,15 +184,15 @@
|
||||
{sortDirection === 'asc' ? '↑' : '↓'}
|
||||
{/if}
|
||||
</th>
|
||||
<th class="cursor-pointer hover:bg-base-200" on:click={() => handleSort('price_per_gallon')}>
|
||||
Price per Gallon Card
|
||||
{#if sortColumn === 'price_per_gallon'}
|
||||
<th class="cursor-pointer hover:bg-base-200" on:click={() => handleSort('town')}>
|
||||
Town
|
||||
{#if sortColumn === 'town'}
|
||||
{sortDirection === 'asc' ? '↑' : '↓'}
|
||||
{/if}
|
||||
</th>
|
||||
<th class="cursor-pointer hover:bg-base-200" on:click={() => handleSort('price_per_gallon_cash')}>
|
||||
Price per Gallon Cash
|
||||
{#if sortColumn === 'price_per_gallon_cash'}
|
||||
<th class="cursor-pointer hover:bg-base-200" on:click={() => handleSort('price_per_gallon')}>
|
||||
Price per Gallon
|
||||
{#if sortColumn === 'price_per_gallon'}
|
||||
{sortDirection === 'asc' ? '↑' : '↓'}
|
||||
{/if}
|
||||
</th>
|
||||
@@ -185,12 +202,6 @@
|
||||
{sortDirection === 'asc' ? '↑' : '↓'}
|
||||
{/if}
|
||||
</th>
|
||||
<th class="cursor-pointer hover:bg-base-200" on:click={() => handleSort('online_ordering')}>
|
||||
Online Ordering
|
||||
{#if sortColumn === 'online_ordering'}
|
||||
{sortDirection === 'asc' ? '↑' : '↓'}
|
||||
{/if}
|
||||
</th>
|
||||
<th class="cursor-pointer hover:bg-base-200" on:click={() => handleSort('service')}>
|
||||
Service
|
||||
{#if sortColumn === 'service'}
|
||||
@@ -198,29 +209,31 @@
|
||||
{/if}
|
||||
</th>
|
||||
<th class="cursor-pointer hover:bg-base-200" on:click={() => handleSort('phone')}>
|
||||
Phone
|
||||
Contact
|
||||
{#if sortColumn === 'phone'}
|
||||
{sortDirection === 'asc' ? '↑' : '↓'}
|
||||
{/if}
|
||||
</th>
|
||||
<th class="cursor-pointer hover:bg-base-200" on:click={() => handleSort('last_edited')}>
|
||||
Last Updated
|
||||
{#if sortColumn === 'last_edited'}
|
||||
{sortDirection === 'asc' ? '↑' : '↓'}
|
||||
{/if}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each listings as listing}
|
||||
<tr>
|
||||
<td>{listing.company_name}</td>
|
||||
<td>${listing.price_per_gallon.toFixed(2)}</td>
|
||||
<td>{listing.price_per_gallon_cash ? `$${listing.price_per_gallon_cash.toFixed(2)}` : 'N/A'}</td>
|
||||
<td>{listing.bio_percent}%</td>
|
||||
<td>{listing.town || 'N/A'}</td>
|
||||
<td>
|
||||
{#if listing.online_ordering === 'none'}
|
||||
No
|
||||
{:else if listing.online_ordering === 'online_only'}
|
||||
Online Only
|
||||
{:else if listing.online_ordering === 'both'}
|
||||
Both
|
||||
{/if}
|
||||
<div class="text-sm">
|
||||
<div><strong>Card:</strong> ${listing.price_per_gallon.toFixed(2)}</div>
|
||||
<div><strong>Cash:</strong> {listing.price_per_gallon_cash ? `$${listing.price_per_gallon_cash.toFixed(2)}` : 'N/A'}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>{listing.bio_percent}%</td>
|
||||
<td>
|
||||
{#if listing.service}
|
||||
<span class="badge badge-success">Yes</span>
|
||||
@@ -229,17 +242,90 @@
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
{#if listing.phone}
|
||||
<a href="tel:{listing.phone}" class="text-blue-600 hover:underline">{listing.phone}</a>
|
||||
{:else}
|
||||
N/A
|
||||
{/if}
|
||||
<div class="text-sm">
|
||||
{#if listing.phone}
|
||||
<div><strong>Phone:</strong> <a href="tel:{listing.phone}" class="text-blue-600 hover:underline">{listing.phone}</a></div>
|
||||
{:else}
|
||||
<div><strong>Phone:</strong> N/A</div>
|
||||
{/if}
|
||||
<div>
|
||||
<strong>Online:</strong>
|
||||
{#if listing.online_ordering === 'none'}
|
||||
No
|
||||
{:else if listing.online_ordering === 'online_only'}
|
||||
Online Only
|
||||
{:else if listing.online_ordering === 'both'}
|
||||
Both
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>{new Date(listing.last_edited).toLocaleDateString()}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Card View -->
|
||||
<div class="block md:hidden space-y-4">
|
||||
{#each listings as listing}
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body p-4">
|
||||
<h3 class="card-title text-lg font-bold">
|
||||
{listing.company_name}
|
||||
{#if listing.town}
|
||||
<br><small class="text-gray-500 font-normal">{listing.town}</small>
|
||||
{/if}
|
||||
</h3>
|
||||
<div class="grid grid-cols-2 gap-2 text-sm">
|
||||
<div>
|
||||
<span class="font-semibold">Card Price:</span><br>
|
||||
${listing.price_per_gallon.toFixed(2)}
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">Cash Price:</span><br>
|
||||
{listing.price_per_gallon_cash ? `$${listing.price_per_gallon_cash.toFixed(2)}` : 'N/A'}
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">Bio %:</span><br>
|
||||
{listing.bio_percent}%
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">Service:</span><br>
|
||||
{#if listing.service}
|
||||
<span class="badge badge-success badge-sm">Yes</span>
|
||||
{:else}
|
||||
<span class="badge badge-neutral badge-sm">No</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">Contact:</span><br>
|
||||
{#if listing.phone}
|
||||
<a href="tel:{listing.phone}" class="text-blue-600 hover:underline text-sm">{listing.phone}</a><br>
|
||||
{:else}
|
||||
N/A<br>
|
||||
{/if}
|
||||
<small>
|
||||
Online:
|
||||
{#if listing.online_ordering === 'none'}
|
||||
No
|
||||
{:else if listing.online_ordering === 'online_only'}
|
||||
Online Only
|
||||
{:else if listing.online_ordering === 'both'}
|
||||
Both
|
||||
{/if}
|
||||
</small>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">Last Updated:</span><br>
|
||||
<small>{new Date(listing.last_edited).toLocaleDateString()}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if error}
|
||||
|
||||
Reference in New Issue
Block a user