From a73ab31b5150ab47697ff289df2af12e2bba48d8 Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Thu, 15 Jun 2023 18:19:23 +0100
Subject: [PATCH] Componentize islands

---
 src/lib/islands/input-island.svelte      | 41 +++++++++++
 src/lib/islands/island.svelte            | 25 +++++++
 src/lib/islands/quick-link-island.svelte |  4 ++
 src/lib/{ => navigation}/nav.svelte      |  9 +--
 src/routes/+page.svelte                  | 89 +++++++-----------------
 src/routes/ldb/+page.svelte              |  2 +-
 src/routes/more/+page.svelte             |  2 +-
 src/routes/pis/+page.svelte              |  2 +-
 src/routes/result-timetable/+page.svelte |  4 +-
 9 files changed, 103 insertions(+), 75 deletions(-)
 create mode 100644 src/lib/islands/input-island.svelte
 create mode 100644 src/lib/islands/island.svelte
 create mode 100644 src/lib/islands/quick-link-island.svelte
 rename src/lib/{ => navigation}/nav.svelte (83%)

diff --git a/src/lib/islands/input-island.svelte b/src/lib/islands/input-island.svelte
new file mode 100644
index 0000000..29b7f93
--- /dev/null
+++ b/src/lib/islands/input-island.svelte
@@ -0,0 +1,41 @@
+<script>
+    import Island from "$lib/islands/island.svelte";
+    export let variables = {
+        title: "Uninitialised",
+        action: "/",
+        placeholder: "Uninitialised",
+        queryName: "uninitiailsed"
+    };
+</script>
+
+<form action={variables.action}>
+    <input class="form-input" type="text" id="input-headcode" name={variables.queryName} placeholder={variables.placeholder}>
+    <br>
+    <button class="form-button" type="submit">Submit</button>
+</form>
+
+<style>
+    .form-input {
+        width: 75%;
+        height: 30px;
+        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;
+    }
+    .form-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/island.svelte b/src/lib/islands/island.svelte
new file mode 100644
index 0000000..632fdf2
--- /dev/null
+++ b/src/lib/islands/island.svelte
@@ -0,0 +1,25 @@
+<script>
+    export const title = "Uninitialised"
+</script>
+
+<div>
+    <span>{title}</span>
+    <slot />
+</div>
+
+<style>
+span {
+    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    font-weight: 600;
+    font-size: 20px;
+}
+div {
+    width: 75%;
+    max-width: 400px;
+    margin: auto;
+    margin-top: 25px;
+    padding: 10px;
+    background-color: var(--overlay-color);
+    border-radius: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/lib/islands/quick-link-island.svelte b/src/lib/islands/quick-link-island.svelte
new file mode 100644
index 0000000..1fc8ebe
--- /dev/null
+++ b/src/lib/islands/quick-link-island.svelte
@@ -0,0 +1,4 @@
+<script>
+
+</script>
+
diff --git a/src/lib/nav.svelte b/src/lib/navigation/nav.svelte
similarity index 83%
rename from src/lib/nav.svelte
rename to src/lib/navigation/nav.svelte
index 51c6093..91ebda1 100644
--- a/src/lib/nav.svelte
+++ b/src/lib/navigation/nav.svelte
@@ -3,20 +3,17 @@
       {
         title: "Home",
         path: "/",
-        svgPath: "/images/navigation/home.svg",
-        pngPath: "/images/nav/home_icon-25.png"
+        svgPath: "/images/navigation/home.svg"
       },
       {
         title: "PIS Finder",
         path: "/pis",
-        svgPath: "/images/navigation/info.svg",
-        pngPath: ""
+        svgPath: "/images/navigation/info.svg"
       },
       {
         title: "More",
         path: "/more",
-        svgPath: "/images/navigation/more.svg",
-        pngPath: "/images/nav/hamburger.svg"
+        svgPath: "/images/navigation/more.svg"
       }
     ]
     import { page } from "$app/stores";
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 322a9b1..1e8903e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,25 @@
 <script>
 import Header from '$lib/header.svelte'
-import Nav from '$lib/nav.svelte'
+import Nav from '$lib/navigation/nav.svelte'
+import InputIsland from '$lib/islands/input-island.svelte'
+
 const title = "Home"
