73 lines
2.0 KiB
Svelte
73 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import PisStartEndCard from '$lib/components/ui/cards/pis/PisStartEndCard.svelte';
|
|
import PisCode from '$lib/components/ui/cards/pis/PisCode.svelte';
|
|
import Button from '$lib/components/ui/Button.svelte';
|
|
import type { PisObjects } from '@owlboard/api-schema-types';
|
|
|
|
let results = $state<PisObjects[]>([]);
|
|
let resultsLoaded = $state<boolean>(false);
|
|
|
|
function handleStartEndSearch(start: string, end: string) {
|
|
console.log(`PIS Search: ${start}-${end}`);
|
|
// Fetch API Results Here
|
|
resultsLoaded = true;
|
|
}
|
|
|
|
function handleCodeSearch(code: string) {
|
|
console.log(`PIS Search: ${code}`);
|
|
// Fetch API Results Here
|
|
resultsLoaded = true;
|
|
}
|
|
|
|
function clearResults() {
|
|
console.log('Clearing Results');
|
|
resultsLoaded = false;
|
|
results = [];
|
|
}
|
|
</script>
|
|
|
|
{#if !resultsLoaded}
|
|
<div class="card-container">
|
|
<PisStartEndCard onsearch={handleStartEndSearch} />
|
|
<PisCode onsearch={handleCodeSearch} />
|
|
</div>
|
|
{:else}
|
|
<div class="result-container">
|
|
{#if !results.length}
|
|
<p class="no-results">No results found</p>
|
|
{:else}
|
|
<p class="no-results">Unable to load results</p>
|
|
{/if}
|
|
<Button onclick={clearResults}>Reset</Button>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.card-container {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
justify-content: center;
|
|
padding: 20px 10px;
|
|
}
|
|
|
|
.result-container {
|
|
font-family: 'URW Gothic', sans-serif;
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
justify-content: center;
|
|
background: var(--color-accent);
|
|
border-radius: 15px;
|
|
padding: 0 0 20px 0;
|
|
margin: auto;
|
|
margin-top: 25px;
|
|
width: 90%;
|
|
max-width: 1000px;
|
|
box-shadow: var(--shadow-std);
|
|
}
|
|
</style> |