Flesh out new NearToMeCard

src/lib/cards/NearToMeCard.svelte

@@ -6,50 +6,80 @@
     import type { NearestStationResponse } from "@owlboard/ts-types";
     import { uuid } from "$lib/stores/uuid";
     import { location } from "$lib/stores/location";
+    import InLineLoading from "$lib/navigation/InLineLoading.svelte";
+    import { apiGet } from "$lib/scripts/apiFetch";
+    import { onMount } from "svelte";
 
-    let stations: NearestStationResponse[];
+    let errorMessage: string;
+    let stations: NearestStationResponse[] = [];
 
     let config: CardConfig = {
         title: "Near to Me",
         showHelp: true,
         showRefresh: true,
-        helpText: "Your location may not be accurate, particularly on desktop and laptop devices.",
+        helpText: "Your location may not be accurate on desktop and laptop devices.",
-        onRefresh: refresh
+        onRefresh: refresh,
-    }
+    };
 
     function turnOnLocation() {
-        location.set(true)
+        location.set(true);
         getCurrentLocation();
-        toast.success("Done\nTo disable location, go to settings")
+        toast.success("Done\nTo disable location, go to settings");
     }
 
-    function refresh() {getNearestStations()}
+    function refresh() {
+        stations = [];
+        getNearestStations();
+    }
 
     async function getNearestStations() {
         // Get location, then fetch nearest stations and push to `stations` variable
+        const currentLocation = await getCurrentLocation();
+        const apiPath: string = `/api/v2/live/station/nearest/${currentLocation.latitude}/${currentLocation.longitude}`;
+        try {
+            const apiResponse = (await apiGet(apiPath)) as NearestStationResponse[];
+            stations = apiResponse;
+        } catch (err) {
+            errorMessage = err as string;
         }
+    }
+
+    onMount(() => {
+        if ($location) {
+            if ($uuid && $uuid != "null") {
+                getNearestStations();
+            } else {
+                errorMessage = "Register to use this feature";
+            }
+        }
+    });
 </script>
 
 <Card {config}>
     {#if !$uuid || $uuid === "null"}
         <p><a href="/more/reg">Register to use this feature</a></p>
+    {:else if $location}
+        {#if !stations.length}
+            {#if errorMessage}
+                <p>{errorMessage}</p>
             {:else}
-        {#if $location}
+                <InLineLoading />
-            {#if !stations}
+            {/if}
-                <p>Fetching locations...</p>
         {:else}
+            <div id="buttons">
                 {#each stations as station}
-                    <a href="/ldb?station={station["3ALPHA"]}">{station.NLCDESC} - {station.miles}mi</a>
+                    <a class="link" href="/ldb?station={station['3ALPHA']}">{station.NLCDESC} - {station.miles}mi</a>
                 {/each}
+            </div>
         {/if}
     {:else}
         <p><button on:click={turnOnLocation}>Turn on Location</button></p>
     {/if}
-    {/if}
 </Card>
 
 <style>
-    a, button {
+    a,
+    button {
         color: aliceblue;
         text-decoration: none;
         margin: auto;
@@ -61,8 +91,30 @@
         transition: all 0.3s ease;
     }
 
-    a:hover, button:hover {
+    a:hover,
+    button:hover {
         background-color: rgb(45, 45, 45);
         box-shadow: var(--box-shadow-dark);
     }
+
+    #buttons {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        width: 95%;
+        margin: auto;
+        padding-top: 5px;
+    }
+    .link {
+        display: inline-flex;
+        margin: 5px;
+        border: none;
+        border-radius: 20px;
+        padding: 5px 10px;
+        font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
+        font-size: 16px;
+        font-weight: 400;
+        white-space: nowrap;
+    }
 </style>