diff --git a/src/lib/cards/NearToMeCard.svelte b/src/lib/cards/NearToMeCard.svelte index ac13434..c5d1609 100644 --- a/src/lib/cards/NearToMeCard.svelte +++ b/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.", - onRefresh: refresh - } + helpText: "Your location may not be accurate on desktop and laptop devices.", + 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"; + } + } + }); {#if !$uuid || $uuid === "null"}

Register to use this feature

- {:else} - {#if $location} - {#if !stations} -

Fetching locations...

+ {:else if $location} + {#if !stations.length} + {#if errorMessage} +

{errorMessage}

{:else} - {#each stations as station} - {station.NLCDESC} - {station.miles}mi - {/each} + {/if} {:else} -

+
+ {#each stations as station} + {station.NLCDESC} - {station.miles}mi + {/each} +
{/if} + {:else} +

{/if}
\ No newline at end of file + + #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; + } +