Same as previous commit

src/app.css

@@ -69,3 +69,6 @@
   p {
     color: var(--second-text-color)
   }
+  button:hover {
+    cursor: pointer;
+  }

src/lib/islands/quick-link-island.svelte

@@ -1,19 +1,19 @@
 <script>
     import Island from "$lib/islands/island.svelte";
+    import { ql } from "$lib/stores/quick-links.js"
     export let variables = {
         title: "Quick Links",
     };
 
-    let quicklinks = ['avn','1f21','2c98','bru','bri','bth','olf']
 </script>
 
 <Island {variables}>
     
-    {#if !quicklinks.length}
+    {#if $ql.length === 0}
     <p>Go to <a href="/null">settings</a> to add your Quick Links</p>
     {/if}
     <div class="buttons">
-        {#each quicklinks as link}
+        {#each $ql as link}
             {#if link.length === 3}
                 <a class="link" href="/ldb?station={link}">
                    {link.toUpperCase()}

src/lib/islands/quick-link-set-island.svelte

@@ -0,0 +1,104 @@
+<script>
+    import Island from "$lib/islands/island.svelte";
+    import { ql } from "$lib/stores/quick-links.js";
+    export let variables = {
+      title: "Quick Links",
+    };
+  
+    let qlData =[]
+    $: {
+        qlData = $ql;
+        console.log(qlData);
+    }
+
+    function saveQl() {
+      // Fetch the content of all text entries within the island then run ql.set([ARRAY OF INPUT CONTENT])
+      const inputs = document.getElementsByClassName('qlInput');
+      let inputLinks = []
+      for (let item of inputs) {
+        let text = item?.value;
+        if (text !== '') {
+            inputLinks.push(text);
+        }
+      }
+      console.log(inputLinks)
+      ql.set(inputLinks)
+    }
+
+    function clearQl() {
+        ql.set([]);
+    }
+
+    function addQlBox() {
+        const updatedQl = [...$ql, ""];
+        $ql = updatedQl;
+        ql.set(updatedQl);
+    }
+
+    function handleClick(event) {
+      // Handle the click event here
+      console.log("Island Clicked");
+      // You can access the `variables` passed to the Island component here if needed
+    }
+  </script>
+  
+  <Island on:click={handleClick} {variables}>
+    {#if $ql.length === 0}
+      <p>Click the + button to add links</p>
+    {/if}
+    <div id="buttons" class="buttons">
+      {#each qlData as link}
+        <input class="qlInput" type="text" value={link}>
+      {/each}
+      <button on:click={addQlBox} id="qlAdd">+</button>
+    </div>
+    <button on:click={saveQl}>Save</button>
+    <button on:click={clearQl}>Clear</button>
+  </Island>
+  
+
+<style>
+    p {
+        margin-bottom: 0;
+    }
+    #qlAdd {
+        width: 40px;
+    }
+    .buttons {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        width: 90%;
+        margin: auto;
+        padding-top: 5px;
+    }
+    input {
+        flex: 1;
+        width: 20%;
+        min-width: 50px;
+        margin: 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;
+        text-decoration: none;
+        text-align: center;
+        text-transform: uppercase;
+    }
+    button {
+        width: 30%;
+        margin-bottom: 5px;
+        margin-top: 10px;
+        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/stores/quick-links.js

@@ -0,0 +1,29 @@
+import { writable } from 'svelte/store'
+import { browser } from '$app/environment';
+
+export const ql = writable(fromLocalStorage('ql', []))
+toLocalStorage(ql, 'ql');
+
+function fromLocalStorage(storageKey, fallback) {
+    if (browser) {
+        const storedValue = localStorage.getItem(storageKey);
+        if (storedValue !== 'undefined' && storedValue !== null) {
+            return (typeof fallback === 'object')
+            ? JSON.parse(storedValue)
+           : storedValue
+        }
+    }
+    return fallback
+}
+
+function toLocalStorage(store, storageKey) {
+    if (browser) {
+        store.subscribe(value => {
+            let storageValue = (typeof value === 'object')
+            ? JSON.stringify(value)
+            : value
+
+            localStorage.setItem(storageKey, storageValue)
+        })
+    }
+}

src/routes/ldb/+page.svelte

@@ -10,7 +10,16 @@
         return new URLSearchParams(window.location.search).get('station');
     }
 
-    let jsonData = [] // Extract train data from the object to pass to #each
+    let jsonData = {}; // Extract train data from the object to pass to #each
+    let services = [];
+
+    $: {
+        if (jsonData && jsonData.GetStationBoardResult && jsonData.GetStationBoardResult.trainServices && jsonData.GetStationBoardResult.trainServices.service) {
+            services = [...jsonData.GetStationBoardResult.trainServices.service];
+        } else {
+            services = ["No train services available"];
+        }
+    }
 
     onMount(async () => {
         const station = await getHeadcode();
@@ -24,7 +33,11 @@
 <Header {title} />
 
 <p>Station: <span id="station"></span></p>
-
+<p>
+{#each services as service}
+    <span>{service.origin?.location?.locationName || 'Unknown'}</span>
+{/each}
+</p>
 <p>{JSON.stringify(jsonData)}</p>
 
 

src/routes/more/+page.svelte

@@ -4,11 +4,12 @@
     const title = "More"   
     
     const links = [
-        {title: "Your Data", path: ""},
-        {title: "Location Reference Codes", path: ""},
-        {title: "Privacy Policy", path: ""},
-        {title: "App Versions", path: ""},
-        {title: "Statictics", path: ""}
+        {title: "Your Data", path: "/more/data"},
+        {title: "Location Reference Codes", path: "/more/corpus"},
+        {title: "Privacy Policy", path: "/more/privacy"},
+        {title: "Component Versions", path: "/more/versions"},
+        {title: "Statictics", path: "/more/statistics"},
+        {title: "Settings", path: "/more/settings"}
     ]
  </script>
  

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

@@ -0,0 +1,12 @@
+<script>
+    import Header from '$lib/navigation/header.svelte'
+    import Nav from '$lib/navigation/nav.svelte'
+    const title = "Location Codes"   
+
+</script>
+ 
+ <Header {title} />
+ 
+
+ 
+ <Nav />

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

@@ -0,0 +1,12 @@
+<script>
+    import Header from '$lib/navigation/header.svelte'
+    import Nav from '$lib/navigation/nav.svelte'
+    const title = "Your Data"   
+
+</script>
+ 
+ <Header {title} />
+ 
+
+ 
+ <Nav />

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

@@ -0,0 +1,12 @@
+<script>
+    import Header from '$lib/navigation/header.svelte'
+    import Nav from '$lib/navigation/nav.svelte'
+    const title = "Privacy Policy"   
+
+</script>
+ 
+ <Header {title} />
+ 
+
+ 
+ <Nav />

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

@@ -0,0 +1,13 @@
+<script>
+    import Header from '$lib/navigation/header.svelte'
+    import Nav from '$lib/navigation/nav.svelte'
+    import QlSet from '$lib/islands/quick-link-set-island.svelte'
+    const title = "Settings"   
+
+</script>
+ 
+ <Header {title} />
+ 
+ <QlSet />
+ 
+ <Nav />

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

@@ -0,0 +1,12 @@
+<script>
+    import Header from '$lib/navigation/header.svelte'
+    import Nav from '$lib/navigation/nav.svelte'
+    const title = "Statistics"   
+
+</script>
+ 
+ <Header {title} />
+ 
+
+ 
+ <Nav />

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

@@ -0,0 +1,26 @@
+<script>
+    import Header from '$lib/navigation/header.svelte'
+    import Nav from '$lib/navigation/nav.svelte'
+    const title = "Versions"   
+
+    let web_ver = "Unknown", srv_ver = "Unknown", dbm_ver = "Unknown"
+
+</script>
+ 
+ <Header {title} />
+ 
+  <img src="/images/logo/wide_logo.svg" alt="Logo">
+
+  <p>Web-app Version<br>{web_ver}</p>
+  <p>API Server Version<br>{srv_ver}</p>
+  <p>DBManager Version<br>{dbm_ver}</p>
+
+ <Nav />
+
+<style>
+    img {
+        width: 50%;
+        margin-top: 85px;
+        margin-bottom: 85px;
+    }
+</style>