Introduce toasts

package.json

@@ -24,6 +24,7 @@
         "prettier-plugin-svelte": "^2.8.1",
         "svelte": "^3.54.0",
         "svelte-check": "^3.0.1",
+        "svelte-french-toast": "^1.2.0",
         "svelte-sitemap": "^2.6.0",
         "typescript": "^5.0.0",
         "vite": "^4.3.0"

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

@@ -1,6 +1,7 @@
 <script lang="ts">
     import Island from "$lib/islands/island.svelte";
     import { ql } from "$lib/stores/quick-links";
+    import toast from "svelte-french-toast";
     export let variables = {
         title: "Quick Links",
     };
@@ -17,6 +18,17 @@
         return new Promise((resolve) => setTimeout(resolve, ms));
     }
 
+    function save() {
+        toast.promise(
+            saveQl(),
+            {
+                loading: 'Saving...',
+                success: "Quick Links saved!",
+                error: "Failed to save."
+            }
+        );
+    }
+
     async 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");
@@ -29,14 +41,14 @@
         }
         console.log(inputLinks);
         ql.set(inputLinks);
-        saveButton = "&#10004;";
+        await timeout(1000);
-        await timeout(3000);
         saveButton = "Saved";
     }
 
     function clearQl() {
         ql.set([]);
         saveButton = "Saved";
+        toast.success("Cleared Quick Links.")
     }
 
     function addQlBox() {
@@ -64,7 +76,7 @@
         {/each}
         <button on:click={addQlBox} id="qlAdd">+</button>
     </div>
-    <button on:click={saveQl}>{@html saveButton}</button>
+    <button on:click={save}>{@html saveButton}</button>
     <button on:click={clearQl}>Clear</button>
 </Island>
 

src/lib/overlays/modal.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { stop_propagation } from "svelte/internal";
+
+    export let showModal: boolean
+    let dialog: HTMLDialogElement
+
+    $: if (dialog && showModal) dialog.showModal();
+</script>
+
+<dialog
+  bind:this={dialog}
+  on:close={() => (showModal = false)}
+  on:click|self={() => dialog.close()}
+  >
+
+  <div on:click|stop_propagation>
+    <slot name="header" />
+    <hr />
+    <slot />
+    <hr />
+    <button autofocus on:click{() => dialog.close()}>Close</button>
+  </div>
+  </dialog>
+
+<style>
+    
+</style>

src/lib/overlays/registerModal.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+
+</script>
+
+
+
+<style>
+
+</style>

src/lib/stores/version.ts

@@ -1,3 +1,3 @@
-export const version: string = "2024.04.5";
+export const version: string = "2024.06.1";
 export const versionTag: string = "";
 export const showWelcome: boolean = false;

src/routes/+layout.svelte

@@ -4,6 +4,7 @@
     import { dev } from "$app/environment";
     import DevBanner from "$lib/DevBanner.svelte";
     import { page } from "$app/stores";
+    import { Toaster } from 'svelte-french-toast'
 </script>
 
 <svelte:head>
@@ -30,6 +31,7 @@
     <link rel="manifest" href="/manifest.json" />
     <title>OwlBoard</title>
 </svelte:head>
+<Toaster />
 {#if dev}
     <DevBanner />
 {/if}

src/routes/+page.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import Header from "$lib/navigation/header.svelte";
     import Nav from "$lib/navigation/nav.svelte";
     import InputIsland from "$lib/islands/input-island-form.svelte";
@@ -6,6 +6,8 @@
     import Welcome from "$lib/overlays/welcome.svelte";
     import { welcome } from "$lib/stores/welcome";
     import { version, showWelcome } from "$lib/stores/version";
+    import { onMount } from "svelte";
+    import toast from "svelte-french-toast";
 
     const title = "OwlBoard";
     const inputIslands = [
@@ -22,6 +24,16 @@
             queryName: "headcode",
         },
     ];
+
+    onMount(() => {
+        toast(
+            "Registration soon required for some features.\n\nClick 'Register' in the menu.",
+            {
+                duration: 3000,
+            }
+        )
+    })
+
 </script>
 
 {#if showWelcome && ($welcome === "null" || !$welcome || parseInt($welcome.replace(/\./g, "")) < parseInt(version.replace(/\./g, "")))}

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

@@ -6,6 +6,7 @@
     import { checkAuth } from "$lib/libauth";
     import LogoutButton from "$lib/navigation/LogoutButton.svelte";
     import { getApiUrl } from "$lib/scripts/upstream";
+    import toast from "svelte-french-toast";
 
     const title = "Register";
 
@@ -40,6 +41,17 @@
         isLoading = false;
     }
 
+    function send() {
+        toast.promise(
+            request(),
+            {
+                loading: "Contacting Server...",
+                success: "Request Answered.",
+                error: "Unable to contact server."
+            }
+        )
+    }
+
     onMount(async () => {
         const auth = await checkAuth();
         if (auth.uuidPresent === false) {
@@ -59,7 +71,7 @@
     {:else if state == "unreg"}
         <p>To register, you will need to enter a work email address to receive a confirmation email</p>
         <p class="bold">Already have a registration code? <a href="/more/reg/submit">enter it here</a></p>
-        <form on:submit={request}>
+        <form on:submit={send}>
             <input type="text" autocomplete="email" placeholder="Enter work email" bind:value={inputValue} on:input={handleInput} /><br />
             <label for="checkbox">
                 I have read and accept the terms of the <a href="/more/privacy">Privacy Policy</a><br />

src/routes/pis/+page.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import Header from "$lib/navigation/header.svelte";
     import Nav from "$lib/navigation/nav.svelte";
     import Island from "$lib/islands/island.svelte";
@@ -6,6 +6,8 @@
     import { uuid } from "$lib/stores/uuid";
     import StylesToc from "$lib/train/styles-toc.svelte";
     import { getApiUrl } from "$lib/scripts/upstream";
+    import toast from "svelte-french-toast";
+    import { onMount } from "svelte";
 
     const title = "PIS Finder";
     const variables = { title: "Results" };
@@ -24,14 +26,16 @@
         isLoading = false;
     }
 
+    /* Temporarily Disabled
     async function findByPis() {
         isLoading = true;
         const url = `${getApiUrl()}/api/v2/pis/byCode/${entryPIS}`;
         await fetchData(url);
         isLoading = false;
     }
+    */
 
-    async function fetchData(url) {
+    async function fetchData(url: string) {
         const options = {
             method: "GET",
             headers: {
@@ -41,20 +45,29 @@
         const res = await fetch(url, options); // Enable Auth
         if (res.status == 401) {
             errMsg = "You must be logged in to the staff version";
+            toast.error("You must be registered")
             error = true;
             return false;
         } else if (res.status == 500) {
             errMsg = "Server Error, try again later";
+            toast.error("Server Error.", {duration: 7500})
             error = true;
             return false;
         }
         const jsonData = await res.json();
         if (jsonData.ERROR == "offline") {
             errMsg = "Connection error, check your internet connection and try again";
+            toast.error("You are offline.")
             error = true;
             return false;
         }
         data = jsonData;
+        let count = data.length
+        if (!count) {
+            toast.error("No PIS Codes found.")
+        } else {
+            toast.success(`${count} PIS Codes found`)
+        }
     }
 
     async function reset() {
@@ -63,7 +76,18 @@
         entryPIS = "";
         entryStartCRS = "";
         entryEndCRS = "";
+        toast.success("Form reset")
     }
+
+    onMount(() => {
+        toast(
+            "Registration soon required for PIS features.\n\nClick 'Register' in the menu.",
+            {
+                duration: 3000,
+            }
+        )
+    })
+
 </script>
 
 <Header {title} />

src/routes/train/+page.svelte

@@ -8,6 +8,7 @@
     import { onMount } from "svelte";
     import TrainDetail from "$lib/train/train-detail.svelte";
     import { getApiUrl } from "$lib/scripts/upstream";
+    import toast from "svelte-french-toast";
 
     let title = "Timetable Results";
     let id = "";
@@ -40,6 +41,13 @@
             }
         }
         isLoading = false;
+
+        toast(
+            "Registration soon required for timetable features.\n\nClick 'Register' in the menu.",
+            {
+                duration: 3000,
+            }
+        )
     });
 
     async function fetchData(id = "") {