Introduce toasts

This commit is contained in:
Fred Boniface 2024-06-13 21:59:01 +01:00
parent 0d0875f893
commit c93f36102e
11 changed files with 2993 additions and 2861 deletions

5731
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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

View File

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import Island from "$lib/islands/island.svelte"; import Island from "$lib/islands/island.svelte";
import { ql } from "$lib/stores/quick-links"; import { ql } from "$lib/stores/quick-links";
import toast from "svelte-french-toast";
export let variables = { export let variables = {
title: "Quick Links", title: "Quick Links",
}; };
@ -17,6 +18,17 @@
return new Promise((resolve) => setTimeout(resolve, ms)); 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() { async function saveQl() {
// Fetch the content of all text entries within the island then run ql.set([ARRAY OF INPUT CONTENT]) // Fetch the content of all text entries within the island then run ql.set([ARRAY OF INPUT CONTENT])
const inputs = document.getElementsByClassName("qlInput"); const inputs = document.getElementsByClassName("qlInput");
@ -29,14 +41,14 @@
} }
console.log(inputLinks); console.log(inputLinks);
ql.set(inputLinks); ql.set(inputLinks);
saveButton = "&#10004;"; await timeout(1000);
await timeout(3000);
saveButton = "Saved"; saveButton = "Saved";
} }
function clearQl() { function clearQl() {
ql.set([]); ql.set([]);
saveButton = "Saved"; saveButton = "Saved";
toast.success("Cleared Quick Links.")
} }
function addQlBox() { function addQlBox() {
@ -64,7 +76,7 @@
{/each} {/each}
<button on:click={addQlBox} id="qlAdd">+</button> <button on:click={addQlBox} id="qlAdd">+</button>
</div> </div>
<button on:click={saveQl}>{@html saveButton}</button> <button on:click={save}>{@html saveButton}</button>
<button on:click={clearQl}>Clear</button> <button on:click={clearQl}>Clear</button>
</Island> </Island>

View File

@ -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>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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