Add fetch to nearest-to-me-island
This commit is contained in:
parent
12ef391ec4
commit
75641bd245
@ -1,47 +1,53 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Island from "$lib/islands/island.svelte";
|
import Island from "$lib/islands/island.svelte";
|
||||||
|
import { apiGet } from "$lib/scripts/apiFetch";
|
||||||
import { getCurrentLocation } from "$lib/scripts/getLocation";
|
import { getCurrentLocation } from "$lib/scripts/getLocation";
|
||||||
import { location } from "$lib/stores/location";
|
import { location } from "$lib/stores/location";
|
||||||
export let variables = {
|
export let variables = {
|
||||||
title: "Near to Me",
|
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>
|
</script>
|
||||||
|
|
||||||
<Island {variables}>
|
<Island {variables}>
|
||||||
{#if !$location}
|
{#if !$location}
|
||||||
<p>Coming Soon</p>
|
<p>Coming soon</p>
|
||||||
<p> </p>
|
<!-- <br>
|
||||||
|
<button on:click={turnOnLocation}>Turn on Location</button>
|
||||||
|
-->
|
||||||
{:else if $location}
|
{:else if $location}
|
||||||
<p>Coming Soon</p>
|
{#await getNearestStations()}
|
||||||
{#await getCurrentLocation()}
|
|
||||||
<p>Fetching Location</p>
|
<p>Fetching Location</p>
|
||||||
{:then location}
|
{:then stations}
|
||||||
<p>Lat: {location.latitude}, Long: {location.longitude}</p>
|
{#each stations as station}
|
||||||
|
<a class="link" href="/ldb?station={station.CRS}">{station.NLCDESC} - {station.miles}mi</a>
|
||||||
|
{/each}
|
||||||
{:catch err}
|
{:catch err}
|
||||||
<p>Error: {err.message}</p>
|
<p>Error: {err.message}</p>
|
||||||
{/await}
|
{/await}
|
||||||
{/if}
|
{/if}
|
||||||
</Island>
|
</Island>
|
||||||
<!--
|
|
||||||
<style>
|
<style>
|
||||||
.buttons {
|
button {
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 90%;
|
|
||||||
margin: auto;
|
|
||||||
padding-top: 5px;
|
|
||||||
}
|
|
||||||
.link {
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
width: 20%;
|
width: 70%;
|
||||||
min-width: 50px;
|
min-width: 50px;
|
||||||
margin: 5px;
|
height: 30px;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 5px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
padding: 5px;
|
|
||||||
font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
|
font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@ -50,5 +56,6 @@
|
|||||||
color: var(--island-link-color);
|
color: var(--island-link-color);
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
-->
|
|
||||||
|
</style>
|
Loading…
Reference in New Issue
Block a user