Untitled
unknown
plain_text
a month ago
2.7 kB
3
Indexable
Never
<script lang="ts"> import { RangeSlider } from '@skeletonlabs/skeleton'; import { goto } from '$app/navigation'; import type { PageData } from './$types'; export let data: PageData; const minBudget = 100; const maxBudget = 800; const step = 50; interface Listing { name: string; price: number; shippingCost: number; supplier: string; url: string; } let budget = maxBudget; let listings = data.listings; async function fetchListings() { console.log('Fetching listings for budget:', budget); try { const response = await fetch(`?budget=${budget}`, { headers: { 'Accept': 'application/json' } }); const data = await response.json(); if (!response.ok) { throw new Error(data.message || 'An error occurred while fetching listings'); } listings = data.listings; } catch (error) { console.error('Error fetching listings:', error); listings = []; // Clear listings on error // Optionally, display an error message to the user } } </script> <div class="flex justify-center items-center min-h-screen py-8"> <div class="cpu-budgeter-card w-[40rem]"> <header> <h2 class="text-2xl font-bold mb-6 text-center">CPU Budgeter</h2> </header> <section class="p-4"> <RangeSlider name="budget" bind:value={budget} min={minBudget} max={maxBudget} step={step} ticked> <div class="flex justify-between items-center mt-2"> <div class="font-bold">Budget</div> <div class="text-sm font-mono">€{budget.toString().padStart(4, ' ')} / €{maxBudget}</div> </div> </RangeSlider> <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded" on:click={fetchListings}> Update Listings </button> </section> {#if listings.length > 0} <section class="mt-4"> <h3 class="text-xl font-bold mb-2">Available Listings</h3> <ul> {#each listings as listing} <li> <a href={listing.url} target="_blank" rel="noopener noreferrer"> {listing.name} - €{listing.price.toFixed(2)} (Shipping: €{listing.shippingCost.toFixed(2)}) </a> </li> {/each} </ul> </section> {:else} <p class="mt-4 text-center">No listings found for the selected budget.</p> {/if} </div> </div> <style> .cpu-budgeter-card { background-color: rgba(255, 255, 255, 0.1); border-radius: 1rem; padding: 4rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); min-height: 300px; } </style>
Leave a Comment