Implement location reference code lookup

src/routes/more/+page.svelte

@@ -58,4 +58,9 @@
             text-align: center;
         }
     }
+    @media (max-width: 380px) {
+        p {
+            font-size: 16px;
+        }
+    }
  </style>

src/routes/more/corpus/+page.svelte

@@ -3,10 +3,117 @@
     import Nav from '$lib/navigation/nav.svelte'
     const title = "Location Codes"   
 
+    let val = {
+        crs: "",
+        tiploc: "",
+        stanox: "",
+        nlc: "",
+        name: "",
+        uic: ""
+    }
+
+    async function getData(type = "", value = "") {
+        const url = `https://owlboard.info/api/v2/ref/locationCode/${type}/${value}`
+        const res = await fetch(url);
+        const data = await res.json();
+        return data;
+    }
+
+    async function processData(data) {
+        //console.log("data",JSON.stringify(data))
+        val = {
+            crs: data[0]['3ALPHA'] || "None",
+            tiploc: data[0]['TIPLOC'] || "None",
+            stanox: data[0]['STANOX'] || "None",
+            nlc: data[0]['NLC'] || "None",
+            name: data[0]['NLCDESC'] || "None",
+            uic: data[0]['UIC'] || "None"
+        }
+        //console.log("val",JSON.stringify(val));
+    }
+
+    async function submit() {
+        let data = [];
+        if (val?.crs) {
+            data = await getData("crs", val.crs);
+        } else if (val?.tiploc) {
+            data = await getData("tiploc", val.tiploc);
+        } else if (val?.stanox) {
+            data = await getData("stanox", val.stanox);
+        } else if (val?.nlc) {
+            data = await getData("nlc", val.nlc);
+        } else {
+            return;
+        }
+        processData(data);
+    }
+
+    async function reset() {
+        val = {
+            crs: "",
+            tiploc: "",
+            stanox: "",
+            nlc: "",
+            name: "",
+            uic: "",
+        }
+    }
+
 </script>
  
- <Header {title} />
+<Header {title} />
  
+<p>Enter one of the codes below and press submit.</p>
+<p>OwlBoard doesn't currently support searching by name or UIC.</p>
+<p class="desc">Some locations only have some applicable location codes.</p>
 
+<div class="inputs">
+    <form on:submit={submit}>
+      <input type="text" readonly placeholder="Name" bind:value={val.name}>
+      <br>
+      <input type="text" maxlength="3" autocomplete="off" placeholder="CRS/3ALPHA" bind:value={val.crs}>
+      <br>
+      <input type="text" maxlength="7" autocomplete="off" placeholder="TIPLOC" bind:value={val.tiploc}>
+      <br>
+      <input type="text" maxlength="9" autocomplete="off" placeholder="STANOX" bind:value={val.stanox}>
+      <br>
+      <input type="number" maxlength="6" min="100000" autocomplete="off" placeholder="NLC" bind:value={val.nlc}>
+      <br>
+      <input type="text" readonly autocomplete="off" placeholder="UIC" bind:value={val.uic}>
+      <br>
+      <button type="submit">Submit</button>
+      <button type="reset" on:click={reset}>Reset</button>
+    </form>
+</div>
  
- <Nav />
+<Nav />
+
+<style>
+    input {
+        font-family: urwgothic, sans-serif;
+        border-radius: 50px;
+        width: 60%;
+        max-width: 200px;
+        min-width: 130px;
+        height: 30px;
+        margin-bottom: 10px;
+    }
+    button {
+        border-radius: 50px;
+        font-family: urwgothic, sans-serif;
+        background-color: var(--overlay-color);
+        border: none;
+        color: white;
+        height: 30px;
+        width: 20%;
+        max-width: 100px;
+        min-width: 75px;
+        font-size: 18px;
+    }
+    .desc {
+        color: white;
+    }
+    input {
+        text-align: center;
+    }
+</style>

src/service-worker.js

@@ -6,7 +6,8 @@ const cacheName = `ob-${version}`;
 
 const assets =  [
     ...build,
-    ...files
+    ...files,
+    "/service-worker.js"
 ];
 
 self.addEventListener('install', (event) => {