work on pinned bus trips

jonerrr · Jul 8, 2024 · cd8cc11 · cd8cc11
1 parent d608004
commit cd8cc11
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 8 deletions.
diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts
@@ -11,7 +11,7 @@ declare global {
 			// blank is not open
 			dialog_type: 'stop' | 'trip' | 'route_alert' | 'route' | 'bus_stop' | 'bus_trip' | '';
 			// list of bus routes to monitor
-			monitor_routes?: string[];
+			// monitor_routes?: string[];
 		}
 		// interface Platform {}
 	}

diff --git a/frontend/src/lib/components/Dialog.svelte b/frontend/src/lib/components/Dialog.svelte
@@ -208,7 +208,12 @@
 				bind:offsetWidth={actions_width}
 				class="z-40 absolute right-[5px] top-[10px] inline-flex gap-1 items-center"
 			>
-				<Pin store={pin_store} {item_id} />
+				<Pin
+					store={pin_store}
+					item_id={$page.state.dialog_type === 'bus_trip'
+						? `${item_id}_${$bus_trips.find((t) => t.id === item_id)?.route_id}`
+						: item_id}
+				/>
 
 				{#if !copied}
 					<button class="appearance-none inline-flex h-8 w-8" aria-label="Share" on:click={share}>

diff --git a/frontend/src/lib/components/Trip/List.svelte b/frontend/src/lib/components/Trip/List.svelte
@@ -5,6 +5,7 @@
 	import { monitored_routes, trips, bus_trips, pinned_trips, pinned_bus_trips } from '$lib/stores';
 	import List from '$lib/components/List.svelte';
 	import Trigger from '$lib/components/Trip/ListTrigger.svelte';
+	import BusTrigger from '$lib/components/Trip/ListBusTrigger.svelte';
 
 	const {
 		elements: { root, list, content, trigger },
@@ -27,15 +28,22 @@
 	const wanted_bus_trips = derived(
 		[bus_trip_ids, bus_trips],
 		([$bus_trip_ids, $bus_trip_store]) => {
-			const trips = $bus_trip_ids.map((t) => t.split('_'));
+			const trip_info = $bus_trip_ids.map((t) => t.split('_'));
+			const trip_ids = trip_info.map((t) => t[0]);
+			const trip_routes = trip_info.map((t) => t[1]);
+			$monitored_routes = [...new Set([...trip_routes, ...$monitored_routes])].slice(0, 15);
 
 			// this preserves the order of stop_ids but its slower
-			return $bus_trip_store.filter((st) => $bus_trip_ids.includes(st.id));
+			return $bus_trip_store.filter((st) => trip_ids.includes(st.id));
 		}
 	);
 
+	console.log($wanted_bus_trips);
+
 	// remove from pinned trips if it no longer exists
 	$: $pinned_trips = $pinned_trips.filter((p) => $wanted_trips.find((t) => t.id === p));
+	// TODO: figure out a better way to remove old bus trips
+	// $: $pinned_bus_trips = $pinned_bus_trips.filter((p) => $wanted_bus_trips.find((t) => t.id === p));
 </script>
 
 <List bind:manage_height>
@@ -67,13 +75,17 @@
 		<!-- TODO: use melt $content instead of if statement -->
 		<div class={`flex flex-col gap-1 max-h-[calc(100dvh-4rem)]`}>
 			{#if $value === 'Train'}
-				{#if $wanted_trips}
+				{#if $wanted_trips.length}
 					{#each $wanted_trips as trip (trip.id)}
 						<Trigger {trip} />
 					{/each}
 				{/if}
 			{:else if $value === 'Bus'}
-				Coming soon (sorry)
+				{#if $wanted_bus_trips.length}
+					{#each $wanted_bus_trips as trip (trip.id)}
+						<BusTrigger {trip} />
+					{/each}
+				{/if}
 			{/if}
 		</div>
 	</div>

diff --git a/frontend/src/lib/components/Trip/ListBusTrigger.svelte b/frontend/src/lib/components/Trip/ListBusTrigger.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { ArrowBigRight } from 'lucide-svelte';
+	import { derived } from 'svelte/store';
+	import { bus_stop_times, bus_stops, pinned_bus_trips, bus_routes } from '$lib/stores';
+	import { type BusTrip } from '$lib/bus_api';
+	import Pin from '$lib/components/Pin.svelte';
+	import BusIcon from '$lib/components/BusIcon.svelte';
+	import TriggerButton from '$lib/components/TriggerButton.svelte';
+	import BusCapacity from '$lib/components/Trip/BusCapacity.svelte';
+
+	export let trip: BusTrip;
+
+	$: trip_stop_times = derived(bus_stop_times, ($stop_times) =>
+		$stop_times.filter((st) => st.trip_id === trip.id)
+	);
+
+	// Check if trip stop id is in trip stop times, and if it isn't look up the first stop time
+	// $: current_stop_id =
+	// 	trip.train_status && trip.stop_id ? trip.stop_id : $trip_stop_times.at(0)?.stop_id;
+	$: current_stop_id = trip.stop_id || $trip_stop_times.at(0)?.stop_id;
+	$: current_stop = $bus_stops.find((s) => s.id === current_stop_id);
+
+	$: route = $bus_routes.find((r) => r.id === trip.route_id)!;
+</script>
+
+<!-- TODO: make button component and reuse -->
+<TriggerButton
+	state={{
+		dialog_id: trip.id,
+		dialog_type: 'bus_trip',
+		dialog_open: true
+	}}
+>
+	<div class="flex gap-1 items-center flex-wrap">
+		<div class="flex flex-col gap-1">
+			{#if trip.passengers && trip.capacity}
+				<BusCapacity passengers={trip.passengers} capacity={trip.capacity} />
+			{/if}
+			<BusIcon {route} />
+		</div>
+		<ArrowBigRight />
+		<div class={`pr-2`}>
+			{trip.headsign}
+		</div>
+		{#if trip.deviation && Math.abs(trip.deviation) > 120}
+			<div class={`text-xs ${trip.deviation > 0 ? 'text-red-400' : 'text-green-400'}`}>
+				{(trip.deviation / 60).toFixed(0)}m
+			</div>
+		{/if}
+
+		<div>
+			<span class="text-neutral-300">Current stop:</span>
+			{current_stop?.name}
+		</div>
+	</div>
+
+	<Pin item_id={trip.id + '_' + trip.route_id} store={pinned_bus_trips} />
+</TriggerButton>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
@@ -74,7 +74,9 @@
 				console.error('Error getting location', e);
 
 				location_status.set(LocationStatus.Denied);
-			}
+			},
+			// 1 minute
+			{ maximumAge: 60 * 1000 }
 		);
 	}
 
@@ -96,7 +98,7 @@
 </svelte:head>
 
 <div class="p-1 text-indigo-200 text-sm flex flex-col gap-2 max-h-[calc(100dvh-8rem)]">
-	{#if $pinned_trips.length}
+	{#if $pinned_trips.length || $pinned_bus_trips.length}
 		<TripList
 			manage_height={true}
 			title="Pinned Trips"