Reason Codes complete

src/lib/islands/input-island-onclick.svelte

@@ -1,45 +0,0 @@
-<script>
-    import Island from "$lib/islands/island.svelte";
-    export let variables = {
-        title: "Uninitialised",
-        onclick: "/",
-        placeholder: "Uninitialised",
-        queryName: "uninitiailsed"
-    };
-</script>
-
-<Island {variables}>
-<form>
-    <input class="form-input" type="text" id="input-headcode" name={variables.queryName} placeholder={variables.placeholder}>
-    <br>
-    <button on:click={variables.onclick}>Submit</button>
-</form>
-</Island>
-
-<style>
-    .form-input {
-        width: 75%;
-        height: 32px;
-        margin-top: 5px;
-        margin-bottom: 5px;
-        border-radius: 50px;
-        border: none;
-        text-align: center;
-        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-        text-transform: uppercase;
-        font-size: 15px;
-    }
-    button {
-        width: 50%;
-        margin-bottom: 5px;
-        margin-top: 5px;
-        border: none;
-        border-radius: 20px;
-        padding: 5px;
-        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-        font-size: 16px;
-        font-weight: 400;
-        background-color: var(--main-bg-color);
-        color: var(--link-color);
-    }
-</style>

src/lib/islands/result-island.svelte

@@ -0,0 +1,21 @@
+<script>
+    import Island from "$lib/islands/island.svelte";
+    export let resultObject = {
+        results: true,
+        title: "",
+        resultLines: []
+    };
+
+    let variables = {
+        title: resultObject.title
+    }
+
+</script>
+
+<Island {variables}>
+
+    {#each resultObject.resultLines as line}
+        <p>{line}</p>
+    {/each}
+
+</Island>

src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <script>
     import Header from '$lib/navigation/header.svelte'
     import Nav from '$lib/navigation/nav.svelte'
-    import InputIsland from '$lib/islands/input-island.svelte'
+    import InputIsland from '$lib/islands/input-island-form.svelte'
 	import QuickLinkIsland from '$lib/islands/quick-link-island.svelte';
 
 const title = "Home"

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

@@ -1,76 +1,121 @@
 <script>
-    import Header from '$lib/navigation/header.svelte'
-    import Nav from '$lib/navigation/nav.svelte'
-    import Island from '$lib/islands/island.svelte'
-    import InputIsland from '$lib/islands/input-island.svelte'
-    import {onMount} from 'svelte'
-    import {page} from '$app/stores'
-    import {goto} from '$app/navigation'
-	import Loading from '$lib/navigation/loading.svelte'
-    const title = "Reason Codes"
+  import { onMount } from 'svelte';
+  import Header from '$lib/navigation/header.svelte';
+  import Nav from '$lib/navigation/nav.svelte';
+  import Loading from '$lib/navigation/loading.svelte';
+  import ResultIsland from '$lib/islands/result-island.svelte';
 
-    const variables = {
-        title: "Find Reason Codes",
-        action: "/more/reasons",
-        placeholder: "Enter Reason Code",
-        queryName: "code"
-    };
+  const title = "Reason Codes";
+  let isLoading = false;
+  let inputValue = '';
+  let resultObject = {
+    results: false,
+    title: "",
+    resultLines: []
+  }
 
-    let loading = false;
-    let results = false;
-    let result = {
-        code: "",
-        lateReason: "",
-        cancReason: "",
-        error: "",
-    };
+  function load() {
+    isLoading = true;
+    resultObject.results = false;
+    getData().then(result => {
+      handleData(result);
+      isLoading = false;
+    });
+  }
 
-    async function getData() { // Will need a click handler and use $app/navigation to update the page
-        try {
-            loading = true;
-            results = false;
-            const query = $page.url.searchParams;
-            if (!query) {return;}
-            const url = `https://owlboard.info/api/v2/ref/reasonCode/${query}`
-            const res = await fetch(url);
-            const resData = await res.json();
-            if (!resData.length) {throw new Error('Code not found')};
-            result = resData[0];
-            results = true
-        } catch (err) {
-            console.log("Error", err)
-            result.error = "Unable to find code"
-            results = true
-        } finally {
-            loading = false;
-        }
+
+  async function getData() {
+    if (inputValue) {
+      const url = `https://owlboard.info/api/v2/ref/reasonCode/${inputValue}`;
+      const res = await fetch(url);
+      return await res.json();
+    } else {
+      return []
     }
+  }
 
-    onMount(async () => {
-        results = false;
-        getData();
-    })
+  async function handleData(data) {
+    let resultLines = []
+    if (data.length) {
+      resultObject.title = data[0]['code'];
+      resultLines = [
+        data[0]['lateReason'],
+        data[0]['cancReason']
+      ]
+    } else {
+      resultObject = {
+        results: false,
+        title: "Not Found",
+        resultLines: []
+      }
+    }
+    resultObject.resultLines = resultLines;
+    resultObject.results = true;
+  }
+
+  onMount(() => {
+    isLoading = false;
+  });
+
+  function handleInput(event) {
+    inputValue = event.target.value;
+  }
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    load();
+  }
 </script>
- 
-<Header {title} />
- 
-<InputIsland {variables} />
 
-{#if loading}
-    <Loading />
+<Header {title} />
+<p>A reason code is a three digit number that maps to a reason for a delay or cancellation</p>
+<form on:submit={handleSubmit}>
+  <input type="text" placeholder="Enter Code" autocomplete="off" bind:value={inputValue} on:input={handleInput} />
+
+  <br>
+
+  <button type="submit">Submit</button>
+</form>
+
+{#if isLoading}
+  <Loading />
 {/if}
 
-{#if results}
-    <Island>
-        {#if result.code}
-          <p>{result.code}</p>
-          <p>Late Message: {result.lateReason}</p>
-          <p>Delay Message: {result.cancReason}</p>
-        {/if}
-        {#if result.error}
-          <p>{result.error}</p>
-        {/if}
-    </Island>
- {/if}
+{#if resultObject.results}
+  <ResultIsland {resultObject} />
+{/if}
 
-<Nav />
+<Nav />
+
+<style>
+    p {
+      margin-top: 50px;
+    }
+    input {
+        width: 25%;
+        min-width: 50px;
+        height: 32px;
+        margin-top: 10px;
+        margin-bottom: 5px;
+        border-radius: 50px;
+        border: none;
+        text-align: center;
+        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+        text-transform: uppercase;
+        font-size: 15px;
+    }
+    button {
+        width: 15%;
+        min-width: 40px;
+        margin-bottom: 5px;
+        margin-top: 5px;
+        border: none;
+        border-radius: 20px;
+        padding: 5px;
+        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+        font-size: 16px;
+        font-weight: 400;
+        background-color: var(--overlay-color);
+        color: var(--link-color);
+    }
+</style>