Finish implementing PIS lookup page

src/routes/pis/+page.svelte

@@ -1,35 +1,88 @@
 <script>
     import Header from '$lib/navigation/header.svelte'
     import Nav from '$lib/navigation/nav.svelte'
+    import Island from '$lib/islands/island.svelte';
     
     const title = "PIS Finder"
-    let entryPIS;
+    const variables = {title: "Results"}
+    let entryPIS = "";
     let entryStartCRS = "";
     let entryEndCRS = "";
-    let data = [];
+    let data = [{operator: "gw", code: 4332, stops: ["bri","fit","bpw","yae","cdu","cnm","asc","wos","wof","mvl","gmv"]},
+                {operator: "xc", code: 3432, stops: ["bri","bpw","cnm","wos","wof","mvl","gmv"]}];
+    let error = false;
+    let errMsg = "Unknown Error"
 
     async function findByStartEnd() {
-        return;
+        const url = `https://owlboard.info/api/v2/pis/byStartEnd/${entryStartCRS}/${entryEndCRS}`
+        fetchData(url);
     }
 
     async function findByPis() {
-        data = [
-            {"one": 1},
-            {"two": 2}
-        ]
-        return;
+        const url = `https://owlboard.info/api/v2/pis/byCode/${entryPIS}`
+        fetchData(url);
+    }
+
+    async function fetchData(url) {
+        const res = await fetch(url); // Enable Auth
+        if (res.status == 401) {
+            errMsg = "You must be logged in to the staff version"
+            error = true
+            return false
+        } else if (res.status == 500) {
+            errMsg = "Server Error, try again later"
+            error = true
+            return false
+        }
+        const jsonData = await res.json();
+        if (jsonData.ERROR == "offline") {
+            errMsg = "Connection error, check your internet connection and try again"
+            error = true
+            return false
+        }
+        data = jsonData;
+    }
+
+    async function reset() {
+        data = [];
+        error = false;
+        entryPIS = "";
+        entryStartCRS = "";
+        entryEndCRS = "";
     }
 </script>
  
 <Header {title} />
  
+{#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">{item.operator.toUpperCase()}</td>
+            <td class="code">{item.code}</td>
+            <td class="stops stops-data">{item.stops.join(", ").toUpperCase() + "  "}</td>
+          </tr>
+        {/each}
+        </table>
+    </Island>
+{:else}
   <p>To search by headcode use the Train Finder on the homepage</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><button type="reset">Reset</button>
+    <button type="submit">Search</button>
   </form>
 
   <p class="label">Find By PIS Code:</p>
@@ -38,16 +91,63 @@
       <br>
       <button type="submit">Search</button>
   </form>
-
-{#if data.length}
-  {#each data as entry}
-    <p>{JSON.stringify(entry)}</p>
-  {/each}
 {/if}
+<button id="reset" type="reset" on:click={reset}>Reset</button>
 <Nav />
 
 <style>
     .label {
         font-weight: 600;
     }
+    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;
+    }
+    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(--overlay-color);
+        color: white;
+        font-size: 16px;
+    }
+    table {
+        width: 100%;
+        margin:auto;
+        color: white;
+    }
+    td {
+        padding-top: 5px;
+        padding-bottom: 5px;
+    }
+    .toc {
+        width: 15%;
+    }
+    .code {
+        width: 20%;
+    }
+    .stops-data {
+        text-align: left;
+        font-family: firamono, monospace;
+    }
+    .error {
+        color: white;
+    }
+    #reset {
+        margin:25px;
+    }
 </style>