Add fetch to nearest-to-me-island
This commit is contained in:
parent
12ef391ec4
commit
75641bd245
@ -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>
|
||||
-->
|
Loading…
Reference in New Issue
Block a user