fix dialog, work on bus route search

backend/README.md

@@ -7,7 +7,9 @@
 
 ## Config
 
-| Environmental Variable | Usage                                        |
-| ---------------------- | -------------------------------------------- |
-| `FORCE_UPDATE`         | Force update static bus and train data       |
-| `DEBUG_GTFS`           | Save all GTFS data as a txt file to `./gtfs` |
+| Environmental Variable | Usage                                                     |
+| ---------------------- | --------------------------------------------------------- |
+| `FORCE_UPDATE`         | Force update static bus and train data                    |
+| `DEBUG_GTFS`           | Save all GTFS data as a txt file to `./gtfs`              |
+| `DATABASE_URL`         | PostgreSQL database URL                                   |
+| `ADDRESS`              | Address for axum to bind to. Defaults to `127.0.0.1:3055` |

backend/compose.yml

@@ -1,7 +1,6 @@
 services:
   trainstatus-postgres:
     image: postgres:alpine
-    container_name: postgres-ts
     ports:
       - 5432:5432
     environment:
@@ -10,23 +9,14 @@ services:
       - POSTGRES_DB=trains
     volumes:
       - trainstatus-db:/var/lib/postgresql/data:z
-  # ts-backend:
-  #   environment:
-  #     - DATABASE_URL=postgres://trains:trains@localhost:5432/trains
-  #     - API_KEY=mta api key
-  #   build: .
-  #   network_mode: host
-  # ts-database:
-  #   image: timescale/timescaledb:latest-pg16
-  #   container_name: timescale-ts
-  #   ports:
-  #     - 5432:5432
-  #   environment:
-  #     - POSTGRES_USER=trains
-  #     - POSTGRES_PASSWORD=trains
-  #     - POSTGRES_DB=trains
-  #   volumes:
-  #     - trainstatus-db:/var/lib/postgresql/data:z
+  ts-backend:
+    environment:
+      - DATABASE_URL=postgres://trains:trains@trainstatus-postgres:5432/trains
+      - ADDRESS=0.0.0.0:3055
+      - API_KEY=bus api key
+    build: .
+    ports:
+      - 3055:3055
 
 volumes:
   trainstatus-db:

backend/src/routes/alerts.rs

