Update and implement TimeBar, needs testing with NRCC messages present.

This commit is contained in:
Fred Boniface 2024-07-12 12:20:36 +01:00
parent 6f800dab67
commit 7f1dc1ac3f
7 changed files with 24 additions and 41 deletions

View File

@ -3,8 +3,8 @@
<style>
#banner {
width: 200px;
background: red;
color: #fff;
background: rgba(255, 0, 0,0.5);
color: #ffffff7a;
position: fixed;
text-align: center;
top: 25px;

View File

@ -35,8 +35,8 @@
width: 85%;
max-width: 400px;
margin: auto;
margin-top: 20px;
margin-bottom: 10px;
margin-top: 10px;
margin-bottom: 20px;
padding: 10px 5px 5px 5px;
background-color: var(--island-bg-color);
border-radius: 10px;

View File

@ -6,6 +6,7 @@
import TrainDetail from "./train-detail.svelte";
import { fetchStaffLdb } from "./fetch";
import AlertBar from "../nrcc/alert-bar.svelte";
import TimeBar from "$lib/navigation/TimeBar.svelte";
export let station: string;
export let title: string | undefined = "Loading...";
@ -56,9 +57,14 @@
{/key}
{#await callFetch(station)}
<TimeBar updatedTime={undefined} />
<Loading />
{:then data}
{#if data}
{#if nrcc.length}
<AlertBar alerts={nrcc} />
{/if}
<TimeBar updatedTime={new Date(data.generatedAt)} />
<p class="generatedTime" style="margin-top: {generatedMarginTop};">Updated: {new Date(data.generatedAt).toLocaleTimeString()}</p>
{#if data.trainServices?.length}
<TableGenerator services={data.trainServices} click={showDetail} />
@ -73,12 +79,9 @@
<span class="table-head-text">Ferry Services</span>
<TableGenerator services={data.ferryServices} click={showDetail} />
{/if}
{#if nrcc.length}
<AlertBar alerts={nrcc} />
{/if}
<!-- NRCC Alerts are not available -->
{/if}
{:catch}
<TimeBar updatedTime={new Date} />
<h2>Error</h2>
<p>ERR-CODE: {errorDetail.code}</p>
<p>Message:<br />{errorDetail.message}</p>

View File

@ -1,7 +1,7 @@
<script lang="ts">
import { onMount } from "svelte";
export let updatedTime: Date = new Date();
export let updatedTime: Date | undefined;
let currentTime: string = "00:00:00"
function updateTime() {
@ -20,14 +20,18 @@ onMount(() => {
</script>
<div id="TimeBar">
{#if updatedTime}
<span class="updated-time">Updated: {updatedTime.toLocaleTimeString()}</span>
{:else}
<span></span>
{/if}
<span class="current-time">{currentTime}</span>
</div>
<style>
#TimeBar {
width: 100%;
background-color: black;
background-color: transparent;
height: 30px;
display: flex;
justify-content: space-between;
@ -37,12 +41,14 @@ onMount(() => {
.updated-time {
font-family: firamono, 'Courier New', Courier, monospace;
margin-left: 10px;
font-size: 14px;
}
.current-time {
font-family: firamono, 'Courier New', Courier, monospace;
font-weight: 900;
vertical-align: middle;
color: orange;
color: aliceblue;
margin-right: 10px;
font-size: 17px;
}
</style>

View File

@ -8,22 +8,7 @@
];
import { page } from "$app/stores";
import { IconHome } from "@tabler/icons-svelte";
import { onMount } from "svelte";
let currentTime: string = "00:00:00"
function updateTime() {
const now = new Date();
const hours = now.getHours().toString().padStart(2, '0');
const mins = now.getMinutes().toString().padStart(2, '0');
const secs = now.getSeconds().toString().padStart(2, '0');
currentTime = `${hours}:${mins}:${secs}`
}
onMount(() => {
updateTime();
const interval = setInterval(updateTime, 1000);
return () => clearInterval(interval);
})
</script>
<footer>
@ -42,7 +27,6 @@
<img id="nre-logo" src="/images/nre/nre-powered_200w.png" alt="Data sourced from National Rail and others" />
</picture>
</a>
<span class="clock">{currentTime}</span>
</div>
</footer>
@ -107,12 +91,4 @@
margin-bottom: 3px;
padding: 0;
}
.clock {
color: black;
font-size: 10px;
position: absolute;
bottom: 2px;
right: 10px;
}
</style>

View File

@ -30,7 +30,7 @@
}
</script>
<Header title={"Test"} />
<TimeBar />
<TimeBar updatedTime={new Date} />
<LookupCard config={LookupConfig} />
<LookupCard config={TimetableConfig} />
<NearToMeCard />

View File

@ -9,6 +9,7 @@
import TrainDetail from "$lib/train/train-detail.svelte";
import { getApiUrl } from "$lib/scripts/upstream";
import toast from "svelte-french-toast";
import TimeBar from "$lib/navigation/TimeBar.svelte";
let title = "Timetable Results";
let id = "";
@ -79,7 +80,7 @@
</script>
<Header {title} />
<div id="whitespace" />
<TimeBar updatedTime={undefined} />
{#if error}
<Island>
@ -100,9 +101,6 @@
<Nav />
<style>
#whitespace {
height: 15px;
}
p {
color: white;
font-size: 18px;