add show previous button

jonerrr · Jul 24, 2024 · d5ab98e · d5ab98e
1 parent bcd49eb
commit d5ab98e
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 26 deletions.
diff --git a/frontend/src/lib/components/Dialog.svelte b/frontend/src/lib/components/Dialog.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { CircleX, Share, ClipboardCheck, CircleHelp, Dices } from 'lucide-svelte';
+	import { CircleX, Share, ClipboardCheck, CircleHelp, Dices, History } from 'lucide-svelte';
 	import { writable, type Writable } from 'svelte/store';
 	import { page } from '$app/stores';
 	import { pushState, replaceState } from '$app/navigation';
@@ -75,6 +75,17 @@
 				});
 			}
 		});
+
+		// // Watch for escape key
+		// node.addEventListener('keydown', (e) => {
+		// 	if (e.key === 'Escape') {
+		// 		pushState('', {
+		// 			dialog_open: false,
+		// 			dialog_id: '',
+		// 			dialog_type: ''
+		// 		});
+		// 	}
+		// });
 	}
 
 	let copied = false;
@@ -175,7 +186,7 @@
 		}
 	});
 
-	let checked = writable(false);
+	let show_previous = false;
 </script>
 
 <!-- TODO: figure out transitions -->
@@ -190,9 +201,9 @@
 	{#key item_id}
 		{#if item_id !== 'error'}
 			{#if $page.state.dialog_type === 'stop' && typeof item_id === 'string'}
-				<StopContent bind:stop_id={item_id} />
+				<StopContent bind:show_previous bind:stop_id={item_id} />
 			{:else if $page.state.dialog_type === 'trip' && typeof item_id === 'string'}
-				<TripContent bind:trip_id={item_id} />
+				<TripContent bind:show_previous bind:trip_id={item_id} />
 			{:else if $page.state.dialog_type === 'route_alert' && typeof item_id === 'string'}
 				<RouteAlertContent bind:route_id={item_id} />
 			{:else if $page.state.dialog_type === 'bus_stop' && typeof item_id === 'number'}
@@ -216,11 +227,19 @@
 					<CircleX />
 				</button>
 
-				<!-- {#if $page.state.dialog_type === 'trip'}
-					<PastStops bind:checked />
-				{/if} -->
-
 				<div class="flex gap-1 items-center">
+					{#if $page.state.dialog_type === 'trip' || $page.state.dialog_type === 'stop'}
+						<button
+							class={`appearance-none h-8 w-8 flex ${show_previous ? 'text-indigo-600' : ''}`}
+							aria-label="Share"
+							on:click={() => {
+								show_previous = !show_previous;
+							}}
+						>
+							<History class="h-6 w-6" />
+						</button>
+					{/if}
+
 					{#if !copied}
 						<button class="appearance-none h-8 w-8 flex" aria-label="Share" on:click={share}>
 							<Share class="h-6 w-6" />

diff --git a/frontend/src/lib/components/Stop/Content.svelte b/frontend/src/lib/components/Stop/Content.svelte
@@ -10,6 +10,7 @@
 	import Transfer from '$lib/components/Stop/Transfer.svelte';
 
 	export let stop_id: string;
+	export let show_previous: boolean = false;
 
 	const stop = derived(stops, ($stops) => {
 		return $stops.find((s) => s.id === stop_id);
@@ -58,10 +59,10 @@
 
 	<div use:melt={$root} class="flex flex-col shadow-2xl text-indigo-400">
 		<div use:melt={$content('northbound')}>
-			<TripList stop={$stop} direction={Direction.North} />
+			<TripList bind:show_previous stop={$stop} direction={Direction.North} />
 		</div>
 		<div use:melt={$content('southbound')}>
-			<TripList stop={$stop} direction={Direction.South} />
+			<TripList bind:show_previous stop={$stop} direction={Direction.South} />
 		</div>
 		<div
 			use:melt={$list}

diff --git a/frontend/src/lib/components/Trip/Content.svelte b/frontend/src/lib/components/Trip/Content.svelte
@@ -7,16 +7,18 @@
 	import List from '$lib/components/ContentList.svelte';
 
 	export let trip_id: string;
+	export let show_previous: boolean = false;
 	// export let actions_width: number;
 
 	$: trip = derived(trips, ($trips) => {
 		return $trips.find((t) => t.id === trip_id);
 	});
 
 	$: trip_stop_times = derived(stop_times, ($stop_times) => {
-		return $stop_times.filter(
-			(st) => st.trip_id === trip_id && st.arrival > ($data_at ?? new Date())
-		);
+		const st = show_previous
+			? $stop_times.filter((st) => st.trip_id === trip_id)
+			: $stop_times.filter((st) => st.trip_id === trip_id && st.arrival > ($data_at ?? new Date()));
+		return st;
 	});
 
 	$: last_stop = $trip_stop_times

diff --git a/frontend/src/lib/components/Trip/StopTime.svelte b/frontend/src/lib/components/Trip/StopTime.svelte
@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { slide } from 'svelte/transition';
-	import { quintOut } from 'svelte/easing';
-	import { pushState } from '$app/navigation';
 	import { TrainStatus, type StopTime } from '$lib/api';
 	import { stops } from '$lib/stores';
 	import TriggerButton from '$lib/components/TriggerButton.svelte';
@@ -34,7 +31,13 @@
 			</span>
 		{/if}
 	</div>
-	<div class="text-right">
-		{stop_time.arrival.toLocaleTimeString()}
-	</div>
+	{#if stop_time.arrival > new Date()}
+		<div class={`text-right`}>
+			{stop_time.arrival.toLocaleTimeString()}
+		</div>
+	{:else}
+		<div class={`text-right text-neutral-400`}>
+			{stop_time.arrival.toLocaleTimeString()}
+		</div>
+	{/if}
 </TriggerButton>
diff --git a/frontend/src/lib/components/Trip/StopTimeList.svelte b/frontend/src/lib/components/Trip/StopTimeList.svelte
@@ -7,13 +7,16 @@
 
 	export let stop: Stop;
 	export let direction: Direction;
+	export let show_previous: boolean = false;
 
-	const stop_times = derived(stop_time_store, ($stop_time_store) => {
+	$: stop_times = derived(stop_time_store, ($stop_time_store) => {
 		const now = $data_at ?? new Date();
 
-		const st = $stop_time_store.filter(
-			(st) => st.stop_id === stop.id && st.direction === direction && st.arrival > now
-		);
+		const st = show_previous
+			? $stop_time_store.filter((st) => st.stop_id === stop.id && st.direction === direction)
+			: $stop_time_store.filter(
+					(st) => st.stop_id === stop.id && st.direction === direction && st.arrival > now
+				);
 
 		return st.map((st) => {
 			const arrival = st.arrival.getTime();

diff --git a/frontend/src/lib/components/Trip/Trigger.svelte b/frontend/src/lib/components/Trip/Trigger.svelte
@@ -38,9 +38,15 @@
 			link={false}
 			name={stop_time.route_id}
 		/>
-		<div class={`${!$trip?.assigned ? 'italic' : ''}`}>
-			{stop_time.eta?.toFixed(0)}m
-		</div>
+		{#if stop_time.eta && stop_time.eta > 0}
+			<div class={`${!$trip?.assigned ? 'italic' : ''}`}>
+				{stop_time.eta?.toFixed(0)}m
+			</div>
+		{:else}
+			<div class={`${!$trip?.assigned ? 'italic' : ''} text-neutral-400`}>
+				{stop_time.arrival.toLocaleTimeString()}
+			</div>
+		{/if}
 
 		<!-- {#if stops_away > 0}
 					<div class="text-indigo-200 text-xs">

diff --git a/frontend/src/lib/components/Trip/utils.ts b/frontend/src/lib/components/Trip/utils.ts
@@ -0,0 +1,22 @@
+import { get } from 'svelte/store';
+import { data_at } from '$lib/stores';
+
+export function get_stop_times<K, T extends { stop_id: K; direction: number; arrival: Date }>(
+	stop_times: T[],
+	stop_id: K,
+	direction: number
+) {
+	const now = get(data_at) || new Date();
+
+	const st = stop_times.filter(
+		(st) => st.stop_id === stop_id && st.direction === direction && st.arrival > now
+	);
+
+	return st.map((st) => {
+		const arrival = st.arrival.getTime();
+		const eta = (arrival - now.getTime()) / 1000 / 60;
+
+		st.eta = eta;
+		return st;
+	});
+}