Migrate components to new preferences store

src/lib/cards/NearToMeCard.svelte

@@ -5,13 +5,14 @@
     import type { CardConfig } from "./Card.types";
     import type { NearestStationResponse } from "@owlboard/ts-types";
     import { uuid } from "$lib/stores/uuid";
-    import { location } from "$lib/stores/location";
+    import { preferences } from "$lib/stores/preferences";
     import InLineLoading from "$lib/navigation/InLineLoading.svelte";
     import { apiGet } from "$lib/scripts/apiFetch";
     import { onMount } from "svelte";
     import { nearToMeCache } from "$lib/stores/nearToMeCache";
     import LinkButton from "$lib/buttons/LinkButton.svelte";
     import ScriptButton from "$lib/buttons/ScriptButton.svelte";
+    import { togglePreference } from "$lib/scripts/preferenceUtil";
 
     let errorMessage: string;
     let stations: NearestStationResponse[] = [];
@@ -26,8 +27,8 @@
         refreshing: false,
     };
 
-    function turnOnLocation() {
+    function turnOnLocation(): void {
-        location.set(true);
+        togglePreference("location", true);
         getCurrentLocation();
         toast.success("Done\nTo disable location, go to settings");
     }
@@ -49,7 +50,7 @@
     }
 
     onMount(() => {
-        if ($location) {
+        if ($preferences.location) {
             if (!$uuid || $uuid === "null") {
                 errorMessage = "Register to use this feature";
             } else {
@@ -70,7 +71,7 @@
     <div id="buttons">
     {#if !$uuid || $uuid === "null"}
         <LinkButton text="Register to use this feature" link="/more/reg" />
-    {:else if $location}
+    {:else if $preferences.location}
         {#if !stations.length}
             {#if errorMessage}
                 <p>{errorMessage}</p>

src/lib/cards/QuickLinkCard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import Card from "./Card.svelte";
     import type { CardConfig } from "./Card.types";
-    import { ql } from "$lib/stores/quick-links";
+    import { preferences } from "$lib/stores/preferences";
     import LinkButton from "$lib/buttons/LinkButton.svelte";
 
     let upstreamProps: CardConfig = {
@@ -16,11 +16,11 @@
 
 <Card config={upstreamProps}>
     <div class="quick-links">
-    {#if !$ql.length}
+    {#if !$preferences.ql.length}
         <LinkButton text={"Add Quick Links"} link={"/more/settings"} />
     {:else}
         
-            {#each $ql as link}
+            {#each $preferences.ql as link}
                 {#if link.length === 3}
                     <LinkButton text={link.toUpperCase()} link={`/ldb?station=${link.toLowerCase()}`} />
                 {:else if link.length === 4}

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 type { Preferences } from "$lib/stores/preferences";
+    import { preferences } from "$lib/stores/preferences";
     import toast from "svelte-french-toast";
     export let variables = {
         title: "Quick Links",
@@ -8,7 +9,7 @@
 
     let qlData: string[] = [];
     $: {
-        qlData = $ql;
+        qlData = $preferences.ql;
         console.log(qlData);
     }
 
@@ -18,7 +19,7 @@
         return new Promise((resolve) => setTimeout(resolve, ms));
     }
 
-    function save() {
+    function save(): void {
         toast.promise(saveQl(), {
             loading: "Saving...",
             success: "Quick Links saved!",
@@ -26,7 +27,7 @@
         });
     }
 
-    async function saveQl() {
+    async function saveQl(): Promise<void> {
         // 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: string[] = [];
@@ -37,25 +38,33 @@
             }
         }
         console.log(inputLinks);
-        ql.set(inputLinks);
+        preferences.update((p: Preferences) => ({
+            ...p,
+            ql: inputLinks,
+        }))
         await timeout(1000);
         saveButton = "Saved";
     }
 
-    function clearQl() {
+    function clearQl(): void {
-        ql.set([]);
+        preferences.update((p: Preferences) => ({
+            ...p,
+            ql: [],
+        }))
         saveButton = "Saved";
         toast.success("Cleared Quick Links.");
     }
 
-    function addQlBox() {
+    function addQlBox(): void {
         saveButton = "Save";
-        const updatedQl = [...$ql, ""];
+        const updatedQl = [...qlData, ""];
-        $ql = updatedQl;
+        preferences.update((p: Preferences) => ({
-        ql.set(updatedQl);
+            ...p,
+            ql: updatedQl,
+        }))
     }
 
-    function handleClick(event: any) {
+    function handleClick(event: any): void {
         // Handle the click event here
         console.log("Island Clicked");
         // You can access the `variables` passed to the Island component here if needed
@@ -63,7 +72,7 @@
 </script>
 
 <Island on:click={handleClick} {variables}>
-    {#if $ql.length === 0}
+    {#if qlData.length === 0}
         <p>Click the + button to add links</p>
     {/if}
     <div id="buttons" class="buttons">

src/lib/scripts/preferenceUtil.ts

@@ -0,0 +1,9 @@
+import type { Preferences } from "$lib/stores/preferences";
+import { preferences } from "$lib/stores/preferences";
+
+export function togglePreference<K extends keyof Preferences>(key: K, value: boolean): void {
+    preferences.update(p => ({
+        ...p,
+        [key]: value,
+    }));
+}

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

@@ -1,21 +1,31 @@
-<script>
+<script lang="ts">
     import Header from "$lib/navigation/header.svelte";
     import Nav from "$lib/navigation/nav.svelte";
     import QlSet from "$lib/islands/quick-link-set-island.svelte";
     import Island from "$lib/islands/island.svelte";
-    import { location } from "$lib/stores/location";
+    import { preferences } from "$lib/stores/preferences";
-    import { telemetry } from "$lib/stores/telemetryConsent";
+    import { togglePreference } from "$lib/scripts/preferenceUtil";
     import { getCurrentLocation } from "$lib/scripts/getLocation";
     import toast from "svelte-french-toast";
     const title = "Settings";
 
-    $: if ($location) {
+    $: if ($preferences.location) {
         getCurrentLocation();
     }
 
     function confirmationToast() {
         toast.success("Settings updated");
     }
+
+    function onTelemetryChange(event: Event) {
+        const checked = (event.target as HTMLInputElement).checked;
+        togglePreference("telemetry", checked);
+    }
+
+    function onLocationChange(event: Event) {
+        const checked = (event.target as HTMLInputElement).checked;
+        togglePreference("location", checked);
+    }
 </script>
 
 <svelte:head>
@@ -30,7 +40,7 @@
     <p>Use your location to quickly check departure boards near you</p>
     <div class="checkbox-container">
         <label for="location_enable">Enabled</label>
-        <input id="location_enable" type="checkbox" bind:checked={$location} on:click={confirmationToast} />
+        <input id="location_enable" type="checkbox" checked={$preferences.location} on:click={confirmationToast} on:change={onLocationChange}/>
     </div>
 </Island>
 
@@ -40,7 +50,7 @@
     </p>
     <div class="checkbox-container">
         <label for="telemetry_enable">Enabled</label>
-        <input id="telemetry_enable" type="checkbox" bind:checked={$telemetry} on:click={confirmationToast} />
+        <input id="telemetry_enable" type="checkbox" checked={$preferences.telemetry} on:click={confirmationToast} on:change={onTelemetryChange}/>
 </Island>
 
 <Nav />