Add near-to-me pre-feature

This commit is contained in:
Fred Boniface 2024-06-30 11:13:32 +01:00
parent 313517605b
commit d3530063f3
8 changed files with 123 additions and 4 deletions

View File

@ -0,0 +1,53 @@
<script lang="ts">
import Island from "$lib/islands/island.svelte";
import { getCurrentLocation } from "$lib/scripts/getLocation";
import { location } from "$lib/stores/location";
export let variables = {
title: "Near to Me",
};
</script>
<Island {variables}>
{#if !$location}
<p>Coming Soon</p>
<p> </p>
{:else if $location}
<p>Coming Soon</p>
{#await getCurrentLocation()}
<p>Fetching Location</p>
{:then location}
<p>Lat: {location.latitude}, Long: {location.longitude}</p>
{:catch err}
<p>Error: {err.message}</p>
{/await}
{/if}
</Island>
<style>
.buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 90%;
margin: auto;
padding-top: 5px;
}
.link {
flex: 1;
width: 20%;
min-width: 50px;
margin: 5px;
border: none;
border-radius: 20px;
padding: 5px;
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);
}
</style>

View File

@ -1,4 +1,4 @@
export function getCurrentLocation() {
export function getCurrentLocation(): Promise<locationObj> {
return new Promise((resolve, reject) => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
@ -17,3 +17,8 @@ export function getCurrentLocation() {
}
});
}
export interface locationObj {
latitude: number
longitude: number
}

View File

@ -0,0 +1,26 @@
// src/stores.js
import { writable, type Writable } from 'svelte/store';
import { browser } from '$app/environment';
// Initialize the store with a boolean value from local storage
export const location: Writable<boolean> = writable(fromLocalStorage('location', false));
toLocalStorage(location, 'location');
function fromLocalStorage(storageKey: string, fallback: boolean): boolean {
if (browser) {
const storedValue = localStorage.getItem(storageKey);
if (storedValue !== null && storedValue !== 'undefined') {
return storedValue === 'true';
}
}
return fallback;
}
function toLocalStorage(store: Writable<boolean>, storageKey: string) {
if (browser) {
store.subscribe((value: boolean) => {
localStorage.setItem(storageKey, String(value));
});
}
}

View File

@ -1,3 +1,3 @@
export const version: string = "2024.06.4";
export const version: string = "2024.06.5";
export const versionTag: string = "";
export const showWelcome: boolean = false;

View File

@ -9,6 +9,7 @@
import { featureDetect } from "$lib/scripts/featureDetect";
import { onMount } from "svelte";
import toast from "svelte-french-toast";
import NearToMeIsland from "$lib/islands/near-to-me-island.svelte";
const title = "OwlBoard";
const inputIslands = [
@ -46,7 +47,7 @@
{#each inputIslands as variables}
<InputIsland {variables} />
{/each}
<NearToMeIsland />
<QuickLinkIsland />
<Nav />

View File

@ -28,6 +28,7 @@
</p>
<p>The email server may store the address and message content as part of its regular operation, and your consent to this is implied when you sign up.</p>
<p>In addition to the host portion of your email address, a randomly generated UUID is stored for the purpose of authorizing access to the rail staff data.</p>
<p>If you enable location data, your location will be sent to the server when you navigate to the homepage to determine your closest stations. This data is never stored on the server after the nearest stations have been send to your device.</p>
<h2>Reporting an Issue</h2>
<p>When you report an issue, certain data is collected, including your browser's User Agent string and the size of the window in which you are viewing the website.</p>
<p>

View File

@ -2,11 +2,44 @@
import Header from "$lib/navigation/header.svelte";
import Nav from "$lib/navigation/nav.svelte";
import QlSet from "$lib/islands/quick-link-set-island.svelte";
import Island from "$lib/islands/island.svelte";
import { location } from "$lib/stores/location";
import { getCurrentLocation } from "$lib/scripts/getLocation";
const title = "Settings";
$: if ($location) {
getCurrentLocation()
}
</script>
<Header {title} />
<QlSet />
<Island variables={{title: "Location"}}>
<p>Use your location to quickly check departure boards near you</p>
<div class="checkbox-container">
<label for="location_enable">Enabled</label>
<input id="location_enable" type="checkbox" bind:checked={$location}>
</div>
</Island>
<Nav />
<style>
.checkbox-container {
display: inline-flex;
align-items: center;
margin: auto;
}
.checkbox-container input[type="checkbox"] {
margin: 0;
height: 25px;
width: 25px;
}
.checkbox-container label {
margin-left: 0;
margin-right: 25px;
font-weight: 800;
}
</style>

View File

@ -52,7 +52,7 @@
<Tooltip text="Go"><IconBrandGolang /></Tooltip>
<br />
<a class="data" href="https://git.fjla.uk/owlboard/mq-client" target="_blank"
>MQ Client version<br /><span class="data">{data?.["mq-client"] || "Not installed"}</span></a
>timetable-mgr<br /><span class="data">{data?.["mq-client"] || "Not installed"}</span></a
>
</p>
</Island>