web-pwa/src/routes/pis/+page.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';
    import { OwlClient, ApiError, ValidationError } from '$lib/owlClient';
    import TocStyle from '$lib/components/ui/TocStyle.svelte';

    let results = $state<PisObjects[]>([]);
    let resultsLoaded = $state<boolean>(false);
    let errorState = $state<{status: number, message: string} | null>(null);

    async function handleStartEndSearch(start: string, end: string): Promise<void> {
        console.log(`PIS Search: ${start}-${end}`);
        errorState = null;

        try {
            const response = await OwlClient.pis.getByStartEndCrs(start, end);
            results = await response.data || [];
        } catch (e) {
            if (e instanceof ValidationError) {
                errorState = { status: 400, message: e.message };
            } else if (e instanceof ApiError) {
                console.log(e)
                errorState = { status: 20, message: e.message };
            } else {
                errorState = { status: 0, message: `Unknown Error: ${e.message}` };
            }
        } finally {
            resultsLoaded = true;
        }
    }

    async function handleCodeSearch(code: string) {
        console.log(`PIS Search: ${code}`);
        errorState = null;
        try {
            const response = await OwlClient.pis.getByCode(code);
            results = response.data || []
        } catch (e) {
            if (e instanceof ValidationError) {
                errorState = { status: 400, message: e.message };
            } else if (e instanceof ApiError) {
                console.log(e)
                errorState = { status: 20, message: e.message };
            } else {
                errorState = { status: 0, message: `Unknown Error: ${e.message}` };
            }
        } finally {
            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 errorState}
            <span class="errCode">Error: {errorState.status}</span>
            <span class="errMsg">{errorState.message}</span>
        {:else}
            {#if results.length}
                <h2 class="result-title">{results.length} Result{#if results.length > 1}s{/if} found</h2>
                <table class="result-table">
                    <thead>
                    <tr>
                        <th style="width:16%">TOC</th>
                        <th style="width:14%">Code</th>
                        <th style="width:70%">Locations</th>
                    </tr></thead>
                    {#each results as result}
                        <tbody><tr>
                            <td><TocStyle toc={result.toc} /></td>
                            <td>{result.code}</td>
                            <td class="locations-row">{result.crsStops.join(' ')}</td>
                        </tr></tbody>
                    {/each}
                </table>
            {:else}
                <p class="no-results">No matching results</p>
            {/if}
        {/if}
        <div class="reset-button-container">
        <Button onclick={clearResults}>Reset</Button>
</div>    </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: 20px 0 20px 0;
        margin: auto;
        margin-top: 25px;
        margin-bottom: 25px;
        width: 90%;
        max-width: 500px;
		box-shadow: var(--shadow-std);
    }

    .result-title {
        color: var(--color-brand);
    }

    .result-table {
        width: 90%;
        max-width: 350px;
        margin: auto;
        text-align: center;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0 20px;
        font-weight: 400;
    }

    .locations-row {
        font-family:'Courier New', Courier, monospace;
        text-align: left;
        padding-left: 20px;
    }

    .errCode {
        color: rgb(255, 54, 54);
        font-weight: 600;
        font-size: 2rem;
    }

    .reset-button-container {
        padding: 20px 0 3px 0;
    }
</style>