Complete location based work for "Near to Me" feature
This commit is contained in:
parent
75641bd245
commit
f93113ec14
@ -3,6 +3,7 @@
|
||||
import { apiGet } from "$lib/scripts/apiFetch";
|
||||
import { getCurrentLocation } from "$lib/scripts/getLocation";
|
||||
import { location } from "$lib/stores/location";
|
||||
//import { NearestStationResponse } from "@owlboard/ts-types";
|
||||
export let variables = {
|
||||
title: "Near to Me",
|
||||
};
|
||||
@ -13,25 +14,31 @@
|
||||
|
||||
async function getNearestStations() {
|
||||
const currLocation = await getCurrentLocation();
|
||||
console.debug(`Current Latitude: ${currLocation.latitude}, Current Longitude: ${currLocation.longitude}`)
|
||||
const apiPath = `/api/v2/live/station/nearest/${currLocation.latitude}/${currLocation.longitude}`
|
||||
const res = await apiGet(apiPath)
|
||||
console.log(res)
|
||||
return res as any[]
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<Island {variables}>
|
||||
{#if !$location}
|
||||
<p>Coming soon</p>
|
||||
<!-- <br>
|
||||
<p>Coming Soon</p>
|
||||
<!--
|
||||
<br>
|
||||
<button on:click={turnOnLocation}>Turn on Location</button>
|
||||
-->
|
||||
-->
|
||||
{:else if $location}
|
||||
{#await getNearestStations()}
|
||||
<p>Fetching Location</p>
|
||||
{:then stations}
|
||||
<div id="buttons">
|
||||
{#each stations as station}
|
||||
<a class="link" href="/ldb?station={station.CRS}">{station.NLCDESC} - {station.miles}mi</a>
|
||||
<a class="link" href="/ldb?station={station["3ALPHA"]}">{station.NLCDESC} - {station.miles}mi</a>
|
||||
{/each}
|
||||
</div>
|
||||
{:catch err}
|
||||
<p>Error: {err.message}</p>
|
||||
{/await}
|
||||
@ -57,5 +64,28 @@
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
|
||||
#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;
|
||||
text-decoration: none;
|
||||
background-color: var(--island-button-color);
|
||||
color: var(--island-link-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
@ -1,20 +1,35 @@
|
||||
export function getCurrentLocation(): Promise<locationObj> {
|
||||
export async function getCurrentLocation(): Promise<locationObj> {
|
||||
console.debug("Fetching location");
|
||||
|
||||
if (typeof window === 'undefined') {
|
||||
console.error("Location fetch has run serverside - invalid method")
|
||||
}
|
||||
|
||||
if (!navigator.geolocation) {
|
||||
console.error("Geolocation is not supported");
|
||||
throw new Error("Geolocation is not supported");
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(position) => {
|
||||
resolve({
|
||||
latitude: position.coords.latitude,
|
||||
longitude: position.coords.longitude,
|
||||
});
|
||||
},
|
||||
(error) => {
|
||||
reject(error);
|
||||
}
|
||||
);
|
||||
} else {
|
||||
reject(new Error("Geolocation is not supported by this browser."));
|
||||
}
|
||||
const options = {
|
||||
timeout: 10000,
|
||||
maximumAge: 300,
|
||||
};
|
||||
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(position) => {
|
||||
console.debug(`Position obtained: ${position.coords}`);
|
||||
resolve({
|
||||
latitude: position.coords.latitude,
|
||||
longitude: position.coords.longitude,
|
||||
});
|
||||
},
|
||||
(error) => {
|
||||
console.error("Error fetching location: ", error);
|
||||
reject(error);
|
||||
}
|
||||
);
|
||||
options
|
||||
});
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user