Reorganise colouring of schedule times, add 'delay' column (E, RT, D). Including reusable function to assist.

src/lib/components/ui/TrainService.svelte

@@ -3,9 +3,10 @@
 	import { OwlClient, ApiError, ValidationError } from '$lib/owlClient';
 	import { slide } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
-	import { formatUkTime } from '$lib/utils/time';
+	import { formatUkTime, calculateDelay } from '$lib/utils/time';
 	import TocStyle from '$lib/components/ui/TocStyle.svelte';
 	import TiplocConverter from '$lib/components/ui/TiplocConverter.svelte';
+	import { IconCircleArrowDownFilled } from '@tabler/icons-svelte';
 	let { service }: { service: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse } = $props();
 	let isExpanded = $state(false);
 	let loadingDetails = $state(false);
@@ -66,8 +67,9 @@
 			<div class="location-summary" class:can-all={service.ct}>
 				{service.dt}
 			</div>
-			<!-- Add arrow icon to signify drop-down -->
-			<!-- ADD LOADING STATE -->
+			<div class="arrow" class:expanded={isExpanded}>
+				<IconCircleArrowDownFilled color={"var(--color-title)"} size={25} />
+			</div>
 		</div>
 	</button>
 	{#if isExpanded && details}
@@ -115,9 +117,10 @@
 							<th>Location</th>
 							<th>Plat</th>
 							<th>Sch</th>
-							<th>Act</th>
+							<th><span class="tpl-cell">Est</span>/Act</th>
 							<th>Sch</th>
-							<th>Act</th>
+							<th><span class="tpl-cell">Est</span>/Act</th>
+							<th></th>
 						</tr>
 					</thead>
 					<tbody>
@@ -141,6 +144,10 @@
 										>{formatUkTime(loc.atd || loc.etd || '--')}</td
 									>
 								{/if}
+								{#if loc}
+								{@const delay = calculateDelay(loc)}
+								<td class="delay-{delay.type}">{delay.val}</td>
+								{/if}
 							</tr>
 						{/each}
 					</tbody>
@@ -162,8 +169,10 @@
 		filter: brightness(1.1);
 	}
 
-	.summary:hover {
-		filter: invert();
+	@media (hover: hover) {
+		.train-service:hover {
+			filter: brightness(1.2);
+		}
 	}
 
 	.summary {
@@ -248,6 +257,18 @@
 		color: red;
 	}
 
+	.arrow {
+		padding: 0;
+		margin: 0;
+		margin-left: auto;
+		height: 25px;
+		transition: all 0.3s;
+	}
+
+	.expanded {
+		transform: rotateX(180deg);
+	}
+
 	.box-ext {
 		display: flex;
 		flex-direction: column;
@@ -319,11 +340,13 @@
 
 	.tpl-cell {
 		color: yellow;
+		text-align: left;
 	}
 
 	.pass-loc {
 		color: var(--color-title);
 		opacity: 0.75;
+		font-style: oblique;
 	}
 
 	.can-loc {
@@ -331,11 +354,19 @@
 	}
 
 	.est {
-		font-style: oblique;
+		color: yellow;
 		opacity: 0.5;
 	}
 
 	.act {
-		color: yellow;
+		color: white;
+	}
+
+	.delay-late {
+		color: red;
+	}
+
+	.delay-early {
+		color: blue;
 	}
 </style>