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 { 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>
|
@ -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
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user