Implement filtering by previous and subsequent station calls

src/lib/types.ts

@@ -62,6 +62,20 @@ export type HuxleyStationService = HuxleyTimes & {
 		via: string | null;
 	}[];
 
+	previousLocations:
+		| {
+				locationName: string;
+				crs: string;
+		  }[]
+		| null;
+
+	subsequentLocations:
+		| {
+				locationName: string;
+				crs: string;
+		  }[]
+		| null;
+
 	platform: string;
 	operator: string;
 	activities: string;
@@ -87,3 +101,8 @@ export type HuxleyDepartures = {
 	crs: string;
 	stationManagerCode: string;
 };
+
+export type HuxleyStations = {
+	crsCode: string;
+	stationName: string;
+}[];

src/lib/utils.ts

@@ -1,5 +1,5 @@
 import { Temporal } from '@js-temporal/polyfill';
-import type { HuxleyTimes } from './types';
+import type { HuxleyStations, HuxleyTimes } from './types';
 
 export function getScheduledTime(train: HuxleyTimes) {
 	let time;
@@ -65,3 +65,43 @@ export function getActualArrivalTime(train: HuxleyTimes) {
 export function parseTime(time: string) {
 	return Temporal.ZonedDateTime.from(time + '[Europe/London]');
 }
+
+export function filterStations(stations: HuxleyStations, search: string) {
+	return stations
+		.filter((station) => {
+			return (
+				station.stationName.toLowerCase().includes(search) ||
+				station.crsCode.toLowerCase().includes(search)
+			);
+		})
+		.sort((a, b) => {
+			const aCrs = a.crsCode.toLowerCase();
+			const bCrs = b.crsCode.toLowerCase();
+			const aName = a.stationName.toLowerCase();
+			const bName = b.stationName.toLowerCase();
+			if (aCrs.startsWith(search) && !bCrs.startsWith(search)) {
+				return -1;
+			}
+			if (bCrs.startsWith(search) && !aCrs.startsWith(search)) {
+				return 1;
+			}
+			if (aName.startsWith(search) && !bName.startsWith(search)) {
+				return -1;
+			}
+			if (bName.startsWith(search) && !aName.startsWith(search)) {
+				return 1;
+			}
+			if (aName < bName) {
+				return -1;
+			}
+			if (bName > aName) {
+				return 1;
+			}
+			return 0;
+		});
+}
+
+export function toggleVisibility(id: string) {
+	const e = document.getElementById(id);
+	if (e) e.style.display = e.style.display == 'none' ? 'block' : 'none';
+}

src/routes/+page.svelte

@@ -2,6 +2,7 @@
 	import { goto } from '$app/navigation';
 	import type { FormEventHandler } from 'svelte/elements';
 	import type { HuxleyStations } from './+page.js';
+	import { filterStations } from '$lib/utils.js';
 
 	export let data;
 
@@ -13,38 +14,7 @@
 		if (search == '') {
 			results = data.stations;
 		} else {
-			results = data.stations
-				.filter((station) => {
-					return (
-						station.stationName.toLowerCase().includes(search) ||
-						station.crsCode.toLowerCase().includes(search)
-					);
-				})
-				.sort((a, b) => {
-					const aCrs = a.crsCode.toLowerCase();
-					const bCrs = b.crsCode.toLowerCase();
-					const aName = a.stationName.toLowerCase();
-					const bName = b.stationName.toLowerCase();
-					if (aCrs.startsWith(search) && !bCrs.startsWith(search)) {
-						return -1;
-					}
-					if (bCrs.startsWith(search) && !aCrs.startsWith(search)) {
-						return 1;
-					}
-					if (aName.startsWith(search) && !bName.startsWith(search)) {
-						return -1;
-					}
-					if (bName.startsWith(search) && !aName.startsWith(search)) {
-						return 1;
-					}
-					if (aName < bName) {
-						return -1;
-					}
-					if (bName > aName) {
-						return 1;
-					}
-					return 0;
-				});
+			results = filterStations(data.stations, search);
 		}
 	};
 

src/routes/+page.ts

@@ -1,4 +1,4 @@
-export type HuxleyStations = { crsCode: string; stationName: string }[];
+import type { HuxleyStations } from '$lib/types.js';
 
 export async function load({ fetch }) {
 	const data: HuxleyStations = await (await fetch(`https://huxley2.azurewebsites.net/crs`)).json();

src/routes/stations/[crs]/+layout.svelte

@@ -3,16 +3,51 @@
 	import { invalidateAll } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { dev } from '$app/environment';
-	import type { HuxleyServiceLocation, HuxleyStationService, HuxleyTimes } from '$lib/types.js';
+	import type {
+		HuxleyServiceLocation,
+		HuxleyStationService,
+		HuxleyTimes,
+		HuxleyStations
+	} from '$lib/types.js';
 	import {
 		getActualArrivalTime,
 		getActualTime,
 		getScheduledArrivalTime,
 		getScheduledTime,
-		parseTime
+		parseTime,
+		filterStations,
+		toggleVisibility
 	} from '$lib/utils.js';
 
 	export let data;
+	let previousResults = [];
+	let subsequentResults = [];
+
+	const handleInput: FormEventHandler<HTMLInputElement> = async (e, results) => {
+		const search = e.currentTarget.value.toLowerCase();
+		if (search === '') {
+			const query = new URLSearchParams($page.url.search);
+			const clearFilter = [{ stationName: 'Clear Filter', crsCode: '' }];
+			if (results === 'previousResults') {
+				previousResults =
+					query.has('callsPreviously') && query.get('callsPreviously') !== '' ? clearFilter : [];
+			} else {
+				subsequentResults =
+					query.has('callsSubsequently') && query.get('callsSubsequently') !== ''
+						? clearFilter
+						: [];
+			}
+		} else {
+			const stations = filterStations(data.stations, search);
+			if (results === 'previousResults') previousResults = stations;
+			else subsequentResults = stations;
+		}
+	};
+
+	const clearResults: FormEventHandler<HTMLInputElement> = async (e, results) => {
+		if (results === 'previousResults') previousResults = [];
+		else subsequentResults = [];
+	};
 
 	$: if (dev) {
 		console.log(data.trains);
@@ -168,12 +203,68 @@
 				{/each}
 			{/if}
 
+			<button type="button" on:click={() => toggleVisibility('filters')}>Filters</button>
+			<div id="filters" style="display: none">
+				<div id="calls_previously">
+					<div class="station-search" class:has-results={previousResults.length > 0}>
+						<input
+							on:input={(event) => handleInput(event, 'previousResults')}
+							value={data.callsPreviously && data.callsPreviously.length > 0
+								? data.callsPreviously[0].stationName
+								: ''}
+							placeholder="Calls Previously"
+							autocorrect="off"
+						/>
+						<div id="previous_results" class="results">
+							{#each previousResults as station (station.crsCode)}
+								<a
+									href="?{queryString({
+										callsPreviously: station.crsCode
+									})}"
+									on:click={(event) => clearResults(event, 'previousResults')}
+								>
+									<span class="name">{station.stationName}</span>
+									<span class="crs">{station.crsCode}</span>
+								</a>
+							{/each}
+						</div>
+					</div>
+				</div>
+				<div id="calls_subsequently">
+					<div class="station-search" class:has-results={subsequentResults.length > 0}>
+						<input
+							on:input={(event) => handleInput(event, 'subsequentResults')}
+							value={data.callsSubsequently && data.callsSubsequently.length > 0
+								? data.callsSubsequently[0].stationName
+								: ''}
+							placeholder="Calls Subsequently"
+							autocorrect="off"
+						/>
+						<div id="subsequent_results" class="results">
+							{#each subsequentResults as station (station.crsCode)}
+								<a
+									href="?{queryString({
+										callsSubsequently: station.crsCode
+									})}"
+									on:click={(event) => clearResults(event, 'subsequentResults')}
+								>
+									<span class="name">{station.stationName}</span>
+									<span class="crs">{station.crsCode}</span>
+								</a>
+							{/each}
+						</div>
+					</div>
+				</div>
+			</div>
+
 			{#if data.offset > -120}
-				<a
-					href="?{queryString({
-						timeOffset: Math.max(data.offset - adjustmentOffset, -120).toString()
-					})}">Earlier trains</a
-				>
+				<div>
+					<a
+						href="?{queryString({
+							timeOffset: Math.max(data.offset - adjustmentOffset, -120).toString()
+						})}">Earlier trains</a
+					>
+				</div>
 			{/if}
 			{#if fromStop}
 				<div class="train">
@@ -428,4 +519,51 @@
 			height: auto;
 		}
 	}
