fuelprices/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working pages no maps

Browse Source
This commit is contained in:
Edwin Eames
2025-12-29 21:38:32 -05:00
parent f08432e417
commit 984c8e8169
8 changed files with 642 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/routes/(app)/+layout.svelte
View File

@@ -21,9 +21,15 @@
// Check for user session on mount (this is a placeholder, actual implementation may vary)
onMount(() => {
const storedUserString = localStorage.getItem('user');
if (storedUserString) {
const token = localStorage.getItem('auth_token');
if (storedUserString && token) {
storedUser = JSON.parse(storedUserString);
user.set(storedUser);
} else {
// Clear if inconsistent
localStorage.removeItem('user');
localStorage.removeItem('auth_token');
user.set(null);
}
});
@@ -39,6 +45,7 @@
const logout = () => {
user.set(null);
localStorage.removeItem('user');
localStorage.removeItem('auth_token');
window.location.href = '/';
};

165
src/routes/(app)/[stateSlug]/+page.svelte
View File

@@ -1,42 +1,84 @@
<!-- src/routes/[stateSlug]/+page.svelte -->
<script lang="ts">
import { page } from '$app/stores';
import { newEnglandStates, allCounties, type NewEnglandState } from '$lib/states'; // <--- Import type and counties
import {
newEnglandStates,
type NewEnglandState,
massachusettsCounties,
maineCounties,
vermontCounties,
newHampshireCounties,
rhodeIslandCounties,
connecticutCounties
} from '$lib/states';
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
import { browser } from '$app/environment';
// The stateSlug from $page.params is guaranteed to be a string if this route matches
// because [stateSlug] is a required parameter.
const { stateSlug } = $page.params as { stateSlug: string }; // Type assertion for clarity
const { stateSlug } = $page.params as { stateSlug: string };
let stateData: NewEnglandState | undefined;
let stateCounties: NewEnglandState[] = [];
let filteredCounties: any[] = [];
let loading = false;
let error: string | null = null;
let hoveredCounty: string | null = null;
// Clean county data access using object lookup
const countyDataMap: Record<string, NewEnglandState[]> = {
MA: massachusettsCounties,
ME: maineCounties,
VT: vermontCounties,
NH: newHampshireCounties,
RI: rhodeIslandCounties,
CT: connecticutCounties
};
function getStateCounties(stateId: string): NewEnglandState[] {
return countyDataMap[stateId] || [];
}
function handleCountyClick(county: NewEnglandState) {
// Match county names between map data and API data
const cleanMapName = county.name.toLowerCase().replace(/\s+county$/, '').replace(/[^a-z]/g, '');
const apiCounty = filteredCounties.find((c: any) =>
cleanMapName === c.name.toLowerCase().replace(/[^a-z]/g, '')
);
goto(apiCounty ? `/${stateSlug}/${apiCounty.id}` : `/${stateSlug}/${county.slug}`);
}
function handleMouseEnter(countyId: string) {
if (browser) {
hoveredCounty = countyId;
}
}
function handleMouseLeave() {
if (browser) {
hoveredCounty = null;
}
}
onMount(async () => {
stateData = newEnglandStates.find(s => s.id === stateSlug);
stateData = newEnglandStates.find((s: NewEnglandState) => s.id === stateSlug);
if (stateData) {
// Load API county data
loading = true;
try {
const token = localStorage.getItem('auth_token');
const headers: Record<string, string> = {};
if (token) {
headers['Authorization'] = `Bearer ${token}`;
}
const response = await fetch(`http://localhost:9552/state/${stateSlug.toUpperCase()}`, {
headers
headers: token ? { Authorization: `Bearer ${token}` } : {}
});
if (!response.ok) {
throw new Error(`API call failed with status ${response.status}`);
}
filteredCounties = await response.json();
filteredCounties = response.ok ? await response.json() : [];
} catch (err) {
error = err instanceof Error ? err.message : 'Failed to fetch counties';
filteredCounties = [];
} finally {
loading = false;
}
loading = false;
// Load map county data
stateCounties = getStateCounties(stateSlug);
}
});
@@ -52,39 +94,66 @@
</ul>
</nav>
<div class="card lg:card-side bg-base-100 shadow-xl">
<figure class=" ">
<img
src={stateData.image}
alt="Map or notable feature of {stateData.id}"
class="object-cover"
/>
</figure>
<div class="card-body lg:w-1/2">
<h1 class="card-title text-4xl">{stateData.name}</h1>
<p>This is the page for {stateData.name}. Here you can add more specific information about this wonderful state!</p>
<p>The URL for this page is <code class="bg-base-300 p-1 rounded">/{stateData.id}</code> which is {stateData.id.length} characters long.</p>
<div class="mt-4">
<h2 class="text-xl font-semibold mb-2">Counties:</h2>
{#if loading}
<p>Loading counties...</p>
{:else if error}
<p class="text-error">Error: {error}</p>
{:else}
<ul class="list-disc pl-5">
{#each filteredCounties as county}
<li>
<a href="/{stateSlug}/{county.id}" class="text-blue-600 hover:underline">{county.name}</a>
</li>
<!-- Centered State Name -->
<div class="text-center mb-6">
<h1 class="text-4xl font-bold">{stateData.name}</h1>
</div>
<!-- Interactive County Map -->
<div class="flex justify-center mb-6">
{#if browser && stateCounties.length > 0}
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1000 600"
class="w-full max-w-2xl h-auto border border-gray-300 rounded-lg shadow-md"
aria-labelledby="countyMapTitle"
role="img"
>
<title id="countyMapTitle">Interactive Map of {stateData.name} Counties</title>
{#each stateCounties as county}
<path
d={county.pathD}
class={`stroke-black stroke-1 cursor-pointer transition-all duration-150 ease-in-out
${hoveredCounty === county.id ? county.hoverFill : county.fill}`}
on:click={() => handleCountyClick(county)}
on:mouseenter={() => handleMouseEnter(county.id)}
on:mouseleave={handleMouseLeave}
aria-label={county.name}
tabindex="0"
role="link"
on:keydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleCountyClick(county)}}
>
<title>{county.name}</title>
</path>
{/each}
</ul>
</svg>
{:else}
<div class="w-full max-w-2xl h-[400px] bg-gray-200 animate-pulse rounded-lg flex justify-center items-center">
<p>Loading county map...</p>
</div>
{/if}
</div>
<div class="card-actions justify-end mt-4">
<!-- Counties List -->
<div class="mt-4">
<h2 class="text-xl font-semibold mb-2 text-center">Counties:</h2>
{#if loading}
<p class="text-center">Loading counties...</p>
{:else if error}
<p class="text-center text-error">Error: {error}</p>
{:else}
<div class="flex flex-col items-center gap-2">
{#each filteredCounties as county}
<a href="/{stateSlug}/{county.id}" class="text-center text-blue-600 hover:underline block">{county.name}</a>
{/each}
</div>
{/if}
</div>
<!-- Back Button -->
<div class="text-center mt-6">
<a href="/" class="btn btn-primary">Back to Map</a>
</div>
</div>
</div>
{:else if !stateData && stateSlug} <!-- Check if stateData is still undefined after onMount attempted to find it -->
<div class="text-center py-10">
<h1 class="text-3xl font-bold text-error">State Not Found</h1>
@@ -92,11 +161,3 @@
<a href="/" class="btn btn-primary mt-6">Go Back to Map</a>
</div>
{/if}
<style>
figure img {
object-fit: cover;
width: 100%;
height: 100%;
}
</style>

144
src/routes/(app)/[stateSlug]/[countySlug]/+page.svelte
View File

@@ -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>
<div class="text-sm">
{#if listing.phone}
<a href="tel:{listing.phone}" class="text-blue-600 hover:underline">{listing.phone}</a>
<div><strong>Phone:</strong> <a href="tel:{listing.phone}" class="text-blue-600 hover:underline">{listing.phone}</a></div>
{:else}
N/A
<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}

2
src/routes/(app)/login/+page.svelte
View File

@@ -34,7 +34,7 @@
// Assuming the backend returns a token or some success indicator
// Store the token in localStorage for authentication checks
if (data.token) {
localStorage.setItem('token', data.token);
localStorage.setItem('auth_token', data.token);
}
// Store the user object in localStorage
localStorage.setItem('user', JSON.stringify(data.user));

203
src/routes/(app)/vendor/+page.svelte vendored
View File

@@ -14,13 +14,32 @@
phone: string | null;
online_ordering: string;
county_id: number;
town: string | null;
user_id: number;
last_edited: string;
}
interface Company {
id: number;
active: boolean;
created: string;
name: string;
address?: string;
town?: string;
state?: string;
phone?: string;
owner_name?: string;
owner_phone_number?: string;
email?: string;
user_id?: number;
}
let listings: Listing[] = [];
let company: Company | null = null;
let isLoading = true;
let companyLoading = true;
let error = '';
let companyError = '';
let successMessage = '';
// Inline editing state
@@ -28,16 +47,67 @@
let editingField: string | null = null;
let editingValue: string = '';
async function fetchListings() {
async function fetchCompany() {
try {
const token = localStorage.getItem('token');
const response = await fetch('http://localhost:9552/listing', {
const token = localStorage.getItem('auth_token');
if (!token) {
// Redirect to login if no token
window.location.href = '/login';
return;
}
const response = await fetch('http://localhost:9552/company', {
headers: {
'Authorization': token ? `Bearer ${token}` : ''
'Authorization': `Bearer ${token}`
}
});
if (response.ok) {
company = await response.json();
} else if (response.status === 401) {
// Token expired or invalid, redirect to login
localStorage.removeItem('auth_token');
localStorage.removeItem('user');
window.location.href = '/login';
return;
} else if (response.status === 404) {
// Company not found - that's okay, user can create one
company = null;
} else {
companyError = 'Failed to load company information';
}
} catch (err) {
companyError = 'Network error loading company information';
} finally {
companyLoading = false;
}
}
async function fetchListings() {
try {
const token = localStorage.getItem('auth_token');
if (!token) {
// Redirect to login if no token
window.location.href = '/login';
return;
}
const response = await fetch('http://localhost:9552/listing', {
headers: {
'Authorization': `Bearer ${token}`
}
});
if (response.ok) {
listings = await response.json();
} else if (response.status === 401) {
// Token expired or invalid, redirect to login
localStorage.removeItem('auth_token');
localStorage.removeItem('user');
window.location.href = '/login';
return;
} else {
error = 'Failed to load listings';
}
@@ -52,7 +122,7 @@
if (!confirm('Are you sure you want to delete this listing?')) return;
try {
const token = localStorage.getItem('token');
const token = localStorage.getItem('auth_token');
const response = await fetch(`http://localhost:9552/listing/${id}`, {
method: 'DELETE',
headers: {
@@ -73,7 +143,7 @@
function editListing(listing: Listing) {
// Navigate to the edit page for this listing
window.location.href = `/vendor/price/${listing.id}`;
window.location.href = `/vendor/listing/${listing.id}`;
}
function startEditing(listing: Listing, field: string) {
@@ -128,7 +198,7 @@
updateData[editingField] = newValue;
}
const token = localStorage.getItem('token');
const token = localStorage.getItem('auth_token');
const response = await fetch(`http://localhost:9552/listing/${listing.id}`, {
method: 'PUT',
headers: {
@@ -160,13 +230,31 @@
}
}
function formatPhoneNumber(phone: string): string {
// Remove all non-digit characters
const cleaned = phone.replace(/\D/g, '');
// Check if it's a valid US phone number (10 or 11 digits)
if (cleaned.length === 10) {
// Format as (XXX) XXX-XXXX
return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`;
} else if (cleaned.length === 11 && cleaned.startsWith('1')) {
// Format as +1 (XXX) XXX-XXXX for 1-prefixed numbers
return `+1 (${cleaned.slice(1, 4)}) ${cleaned.slice(4, 7)}-${cleaned.slice(7)}`;
}
// Return original if it doesn't match expected formats
return phone;
}
onMount(() => {
fetchCompany();
fetchListings();
});
</script>
<div class="container mx-auto p-4">
<h1 class="text-3xl font-bold mb-4">Vendor Dashboard</h1>
<h1 class="text-3xl font-bold mb-6">Vendor Dashboard</h1>
<!-- Success Banner -->
{#if successMessage}
@@ -175,10 +263,91 @@
</div>
{/if}
<p>Welcome to the Vendor section. Navigate to specific pages using the links below.</p>
<div class="mt-4">
<a href="/vendor/profile" class="text-blue-500 hover:underline">Profile</a>
<a href="/vendor/price" class="text-blue-500 hover:underline ml-4">Price</a>
<!-- Company Information Box (Facebook-like profile) -->
<div class="card bg-base-100 shadow-xl mb-8">
<div class="card-body">
{#if companyLoading}
<div class="flex justify-center py-8">
<span class="loading loading-spinner loading-lg"></span>
</div>
{:else if companyError}
<div class="alert alert-error">
<span>{companyError}</span>
</div>
{:else if company}
<div class="flex flex-col md:flex-row gap-6">
<!-- Company Avatar/Icon -->
<div class="flex-shrink-0">
<div class="avatar">
<div class="w-24 h-24 rounded-full bg-primary flex items-center justify-center">
<span class="text-3xl text-primary-content font-bold">
{company.name.charAt(0).toUpperCase()}
</span>
</div>
</div>
</div>
<!-- Company Details -->
<div class="flex-grow">
<h2 class="card-title text-2xl mb-2">{company.name}</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
{#if company.address}
<div>
<span class="font-semibold">Address:</span><br>
{company.address}
</div>
{/if}
{#if company.town && company.state}
<div>
<span class="font-semibold">Location:</span><br>
{company.town}, {company.state}
</div>
{/if}
{#if company.phone}
<div>
<span class="font-semibold">Phone:</span><br>
<a href="tel:{company.phone}" class="text-blue-600 hover:underline">{formatPhoneNumber(company.phone)}</a>
</div>
{/if}
{#if company.owner_name}
<div>
<span class="font-semibold">Owner:</span><br>
{company.owner_name}
</div>
{/if}
{#if company.owner_phone_number}
<div>
<span class="font-semibold">Owner Phone:</span><br>
<a href="tel:{company.owner_phone_number}" class="text-blue-600 hover:underline">{formatPhoneNumber(company.owner_phone_number)}</a>
</div>
{/if}
{#if company.email}
<div>
<span class="font-semibold">Email:</span><br>
<a href="mailto:{company.email}" class="text-blue-600 hover:underline">{company.email}</a>
</div>
{/if}
<div>
<span class="font-semibold">Member Since:</span><br>
{new Date(company.created).toLocaleDateString()}
</div>
</div>
</div>
</div>
{:else}
<div class="text-center py-8">
<h3 class="text-lg font-semibold mb-2">No Company Profile Found</h3>
<p class="text-gray-600 mb-4">Create your company profile to get started.</p>
<a href="/vendor/profile" class="btn btn-primary">Create Company Profile</a>
</div>
{/if}
</div>
</div>
<!-- Navigation Links -->
<div class="flex flex-wrap gap-4 mb-8">
<a href="/vendor/profile" class="btn btn-outline">Company Profile</a>
<a href="/vendor/listing" class="btn btn-primary">Create Listing</a>
</div>
<!-- Listings Table -->
@@ -196,7 +365,7 @@
{:else if listings.length === 0}
<div class="text-center py-8">
<p class="text-lg text-gray-600">No listings found.. create one :)</p>
<a href="/vendor/price" class="btn btn-primary mt-4">Create Listing</a>
<a href="/vendor/listing" class="btn btn-primary mt-4">Create Listing</a>
</div>
{:else}
<div class="overflow-x-auto">
@@ -204,6 +373,7 @@
<thead>
<tr>
<th>Company</th>
<th>Location</th>
<th>Price Card</th>
<th>Price Cash</th>
<th>Min Order</th>
@@ -218,6 +388,13 @@
{#each listings as listing}
<tr>
<td>{listing.company_name}</td>
<td>
{#if listing.town}
{listing.town} (ID: {listing.county_id})
{:else}
County ID: {listing.county_id}
{/if}
</td>
<!-- Price Card (editable) -->
<td>

150
src/routes/(app)/vendor/price/+page.svelte → src/routes/(app)/vendor/listing/+page.svelte vendored
View File

@@ -19,7 +19,8 @@
bioPercent: 0,
phone: '',
state: '',
countyId: 0
countyId: 0,
town: ''
};
// Active status
@@ -39,7 +40,9 @@
bioPercent: '',
phone: '',
state: '',
countyId: ''
countyId: '',
minimumOrder: '',
town: ''
};
// Form submission state
@@ -76,6 +79,8 @@
errors.phone = '';
errors.state = '';
errors.countyId = '';
errors.minimumOrder = '';
errors.town = '';
let isValid = true;
@@ -110,6 +115,16 @@
isValid = false;
}
if (formData.minimumOrder === null || formData.minimumOrder < 1) {
errors.minimumOrder = 'Minimum order must be at least 1';
isValid = false;
}
if (!formData.town.trim()) {
errors.town = 'Town is required';
isValid = false;
}
return isValid;
}
@@ -140,7 +155,8 @@
bio_percent: formData.bioPercent,
phone: formData.phone,
online_ordering: onlineOrdering,
county_id: formData.countyId
county_id: formData.countyId,
town: formData.town.trim() || null
})
});
@@ -196,7 +212,7 @@
<ul>
<li><a href="/" class="text-blue-500 hover:underline">Home</a></li>
<li><a href="/vendor" class="text-blue-500 hover:underline">Vendor Dashboard</a></li>
<li>Price Management</li>
<li>Listing Management</li>
</ul>
</nav>
@@ -320,10 +336,16 @@
min="1"
max="200"
step="1"
class="input input-bordered w-full"
required
class="input input-bordered w-full {errors.minimumOrder ? 'input-error' : ''}"
bind:value={formData.minimumOrder}
placeholder="Optional (1-200)"
placeholder="Enter minimum order quantity"
/>
{#if errors.minimumOrder}
<label class="label">
<span class="label-text-alt text-error">{errors.minimumOrder}</span>
</label>
{/if}
</div>
</div>
</div>
@@ -347,51 +369,10 @@
</div>
</div>
<!-- Contact & Location Section -->
<!-- Location Section -->
<div class="bg-base-200 p-4 rounded-lg">
<h3 class="text-lg font-semibold mb-3">Contact & Location</h3>
<h3 class="text-lg font-semibold mb-3">Location</h3>
<div class="space-y-4">
<!-- Phone Number -->
<div class="form-control">
<label class="label" for="phone">
<span class="label-text">Phone</span>
</label>
<input
id="phone"
type="tel"
required={!phoneDisabled}
disabled={phoneDisabled}
class="input input-bordered w-full {phoneDisabled ? 'input-disabled' : ''} {errors.phone ? 'input-error' : ''}"
bind:value={formData.phone}
on:input={handlePhoneInput}
placeholder="123-456-7890"
/>
{#if errors.phone}
<label class="label">
<span class="label-text-alt text-error">{errors.phone}</span>
</label>
{/if}
</div>
<!-- Online Ordering -->
<div class="form-control">
<fieldset class="fieldset">
<legend class="fieldset-legend">Online Ordering</legend>
<label class="fieldset-label">
<input type="radio" name="onlineOrdering" bind:group={onlineOrdering} value="none" />
No online ordering
</label>
<label class="fieldset-label">
<input type="radio" name="onlineOrdering" bind:group={onlineOrdering} value="online_only" />
Yes, online only
</label>
<label class="fieldset-label">
<input type="radio" name="onlineOrdering" bind:group={onlineOrdering} value="both" />
Both online and phone
</label>
</fieldset>
</div>
<!-- State Dropdown -->
<div class="form-control">
<label class="label" for="state">
@@ -445,6 +426,77 @@
</label>
{/if}
</div>
<!-- Town Input -->
<div class="form-control">
<label class="label" for="town">
<span class="label-text">Town</span>
</label>
<input
id="town"
type="text"
required
class="input input-bordered w-full {errors.town ? 'input-error' : ''}"
bind:value={formData.town}
placeholder="Enter town name"
maxlength="100"
/>
{#if errors.town}
<label class="label">
<span class="label-text-alt text-error">{errors.town}</span>
</label>
{/if}
<label class="label">
<span class="label-text-alt">Specify the town within the selected county</span>
</label>
</div>
</div>
</div>
<!-- Contact Section -->
<div class="bg-base-200 p-4 rounded-lg">
<h3 class="text-lg font-semibold mb-3">Contact</h3>
<div class="space-y-4">
<!-- Phone Number -->
<div class="form-control">
<label class="label" for="phone">
<span class="label-text">Phone</span>
</label>
<input
id="phone"
type="tel"
required={!phoneDisabled}
disabled={phoneDisabled}
class="input input-bordered w-full {phoneDisabled ? 'input-disabled' : ''} {errors.phone ? 'input-error' : ''}"
bind:value={formData.phone}
on:input={handlePhoneInput}
placeholder="123-456-7890"
/>
{#if errors.phone}
<label class="label">
<span class="label-text-alt text-error">{errors.phone}</span>
</label>
{/if}
</div>
<!-- Online Ordering -->
<div class="form-control">
<fieldset class="fieldset">
<legend class="fieldset-legend">Online Ordering</legend>
<label class="fieldset-label">
<input type="radio" name="onlineOrdering" bind:group={onlineOrdering} value="none" />
No online ordering
</label>
<label class="fieldset-label">
<input type="radio" name="onlineOrdering" bind:group={onlineOrdering} value="online_only" />
Yes, online only
</label>
<label class="fieldset-label">
<input type="radio" name="onlineOrdering" bind:group={onlineOrdering} value="both" />
Both online and phone
</label>
</fieldset>
</div>
</div>
</div>

156
src/routes/(app)/vendor/price/[id]/+page.svelte → src/routes/(app)/vendor/listing/[id]/+page.svelte vendored
View File

@@ -23,6 +23,7 @@
phone: string | null;
online_ordering: string;
county_id: number;
town: string | null;
user_id: number;
last_edited: string;
}
@@ -41,7 +42,8 @@
bioPercent: 0,
phone: '',
state: '',
countyId: 0
countyId: 0,
town: ''
};
// Active status
@@ -61,7 +63,9 @@
bioPercent: '',
phone: '',
state: '',
countyId: ''
countyId: '',
minimumOrder: '',
town: ''
};
// Form submission state
@@ -76,7 +80,7 @@
// Load existing listing data
async function loadListing() {
try {
const token = localStorage.getItem('token');
const token = localStorage.getItem('auth_token');
const response = await fetch(`http://localhost:9552/listing/${listingId}`, {
headers: {
'Authorization': token ? `Bearer ${token}` : ''
@@ -97,6 +101,7 @@
formData.phone = listing.phone || '';
onlineOrdering = listing.online_ordering;
formData.countyId = listing.county_id;
formData.town = listing.town || '';
// Load the state for this county
await loadStateForCounty(listing.county_id);
@@ -158,6 +163,8 @@
errors.phone = '';
errors.state = '';
errors.countyId = '';
errors.minimumOrder = '';
errors.town = '';
let isValid = true;
@@ -192,6 +199,16 @@
isValid = false;
}
if (formData.minimumOrder === null || formData.minimumOrder < 1) {
errors.minimumOrder = 'Minimum order must be at least 1';
isValid = false;
}
if (!formData.town.trim()) {
errors.town = 'Town is required';
isValid = false;
}
return isValid;
}
@@ -205,7 +222,7 @@
submitMessage = '';
try {
const token = localStorage.getItem('token');
const token = localStorage.getItem('auth_token');
const response = await fetch(`http://localhost:9552/listing/${listingId}`, {
method: 'PUT',
headers: {
@@ -222,7 +239,8 @@
bio_percent: formData.bioPercent,
phone: formData.phone,
online_ordering: onlineOrdering,
county_id: formData.countyId
county_id: formData.countyId,
town: formData.town.trim() || null
})
});
@@ -282,7 +300,7 @@
<ul>
<li><a href="/" class="text-blue-500 hover:underline">Home</a></li>
<li><a href="/vendor" class="text-blue-500 hover:underline">Vendor Dashboard</a></li>
<li><a href="/vendor/price" class="text-blue-500 hover:underline">Price Management</a></li>
<li><a href="/vendor/listing" class="text-blue-500 hover:underline">Listing Management</a></li>
<li>Edit Listing</li>
</ul>
</nav>
@@ -411,10 +429,16 @@
min="1"
max="200"
step="1"
class="input input-bordered w-full"
required
class="input input-bordered w-full {errors.minimumOrder ? 'input-error' : ''}"
bind:value={formData.minimumOrder}
placeholder="Optional (1-200)"
placeholder="Enter minimum order quantity"
/>
{#if errors.minimumOrder}
<label class="label">
<span class="label-text-alt text-error">{errors.minimumOrder}</span>
</label>
{/if}
</div>
</div>
</div>
@@ -438,51 +462,10 @@
</div>
</div>
<!-- Contact & Location Section -->
<!-- Location Section -->
<div class="bg-base-200 p-4 rounded-lg">
<h3 class="text-lg font-semibold mb-3">Contact & Location</h3>
<h3 class="text-lg font-semibold mb-3">Location</h3>
<div class="space-y-4">
<!-- Phone Number -->
<div class="form-control">
<label class="label" for="phone">
<span class="label-text">Phone</span>
</label>
<input
id="phone"
type="tel"
required={!phoneDisabled}
disabled={phoneDisabled}
class="input input-bordered w-full {phoneDisabled ? 'input-disabled' : ''} {errors.phone ? 'input-error' : ''}"
bind:value={formData.phone}
on:input={handlePhoneInput}
placeholder="123-456-7890"
/>
{#if errors.phone}
<label class="label">
<span class="label-text-alt text-error">{errors.phone}</span>
</label>
{/if}
</div>
<!-- Online Ordering -->
<div class="form-control">
<fieldset class="fieldset">
<legend class="fieldset-legend">Online Ordering</legend>
<label class="fieldset-label">
<input type="radio" name="onlineOrdering" bind:group={onlineOrdering} value="none" />
No online ordering
</label>
<label class="fieldset-label">
<input type="radio" name="onlineOrdering" bind:group={onlineOrdering} value="online_only" />
Yes, online only
</label>
<label class="fieldset-label">
<input type="radio" name="onlineOrdering" bind:group={onlineOrdering} value="both" />
Both online and phone
</label>
</fieldset>
</div>
<!-- State Dropdown -->
<div class="form-control">
<label class="label" for="state">
@@ -536,6 +519,77 @@
</label>
{/if}
</div>
<!-- Town Input -->
<div class="form-control">
<label class="label" for="town">
<span class="label-text">Town</span>
</label>
<input
id="town"
type="text"
required
class="input input-bordered w-full {errors.town ? 'input-error' : ''}"
bind:value={formData.town}
placeholder="Enter town name"
maxlength="100"
/>
{#if errors.town}
<label class="label">
<span class="label-text-alt text-error">{errors.town}</span>
</label>
{/if}
<label class="label">
<span class="label-text-alt">Specify the town within the selected county</span>
</label>
</div>
</div>
</div>
<!-- Contact Section -->
<div class="bg-base-200 p-4 rounded-lg">
<h3 class="text-lg font-semibold mb-3">Contact</h3>
<div class="space-y-4">
<!-- Phone Number -->
<div class="form-control">
<label class="label" for="phone">
<span class="label-text">Phone</span>
</label>
<input
id="phone"
type="tel"
required={!phoneDisabled}
disabled={phoneDisabled}
class="input input-bordered w-full {phoneDisabled ? 'input-disabled' : ''} {errors.phone ? 'input-error' : ''}"
bind:value={formData.phone}
on:input={handlePhoneInput}
placeholder="123-456-7890"
/>
{#if errors.phone}
<label class="label">
<span class="label-text-alt text-error">{errors.phone}</span>
</label>
{/if}
</div>
<!-- Online Ordering -->
<div class="form-control">
<fieldset class="fieldset">
<legend class="fieldset-legend">Online Ordering</legend>
<label class="fieldset-label">
<input type="radio" name="onlineOrdering" bind:group={onlineOrdering} value="none" />
No online ordering
</label>
<label class="fieldset-label">
<input type="radio" name="onlineOrdering" bind:group={onlineOrdering} value="online_only" />
Yes, online only
</label>
<label class="fieldset-label">
<input type="radio" name="onlineOrdering" bind:group={onlineOrdering} value="both" />
Both online and phone
</label>
</fieldset>
</div>
</div>
</div>

8
src/routes/(app)/vendor/profile/+page.svelte vendored
View File

@@ -23,7 +23,7 @@
try {
const response = await fetch('http://localhost:9552/company', {
headers: {
'Authorization': `Bearer ${localStorage.getItem('token')}`
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
}
});
@@ -67,7 +67,7 @@
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${localStorage.getItem('token')}`
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
},
body: JSON.stringify(payload)
});
@@ -105,7 +105,7 @@
const response = await fetch('http://localhost:9552/company', {
method: 'DELETE',
headers: {
'Authorization': `Bearer ${localStorage.getItem('token')}`
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
}
});
@@ -128,7 +128,7 @@
}
onMount(() => {
const token = localStorage.getItem('token');
const token = localStorage.getItem('auth_token');
if (token) {
fetchCompany();
} else {