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 { 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";
//import { NearestStationResponse } from "@owlboard/ts-types";
export let variables = { export let variables = {
title: "Near to Me", title: "Near to Me",
}; };
@ -13,28 +14,34 @@
async function getNearestStations() { async function getNearestStations() {
const currLocation = await getCurrentLocation(); 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 apiPath = `/api/v2/live/station/nearest/${currLocation.latitude}/${currLocation.longitude}`
const res = await apiGet(apiPath) const res = await apiGet(apiPath)
console.log(res)
return res as any[]
} }
</script> </script>
<Island {variables}> <Island {variables}>
{#if !$location} {#if !$location}
<p>Coming soon</p> <p>Coming Soon</p>
<!-- <br> <!--
<br>
<button on:click={turnOnLocation}>Turn on Location</button> <button on:click={turnOnLocation}>Turn on Location</button>
--> -->
{:else if $location} {:else if $location}
{#await getNearestStations()} {#await getNearestStations()}
<p>Fetching Location</p> <p>Fetching Location</p>
{:then stations} {:then stations}
<div id="buttons">
{#each stations as station} {#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} {/each}
</div>
{:catch err} {:catch err}
<p>Error: {err.message}</p> <p>Error: {err.message}</p>
{/await} {/await}
{/if} {/if}
</Island> </Island>
@ -57,5 +64,28 @@
box-shadow: var(--box-shadow); 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> </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) => { return new Promise((resolve, reject) => {
if (navigator.geolocation) { const options = {
navigator.geolocation.getCurrentPosition( timeout: 10000,
(position) => { maximumAge: 300,
resolve({ };
latitude: position.coords.latitude,
longitude: position.coords.longitude, navigator.geolocation.getCurrentPosition(
}); (position) => {
}, console.debug(`Position obtained: ${position.coords}`);
(error) => { resolve({
reject(error); latitude: position.coords.latitude,
} longitude: position.coords.longitude,
); });
} else { },
reject(new Error("Geolocation is not supported by this browser.")); (error) => {
} console.error("Error fetching location: ", error);
reject(error);
}
);
options
}); });
} }