Update table display on board page, in preparation for offering different 'table' styles.

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { ApiStationsBoard } from '@owlboard/owlboard-ts';
-    import { formatUkTime, estClass, calculateDelay } from '$lib/utils/time';
+    import { formatUkTime, estClass, delayClassFromTimePair } from '$lib/utils/time';
 
 	let { services }: { services: ApiStationsBoard.BoardService[] } = $props();
 
@@ -8,14 +8,12 @@
 		`${s.r}${s.sta ?? ''}${s.std ?? ''}${s.wtp ?? ''}`;
 </script>
 
-<div class="table-container">
 	<table class="departure-board">
 		<thead>
             <tr>
                 <th colspan="4" aria-hidden="true"></th>
                 <th scope="colgroup" colspan="2" class="upper-head"><abbr title="Arrival">Arr</abbr></th>
                 <th scope="colgroup" colspan="2" class="upper-head"><abbr title="Departure">Dep</abbr></th>
-                <th aria-hidden="true"></th>
             </tr>
 			<tr>
 				<th scope="col"><abbr title="Headcode">ID</abbr></th>
@@ -26,13 +24,12 @@
 				<th scope="col"><abbr title="Actual/Expected">Act</abbr></th>
                 <th scope="col"><abbr title="Scheduled">Sch</abbr></th>
 				<th scope="col"><abbr title="Actual/Expected">Act</abbr></th>
