Adjust display logic

ensure data is reloaded when tab/page becomes visible.

src/lib/components/ui/station-board/StaffServicesGrid.svelte

@@ -0,0 +1,383 @@
+<script lang="ts">
+	import type { ApiStationsBoard } from '@owlboard/owlboard-ts';
+	import { formatUkTime, estClass, delayClassFromTimePair, isRightTime } from '$lib/utils/time';
+	import { fade, slide, fly } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+
+	let { services }: { services: ApiStationsBoard.BoardService[] } = $props();
+
+	const getRowKey = (s: ApiStationsBoard.BoardService) =>
+		`${s.r}${s.sta ?? ''}${s.std ?? ''}${s.wtp ?? ''}`;
+</script>
+
+<section class="departure-board">
+	<div class="header container">
+		<div class="header row">
+			<div class="upper-header-blank"></div>
+			<div class="upper-header-text">Arr</div>
+			<div class="upper-header-text">Dep</div>
+		</div>
+		<div class="header row">
+			<div class="cell">ID</div>
+			<div class="cell">Orig</div>
+			<div class="cell">Dest</div>
+			<div class="cell">Plt</div>
+			<div class="cell">Sch</div>
+			<div class="cell">Act</div>
+			<div class="cell">Sch</div>
+			<div class="cell">Act</div>
+		</div>
+	</div>
+	<div class="services">
+		{#each services as service (getRowKey(service))}
+			{@const realArrival = formatUkTime(service.ata || service.eta)}
+			{@const realDeparture = formatUkTime(service.atd || service.etd)}
+			{@const realPass = formatUkTime(service.atp || service.etp)}
+			<div
+				class="service-block"
+				animate:flip={{ duration: 400 }}
+				transition:slide={{ duration: 300 }}
+			>
+				<div
+					class="service row"
+					class:passing={service.wtp}
+					class:nonPax={!service.ip}
+					class:cancelled={service.c}
+				>
+					<div class="cell id">{service.h}</div>
+					<div class="cell orig">
+						{#key service.og.t}
+							<div transition:fade={{ duration: 300 }}>
+								{service.og.t}
+							</div>
+						{/key}
+					</div>
+					<div class="cell dest">
+						{#key service.dt.t}<div transition:fade={{ duration: 300 }}>{service.dt.t}</div>{/key}
+					</div>
+					<div class="cell plt" class:platsup={service.ps} class:platchange={service.pc}>
+						{#key service.p}<div transition:fade={{ duration: 300 }}>{service.p || '-'}</div>{/key}
+					</div>
+					{#if service.wtp}
+						<div class="cell pass">PASS</div>
+						<div class="cell sch">
+							{formatUkTime(service.wtp)}
+						</div>
+						<div
+							class="cell act {estClass(service.atp, service.etp)} {delayClassFromTimePair(service.wtp, service.atp || service.etp)}"
+						>
+						{#if isRightTime(service.wtp, service.atp || service.etp)}
+							RT
+						{:else if service.c}
+						CANC
+						{:else}
+							{realPass}
+							{/if}
+						</div>
+					{:else}
+						<div class="cell sch">{formatUkTime(service.sta)}</div>
+						<div
+							class="cell act {estClass(service.ata, service.eta)} {delayClassFromTimePair(service.sta, service.ata || service.eta)}"
+						>
+							{#if isRightTime(service.sta, service.ata || service.eta)}
+								RT
+							{:else if service.sta && service.c} CAN {:else}
+								{realArrival}
+							{/if}
+						</div>
+						<div class="cell sch">{formatUkTime(service.std)}</div>
+						<div class="cell act {estClass(service.atd, service.etd)} {delayClassFromTimePair(service.std, service.atd || service.etd)}">
+							{#if isRightTime(service.std, service.atd || service.etd)}
+								RT
+							{:else if service.std && service.c} CANC {:else}
+								{realDeparture}
+							{/if}
+						</div>
+					{/if}
+				</div>
+				<div class="operator row">{service.o}</div>
+				{#if service?.cr?.r}
+					{#if service.c}
+						<div class="cancel-reason row" transition:slide={{ duration: 300 }}>{service.cr.r}</div>
+					{:else}
+						<div class="cancel-reason row" transition:slide={{ duration: 300 }}>
+							Part of this service has been cancelled
+						</div>
+					{/if}
+				{:else if service?.dr?.r}
+					<div class="delay-reason row" transition:slide={{ duration: 300 }}>{service.dr.r}</div>
+				{/if}
+			</div>
+		{/each}
+	</div>
+</section>
+
+<style>
+	.departure-board {
+		width: 100%;
+		max-width: 100%;
+		margin: 5px auto;
+		box-sizing: border-box;
+		overflow: hidden;
+	}
+
+	.header.container {
+		position: sticky;
+		top: 0;
+		z-index: 2;
+		background: var(--color-bg-dark);
+	}
+
+	.row.header {
+		font-weight: 875;
+	}
+	.row.header:last-child {
+		padding-bottom: 1rem;
+	}
+
+	.upper-header-blank {
+		grid-column: span 4;
+	}
+	.upper-header-text {
+		grid-column: span 2;
+		text-align: center;
+	}
+
+	.row {
+		display: grid;
+		grid-template-columns: 10% 17% 17% 9% 12% 12% 12% 11%;
+		align-items: center;
+		text-align: center;
+		gap: 0;
+		box-sizing: border-box;
+		font-family: 'Inconsolata Variable', monospace;
+		font-size: clamp(1rem, 0.475rem + 2.8vw, 1.35rem);
+		font-variant-ligatures: additional-ligatures;
+	}
+
+	.service.row.passing {
+		font-style: italic;
+		opacity: 0.25;
+		font-weight: 200;
+	}
+
+	.service.row.nonPax {
+		opacity: 0.25;
+		font-weight: 200;
+	}
+
+	.service-block {
+		width: 100%;
+		max-width: 100%;
+		padding-bottom: 7px;
+	}
+
+	.cell > div {
+		display: block;
+		width: 100%;
+	}
+
+	/* Row Logic */
+	.service.cancelled {
+		color: rgb(255, 131, 131);
+	}
+
+	/* Special Row Styles */
+	.operator.row,
+	.delay-reason.row,
+	.cancel-reason.row {
+		grid-template-columns: 1fr;
+		text-align: left;
+		font-size: 0.88rem;
+	}
+
+	.cancel-reason.row {
+		color: rgb(255, 131, 131);
+		font-weight: 400;
+		letter-spacing: -0.1ch;
+	}
+
+	.delay-reason.row {
+		color: var(--delay-orange);
+		font-weight: 400;
+		letter-spacing: -0.1ch;
+	}
+	@media (min-width: 375px) {
+		.operator.row,
+		.delay-reason.row,
+		.cancel-reason.row {
+			font-size: 1.08rem;
+		}
+	}
+	@media (min-width: 420px) {
+		.operator.row,
+		.delay-reason.row,
+		.cancel-reason.row {
+			font-size: 1.12rem;
+		}
+	}
+	@media (min-width: 550px) {
+		.operator.row,
+		.delay-reason.row,
+		.cancel-reason.row {
+			font-size: 1.18rem;
+		}
+	}
+	@media (min-width: 620px) {
+		.operator.row,
+		.delay-reason.row,
+		.cancel-reason.row {
+			font-size: 1.2rem;
+		}
+	}
+
+	.operator.row {
+		/* font-family: 'URW Gothic', sans-serif; */
+		padding: 0;
+		color: rgb(187, 187, 255);
+	}
+
+	/* Column Specifics */
+	.cell.id {
+		text-align: left;
+		font-weight: 400;
+		font-stretch: 85%;
+		filter: brightness(0.75);
+	}
+	@media (min-width: 400px) {
+		.cell.id {
+			font-stretch: 90%;
+		}
+	}
+	.cell.orig,
+	.cell.dest {
+		font-stretch: 80%;
+		font-weight: 400;
+	}
+	.cell.orig {
+		text-align: left;
+		color: var(--location-yellow);
+	}
+	.cell.dest {
+		text-align: right;
+		color: var(--location-yellow);
+	}
+	@media (min-width: 350px) {
+		.cell.orig,
+		.cell.dest {
+			font-stretch: 85%;
+		}
+		@media (min-width: 400px) {
+			.cell.orig,
+			.cell.dest {
+				font-stretch: 90%;
+			}
+		}
+		@media (min-width: 490px) {
+			.cell.orig,
+			.cell.dest {
+				font-stretch: 95%;
+			}
+		}
+		@media (min-width: 520px) {
+			.cell.orig,
+			.cell.dest {
+				font-stretch: 100%;
+			}
+			.cell.orig {
+				text-align: right;
+				padding-right: 7px;
+			}
+			.cell.dest {
+				text-align: left;
+				padding-left: 7px;
+			}
+		}
+		@media (min-width: 600px) {
+			.cell.orig,
+			.cell.dest {
+				letter-spacing: 0.05ch;
+			}
+		}
+	}
+	.cell.plt {
+		text-align: center;
+		font-weight: 410;
+		font-stretch: 100%;
+	}
+	@media (min-width: 525px) {
+		.cell.plt {
+			font-stretch: 110%;
+		}
+	}
+	.cell.plt.platsup {
+		font-weight: 150;
+	}
+	.cell.plt.platchange {
+		animation: fast-pulse 2s ease-out infinite;
+	}
+	.pass-cell {
+		text-align: center;
+		font-stretch: 100%;
+	}
+	/* Colour orig and dest values when cancelled */
+	.service-row.serviceCancelled .orig-cell,
+	.service-row.serviceCancelled .dest-cell {
+		color: rgb(255, 131, 131);
+	}
+
+	.cell.pass {
+		grid-column: span 2;
+	}
+
+	.cell.sch,
+	.cell.act {
+		text-align: center;
+		font-stretch: 72%;
+	}
+	.cell.act.delay-late {
+		color: var(--delay-orange);
+	}
+	.cell.act.delay-early {
+		color: var(--early-blue);
+	}
+	@media (min-width: 350px) {
+		.cell.sch,
+		.cell.act {
+			font-stretch: 77%;
+		}
+	}
+	@media (min-width: 400px) {
+		.cell.sch,
+		.cell.act {
+			font-stretch: 82%;
+		}
+	}
+	@media (min-width: 525px) {
+		.cell.sch,
+		.cell.act {
+			font-stretch: 90%;
+		}
+	}
+	@media (min-width: 600px) {
+		.cell.sch,
+		.cell.act {
+			font-stretch: 100%;
+		}
+	}
+	.cell.act.est {
+		font-style: italic;
+		font-weight: 300;
+		opacity: 0.5;
+	}
+
+	/* Time Types */
+	.cell.act.estimate {
+		font-style: italic;
+		opacity: 0.75;
+		font-weight: 350;
+	}
+	.cell.act.actual {
+		font-weight: 600;
+	}
+</style>

src/lib/components/ui/station-board/StaffServicesTable.svelte

@@ -126,7 +126,11 @@
 			</tr>
 
 			{#if service.o}
-				<tr class="toc-coach-row" in:fade={{ duration: 150, delay: 150 }} out:fade={{ duration: 150 }}>
+				<tr
+					class="toc-coach-row"
+					in:fade={{ duration: 150, delay: 150 }}
+					out:fade={{ duration: 150 }}
+				>
 					<td colspan="8">
 						{service.o}
 					</td>

src/lib/preferences.svelte.ts

@@ -13,7 +13,7 @@ const DEFAULT_PREFS: Preferences = {
 	NearToMe: false,
 	ShowPassingTrains: true,
 	BoardWakeLock: true,
-	AutoRefresh: true,
+	AutoRefresh: true
 };
 
 function loadPrefs(): Preferences {

src/lib/utils/time.ts

@@ -1,6 +1,6 @@
 import type { ApiTrainsTrainDetails } from '@owlboard/owlboard-ts';
 
-export const estClass = (act: any, est: any) => (act ? 'act' : 'est');
+export const estClass = (act: any, est: any) => (act ? 'actual' : 'estimate');
 
 /**
  * Converts ISO/JSON time to UK-formatted HH:MM string, with optional (default off) seconds
@@ -132,3 +132,23 @@ export function delayClassFromTimePair(sched: any, act: any): string {
 
 	return diff > 0 ? 'delay-late' : 'delay-early';
 }
+
+/**
+ * Accepts a pair of times (string or Date) and returns true if service considered 'on-time'
+ * @param sched Scheduled Time (string, Date)
+ * @param act Actual Time (string, Date)
+ */
+export function isRightTime(
+	sched: string | Date | undefined,
+	act: string | Date | undefined
+): boolean {
+	console.log(`Checking [sched: ${sched}, act: ${act}]`);
+	if (!sched || !act) return false;
+
+	const s = new Date(sched).getTime();
+	const a = new Date(act).getTime();
+
+	if (isNaN(s) || isNaN(a)) return false;
+
+	return Math.abs(a - s) < 60000;
+}

src/routes/+layout.svelte

@@ -21,7 +21,7 @@
 		IconSettings,
 		IconHelp,
 		IconDots,
-		IconSpy,
+		IconSpy
 	} from '@tabler/icons-svelte-runes';
 
 	onMount(async () => {
@@ -49,7 +49,7 @@
 		{ label: 'PIS', path: '/pis/', icon: IconDialpad },
 		{ label: 'Options', path: '/preferences/', icon: IconSettings },
 		{ label: 'About', path: '/about/', icon: IconHelp },
-		{ label: 'Privacy Policy', path: '/privacy/', icon: IconSpy },
+		{ label: 'Privacy Policy', path: '/privacy/', icon: IconSpy }
 	];
 
 	let navWidth = $state(0);

src/routes/board/+page.svelte

@@ -6,8 +6,14 @@
 
 	import { formatUkDateTime, formatUkTime } from '$lib/utils/time';
 	import StaffServicesTable from '$lib/components/ui/station-board/StaffServicesTable.svelte';
+	import StaffServicesGrid from '$lib/components/ui/station-board/StaffServicesGrid.svelte';
+
 	let { data } = $props();
 	let now = $state(new Date());
+	let dataAgeInSeconds = $derived(
+		Math.floor((now.getTime() - new Date(data.boardData.producedAt).getTime()) / 1000)
+	);
+	let live = $derived(dataAgeInSeconds < 45);
 
 	// Handle auto-refreshing & Wake-lock
 	$effect(() => {
@@ -18,9 +24,9 @@
 			if ('wakeLock' in navigator && !wakeLock) {
 				try {
 					wakeLock = await navigator.wakeLock.request('screen');
-					console.log("Wake lock obtained");
+					console.log('Wake lock obtained');
 				} catch (error) {
-					console.warn("Wake lock request rejected: ", error);
+					console.warn('Wake lock request rejected: ', error);
 				}
 			}
 		};
@@ -29,9 +35,9 @@
 			if (wakeLock) {
 				try {
 					await wakeLock.release();
-					console.log("Wake lock released");
+					console.log('Wake lock released');
 				} catch (error) {
-					console.error("Wake lock release failed: ", error);
+					console.error('Wake lock release failed: ', error);
 				}
 				wakeLock = null;
 			}
@@ -42,29 +48,30 @@
 			if (intervalId) return;
 			intervalId = window.setInterval(async () => {
 				try {
-					console.log("Invalidating data")
+					console.log('Invalidating data');
 					await invalidateAll();
 				} catch (error) {
-					console.error("Background data fetch failed: ", error)
+					console.error('Background data fetch failed: ', error);
 				}
-			}, 61000);
+			}, 20000);
-			console.log("Polling started")
+			console.log('Polling started');
 		};
 
 		const stopPolling = async () => {
 			if (intervalId) {
 				window.clearInterval(intervalId);
 				intervalId = undefined;
-				console.log("Polling ended")
+				console.log('Polling ended');
 			}
 			await releaseWakeLock();
 		};
 
-		const handleVisibilityChange = () => {
+		const handleVisibilityChange = async () => {
 			if (document.hidden) {
 				stopPolling();
 			} else {
 				startPolling();
+				await invalidateAll();
 			}
 		};
 
@@ -78,7 +85,7 @@
 			stopPolling();
 			document.removeEventListener('visibilitychange', handleVisibilityChange);
 		};
-	})
+	});
 
 	onMount(() => {
 		const interval = setInterval(() => {
@@ -110,7 +117,10 @@ $effect(() => {
 
 <section class="board-wrapper">
 	<div class="time-data">
+		<div class="loadedlive">
+			<div class="liveflash {live ? 'isLive' : 'notLive'}"></div>
 			<span class="time-loaded">Updated: {formatUkDateTime(data.boardData.producedAt, true)}</span>
+		</div>
 		<span class="time-now">{formatUkTime(now, true)}</span>
 	</div>
 	{#if data.boardData.data.m?.length}
@@ -118,7 +128,11 @@ $effect(() => {
 	{/if}
 	{#if data.boardData.data.s?.length}
 		<div class="service-list-wrapper">
-			<StaffServicesTable services={data.boardData.data.s} />
+			<StaffServicesGrid services={data.boardData.data.s} />
+		</div>
+	{:else}
+		<div class="no-service">
+		No services at this location in the next three hours
 		</div>
 	{/if}
 </section>
@@ -135,6 +149,13 @@ $effect(() => {
 		gap: 0;
 	}
 
+	.no-service {
+		display: block;
+		margin: auto;
+		max-width: 75%;
+		font-family: 'URW Gothic', sans-serif;
+	}
+
 	.time-data {
 		display: flex;
 		justify-content: space-between;
@@ -145,6 +166,56 @@ $effect(() => {
 		font-family: 'URW Gothic', sans-serif;
 	}
 
+	.loadedlive {
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		gap: 1rem;
+	}
+
+	.liveflash {
+		width: 12px;
+		height: 12px;
+		border-radius: 50%;
+		transition: all 0.3s ease;
+	}
+
+	div.notLive {
+		background-color: #ef4444;
+		animation:
+			led-blink 1s steps(1, start) infinite,
+			led-halo-expand 1s steps(1, start) infinite;
+	}
+
+	div.isLive {
+		background-color: #10b981;
+		animation: led-pulse 2.5s infinite ease-in-out;
+	}
+
+	@keyframes led-blink {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.2;
+			filter: saturate(0.2);
+		}
+	}
+	@keyframes led-pulse {
+		0%,
+		100% {
+			opacity: 1;
+			filter: saturate(1);
+			box-shadow: 0 0 6px 1px rgba(16, 185, 129, 0.4);
+		}
+		50% {
+			opacity: 0.2;
+			filter: saturate(0.2);
+			box-shadow: 0 0 2px 0px rgba(16, 185, 129, 0.1);
+		}
+	}
+
 	.time-loaded,
 	.time-now {
 		font-variant-numeric: tabular-nums;
@@ -159,6 +230,10 @@ $effect(() => {
 		font-size: 1rem;
 	}
 
+	.live-indicator {
+		margin: 0.25rem auto;
+	}
+
 	.service-list-wrapper {
 		flex: 1;
 		overflow-y: auto;

src/routes/privacy/+page.svelte

@@ -20,8 +20,8 @@
 				requested solely to send a verification code. This needs to happen, as some data is
 				restricted to rail staff only due to licensing restrictions.
 				<strong
-					>The moment the verification code is sent, the email address is permanently deleted
+					>The moment the verification code is sent, the email address is permanently deleted from
-					from the system.</strong
+					the system.</strong
 				> It is not stored, it is not logged, and it cannot be looked up later.
 			</li>
 			<li class="list-item">
@@ -42,16 +42,17 @@
 			</li>
 			<li class="list-item">
 				<strong class="highlight-text">Fuzzy Location Data:</strong> If the "Near to Me" toggle is
-				enabled, exact GPS coordinates are calculated, but never leave your device. Your device compresses the position
+				enabled, exact GPS coordinates are calculated, but never leave your device. Your device
-				into a <strong class="highlight-text">"fuzzy location block"</strong> (a geohash) roughly 1.2km
+				compresses the position into a
-				by 0.6km in size before contacting the server to request nearby stations. OwlBoard only processes
+				<strong class="highlight-text">"fuzzy location block"</strong> (a geohash) roughly 1.2km by 0.6km
-				that neighborhood block—never an exact location.
+				in size before contacting the server to request nearby stations. OwlBoard only processes that
+				neighborhood block—never an exact location.
 			</li>
 			<li class="list-item">
 				<strong class="highlight-text">Server Logs &amp; IP Addresses:</strong> Like any web application,
 				self-hosted security tools and the Web Application Firewall (WAF) temporarily process network
-				IP addresses. This is strictly for system health, infrastructure monitoring, and blocking malicious or
+				IP addresses. This is strictly for system health, infrastructure monitoring, and blocking malicious
-				automated attacks.
+				or automated attacks.
 			</li>
 		</ul>
 	</section>
@@ -89,19 +90,20 @@
 		<ul class="policy-list">
 			<li class="list-item">
 				<strong class="highlight-text">Instant SAR (Right of Access):</strong> The
-				<strong>Account</strong> dashboard contains a dedicated section displaying
+				<strong>Account</strong> dashboard contains a dedicated section displaying every single line of
-				every single line of data which can be identified with the account key block. It can be viewed or copied instantly.
+				data which can be identified with the account key block. It can be viewed or copied instantly.
 			</li>
 			<li class="list-item">
 				<strong class="highlight-text">The Right to be Forgotten (Instant Erasure):</strong> A
 				prominent <strong>"Delete Account"</strong> button is available on that same page. Clicking this
-				instantly wipes the account key.  You will be able to re-register at any time, and all of your preferences remain only on your device.
+				instantly wipes the account key. You will be able to re-register at any time, and all of your
+				preferences remain only on your device.
 			</li>
 		</ul>
 		<p class="policy-text">
 			While the pseudonymized settings left behind are not technically personal data once
-			disconnected from an identity, the OwlBoard project operates on a simple philosophy.
+			disconnected from an identity, the OwlBoard project operates on a simple philosophy. When the
-			When the delete button is pressed, the data is erased.
+			delete button is pressed, the data is erased.
 		</p>
 	</section>
 
@@ -111,8 +113,9 @@
 		<h3 class="section-heading">4. No Third-Party Conglomerates</h3>
 
 		<p class="policy-text">
-			All data is hosted transparently on isolated, self-hosted server infrastructure in Somerset. OwlBoard does
+			All data is hosted transparently on isolated, self-hosted server infrastructure in Somerset.
-			not use third-party analytics trackers, tracking cookies, or advertising networks.
+			OwlBoard does not use third-party analytics trackers, tracking cookies, or advertising
+			networks.
 		</p>
 	</section>
 </section>