Add display options to PIS

src/lib/components/ui/TocStyle.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    interface Props {
+        toc: string;
+    }
+
+    let {
+        toc
+    }: Props = $props();
+
+    let code = $derived(toc.toUpperCase());
+</script>
+
+<div class="toc-container {code}">
+    {code}
+</div>
+
+<style>
+    .toc-container {
+        border-radius: 10px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 2px 8px;
+        font-weight: 800;
+        background-color: #333;
+        color: #fff;
+    }
+
+    .GW { /* Great Western Railway */
+        background: #004225;
+        color: #E2E2E2;
+    }
+
+    .GR { /* LNER */
+        background-color: #C00000;
+        color: #FFFFFF;
+    }
+
+    .VT { /* Avanti West Coast */
+        background-color: #004354;
+        color: #FFFFFF;
+    }
+
+    .SW { /* South Western Railway */
+        background-color: #2A3389;
+        color: #FFFFFF;
+    }
+
+    .XC { /* CrossCountry */
+        background-color: #660000;
+        color: #E4D5B1;
+    }
+</style>

src/routes/pis/+page.svelte

@@ -4,7 +4,7 @@
     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);
@@ -70,10 +70,22 @@
             <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>
-                {#each results as result}
-                    <p>{JSON.stringify(result)}</p>
-                {/each}
+                <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}
@@ -107,11 +119,33 @@
         padding: 20px 0 20px 0;
         margin: auto;
         margin-top: 25px;
+        margin-bottom: 25px;
         width: 90%;
-        max-width: 1000px;
+        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;