-                <th scope="col"><abbr title="+/- Time">+/-</abbr></th>
 			</tr>
 		</thead>
 
         {#each services as service (getRowKey(service))}
             <tbody>
-                <tr class="service-row" class:serviceCancelled={service.c}>
+                <tr class="service-row" class:serviceCancelled={service.c} class:servicePass={service.wtp}>
                     <td class="id-cell">{service.h}</td>
                     <td class="orig-cell">{service.og.t}</td>
                     <td class="dest-cell">{service.dt.t}</td>
@@ -40,46 +37,67 @@
 
                     <!-- Handle different display for a passing train -->
                     {#if service.wtp}
-                      <td colspan="2">Pass</td>
+                      <td class="pass-cell" colspan="2">Pass</td>
                       <td class="time-cell">{formatUkTime(service.wtp)}</td>
-                      <td class="time-cell {estClass(service.atp, service.etp)}">{formatUkTime(service.atp || service.etp)}</td>
+                      <td class="time-cell {estClass(service.atp, service.etp)} {delayClassFromTimePair(service.wtp, service.atp || service.etp)}">{formatUkTime(service.atp || service.etp)}</td>
                     {:else}
                       <td class="time-cell">{formatUkTime(service.sta)}</td>
-                      <td class="time-cell {estClass(service.ata, service.eta)}">{formatUkTime(service.ata || service.eta)}</td>
+                      <td class="time-cell {estClass(service.ata, service.eta)} {delayClassFromTimePair(service.sta, service.ata || service.eta)}">{formatUkTime(service.ata || service.eta)}</td>
                       <td class="time-cell">{formatUkTime(service.std)}</td>
-                      <td class="time-cell {estClass(service.atd, service.etd)}">{formatUkTime(service.atd || service.etd)}</td>
+                      <td class="time-cell {estClass(service.atd, service.etd)} {delayClassFromTimePair(service.std, service.atd || service.etd)}">{formatUkTime(service.atd || service.etd)}</td>
                     {/if}
-
-                        {#if service}
-                            {@const delay = calculateDelay(service)}
-							<td class="delay-cell delay-{delay.type}">{delay.val}</td>
-                        {/if}
                 </tr>
 
                 {#if service.c && service.cr?.r}
                 <tr>
-                    <td colspan="9">{service.cr.r}</td>
+                    <td aria-hidden="true"></td>
+                    <td colspan="8">
+                        {service.cr.r}
+                        {#if service.cr.l}
+                            {service.cr.n ? "near" : "at"}
+                            {service.cr.l}
+                        {/if}
+                    </td>
+                </tr>
+                {/if}
+                {#if service.dr?.r}
+                <tr>
+                    <td aria-hidden="true"></td>
+                    <td colspan="8">
+                        {service.dr.r}
+                        {#if service.dr.l}
+                            {service.dr.n ? "near" : "at"}
+                            {service.dr.l}
+                        {/if}
+                    </td>
                 </tr>
                 {/if}
             </tbody>
         {/each}
 
 	</table>
-</div>
 
 <style>
-    .table-container {
-        width: 100%;
-    }
     .departure-board {
         width: 100%;
         margin: 0 auto;
         font-family: 'URW Gothic', sans-serif;
         font-variant-numeric: tabular-nums;
+        border-collapse: collapse;
+    }
+    thead {
+        position: sticky;
+        top: 0;
+        z-index: 2;
+        background: var(--color-bg-dark);
     }
     .serviceCancelled {
         text-decoration: line-through;
     }
+    .servicePass {
+        font-style: italic;
+        opacity: 0.5;
+    }
     .id-cell{
         font-family:'Courier New', Courier, monospace;
         text-align: center;
@@ -102,16 +120,29 @@
     .platSup {
         filter: opacity(0.5);
     }
+    .pass-cell {
+        text-align: center;
+    }
     .time-cell {
         text-align: center;
     }
+    .est {
+        font-style: oblique;
+        opacity: 0.75;
+    }
+    .act {
+        font-weight: 600;
+        color: green;
+    }
     .delay-cell {
         text-align: center;
     }
     .delay-late {
         color: var(--delay-orange);
+        animation: 2s fast-pulse ease-in-out infinite;
     }
     .delay-early {
         color: var(--early-blue);
+        animation: 2s fast-pulse ease-in-out infinite;
     }
 </style>

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

@@ -41,7 +41,7 @@
 
 <style>
 	.alert-card {
-		margin: 1rem 0;
+		margin: 0;
 		border-radius: 8px;
 		background: transparent;
 		position: relative;

src/lib/global.css

@@ -130,6 +130,10 @@
 	font-display: swap;
 }
 :root {
+	/* Fixed Heights */
+	--header-height: 80px;
+	--nav-height: 60px;
+
 	/* Brand Colours */
 	--color-brand: #4fd1d1;
 	--color-accent: #3c6f79;

src/lib/utils/time.ts

@@ -102,3 +102,27 @@ export function calculateDelay(loc: DelayInput): {
 		return { val: `${absDiff}E`, type: 'early' };
 	}
 }
+
+/**
+ * Accepts a pair of times (string or Date) and outputs a delay class 'delay-early', 'delay-late' or 'delay-rt'
+ * @param sched Scheduled Time (string, Date)
+ * @param act Actual Time (string, Date)
+ */
+export function delayClassFromTimePair(sched: any, act: any): string {
+    if (!sched || !act) return '';
+
+    const s = new Date(sched).getTime();
+    const a = new Date(act).getTime();
+
+    if (isNaN(s) || isNaN(a)) return '';
+
+    const diff = a - s;
+    const oneMinute = 60000;
+
+    // on-time if within one minute
+    if (Math.abs(diff) < oneMinute) {
+        return 'delay-rt';
+    }
+
+    return diff > 0 ? 'delay-late' : 'delay-early';
+}

src/routes/+layout.svelte

@@ -154,7 +154,7 @@
 <style>
 	header {
 		top: 0;
-		height: 80px;
+		height: var(--header-height);
 		box-shadow: var(--shadow-std);
 	}
 	.logo-link {
@@ -201,13 +201,12 @@
 		min-height: 100dvh;
 		box-sizing: border-box;
 		background-color: var(--color-bg-dark);
-		background-image: radial-gradient(var(--color-bg-dark), var(--color-bg-light));
 	}
 
 	nav {
 		display: flex;
 		bottom: 0;
-		height: 60px;
+		height: var(--nav-height);
 		box-shadow: var(--shadow-up);
 	}
 

src/routes/board/+page.svelte

@@ -36,26 +36,29 @@
 </script>
 
 <section class="board-wrapper">
-	{#if data.boardData.data.m?.length}
-		<StationAlertCard messages={data.boardData.data.m} />
-	{/if}
 	<div class="time-data">
 		<span class="time-loaded">Updated: {formatUkDateTime(data.boardData.producedAt, true)}</span>
 		<span class="time-now">{formatUkTime(now, true)}</span>
 	</div>
-	{#if data.boardData.data.s?.length}
+	{#if data.boardData.data.m?.length}
-	<StaffServicesTable services={data.boardData.data.s} />
+		<StationAlertCard messages={data.boardData.data.m} />
+	{/if}
+	{#if data.boardData.data.s?.length}
+	<div class="service-list-wrapper">
+		<StaffServicesTable services={data.boardData.data.s} />
+	</div>
 	{/if}
-	<pre class="json-dump">{JSON.stringify(data.boardData.data.s, null, 2)}</pre>
 </section>
 
 <style>
 	.board-wrapper {
 		display: flex;
+		height: calc(100dvh - var(--nav-height) - var(--header-height));
 		flex-direction: column;
 		align-items: center;
 		width: 100%;
 		margin: 0 auto;
+		overflow: hidden;
 		gap: 0;
 	}
 
@@ -82,21 +85,12 @@
 		font-weight: 600;
 		font-size: 1rem;
 	}
-	pre {
+
-		max-width: 100%;
+	.service-list-wrapper {
-		white-space: pre-wrap;
+		flex: 1;
-		word-wrap: break-word;
+		overflow-y: auto;
-		box-sizing: border-box;
+		height: calc(100dvh - 60px);
-		overflow-x: auto;
+		width: 100%;
-	}
+		margin-bottom: 5px;
-	.json-dump {
-		background: #222;
-		color: #0f0;
-		padding: 1rem;
-		border-radius: 4px;
-		font-size: 0.9rem;
-		max-height: 500px;
-		width: 95%;
-		margin: 1rem auto;
 	}
 </style>