From a30d93fb7b6d288f430b1f37fdcd5b66055ba90b Mon Sep 17 00:00:00 2001
From: Aaron Brethorst <aaron@brethorsting.com>
Date: Sun, 24 Nov 2024 16:01:10 -0800
Subject: [PATCH] Extract RouteScheduleTable component from
 ScheduleAccordionItem

...and use it on the schedule page. By extracting the inner component from the accordion item, we decouple some implementation details of the Flowbite accordion from this piece of UI, and allow ourselves to further reuse it elsewhere if and when we need to.

This commit is a WIP.

- [ ] Show all routes/Collapse all routes buttons aren't working
- [ ] Sticky route schedule headers have a gap above them
- [ ] The datepicker appears behind the sticky headers
- [ ] All schedules should be expanded by default
---
 .../RouteScheduleTable.svelte                 | 108 +++++++++++++++++
 .../ScheduleAccordionItem.svelte              | 114 ------------------
 .../stops/[stopID]/schedule/+page.svelte      |  16 +--
 3 files changed, 116 insertions(+), 122 deletions(-)
 create mode 100644 src/components/schedule-for-stop/RouteScheduleTable.svelte
 delete mode 100644 src/components/schedule-for-stop/ScheduleAccordionItem.svelte

diff --git a/src/components/schedule-for-stop/RouteScheduleTable.svelte b/src/components/schedule-for-stop/RouteScheduleTable.svelte
new file mode 100644
index 0000000..85b0f78
--- /dev/null
+++ b/src/components/schedule-for-stop/RouteScheduleTable.svelte
@@ -0,0 +1,108 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+	import { t } from 'svelte-i18n';
+
+	export let schedule;
+	export let expanded;
+
+	const dispatch = createEventDispatcher();
+
+	function handleToggle() {
+		dispatch('toggle');
+	}
+
+	function formatHour(hour) {
+		const hourInt = +hour;
+		if (hourInt === 0) return '12';
+		if (hourInt > 12) return hourInt - 12;
+		return hourInt;
+	}
+
+	function renderScheduleTable(schedule) {
+		const stopTimes = Object.entries(schedule.stopTimes);
+
+		const amTimes = stopTimes.filter(([hour]) => +hour < 12);
+		const pmTimes = stopTimes.filter(([hour]) => +hour >= 12);
+
+		return {
+			amTimes,
+			pmTimes
+		};
+	}
+
+	function extractMinutes(arrivalTime) {
+		return arrivalTime.replace(/[AP]M/, '').split(':')[1];
+	}
+</script>
+
+<div class="overflow-x-auto">
+	<table class="mt-4 w-full table-auto rounded-lg border border-gray-200 shadow-lg">
+		<thead class="bg-gray-100 text-gray-800">
+			<tr>
+				<th class="cursor-pointer px-6 py-3 text-left">{$t('schedule_for_stop.hour')}</th>
+				<th class="cursor-pointer px-6 py-3 text-left">{$t('schedule_for_stop.minutes')}</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr class="bg-gray-50 hover:bg-gray-100">
+				<td colspan="2" class="px-6 py-3 font-semibold text-gray-700">AM</td>
+			</tr>
+			{#if renderScheduleTable(schedule).amTimes.length === 0}
+				<tr>
+					<td colspan="2" class="border px-6 py-3 text-center text-gray-500">
+						{$t('schedule_for_stop.no_am_schedules_available')}
+					</td>
+				</tr>
+			{:else}
+				{#each renderScheduleTable(schedule).amTimes as [hour, times]}
+					<tr class="hover:bg-gray-100">
+						<td
+							class="border px-6 py-3 text-center text-lg font-semibold"
+							title="Full Time: {hour}:{extractMinutes(times[0].arrivalTime)}"
+						>
+							{formatHour(hour)} <span class="text-sm text-gray-600">AM</span>
+						</td>
+						<td class="border px-6 py-3 text-lg">
+							{#each times as stopTime, index (index)}
+								<span>
+									{extractMinutes(stopTime.arrivalTime)}
+									{index < times.length - 1 ? ', ' : ''}
+								</span>
+							{/each}
+						</td>
+					</tr>
+				{/each}
+			{/if}
+
+			<tr class="bg-gray-50 hover:bg-gray-100">
+				<td colspan="2" class="px-6 py-3 font-semibold text-gray-700">PM</td>
+			</tr>
+			{#if renderScheduleTable(schedule).pmTimes.length === 0}
+				<tr>
+					<td colspan="2" class="border px-6 py-3 text-center text-gray-500">
+						{$t('schedule_for_stop.no_pm_schedules_available')}
+					</td>
+				</tr>
+			{:else}
+				{#each renderScheduleTable(schedule).pmTimes as [hour, times]}
+					<tr class="hover:bg-gray-100">
+						<td
+							class="border px-6 py-3 text-center text-lg font-semibold"
+							title="Full Time: {hour}:{extractMinutes(times[0].arrivalTime)}"
+						>
+							{formatHour(hour)} <span class="text-sm text-gray-600">PM</span>
+						</td>
+						<td class="border px-6 py-3 text-lg">
+							{#each times as stopTime, index (index)}
+								<span>
+									{extractMinutes(stopTime.arrivalTime)}
+									{index < times.length - 1 ? ', ' : ''}
+								</span>
+							{/each}
+						</td>
+					</tr>
+				{/each}
+			{/if}
+		</tbody>
+	</table>
+</div>
diff --git a/src/components/schedule-for-stop/ScheduleAccordionItem.svelte b/src/components/schedule-for-stop/ScheduleAccordionItem.svelte
deleted file mode 100644
index d5c50cd..0000000
--- a/src/components/schedule-for-stop/ScheduleAccordionItem.svelte
+++ /dev/null
@@ -1,114 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte';
-	import { AccordionItem } from 'flowbite-svelte';
-	import { t } from 'svelte-i18n';
-
-	export let schedule;
-	export let expanded;
-
-	const dispatch = createEventDispatcher();
-
-	function handleToggle() {
-		dispatch('toggle');
-	}
-
-	function formatHour(hour) {
-		const hourInt = +hour;
-		if (hourInt === 0) return '12';
-		if (hourInt > 12) return hourInt - 12;
-		return hourInt;
-	}
-
-	function renderScheduleTable(schedule) {
-		const stopTimes = Object.entries(schedule.stopTimes);
-
-		const amTimes = stopTimes.filter(([hour]) => +hour < 12);
-		const pmTimes = stopTimes.filter(([hour]) => +hour >= 12);
-
-		return {
-			amTimes,
-			pmTimes
-		};
-	}
-
-	function extractMinutes(arrivalTime) {
-		return arrivalTime.replace(/[AP]M/, '').split(':')[1];
-	}
-</script>
-
-<AccordionItem open={expanded} on:click={handleToggle}>
-	<span slot="header" class="text-lg font-semibold text-gray-800">
-		{schedule.tripHeadsign}
-	</span>
-	<div class="overflow-x-auto">
-		<table class="mt-4 w-full table-auto rounded-lg border border-gray-200 shadow-lg">
-			<thead class="bg-gray-100 text-gray-800">
-				<tr>
-					<th class="cursor-pointer px-6 py-3 text-left">{$t('schedule_for_stop.hour')}</th>
-					<th class="cursor-pointer px-6 py-3 text-left">{$t('schedule_for_stop.minutes')}</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="bg-gray-50 hover:bg-gray-100">
-					<td colspan="2" class="px-6 py-3 font-semibold text-gray-700">AM</td>
-				</tr>
-				{#if renderScheduleTable(schedule).amTimes.length === 0}
-					<tr>
-						<td colspan="2" class="border px-6 py-3 text-center text-gray-500">
-							{$t('schedule_for_stop.no_am_schedules_available')}
-						</td>
-					</tr>
-				{:else}
-					{#each renderScheduleTable(schedule).amTimes as [hour, times]}
-						<tr class="hover:bg-gray-100">
-							<td
-								class="border px-6 py-3 text-center text-lg font-semibold"
-								title="Full Time: {hour}:{extractMinutes(times[0].arrivalTime)}"
-							>
-								{formatHour(hour)} <span class="text-sm text-gray-600">AM</span>
-							</td>
-							<td class="border px-6 py-3 text-lg">
-								{#each times as stopTime, index (index)}
-									<span>
-										{extractMinutes(stopTime.arrivalTime)}
-										{index < times.length - 1 ? ', ' : ''}
-									</span>
-								{/each}
-							</td>
-						</tr>
-					{/each}
-				{/if}
-
-				<tr class="bg-gray-50 hover:bg-gray-100">
-					<td colspan="2" class="px-6 py-3 font-semibold text-gray-700">PM</td>
-				</tr>
-				{#if renderScheduleTable(schedule).pmTimes.length === 0}
-					<tr>
-						<td colspan="2" class="border px-6 py-3 text-center text-gray-500">
-							{$t('schedule_for_stop.no_pm_schedules_available')}
-						</td>
-					</tr>
-				{:else}
-					{#each renderScheduleTable(schedule).pmTimes as [hour, times]}
-						<tr class="hover:bg-gray-100">
-							<td
-								class="border px-6 py-3 text-center text-lg font-semibold"
-								title="Full Time: {hour}:{extractMinutes(times[0].arrivalTime)}"
-							>
-								{formatHour(hour)} <span class="text-sm text-gray-600">PM</span>
-							</td>
-							<td class="border px-6 py-3 text-lg">
-								{#each times as stopTime, index (index)}
-									<span>
-										{extractMinutes(stopTime.arrivalTime)}
-										{index < times.length - 1 ? ', ' : ''}
-									</span>
-								{/each}
-							</td>
-						</tr>
-					{/each}
-				{/if}
-			</tbody>
-		</table>
-	</div>
-</AccordionItem>
diff --git a/src/routes/stops/[stopID]/schedule/+page.svelte b/src/routes/stops/[stopID]/schedule/+page.svelte
index 71243cc..dec45b2 100644
--- a/src/routes/stops/[stopID]/schedule/+page.svelte
+++ b/src/routes/stops/[stopID]/schedule/+page.svelte
@@ -1,11 +1,12 @@
 <script>
 	import { page } from '$app/stores';
 	import LoadingSpinner from '$components/LoadingSpinner.svelte';
-	import ScheduleAccordionItem from '$components/schedule-for-stop/ScheduleAccordionItem.svelte';
+	import RouteScheduleTable from '$components/schedule-for-stop/RouteScheduleTable.svelte';
 	import StopPageHeader from '$components/stops/StopPageHeader.svelte';
 	import StandalonePage from '$components/StandalonePage.svelte';
 	import { formatTime } from '$lib/formatters.js';
-	import { Accordion } from 'flowbite-svelte';
+	import Accordion from '$components/containers/Accordion.svelte';
+	import AccordionItem from '$components/containers/AccordionItem.svelte';
 	import { Datepicker } from 'flowbite-svelte';
 	import { onMount } from 'svelte';
 	import { isLoading } from 'svelte-i18n';
@@ -165,13 +166,12 @@
 							{$t('schedule_for_stop.no_schedules_available')}
 						</p>
 					{:else}
-						<Accordion flush multiple>
+						<Accordion>
 							{#each schedules as schedule, index (schedule.tripHeadsign)}
-								<ScheduleAccordionItem
-									{schedule}
-									expanded={expandedItems[index]}
-									on:toggle={() => toggleAccordion(index)}
-								/>
+								<AccordionItem>
+									<span slot="header">{schedule.tripHeadsign}</span>
+									<RouteScheduleTable {schedule} />
+								</AccordionItem>
 							{/each}
 						</Accordion>
 					{/if}