From d09d8fc81da64ad630a46c3a3427a2cdb5558475 Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Sun, 18 Jun 2023 22:24:32 +0100
Subject: [PATCH] Reason Codes complete

---
 ...island.svelte => input-island-form.svelte} |   0
 src/lib/islands/input-island-onclick.svelte   |  45 -----
 src/lib/islands/result-island.svelte          |  21 +++
 src/routes/+page.svelte                       |   2 +-
 src/routes/more/reasons/+page.svelte          | 175 +++++++++++-------
 5 files changed, 132 insertions(+), 111 deletions(-)
 rename src/lib/islands/{input-island.svelte => input-island-form.svelte} (100%)
 delete mode 100644 src/lib/islands/input-island-onclick.svelte
 create mode 100644 src/lib/islands/result-island.svelte

diff --git a/src/lib/islands/input-island.svelte b/src/lib/islands/input-island-form.svelte
similarity index 100%
rename from src/lib/islands/input-island.svelte
rename to src/lib/islands/input-island-form.svelte
diff --git a/src/lib/islands/input-island-onclick.svelte b/src/lib/islands/input-island-onclick.svelte
deleted file mode 100644
index 3a2d7e2..0000000
--- a/src/lib/islands/input-island-onclick.svelte
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/lib/islands/result-island.svelte b/src/lib/islands/result-island.svelte
new file mode 100644
index 0000000..0b5730c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 77c4776..8c0e5f2 100644
--- a/src/routes/+page.svelte
+++ b/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"
diff --git a/src/routes/more/reasons/+page.svelte b/src/routes/more/reasons/+page.svelte
index e802eed..14afca9 100644
--- a/src/routes/more/reasons/+page.svelte
+++ b/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 />
\ No newline at end of file
+<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>
\ No newline at end of file