Add NearestStations Card & Location monitor

src/lib/components/ui/cards/NearbyStationsCard.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
+	import Button from '$lib/components/ui/Button.svelte';
+
+	import { fade } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+
+	import { nearestStationsState } from '$lib/geohash.svelte';
+
+	const flipDuration = 300;
+</script>
+
+<BaseCard header={'Nearby Stations'}>
+	<div class="card-content">
+		{#if nearestStationsState.error && nearestStationsState.list.length === 0}
+			<p class="msg">{nearestStationsState.error}</p>
+		{:else if nearestStationsState.loading && nearestStationsState.list.length === 0}
+			<p class="msg">Locating stations...</p>
+		{:else}
+			<div class="stations-flex">
+				{#each nearestStationsState.list as station (station.c)}
+					<div
+						class="btn-container"
+						animate:flip={{ duration: flipDuration }}
+						in:fade={{ duration: 200, delay: 100 }}
+						out:fade={{ duration: 150 }}
+					>
+						<Button href={`/board?loc=${station.c}`}
+							><span class="stn-name">{station.n}</span></Button
+						>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</BaseCard>
+
+<style>
+	.card-content {
+		text-align: center;
+		width: 90%;
+		margin: auto;
+		padding: 10px 0 10px 0;
+	}
+
+	.stations-flex {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.75rem;
+		justify-content: center;
+		align-items: flex-start;
+	}
+
+	.btn-container {
+		display: block;
+        width: fit-content;
+		will-change: transform;
+	}
+
+	.msg {
+		font-size: 1.1rem;
+		font-weight: 600;
+		color: var(--color-title);
+	}
+
+	.stn-name {
+		text-transform: capitalize;
+	}
+</style>

src/lib/components/ui/cards/pis/PisCode.svelte

@@ -1,28 +1,34 @@
 <script lang="ts">
-import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
-import Textbox from '$lib/components/ui/Textbox.svelte';
-import Button from '$lib/components/ui/Button.svelte';
+	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
+	import Textbox from '$lib/components/ui/Textbox.svelte';
+	import Button from '$lib/components/ui/Button.svelte';
 
-let { onsearch }: { onsearch: (c: string) => void } = $props();
+	let { onsearch }: { onsearch: (c: string) => void } = $props();
 
-let codeValue = $state('');
+	let codeValue = $state('');
 
-function resetValues(): void {
-    codeValue = '';
-}
+	function resetValues(): void {
+		codeValue = '';
+	}
 </script>
 
 <BaseCard header={'Find by Code'}>
 	<div class="card-content">
-        <div class="textbox-container">
-            <div class="textbox-item-wrapper">
-                <Textbox placeholder={"Code"} uppercase={true} type={'number'} max={9999} bind:value={codeValue} />
-            </div>
-        </div>
-        <div class="button-wrapper">
-            <Button onclick={() => onsearch(codeValue.toString())}>Search</Button>
-            <Button onclick={resetValues}>Reset</Button>
-        </div>
+		<div class="textbox-container">
+			<div class="textbox-item-wrapper">
+				<Textbox
+					placeholder={'Code'}
+					uppercase={true}
+					type={'number'}
+					max={9999}
+					bind:value={codeValue}
+				/>
+			</div>
+		</div>
+		<div class="button-wrapper">
+			<Button onclick={() => onsearch(codeValue.toString())}>Search</Button>
+			<Button onclick={resetValues}>Reset</Button>
+		</div>
 	</div>
 </BaseCard>
 
@@ -34,21 +40,21 @@ function resetValues(): void {
 		padding: 10px 0 10px 0;
 	}
 
-    .textbox-container {
-        display: flex;
-        width: 100%;
-        justify-content: center;
-        gap: 4rem;
-    }
+	.textbox-container {
+		display: flex;
+		width: 100%;
+		justify-content: center;
+		gap: 4rem;
+	}
 
-    .textbox-item-wrapper {
-        width: 30%;
-    }
+	.textbox-item-wrapper {
+		width: 30%;
+	}
 
-    .button-wrapper {
-        display: flex;
-        justify-content: center;
-        gap: 1rem;
-        margin-top: 15px;
-    }
-</style>
+	.button-wrapper {
+		display: flex;
+		justify-content: center;
+		gap: 1rem;
+		margin-top: 15px;
+	}
+</style>

src/lib/components/ui/cards/pis/PisStartEndCard.svelte

@@ -1,34 +1,33 @@
 <script lang="ts">
-import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
-import Textbox from '$lib/components/ui/Textbox.svelte';
-import Button from '$lib/components/ui/Button.svelte';
+	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
+	import Textbox from '$lib/components/ui/Textbox.svelte';
+	import Button from '$lib/components/ui/Button.svelte';
 
-let { onsearch }: { onsearch: (s: string, e: string) => void } = $props();
+	let { onsearch }: { onsearch: (s: string, e: string) => void } = $props();
 
+	let startValue = $state('');
+	let endValue = $state('');
 
-let startValue = $state('');
-let endValue = $state('');
-
-function resetValues(): void {
-    startValue = '';
-    endValue = '';
-}
+	function resetValues(): void {
+		startValue = '';
+		endValue = '';
+	}
 </script>
 
 <BaseCard header={'Find by Start/End CRS'}>
 	<div class="card-content">
-        <div class="textbox-container">
-            <div class="textbox-item-wrapper">
-                <Textbox placeholder={"Start"} uppercase={true} maxLength={3} bind:value={startValue} />
-            </div>
-            <div class="textbox-item-wrapper">
-                <Textbox placeholder={"End"} uppercase={true} maxLength={3} bind:value={endValue} />
-            </div>
-        </div>
-        <div class="button-wrapper">
-            <Button onclick={() => onsearch(startValue, endValue)}>Search</Button>
-            <Button onclick={resetValues}>Reset</Button>
-        </div>
+		<div class="textbox-container">
+			<div class="textbox-item-wrapper">
+				<Textbox placeholder={'Start'} uppercase={true} maxLength={3} bind:value={startValue} />
+			</div>
+			<div class="textbox-item-wrapper">
+				<Textbox placeholder={'End'} uppercase={true} maxLength={3} bind:value={endValue} />
+			</div>
+		</div>
+		<div class="button-wrapper">
+			<Button onclick={() => onsearch(startValue, endValue)}>Search</Button>
+			<Button onclick={resetValues}>Reset</Button>
+		</div>
 	</div>
 </BaseCard>
 
@@ -40,21 +39,21 @@ function resetValues(): void {
 		padding: 10px 0 10px 0;
 	}
 
-    .textbox-container {
-        display: flex;
-        width: 100%;
-        justify-content: center;
-        gap: 4rem;
-    }
+	.textbox-container {
+		display: flex;
+		width: 100%;
+		justify-content: center;
+		gap: 4rem;
+	}
 
-    .textbox-item-wrapper {
-        width: 30%;
-    }
+	.textbox-item-wrapper {
+		width: 30%;
+	}
 
-    .button-wrapper {
-        display: flex;
-        justify-content: center;
-        gap: 1rem;
-        margin-top: 15px;
-    }
-</style>
+	.button-wrapper {
+		display: flex;
+		justify-content: center;
+		gap: 1rem;
+		margin-top: 15px;
+	}
+</style>