Introduce toasts

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 = "") {