+const inputIslands = [
+    {
+        title: "Live Departure Boards",
+        action: "/ldb",
+        placeholder: "Enter CRS/TIPLOC",
+        queryName: "station"
+    },
+    {
+        title: "Train Details & PIS",
+        action: "/result-timetable",
+        placeholder: "Enter Headcode",
+        queryName: "headcode"
+    }
+]
+const variables = {title: "test",action:"/", placeholder:"test",queryName:"test"}
+
 </script>
 <svelte:head>
     <title>OwlBoard - {title}</title>
@@ -9,70 +27,13 @@ const title = "Home"
 
 
 <Header {title} />
-<div class="form-box">
-    <form action="/ldb">
-        <span class="input-title">Live Departure Boards</span>
-        <br>
-        <input class="form-input" type="text" id="input-station" name="station" placeholder="Enter CRS/TIPLOC">
-        <br>
-        <button class="form-button" type="submit">Submit</button>
-    </form>
-</div>
-<div class="form-box">
-    <form action="/result-timetable">
-        <span class="input-title">Train Details & PIS</span>
-        <br>
-        <input class="form-input" type="text" id="input-headcode" name="headcode" placeholder="Enter Headcode">
-        <br>
-        <button class="form-button" type="submit">Submit</button>
-    </form>
-</div>
-<div class="form-box">
-    <span class="input-title">Quick Links</span>
-    <div class="quick-links">
-    </div>
-</div>
+
+{#each inputIslands as variables}
+    <InputIsland {variables} />
+{/each}
+
 <Nav />
 
 <style>
-    .input-title {
-        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-        font-weight: 600;
-        font-size: 20px;
-    }
-    .form-box {
-        width: 75%;
-        max-width: 400px;
-        margin: auto;
-        margin-top: 25px;
-        padding: 10px;
-        background-color: var(--overlay-color);
-        border-radius: 10px;
-    }
-    .form-input {
-        width: 75%;
-        height: 30px;
-        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;
-    }
-    .form-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);
-    }
-    .quick-links {
-        display: flex;
-    }
+
 </style>
\ No newline at end of file
diff --git a/src/routes/ldb/+page.svelte b/src/routes/ldb/+page.svelte
index 0bbe38d..c169703 100644
--- a/src/routes/ldb/+page.svelte
+++ b/src/routes/ldb/+page.svelte
@@ -1,6 +1,6 @@
 <script>
    import Header from '$lib/header.svelte'
-   import Nav from '$lib/nav.svelte'
+   import Nav from '$lib/navigation/nav.svelte'
    
    import {onMount} from 'svelte'
 
diff --git a/src/routes/more/+page.svelte b/src/routes/more/+page.svelte
index a1777ae..5eb3836 100644
--- a/src/routes/more/+page.svelte
+++ b/src/routes/more/+page.svelte
@@ -1,6 +1,6 @@
 <script>
     import Header from '$lib/header.svelte'
-    import Nav from '$lib/nav.svelte'
+    import Nav from '$lib/navigation/nav.svelte'
     const title = "More"   
     
     const links = [
diff --git a/src/routes/pis/+page.svelte b/src/routes/pis/+page.svelte
index 15e906c..604b212 100644
--- a/src/routes/pis/+page.svelte
+++ b/src/routes/pis/+page.svelte
@@ -1,6 +1,6 @@
 <script>
     import Header from '$lib/header.svelte'
-    import Nav from '$lib/nav.svelte'
+    import Nav from '$lib/navigation/nav.svelte'
     
     const title = "PIS"
  </script>
diff --git a/src/routes/result-timetable/+page.svelte b/src/routes/result-timetable/+page.svelte
index 85671cf..003a5b8 100644
--- a/src/routes/result-timetable/+page.svelte
+++ b/src/routes/result-timetable/+page.svelte
@@ -1,6 +1,6 @@
 <script>
     import Header from '$lib/header.svelte'
-    import Nav from '$lib/nav.svelte'
+    import Nav from '$lib/navigation/nav.svelte'
     
     import { onMount } from 'svelte'
 
@@ -14,7 +14,7 @@
         const headcode = await getHeadcode();
         document.getElementById('headcode').textContent = headcode;
         const data = await fetch(`https://owlboard.info/api/v1/train/headcode/today/${headcode}`)
-        document.getElementById('data_raw').textContent = data.text;
+        document.getElementById('data_raw').textContent = await data.text();
     })
 
  </script>