Complete location based work for "Near to Me" feature

This commit is contained in:
Fred Boniface 2024-07-01 16:01:24 +01:00
parent 75641bd245
commit f93113ec14
2 changed files with 68 additions and 23 deletions

View File

@ -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>

View File

@ -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
});
}