OwlBoard/owlboard-svelte
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Replace homescreen 'islands' with 'cards' and remove now unused 'island' components

Browse Source
This commit is contained in:
Fred Boniface 2024-07-07 21:02:10 +01:00
parent 9ad046dd9f
commit 512c77e81c
9 changed files with 37 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/lib/buttons/LinkButton.svelte
View File

@ -11,12 +11,15 @@
border: none;
border-radius: 20px;
text-decoration: none;
margin: 5px;
margin: auto;
margin-top: 5px;
margin-bottom: 5px;
background-color: var(--island-button-color);
font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
padding: 5px 10px;
padding: 5px 25px;
min-width: 40px;
height: 25px;
width: fit-content;
height: 22px;
font-size: 16px;
font-weight: 400;
box-shadow: var(--box-shadow);

2
src/lib/buttons/ScriptButton.svelte
View File

@ -18,7 +18,7 @@
background-color: var(--island-button-color);
padding: 20px 20px;
min-width: 40px;
height: 35px;
height: 22px;
font-size: 16px;
font-weight: 400;
box-shadow: var(--box-shadow);

8
src/lib/cards/Card.svelte
View File

@ -35,16 +35,20 @@
width: 85%;
max-width: 400px;
margin: auto;
margin-top: 25px;
padding: 10px;
margin-top: 20px;
margin-bottom: 10px;
padding: 10px 5px 5px 5px;
background-color: var(--island-bg-color);
border-radius: 10px;
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.29);
min-height: 75px;
}
.header {
color: var(--island-header-color);
font-size: 14px;
display: flex;
margin: 0;
width: 100%;
justify-content: center;
align-items: center;

3
src/lib/cards/LookupCard.svelte
View File

@ -24,6 +24,7 @@
<style>
input {
margin: 4px;
width: 75%;
max-width: 250px;
text-align: center;
@ -38,7 +39,7 @@
}
button {
margin: 10px;
margin: 5px;
background-color: var(--island-button-color);
color: white;
border: none;

2
src/lib/cards/QuickLinkCard.svelte
View File

@ -16,7 +16,7 @@
<Card config={upstreamProps}>
{#if !$ql.length}
<p>Go to <a href="/more/settings">Settings</a> to add your quick links</p>
<LinkButton text={"Add Quick Links"} link={"/more/settings"} />
{:else}
<div class="quick-links">
{#each $ql as link}

47
src/lib/islands/input-island-form.svelte
View File

@ -1,47 +0,0 @@
<script lang="ts">
import Island from "$lib/islands/island.svelte";
export let variables = {
title: "Uninitialised",
action: "/",
placeholder: "Uninitialised",
queryName: "uninitiailsed",
};
</script>
<Island {variables}>
<form action={variables.action}>
<input class="form-input" type="text" id="input-headcode" name={variables.queryName} placeholder={variables.placeholder} autocomplete="off" />
<br />
<button type="submit">Submit</button>
</form>
</Island>
<style>
.form-input {
width: 75%;
height: 32px;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 50px;
border: none;
text-align: center;
font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
text-transform: uppercase;
font-size: 15px;
box-shadow: var(--box-shadow);
}
button {
width: 50%;
margin-bottom: 5px;
margin-top: 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;
background-color: var(--island-button-color);
color: var(--island-link-color);
box-shadow: var(--box-shadow);
}
</style>

74
src/lib/islands/near-to-me-island.svelte
View File

@ -1,74 +0,0 @@
<script lang="ts">
import Island from "$lib/islands/island.svelte";
import { apiGet } from "$lib/scripts/apiFetch";
import { getCurrentLocation } from "$lib/scripts/getLocation";
import { location } from "$lib/stores/location";
import toast from "svelte-french-toast";
//import { NearestStationResponse } from "@owlboard/ts-types";
export let variables = {
title: "Near to Me",
};
function turnOnLocation() {
location.set(true);
toast("To disable location, go to settings");
}
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>
<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['3ALPHA']}">{station.NLCDESC} - {station.miles}mi</a>
{/each}
</div>
{:catch err}
<p>Error: {err.message}</p>
{/await}
{/if}
</Island>
<style>
#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>

54
src/lib/islands/quick-link-island.svelte
View File

@ -1,54 +0,0 @@
<script lang="ts">
import Island from "$lib/islands/island.svelte";
import { ql } from "$lib/stores/quick-links";
export let variables = {
title: "Quick Links",
};
</script>
<Island {variables}>
{#if $ql.length === 0}
<p>Go to <a href="/more/settings">settings</a> to add your Quick Links</p>
{/if}
<div class="buttons">
{#each $ql as link}
{#if link.length === 3}
<a class="link" href="/ldb?station={link}">
{link.toUpperCase()}
</a>
{:else if link.length === 4}
<a class="link" href="/train?headcode={link}">
{link.toUpperCase()}
</a>
{/if}
{/each}
</div>
</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>

47
src/routes/+page.svelte
View File

@ -1,36 +1,35 @@
<script lang="ts">
import Header from "$lib/navigation/header.svelte";
import Nav from "$lib/navigation/nav.svelte";
import InputIsland from "$lib/islands/input-island-form.svelte";
import QuickLinkIsland from "$lib/islands/quick-link-island.svelte";
import Welcome from "$lib/overlays/welcome.svelte";
import { welcome } from "$lib/stores/welcome";
import { version, showWelcome } from "$lib/stores/version";
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";
import type { LookupCardConfig } from "$lib/cards/Card.types";
import LookupCard from "$lib/cards/LookupCard.svelte";
import NearToMeCard from "$lib/cards/NearToMeCard.svelte";
import QuickLinkCard from "$lib/cards/QuickLinkCard.svelte";
const title = "OwlBoard";
const inputIslands = [
const lookupCards: LookupCardConfig[] = [
{
title: "Live Departure Boards",
action: "/ldb",
placeholder: "Enter CRS/TIPLOC",
queryName: "station",
title: "Live Arr/Dep Boards",
helpText: "",
formAction: "/ldb",
placeholder: "enter crs/tiploc",
maxLen: 7,
fieldName: "station"
},
{
title: "Train Details & PIS",
action: "/train",
placeholder: "Enter Headcode",
queryName: "headcode",
title: "Timetable & PIS",
helpText: "",
formAction: "/train",
placeholder: "enter headcode",
maxLen: 4,
fieldName: "headcode"
},
];
onMount(async () => {
const featureSupport = featureDetect();
console.log(featureSupport);
if (!featureSupport.critical) {
toast.error("Your browser is missing critical features, OwlBoard might not work properly. See `Menu > Statistics` for more information.");
} else if (!featureSupport.nice) {
@ -39,15 +38,11 @@
});
</script>
{#if showWelcome && ($welcome === "null" || !$welcome || parseInt($welcome.replace(/\./g, "")) < parseInt(version.replace(/\./g, "")))}
<Welcome />
{/if}
<Header {title} />
{#each inputIslands as variables}
<InputIsland {variables} />
{#each lookupCards as config}
<LookupCard {config} />
{/each}
<NearToMeIsland />
<QuickLinkIsland />
<NearToMeCard />
<QuickLinkCard />
<Nav />