Add initial train service detail to departure boards

src/lib/components/ui/TrainServiceTable.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+	import { ApiPisObject, ApiTrainsTrainDetails } from '@owlboard/api-schema-types';
+	import { formatTrainStatusMessage } from '$lib/utils/delayCancelMsg';
+	import { formatUkTime, estClass, calculateDelay } from '$lib/utils/time';
+
+	interface props {
+		trainDetail: ApiTrainsTrainDetails.TrainDetailsResponse;
+	}
+
+	let { trainDetail }: props = $props();
+
+	let pisData = $derived(
+		trainDetail.pis ? (trainDetail.pis as unknown as ApiPisObject.PisObjects) : undefined
+	);
+
+	const activityMap: Record<string, string> = {
+		'-D': 'Vehicles detatched',
+		'-T': 'Vehicles attached & detached',
+		'-U': 'Vehicles attached',
+		AE: 'Assist locomotive attached',
+		C: 'Traincrew change only',
+		D: 'Set down only',
+		E: 'Stops for examination',
+		K: 'Passenger count point',
+		KC: 'Ticket collection point',
+		KE: 'Ticket examination point',
+		KF: 'First class ticket examination point',
+		KS: 'Selective ticket examination point',
+		L: 'Locomotive changed',
+		N: 'Unadvertised stop',
+		OP: 'Operational stop only',
+		OR: 'Locomotive attached on rear',
+		R: 'Request stop',
+		RM: 'Train changes direction',
+		RR: 'Locomotive run round',
+		S: 'Staff only stop',
+		TW: 'Stops for token/staff/tablet',
+		U: 'Pick up only',
+		W: 'Watering coaches',
+		X: 'Passes another train'
+	};
+
+	const activityRegex = new RegExp(
+		Object.keys(activityMap)
+			.sort((a, b) => b.length - a.length) // Longest codes first
+			.map((key) => key.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')) // Escape special chars
+			.join('|'),
+		'g'
+	);
+
+	const getRelevantActivities = (act: string) => {
+		if (!act) return [];
+
+		// Find all matches in the string
+		const matches = act.match(activityRegex) || [];
+
+		// Map to labels and remove duplicates
+		return [...new Set(matches)].map((code) => activityMap[code]);
+	};
+</script>
+
+<div class="trainServiceContainer">
+	{#if trainDetail.header.cr}
+		<span class="cancelReason"
+			>{formatTrainStatusMessage(
+				trainDetail.header.cr,
+				trainDetail.header.cl,
+				trainDetail.header.cn
+			)}</span
+		>
+	{/if}
+	{#if trainDetail.header.dr}
+		<span class="delayReason"
+			>{formatTrainStatusMessage(
+				trainDetail.header.dr,
+				trainDetail.header.dl,
+				trainDetail.header.dn
+			)}</span
+		>
+	{/if}
+	{#if pisData}
+		<div class="pisData">
+			<span class="pisCode">PIS: {pisData.code}</span>
+			{#if pisData.skip?.skip}
+				<span class="pis-skip">
+					(skip {pisData.skip.position === 'head' ? 'first' : 'last'}
+					{pisData.skip.skip}
+					{pisData.skip.skip === 1 ? 'stop' : 'stops'}
+					)
+				</span>
+			{/if}
+		</div>
+	{/if}
+
+	<div class="tableContainer">
+		<table class="table">
+			<thead>
+				<tr>
+					<th colspan="2"></th>
+					<th colspan="2">Arr</th>
+					<th colspan="2">Dep</th>
+				</tr>
+				<tr>
+					<th>Location</th>
+					<th>Plat</th>
+					<th>Sch</th>
+					<th>Act</th>
+					<th>Sch</th>
+					<th>Act</th>
+					<th></th>
+				</tr>
+			</thead>
+			{#each trainDetail.locations as loc}
+				<tbody class="LocGroup">
+					<tr class:pass={loc.r === 'PASS'} class:canc={loc.can}>
+						<td class="tpl" class:stop={loc.r !== 'PASS'}>
+							{loc.t}
+						</td>
+						<td class="plat" class:platchange={loc.pc}>
+							{loc.p}
+						</td>
+						{#if loc.r === 'PASS'}
+							<td colspan="2">Pass</td>
+							<td>{formatUkTime(loc.wtp)}</td>
+							<td>{formatUkTime(loc.atp || loc.etp || '--')}</td>
+						{:else}
+							<td>{formatUkTime(loc.pta || loc.wta)}</td>
+							<td>{formatUkTime(loc.ata || loc.eta || '--')}</td>
+							<td>{formatUkTime(loc.ptd || loc.wtd)}</td>
+							<td>{formatUkTime(loc.atd || loc.etd || '--')}</td>
+						{/if}
+						{#if loc}
+							{@const delay = calculateDelay(loc)}
+							<td class="delay-{delay.type}">{delay.val}</td>
+						{/if}
+					</tr>
+					{#if loc.act && getRelevantActivities(loc.act).length > 0}
+						<tr class="activity-row">
+							<td colspan="7">
+								<div class="activity-container">
+									{#each getRelevantActivities(loc.act) as note}
+										<span class="activity-tag">{note}</span>
+									{/each}
+								</div>
+							</td>
+						</tr>
+					{/if}
+				</tbody>
+			{/each}
+		</table>
+	</div>
+</div>

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

@@ -0,0 +1,194 @@
+<script lang="ts">
+	import { IconX } from '@tabler/icons-svelte-runes';
+	import { OwlClient } from '$lib/owlClient';
+	import { ApiTrainsTrainDetails } from '@owlboard/api-schema-types';
+	import TrainServiceTable from '../TrainServiceTable.svelte';
+
+	interface Props {
+		rid: string;
+		isOpen: boolean;
+		onClose: () => void;
+	}
+
+	let { rid, isOpen, onClose }: Props = $props();
+
+	let dialogElement = $state<HTMLDialogElement | null>(null);
+
+	let trainDetail = $state<ApiTrainsTrainDetails.TrainDetailsResponse | null>(null);
+	let loading = $state(true);
+	let error = $state<string | null>(null);
+
+	$effect(() => {
+		if (isOpen && rid) {
+			loadTrainDetails(rid);
+		}
+	});
+
+	$effect(() => {
+		if (!dialogElement) return;
+
+		if (isOpen && !dialogElement.open) {
+			dialogElement.showModal();
+			loadTrainDetails(rid);
+		} else if (!isOpen && dialogElement.open) {
+			dialogElement.close();
+		}
+	});
+
+	async function loadTrainDetails(rid: string) {
+		loading = true;
+		error = null;
+		try {
+			const result = await OwlClient.trains.getByRid(rid);
+			trainDetail = result.data;
+		} catch (err: any) {
+			error = err.message || 'An error occurred fetching train details.';
+		} finally {
+			loading = false;
+		}
+	}
+</script>
+
+<dialog
+	bind:this={dialogElement}
+	onclose={onClose}
+	onclick={(e) => {
+		// Optional: close when clicking the native backdrop area outside the modal box
+		const rect = dialogElement?.getBoundingClientRect();
+		if (
+			rect &&
+			(e.clientX < rect.left ||
+				e.clientX > rect.right ||
+				e.clientY < rect.top ||
+				e.clientY > rect.bottom)
+		) {
+			onClose();
+		}
+	}}
+>
+	<div class="modal-content">
+		<button class="close-btn" onclick={onClose} aria-label="Close modal">
+			<IconX size={20} />
+		</button>
+
+		<div class="trainServiceModalWrapper">
+			{#if loading}
+				<div class="loading-state">Loading train details...</div>
+			{:else if error}
+				<div class="error-state">Error: {error}</div>
+			{:else if trainDetail}
+				<div class="scrollable-table-container">
+					<TrainServiceTable {trainDetail} />
+				</div>
+			{/if}
+		</div>
+	</div>
+</dialog>
+
+<style>
+	dialog {
+		background: var(--modal-bg, #1e1e1e);
+		color: var(--modal-text, #fff);
+		border: none;
+		border-radius: 12px;
+		width: 90%;
+		max-width: 400px;
+		padding: 1.5rem;
+		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+
+		opacity: 0;
+		transform: scale(0.8);
+		transition:
+			opacity 0.3s ease,
+			transform 0.5s ease,
+			overlay 0.5s ease allow-discrete,
+			display 0.5s ease allow-discrete;
+	}
+
+	dialog[open] {
+		opacity: 1;
+		transform: scale(1);
+	}
+
+	@starting-style {
+		dialog[open] {
+			opacity: 0;
+			transform: scale(0.8);
+		}
+	}
+
+	dialog::backdrop {
+		background: rgba(0, 0, 0, 0);
+		backdrop-filter: blur(0px);
+		transition:
+			background 1.15s ease,
+			backdrop-filter 1.15s ease,
+			overlay 1.15s ease allow-discrete,
+			display 1.15s ease allow-discrete;
+	}
+
+	dialog[open]::backdrop {
+		background: rgba(0, 0, 0, 0.6);
+		backdrop-filter: blur(2px);
+	}
+
+	@starting-style {
+		dialog[open]::backdrop {
+			background: rgba(0, 0, 0, 0);
+			backdrop-filter: blur(0px);
+		}
+	}
+
+	.modal-content {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.close-btn {
+		position: absolute;
+		top: 0;
+		right: 0;
+		background: transparent;
+		border: none;
+		color: inherit;
+		cursor: pointer;
+		padding: 0.5rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 50%;
+		transition: background 0.2s;
+	}
+
+	.close-btn:hover {
+		background: rgba(255, 255, 255, 0.1);
+	}
+
+	.trainServiceModalWrapper {
+		height: 75vh;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		margin-top: 1.5rem;
+	}
+
+	.scrollable-table-container {
+		width: 100%;
+		overflow-y: auto;
+	}
+
+	.loading-state,
+	.error-state {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex: 1;
+		width: 100%;
+		font-weight: 500;
+	}
+
+	.error-state {
+		color: var(--error-color, #ff6b6b);
+	}
+</style>

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

@@ -4,12 +4,26 @@
 	import { fade, slide, fly } from 'svelte/transition';
 	import { flip } from 'svelte/animate';
 
+	import ServiceDetailModal from './ServiceDetailModal.svelte';
+	let isModalOpen = $state(false);
+	let selectedRid = $state('');
+	function handleOpenTrainDetails(rid: string) {
+		selectedRid = rid;
+		isModalOpen = true;
+	}
+	function handleCloseModal() {
+		isModalOpen = false;
+	}
+
 	let { services }: { services: ApiStationsBoard.BoardService[] } = $props();
 
 	const getRowKey = (s: ApiStationsBoard.BoardService) =>
 		`${s.r}${s.sta ?? ''}${s.std ?? ''}${s.wtp ?? ''}`;
 </script>
 
+<!-- Train Detail Modal -->
+<ServiceDetailModal rid={selectedRid} isOpen={isModalOpen} onClose={handleCloseModal} />
+
 <section class="departure-board">
 	<div class="header container">
 		<div class="header row">
@@ -45,14 +59,38 @@
 					class:cancelled={service.c}
 				>
 					<div class="cell id">{service.h}</div>
-					<div class="cell orig">
+					<div
+						class="cell orig"
+						role="button"
+						tabindex="0"
+						aria-label="View details for train {service.r}"
+						onclick={() => handleOpenTrainDetails(service.r)}
+						onkeydown={(e) => {
+							if (e.key === 'Enter' || e.key === ' ') {
+								e.preventDefault();
+								handleOpenTrainDetails(service.r);
+							}
+						}}
+					>
 						{#key service.og.t}
 							<div transition:fade={{ duration: 300 }}>
 								{service.og.t}
 							</div>
 						{/key}
 					</div>
-					<div class="cell dest">
+					<div
+						class="cell dest"
+						role="button"
+						tabindex="0"
+						aria-label="View details for train {service.r}"
+						onclick={() => handleOpenTrainDetails(service.r)}
+						onkeydown={(e) => {
+							if (e.key === 'Enter' || e.key === ' ') {
+								e.preventDefault();
+								handleOpenTrainDetails(service.r);
+							}
+						}}
+					>
 						{#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}>
@@ -64,7 +102,10 @@
 							{formatUkTime(service.wtp)}
 						</div>
 						<div
-							class="cell act {estClass(service.atp, service.etp)} {delayClassFromTimePair(service.wtp, service.atp || service.etp)}"
+							class="cell act {estClass(service.atp, service.etp)} {delayClassFromTimePair(
+								service.wtp,
+								service.atp || service.etp
+							)}"
 						>
 							{#if isRightTime(service.wtp, service.atp || service.etp)}
 								RT
@@ -77,19 +118,31 @@
 					{: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)}"
+							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} CANC {:else}
+							{:else if service.sta && service.c}
+								CANC
+							{: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)}">
+						<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}
+							{:else if service.std && service.c}
+								CANC
+							{:else}
 								{realDeparture}
 							{/if}
 						</div>
@@ -263,6 +316,7 @@
 	.cell.dest {
 		font-stretch: 80%;
 		font-weight: 400;
+		cursor: pointer;
 	}
 	.cell.orig {
 		text-align: left;

src/lib/utils/delayCancelMsg.ts

@@ -0,0 +1,17 @@
+export function formatTrainStatusMessage(
+	reason: string | undefined,
+	location: string | undefined,
+	near: boolean | undefined
+) {
+	let output = '';
+	if (reason) {
+		output += reason.trim();
+	}
+
+	if (location) {
+		const preposition = near ? 'near' : 'at';
+		output += ` ${preposition} ${location}`;
+	}
+
+	return output.trim();
+}

src/routes/board/+page.svelte

@@ -126,9 +126,7 @@
 			<StaffServicesGrid services={data.boardData.data.s} />
 		</div>
 	{:else}
-		<div class="no-service">
-		No services at this location in the next three hours
-		</div>
+		<div class="no-service">No services at this location in the next three hours</div>
 	{/if}
 </section>