Compare commits
6 Commits
ba09910ff3
...
9ad046dd9f
Author | SHA1 | Date |
---|---|---|
Fred Boniface | 9ad046dd9f | |
Fred Boniface | 91d523e372 | |
Fred Boniface | b48795563f | |
Fred Boniface | bf28984b80 | |
Fred Boniface | 38ceb1aadd | |
Fred Boniface | eaa8c192a2 |
|
@ -0,0 +1,34 @@
|
||||||
|
<script lang="ts">
|
||||||
|
export let link: string;
|
||||||
|
export let text: string;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<a class="link-button" href="{link}">{text}</a>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.link-button {
|
||||||
|
color: aliceblue;
|
||||||
|
border: none;
|
||||||
|
border-radius: 20px;
|
||||||
|
text-decoration: none;
|
||||||
|
margin: 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;
|
||||||
|
min-width: 40px;
|
||||||
|
height: 25px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
box-shadow: var(--box-shadow);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-button:hover {
|
||||||
|
box-shadow: var(--box-shadow-dark);
|
||||||
|
background-color: rgb(45,45,45);
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,36 @@
|
||||||
|
<script lang="ts">
|
||||||
|
export let fn = () => {};
|
||||||
|
export let text: string;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button class="script-button" on:click={fn} on:keypress={fn}>{text}</button>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.script-button {
|
||||||
|
color: aliceblue;
|
||||||
|
border: none;
|
||||||
|
border-radius: 20px;
|
||||||
|
text-decoration: none;
|
||||||
|
margin: auto;
|
||||||
|
font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
background-color: var(--island-button-color);
|
||||||
|
padding: 20px 20px;
|
||||||
|
min-width: 40px;
|
||||||
|
height: 35px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
box-shadow: var(--box-shadow);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.script-button:hover {
|
||||||
|
box-shadow: var(--box-shadow-dark);
|
||||||
|
background-color: rgb(45,45,45);
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -10,6 +10,8 @@
|
||||||
import { apiGet } from "$lib/scripts/apiFetch";
|
import { apiGet } from "$lib/scripts/apiFetch";
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
import { nearToMeCache } from "$lib/stores/nearToMeCache";
|
import { nearToMeCache } from "$lib/stores/nearToMeCache";
|
||||||
|
import LinkButton from "$lib/buttons/LinkButton.svelte";
|
||||||
|
import ScriptButton from "$lib/buttons/ScriptButton.svelte";
|
||||||
|
|
||||||
let errorMessage: string;
|
let errorMessage: string;
|
||||||
let stations: NearestStationResponse[] = [];
|
let stations: NearestStationResponse[] = [];
|
||||||
|
@ -61,7 +63,7 @@
|
||||||
|
|
||||||
<Card {config}>
|
<Card {config}>
|
||||||
{#if !$uuid || $uuid === "null"}
|
{#if !$uuid || $uuid === "null"}
|
||||||
<p><a href="/more/reg">Register to use this feature</a></p>
|
<LinkButton text="Register to use this feature" link="/more/reg" />
|
||||||
{:else if $location}
|
{:else if $location}
|
||||||
{#if !stations.length}
|
{#if !stations.length}
|
||||||
{#if errorMessage}
|
{#if errorMessage}
|
||||||
|
@ -72,39 +74,16 @@
|
||||||
{:else}
|
{:else}
|
||||||
<div id="buttons">
|
<div id="buttons">
|
||||||
{#each stations as station}
|
{#each stations as station}
|
||||||
<a class="link" href="/ldb?station={station['3ALPHA']}">{station.NLCDESC} - {station.miles}mi</a>
|
<LinkButton text={`${station.NLCDESC} - ${station.miles}mi`} link={`/ldb?station=${station["3ALPHA"]}`} />
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{:else}
|
{:else}
|
||||||
<p><button on:click={turnOnLocation}>Turn on Location</button></p>
|
<ScriptButton text={"Turn on Location"} fn={turnOnLocation} />
|
||||||
{/if}
|
{/if}
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
a,
|
|
||||||
button {
|
|
||||||
color: aliceblue;
|
|
||||||
text-decoration: none;
|
|
||||||
margin: auto;
|
|
||||||
padding: 5px 10px;
|
|
||||||
background-color: var(--island-button-color);
|
|
||||||
border: none;
|
|
||||||
border-radius: 20px;
|
|
||||||
box-shadow: var(--box-shadow);
|
|
||||||
font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 400;
|
|
||||||
white-space: nowrap;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover,
|
|
||||||
button:hover {
|
|
||||||
background-color: rgb(45, 45, 45);
|
|
||||||
box-shadow: var(--box-shadow-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
#buttons {
|
#buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
@ -114,9 +93,9 @@
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
}
|
}
|
||||||
.link {
|
|
||||||
display: inline-flex;
|
p {
|
||||||
margin: 5px;
|
text-align: center;
|
||||||
padding: 5px 10px;
|
margin: auto;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -0,0 +1,43 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import Card from "./Card.svelte";
|
||||||
|
import type { CardConfig } from "./Card.types";
|
||||||
|
import { ql } from "$lib/stores/quick-links";
|
||||||
|
import LinkButton from "$lib/buttons/LinkButton.svelte";
|
||||||
|
|
||||||
|
let upstreamProps: CardConfig = {
|
||||||
|
title: "Quick Links",
|
||||||
|
showHelp: false,
|
||||||
|
showRefresh: false,
|
||||||
|
helpText: "",
|
||||||
|
onRefresh: () => {},
|
||||||
|
refreshing: false,
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Card config={upstreamProps}>
|
||||||
|
{#if !$ql.length}
|
||||||
|
<p>Go to <a href="/more/settings">Settings</a> to add your quick links</p>
|
||||||
|
{:else}
|
||||||
|
<div class="quick-links">
|
||||||
|
{#each $ql as link}
|
||||||
|
{#if link.length === 3}
|
||||||
|
<LinkButton text={link.toUpperCase()} link={`/ldb?station=${link.toLowerCase()}`} />
|
||||||
|
{:else if link.length === 4}
|
||||||
|
<LinkButton text={link.toUpperCase()} link={`/train?headcode=${link.toLowerCase()}`} />
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.quick-links {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 90%;
|
||||||
|
margin: auto;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -41,6 +41,12 @@
|
||||||
errorDetail.message = data.obMsg || "An unknown error occoured";
|
errorDetail.message = data.obMsg || "An unknown error occoured";
|
||||||
throw new Error("Unable to Fetch Data");
|
throw new Error("Unable to Fetch Data");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Add additional margin if AlertBox is displayed
|
||||||
|
let generatedMarginTop = "10px";
|
||||||
|
$: if (nrcc.length) {
|
||||||
|
generatedMarginTop = "50px";
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#key detail}
|
{#key detail}
|
||||||
|
@ -53,7 +59,7 @@
|
||||||
<Loading />
|
<Loading />
|
||||||
{:then data}
|
{:then data}
|
||||||
{#if data}
|
{#if data}
|
||||||
<p class="generatedTime">Updated: {new Date(data.generatedAt).toLocaleTimeString()}</p>
|
<p class="generatedTime" style="margin-top: {generatedMarginTop};">Updated: {new Date(data.generatedAt).toLocaleTimeString()}</p>
|
||||||
{#if data.trainServices?.length}
|
{#if data.trainServices?.length}
|
||||||
<TableGenerator services={data.trainServices} click={showDetail} />
|
<TableGenerator services={data.trainServices} click={showDetail} />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
import type { LookupCardConfig } from "$lib/cards/Card.types";
|
import type { LookupCardConfig } from "$lib/cards/Card.types";
|
||||||
import LookupCard from "$lib/cards/LookupCard.svelte";
|
import LookupCard from "$lib/cards/LookupCard.svelte";
|
||||||
import NearToMeCard from "$lib/cards/NearToMeCard.svelte";
|
import NearToMeCard from "$lib/cards/NearToMeCard.svelte";
|
||||||
|
import QuickLinkCard from "$lib/cards/QuickLinkCard.svelte";
|
||||||
|
|
||||||
let LookupConfig: LookupCardConfig = {
|
let LookupConfig: LookupCardConfig = {
|
||||||
title: "Live Arr/Dep Boards",
|
title: "Live Arr/Dep Boards",
|
||||||
|
@ -29,3 +30,4 @@
|
||||||
<LookupCard config={LookupConfig} />
|
<LookupCard config={LookupConfig} />
|
||||||
<LookupCard config={TimetableConfig} />
|
<LookupCard config={TimetableConfig} />
|
||||||
<NearToMeCard />
|
<NearToMeCard />
|
||||||
|
<QuickLinkCard />
|
||||||
|
|
Loading…
Reference in New Issue