Add fetch to nearest-to-me-island

This commit is contained in:
Fred Boniface 2024-07-01 13:25:44 +01:00
parent 12ef391ec4
commit 75641bd245
1 changed files with 29 additions and 22 deletions

View File

@ -1,47 +1,53 @@
<script lang="ts">
import Island from "$lib/islands/island.svelte";
import { apiGet } from "$lib/scripts/apiFetch";
import { getCurrentLocation } from "$lib/scripts/getLocation";
import { location } from "$lib/stores/location";
export let variables = {
title: "Near to Me",
};
function turnOnLocation() {
location.set(true);
}
async function getNearestStations() {
const currLocation = await getCurrentLocation();
const apiPath = `/api/v2/live/station/nearest/${currLocation.latitude}/${currLocation.longitude}`
const res = await apiGet(apiPath)
}
</script>
<Island {variables}>
{#if !$location}
<p>Coming Soon</p>
<p> </p>
<p>Coming soon</p>
<!-- <br>
<button on:click={turnOnLocation}>Turn on Location</button>
-->
{:else if $location}
<p>Coming Soon</p>
{#await getCurrentLocation()}
{#await getNearestStations()}
<p>Fetching Location</p>
{:then location}
<p>Lat: {location.latitude}, Long: {location.longitude}</p>
{:then stations}
{#each stations as station}
<a class="link" href="/ldb?station={station.CRS}">{station.NLCDESC} - {station.miles}mi</a>
{/each}
{: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 {
button {
flex: 1;
width: 20%;
width: 70%;
min-width: 50px;
margin: 5px;
height: 30px;
margin-top: 10px;
margin-bottom: 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;
@ -50,5 +56,6 @@
color: var(--island-link-color);
box-shadow: var(--box-shadow);
}
</style>
-->