Compare commits
3 Commits
9ad046dd9f
...
872ea9f1d6
Author | SHA1 | Date |
---|---|---|
Fred Boniface | 872ea9f1d6 | |
Fred Boniface | 284dedbb3f | |
Fred Boniface | 512c77e81c |
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -1,31 +0,0 @@
|
|||
<script lang="ts">
|
||||
import Island from "$lib/islands/island.svelte";
|
||||
|
||||
interface resultObj {
|
||||
results: boolean;
|
||||
title: string;
|
||||
resultLines: string[];
|
||||
}
|
||||
|
||||
export let resultObject: resultObj = {
|
||||
results: true,
|
||||
title: "",
|
||||
resultLines: [],
|
||||
};
|
||||
|
||||
let variables = {
|
||||
title: resultObject.title,
|
||||
};
|
||||
</script>
|
||||
|
||||
<Island {variables}>
|
||||
{#each resultObject.resultLines as line}
|
||||
<p>{line}</p>
|
||||
{/each}
|
||||
</Island>
|
||||
|
||||
<style>
|
||||
p {
|
||||
color: var(--island-text-color);
|
||||
}
|
||||
</style>
|
|
@ -1,3 +1,3 @@
|
|||
export const version: string = "2024.07.2";
|
||||
export const version: string = "2024.07.3";
|
||||
export const versionTag: string = "";
|
||||
export const showWelcome: boolean = false;
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -1,19 +1,33 @@
|
|||
<script>
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import Header from "$lib/navigation/header.svelte";
|
||||
import Nav from "$lib/navigation/nav.svelte";
|
||||
import Loading from "$lib/navigation/loading.svelte";
|
||||
import ResultIsland from "$lib/islands/result-island.svelte";
|
||||
import { getApiUrl } from "$lib/scripts/upstream";
|
||||
import Card from "$lib/cards/Card.svelte";
|
||||
import { CardConfig } from "$lib/cards/Card.types";
|
||||
import { apiGet } from "$lib/scripts/apiFetch";
|
||||
|
||||
interface ApiResponse {
|
||||
results: boolean;
|
||||
title: string;
|
||||
resultLines: string[];
|
||||
}
|
||||
const title = "Reason Codes";
|
||||
let isLoading = false;
|
||||
let inputValue = "";
|
||||
let resultObject = {
|
||||
let resultObject: ApiResponse = {
|
||||
results: false,
|
||||
title: "",
|
||||
resultLines: [],
|
||||
};
|
||||
let config: CardConfig = {
|
||||
title: "",
|
||||
showHelp: false,
|
||||
showRefresh: false,
|
||||
helpText: "",
|
||||
onRefresh: () => {},
|
||||
refreshing: false,
|
||||
}
|
||||
|
||||
function load() {
|
||||
isLoading = true;
|
||||
|
@ -26,9 +40,9 @@
|
|||
|
||||
async function getData() {
|
||||
if (inputValue) {
|
||||
const url = `${getApiUrl()}/api/v2/ref/reasonCode/${inputValue}`;
|
||||
const res = await fetch(url);
|
||||
return await res.json();
|
||||
const apiPath = `/api/v2/ref/reasonCode/${inputValue}`;
|
||||
const res = await apiGet(apiPath)
|
||||
return res
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
|
@ -47,6 +61,7 @@
|
|||
};
|
||||
}
|
||||
resultObject.resultLines = resultLines;
|
||||
config.title = resultObject.title;
|
||||
resultObject.results = true;
|
||||
}
|
||||
|
||||
|
@ -79,7 +94,11 @@
|
|||
{/if}
|
||||
|
||||
{#if resultObject.results}
|
||||
<ResultIsland {resultObject} />
|
||||
<Card {config}>
|
||||
{#each resultObject.resultLines as line}
|
||||
<p>{line}</p>
|
||||
{/each}
|
||||
</Card>
|
||||
{/if}
|
||||
|
||||
<Nav />
|
||||
|
|
Loading…
Reference in New Issue