+
+	.station-search {
+		border: 1px solid var(--border);
+		max-width: 30em;
+		margin-top: 5px;
+		margin-bottom: 5px;
+		margin-left: auto;
+		margin-right: auto;
+		border-radius: 5px;
+		display: flex;
+		flex-direction: column;
+		background-color: var(--background);
+	}
+
+	input {
+		font-size: 125%;
+		width: 100%;
+		appearance: none;
+		border: none;
+		border-radius: 5px;
+		padding: 5px;
+		background-color: var(--background);
+		color: var(--text);
+	}
+	.has-results input {
+		border-bottom: 1px solid var(--border);
+		border-radius: 5px 5px 0px 0px;
+	}
+	.results {
+		flex: 1;
+	}
+	.results a {
+		display: flex;
+		font-size: 125%;
+		color: var(--text);
+		text-decoration: none;
+		padding: 5px;
+	}
+	.results a:not(:last-child) {
+		border-bottom: 1px var(--border-light) solid;
+	}
+	.name {
+		flex: 1;
+	}
+	.crs {
+		color: var(--text-light-big);
+	}
 </style>

src/routes/stations/[crs]/+layout.ts

@@ -1,4 +1,4 @@
-import type { HuxleyDepartures, HuxleyServiceDetails } from '$lib/types.js';
+import type { HuxleyDepartures, HuxleyServiceDetails, HuxleyStations } from '$lib/types.js';
 import { Temporal } from '@js-temporal/polyfill';
 
 export async function load({ fetch, params, url }) {
@@ -34,11 +34,56 @@ export async function load({ fetch, params, url }) {
 		trimmedFuture = true;
 	}
 
-	const data: HuxleyDepartures = await (
+	let trains: HuxleyDepartures = await (
 		await fetch(
-			`https://huxley2.azurewebsites.net/staffdepartures/${params.crs}/50?timeOffset=${offset}`
+			`https://huxley2.azurewebsites.net/staffdepartures/${params.crs}/50?timeOffset=${offset}&expand=true`
 		)
 	).json();
 
-	return { trains: data, from, offset, trimmedPast, trimmedFuture };
+	const stations: HuxleyStations = await (
+		await fetch('https://huxley2.azurewebsites.net/crs')
+	).json();
+
+	let callsPreviously;
+	if (url.searchParams.get('callsPreviously')) {
+		const search = url.searchParams.get('callsPreviously').toLowerCase();
+		callsPreviously = stations.filter((station) => {
+			return station.crsCode.toLowerCase() === search;
+		});
+
+		if (trains.trainServices)
+			trains.trainServices = trains.trainServices.filter((trainService) => {
+				return (
+					trainService.previousLocations &&
+					trainService.previousLocations.find((loc) => loc.crs && loc.crs.toLowerCase() == search)
+				);
+			});
+	}
+
+	let callsSubsequently;
+	if (url.searchParams.get('callsSubsequently')) {
+		const search = url.searchParams.get('callsSubsequently').toLowerCase();
+		callsSubsequently = stations.filter((station) => {
+			return station.crsCode.toLowerCase() === search;
+		});
+
+		if (trains.trainServices)
+			trains.trainServices = trains.trainServices.filter((trainService) => {
+				return (
+					trainService.subsequentLocations &&
+					trainService.subsequentLocations.find((loc) => loc.crs && loc.crs.toLowerCase() == search)
+				);
+			});
+	}
+
+	return {
+		trains,
+		from,
+		offset,
+		trimmedPast,
+		trimmedFuture,
+		stations,
+		callsPreviously,
+		callsSubsequently
+	};
 }