Add near-to-me pre-feature

src/lib/islands/near-to-me-island.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import Island from "$lib/islands/island.svelte";
+    import { getCurrentLocation } from "$lib/scripts/getLocation";
+    import { location } from "$lib/stores/location";
+    export let variables = {
+        title: "Near to Me",
+    };
+
+</script>
+
+<Island {variables}>
+    {#if !$location}
+        <p>Coming Soon</p>
+        <p> </p>
+    {:else if $location}
+        <p>Coming Soon</p>  
+        {#await getCurrentLocation()}
+            <p>Fetching Location</p>
+        {:then location} 
+            <p>Lat: {location.latitude}, Long: {location.longitude}</p>
+        {:catch err}
+            <p>Error: {err.message}</p>
+        {/await}  
+    {/if}
+</Island>
+
+<style>
+    .buttons {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        width: 90%;
+        margin: auto;
+        padding-top: 5px;
+    }
+    .link {
+        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;
+        background-color: var(--island-button-color);
+        color: var(--island-link-color);
+        box-shadow: var(--box-shadow);
+    }
+</style>

src/lib/scripts/getLocation.ts

@@ -1,4 +1,4 @@
-export function getCurrentLocation() {
+export function getCurrentLocation(): Promise<locationObj> {
     return new Promise((resolve, reject) => {
         if (navigator.geolocation) {
             navigator.geolocation.getCurrentPosition(
@@ -17,3 +17,8 @@ export function getCurrentLocation() {
         }
     });
 }
+
+export interface locationObj {
+    latitude: number
+    longitude: number
+}

src/lib/stores/location.ts

@@ -0,0 +1,26 @@
+// src/stores.js
+import { writable, type Writable } from 'svelte/store';
+import { browser } from '$app/environment';
+
+// Initialize the store with a boolean value from local storage
+export const location: Writable<boolean> = writable(fromLocalStorage('location', false));
+toLocalStorage(location, 'location');
+
+function fromLocalStorage(storageKey: string, fallback: boolean): boolean {
+    if (browser) {
+        const storedValue = localStorage.getItem(storageKey);
+        if (storedValue !== null && storedValue !== 'undefined') {
+            return storedValue === 'true';
+        }
+    }
+    return fallback;
+}
+
+function toLocalStorage(store: Writable<boolean>, storageKey: string) {
+    if (browser) {
+        store.subscribe((value: boolean) => {
+            localStorage.setItem(storageKey, String(value));
+        });
+    }
+}
+

src/lib/stores/version.ts

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

src/routes/+page.svelte

@@ -9,6 +9,7 @@
     import { featureDetect } from "$lib/scripts/featureDetect";
     import { onMount } from "svelte";
     import toast from "svelte-french-toast";
+    import NearToMeIsland from "$lib/islands/near-to-me-island.svelte";
 
     const title = "OwlBoard";
     const inputIslands = [
@@ -46,7 +47,7 @@
 {#each inputIslands as variables}
     <InputIsland {variables} />
 {/each}
-
+<NearToMeIsland />
 <QuickLinkIsland />
 
 <Nav />

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

@@ -28,6 +28,7 @@
     </p>
     <p>The email server may store the address and message content as part of its regular operation, and your consent to this is implied when you sign up.</p>
     <p>In addition to the host portion of your email address, a randomly generated UUID is stored for the purpose of authorizing access to the rail staff data.</p>
+    <p>If you enable location data, your location will be sent to the server when you navigate to the homepage to determine your closest stations.  This data is never stored on the server after the nearest stations have been send to your device.</p>
     <h2>Reporting an Issue</h2>
     <p>When you report an issue, certain data is collected, including your browser's User Agent string and the size of the window in which you are viewing the website.</p>
     <p>

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

@@ -2,11 +2,44 @@
     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 { getCurrentLocation } from "$lib/scripts/getLocation";
     const title = "Settings";
+
+    $: if ($location) {
+        getCurrentLocation()
+    }
 </script>
 
 <Header {title} />
 
 <QlSet />
 
+<Island variables={{title: "Location"}}>
+    <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}>
+    </div>
+</Island>
+
 <Nav />
+
+<style>
+    .checkbox-container {
+        display: inline-flex;
+        align-items: center;
+        margin: auto;
+    }
+    .checkbox-container input[type="checkbox"] {
+        margin: 0;
+        height: 25px;
+        width: 25px;
+    }
+    .checkbox-container label {
+        margin-left: 0;
+        margin-right: 25px;
+        font-weight: 800;
+    }
+</style>

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

@@ -52,7 +52,7 @@
             <Tooltip text="Go"><IconBrandGolang /></Tooltip>
             <br />
             <a class="data" href="https://git.fjla.uk/owlboard/mq-client" target="_blank"
-                >MQ Client version<br /><span class="data">{data?.["mq-client"] || "Not installed"}</span></a
+                >timetable-mgr<br /><span class="data">{data?.["mq-client"] || "Not installed"}</span></a
             >
         </p>
     </Island>