owlboard-svelte/src/routes/pis/+page.svelte

<script lang="ts">
    import Header from "$lib/navigation/header.svelte";
    import Nav from "$lib/navigation/nav.svelte";
    import Island from "$lib/islands/island.svelte";
    import Loading from "$lib/navigation/loading.svelte";
    import { uuid } from "$lib/stores/uuid";
    import StylesToc from "$lib/train/styles-toc.svelte";
    import { getApiUrl } from "$lib/scripts/upstream";
    import toast from "svelte-french-toast";
    import { onMount } from "svelte";

    const title = "PIS Finder";
    const variables = { title: "Results" };
    let entryPIS = "";
    let entryStartCRS = "";
    let entryEndCRS = "";
    let data = [];
    let error = false;
    let errMsg = "Unknown Error";
    let isLoading = false;

    async function findByStartEnd() {
        isLoading = true;
        const url = `${getApiUrl()}/api/v2/pis/byStartEnd/${entryStartCRS}/${entryEndCRS}`;
        await fetchData(url);
        isLoading = false;
    }

    /* Temporarily Disabled
    async function findByPis() {
        isLoading = true;
        const url = `${getApiUrl()}/api/v2/pis/byCode/${entryPIS}`;
        await fetchData(url);
        isLoading = false;
    }
    */

    async function fetchData(url: string) {
        const options = {
            method: "GET",
            headers: {
                uuid: $uuid,
            },
        };
        const res = await fetch(url, options); // Enable Auth
        if (res.status == 401) {
            errMsg = "You must be logged in to the staff version";
            toast.error("You must be registered");
            error = true;
            return false;
        } else if (res.status == 500) {
            errMsg = "Server Error, try again later";
            toast.error("Server Error.", { duration: 7500 });
            error = true;
            return false;
        }
        const jsonData = await res.json();
        if (jsonData.ERROR == "offline") {
            errMsg = "Connection error, check your internet connection and try again";
            toast.error("You are offline.");
            error = true;
            return false;
        }
        data = jsonData;
        let count = data.length;
        if (!count) {
            toast.error("No PIS Codes found.");
        } else {
            toast.success(`${count} PIS Codes found`);
        }
    }

    async function reset() {
        data = [];
        error = false;
        entryPIS = "";
        entryStartCRS = "";
        entryEndCRS = "";
        toast.success("Form reset");
        isLoading = false;
    }

    onMount(() => {
        toast("Registration soon required for PIS features.\n\nClick 'Register' in the menu.", {
            duration: 3000,
        });
    });
</script>

<Header {title} />

{#if isLoading}
    <Loading />
{/if}

{#if error}
    <Island {variables}>
        <p class="error">{errMsg}</p>
    </Island>
{:else if data.length}
    <Island {variables}>
        <table>
            <tr>
                <th class="toc">TOC</th>
                <th class="code">Code</th>
                <th class="stops">Stops</th>
            </tr>
            {#each data as item}
                <tr>
                    <td class="toc toc-data"><StylesToc toc={item.toc || "-"} /></td>
                    <td class="code">{item.code}</td>
                    <td class="stops stops-data">{item.stops.join("  ")}</td>
                </tr>
            {/each}
        </table>
    </Island>
{:else}
    <p>To search by headcode use the Train Finder on the homepage</p>
    <p>This feature now supports all GWR Services</p>
    <p class="label">Find By Start/End CRS:</p>
    <form on:submit={findByStartEnd}>
        <input type="text" maxlength="3" autocomplete="off" placeholder="Start" bind:value={entryStartCRS} />
        <input type="text" maxlength="3" autocomplete="off" placeholder="End" bind:value={entryEndCRS} />
        <br />
        <button type="submit">Search</button>
    </form>
    <!-- FIND BY PIS CODE NOT WORKING AT PRESENT
  <p class="label">Find By PIS Code:</p>
  <form on:submit={findByPis}>
    <input type="number" max="9999" autocomplete="off" placeholder="PIS" bind:value={entryPIS} />
    <br />
    <button type="submit">Search</button>
  </form>
-->
{/if}
<button id="reset" type="reset" on:click={reset}>Reset</button>
<Nav />

<style>
    p {
        margin-left: 10px;
        margin-right: 10px;
    }
    .label {
        font-weight: 600;
        color: var(--main-text-color);
    }
    input {
        border: none;
        border-radius: 50px;
        font-family: urwgothic, sans-serif;
        text-align: center;
        text-transform: uppercase;
        width: 30%;
        max-width: 250px;
        height: 30px;
        font-size: 16px;
        margin-bottom: 15px;
        box-shadow: var(--box-shadow);
    }
    button {
        border: none;
        border-radius: 50px;
        font-family: urwgothic, sans-serif;
        width: 25%;
        max-width: 175px;
        margin: 0px;
        margin-left: 10px;
        margin-right: 10px;
        height: 30px;
        background-color: var(--island-bg-color);
        color: white;
        font-size: 16px;
        box-shadow: var(--box-shadow);
    }
    table {
        width: 100%;
        margin: auto;
        color: white;
    }
    td {
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .toc {
        width: 15%;
    }
    .code {
        width: 20%;
    }
    .toc-data {
        text-transform: uppercase;
    }
    .stops-data {
        text-align: left;
        font-family: firamono, monospace;
        text-transform: uppercase;
    }
    .error {
        color: white;
    }
    #reset {
        margin: 25px;
    }
</style>