@@ -33,7 +33,7 @@ pub async fn get(
 ) -> Result<impl IntoResponse, ServerError> {
     // query is different depending on if they are asking for live data
     // TODO: allow specifying route ids and bus route ids
-    let alerts = {
+    let mut alerts = {
         if time.1 {
             sqlx::query_as!(
                 Alert,
@@ -115,5 +115,9 @@ pub async fn get(
         }
     };
 
+    // Remove duplicate alerts by id. TODO: this is a hack, fix it
+    alerts.sort_by(|a, b| a.id.cmp(&b.id));
+    alerts.dedup_by(|a, b| a.id == b.id);
+
     Ok(Json(alerts))
 }

backend/src/routes/bus/routes.rs

@@ -39,7 +39,9 @@ pub async fn get(
                     SELECT
                         *
                     FROM
-                        bus_routes;"#
+                        bus_routes
+                    ORDER BY 
+                        id;"#
             )
             .fetch_all(&pool)
             .await?
@@ -57,6 +59,8 @@ pub async fn get(
                         NULL as "wkt: String"
                     FROM
                         bus_routes br
+                    ORDER BY
+                        id;
                 "#
             )
             .fetch_all(&pool)

frontend/src/lib/components/Dialog.svelte

@@ -201,7 +201,7 @@
 <dialog
 	id="content-dialog"
 	use:manage_dialog
-	class="backdrop:bg-black/50 rounded max-h-[85dvh] w-[90vw] max-w-[500px] shadow-lg bg-neutral-800 text-indigo-300"
+	class="backdrop:bg-black/50 rounded max-h-[90dvh] w-[90vw] max-w-[500px] shadow-lg bg-neutral-800 text-indigo-300"
 	bind:this={dialog_el}
 >
 	<!-- use key to make sure dialog reloads even if only dialog_id has changed -->

frontend/src/lib/components/List.svelte

@@ -41,34 +41,6 @@
 		onDestroy(() => {
 			clearInterval(interval);
 		});
-		// let observer: MutationObserver;
-
-		// onMount(() => {
-		// 	// Callback function to execute when mutations are observed
-		// 	const callback = async (mutationsList: any, observer: any) => {
-		// 		console.log('Mutations observed:', mutationsList);
-
-		// 		// await tick();
-		// 		const els = Array.from(list_el.querySelectorAll('#list-item')).slice(0, 3);
-		// 		list_height = els.reduce((h, e) => e.offsetHeight + h, 0);
-		// 	};
-
-		// 	// Create an observer instance linked to the callback function
-		// 	observer = new MutationObserver(callback);
-
-		// 	// Start observing the target node for configured mutations
-		// 	observer.observe(list_el, { childList: true, subtree: true });
-
-		// 	// Initial calculation
-		// 	callback();
-		// });
-
-		// onDestroy(() => {
-		// 	// Disconnect the observer when the component is destroyed
-		// 	if (observer) {
-		// 		observer.disconnect();
-		// 	}
-		// });
 	}
 
 	// ${show_search ? 'max-h-[calc(100dvh-11rem)] overflow-auto' : 'max-h-[calc(100dvh-4rem)]'}

frontend/src/lib/components/RouteAlert/Content.svelte

@@ -12,17 +12,6 @@
 	export let route_id: string;
 	export let route_type: 'route_alert' | 'bus_route_alert';
 
-	// const route_alerts = derived(alerts, ($alerts) => {
-	// 	const route_alerts = $alerts
-	// 		.filter((a) => a.entities.some((e) => e.route_id === route_id))
-	// 		.sort((a, b) => {
-	// 			return (
-	// 				b.entities.find((e) => e.route_id === route_id)!.sort_order -
-	// 				a.entities.find((e) => e.route_id === route_id)!.sort_order
-	// 			);
-	// 		});
-	// 	return route_alerts;
-	// });
 	const route_alerts = derived(alerts, ($alerts) => {
 		switch (route_type) {
 			case 'route_alert':
@@ -56,7 +45,7 @@
 	}
 
 	onMount(() => {
-		// remove href from all links in alert-text id
+		// remove href from all links in alert-text id. I don't want people leaving my website ):<
 		document
 			.getElementById('alert-text')
 			?.querySelectorAll('a')

frontend/src/lib/components/RouteAlert/List.svelte

@@ -1,26 +1,88 @@
 <script lang="ts">
+	import { persisted } from 'svelte-persisted-store';
+	import { CircleX } from 'lucide-svelte';
 	import List from '$lib/components/List.svelte';
 	import Trigger from '$lib/components/RouteAlert/Trigger.svelte';
 
 	export let route_ids: string[];
 	export let bus_route_ids: string[];
 	export let title: string = 'Alerts';
 	export let manage_height: boolean = true;
+	export let show_search = false;
 
-	// if (!route_ids.length) route_ids = all_route_ids;
-	// if (!bus_route_ids.length) bus_route_ids = $bus_routes.map((r) => r.id);
+	let list_el: List;
+	let search_term = '';
+	$: shown_bus_route_ids = bus_route_ids;
+
+	let tab_value = persisted(`${title.toLowerCase()}_tab`, 'Train');
 </script>
 
-<List class={$$props.class ?? 'max-h-[calc(100dvh-7.5rem)]'} bind:manage_height bind:title>
+<List
+	bind:this={list_el}
+	bind:tab_value
+	class={$$props.class ?? 'max-h-[calc(100dvh-7.5rem)]'}
+	bind:manage_height
+	bind:title
+>
 	<div slot="train" class="divide-y divide-neutral-800">
 		{#each route_ids as route_id (route_id)}
 			<Trigger {route_id} route_type="route_alert" />
 		{/each}
 	</div>
 
 	<div slot="bus">
-		{#each bus_route_ids as route_id (route_id)}
+		{#each shown_bus_route_ids as route_id (route_id)}
 			<Trigger {route_id} route_type="bus_route_alert" />
 		{/each}
 	</div>
+
+	{#if show_search && $tab_value === 'Bus'}
+		<div class="relative">
+			<input
+				bind:value={search_term}
+				on:input={(e) => {
+					if (search_term === '') {
+						shown_bus_route_ids = bus_route_ids;
+						search_term = '';
+						return;
+					}
+
+					shown_bus_route_ids = bus_route_ids.filter((route_id) =>
+						route_id.includes(search_term.toUpperCase())
+					);
+					list_el.scrollIntoView();
+				}}
+				type="search"
+				placeholder="Search bus route"
+				class="search-stops text-indigo-200 max-w-[calc(100dvw)] pl-10 z-20 w-full h-12 rounded bg-neutral-900 shadow-2xl border-neutral-800/20 ring-1 ring-inset ring-neutral-700 placeholder:text-neutral-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600"
+			/>
+			<button
+				aria-label="Clear search"
+				class="z-30 w-6 h-6 text-indigo-600 hover:text-indigo-700 active:text-indigo-700 absolute right-2 my-auto top-1/2 transform -translate-y-1/2"
+				on:click={() => {
+					shown_bus_route_ids = bus_route_ids;
+					search_term = '';
+				}}
+			>
+				<CircleX />
+			</button>
+		</div>
+	{/if}
 </List>
+
+<style lang="postcss">
+	.search-stops {
+		background-image: url('/search.svg');
+
+		background-position: 10px 10px;
+		background-repeat: no-repeat;
+	}
+
+	/* Remove default styles from search */
+	input[type='search']::-webkit-search-decoration,
+	input[type='search']::-webkit-search-cancel-button,
+	input[type='search']::-webkit-search-results-button,
+	input[type='search']::-webkit-search-results-decoration {
+		-webkit-appearance: none;
+	}
+</style>

frontend/src/routes/alerts/+page.svelte

@@ -12,4 +12,5 @@
 	route_ids={all_route_ids}
 	bus_route_ids={$bus_routes.map((r) => r.id)}
 	manage_height={false}
+	show_search
 />