From 39b46f4ba98d51452049c86a2344de3c2db75ee7 Mon Sep 17 00:00:00 2001 From: Aaron Brethorst Date: Sun, 24 Nov 2024 21:41:38 -0800 Subject: [PATCH] Render ArrivalDepartures within a single-select accordion * Replace the separate modal pane with an accordion * Display the TripDetailsPane content inline underneath the ArrivalDeparture object --- src/components/ArrivalDeparture.svelte | 56 +++++----------- src/components/containers/Accordion.svelte | 2 +- .../containers/AccordionItem.svelte | 2 +- .../containers/SingleSelectAccordion.svelte | 64 +++++++++---------- .../navigation/TripDetailsModal.svelte | 57 ----------------- src/components/oba/TripDetailsPane.svelte | 4 +- src/components/stops/StopPane.svelte | 47 ++++++-------- 7 files changed, 70 insertions(+), 162 deletions(-) delete mode 100644 src/components/navigation/TripDetailsModal.svelte diff --git a/src/components/ArrivalDeparture.svelte b/src/components/ArrivalDeparture.svelte index f393169..f337f1f 100644 --- a/src/components/ArrivalDeparture.svelte +++ b/src/components/ArrivalDeparture.svelte @@ -4,14 +4,8 @@ let tripHeadsign = arrivalDeparture.tripHeadsign; let scheduledArrivalTime = arrivalDeparture.scheduledArrivalTime; let predictedArrivalTime = arrivalDeparture.predictedArrivalTime; - let tripId = arrivalDeparture.tripId; - let vehicleId = arrivalDeparture.vehicleId; - let serviceDate = arrivalDeparture.serviceDate; - import { createEventDispatcher } from 'svelte'; import { t } from 'svelte-i18n'; - const dispatch = createEventDispatcher(); - function formatTime(time) { const date = new Date(time); return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); @@ -63,39 +57,21 @@ return `${Math.floor((chosenTime - now) / 60000)}m`; } - - function handleTripDetail() { - dispatch('showTripDetails', { - tripId, - vehicleId, - serviceDate, - routeShortName, - tripHeadsign, - scheduledArrivalTime, - timeToReach: calculateTimeToReach(predictedArrivalTime, scheduledArrivalTime), - arrivalStatus: getArrivalStatus(predictedArrivalTime, scheduledArrivalTime) - }); - } - +
+

+ {routeShortName} - {tripHeadsign} +

+

+ {formatTime(scheduledArrivalTime)} - + + {getArrivalStatus(predictedArrivalTime, scheduledArrivalTime).text} + +

+
+
+

+ {calculateTimeToReach(predictedArrivalTime, scheduledArrivalTime)} +

+
diff --git a/src/components/containers/Accordion.svelte b/src/components/containers/Accordion.svelte index 32c3548..2bebc25 100644 --- a/src/components/containers/Accordion.svelte +++ b/src/components/containers/Accordion.svelte @@ -49,7 +49,7 @@ return { isActive, skipAnimation, - activate: (_data) => { + activate: () => { activeItems.update((items) => { const newItems = new Set(items); if (newItems.has(id)) { diff --git a/src/components/containers/AccordionItem.svelte b/src/components/containers/AccordionItem.svelte index 6791e7e..64de63b 100644 --- a/src/components/containers/AccordionItem.svelte +++ b/src/components/containers/AccordionItem.svelte @@ -13,7 +13,7 @@
-
+
diff --git a/src/components/navigation/TripDetailsModal.svelte b/src/components/navigation/TripDetailsModal.svelte deleted file mode 100644 index 613cc75..0000000 --- a/src/components/navigation/TripDetailsModal.svelte +++ /dev/null @@ -1,57 +0,0 @@ - - -
-
- -
-
-
-

- {selectedTripDetails.routeShortName} - {selectedTripDetails.tripHeadsign} -

-

- {new Date(selectedTripDetails.scheduledArrivalTime).toLocaleTimeString([], { - hour: '2-digit', - minute: '2-digit' - })} - - - {selectedTripDetails.arrivalStatus.text} - -

-
-

- {selectedTripDetails.timeToReach} -

-
-
- -
-
- - diff --git a/src/components/oba/TripDetailsPane.svelte b/src/components/oba/TripDetailsPane.svelte index 7703c69..a751601 100644 --- a/src/components/oba/TripDetailsPane.svelte +++ b/src/components/oba/TripDetailsPane.svelte @@ -91,9 +91,9 @@
{#each tripDetails.schedule.stopTimes as tripStop, index} -
+
{#if index === busPosition} import ArrivalDeparture from '$components/ArrivalDeparture.svelte'; - import TripDetailsModal from '$components/navigation/TripDetailsModal.svelte'; + import TripDetailsPane from '$components/oba/TripDetailsPane.svelte'; import LoadingSpinner from '$components/LoadingSpinner.svelte'; + import Accordion from '$components/containers/SingleSelectAccordion.svelte'; + import AccordionItem from '$components/containers/AccordionItem.svelte'; import { onDestroy, onMount } from 'svelte'; import { createEventDispatcher } from 'svelte'; @@ -15,8 +17,6 @@ let loading = false; let error; - let showTripDetails = false; - let selectedTripDetails = null; let interval = null; let initialDataLoaded = false; @@ -70,22 +70,11 @@ return _routeShortNames; } - function handleShowTripDetails(event) { - selectedTripDetails = { - ...event.detail, - routeShortName: event.detail.routeShortName, - tripHeadsign: event.detail.tripHeadsign, - scheduledArrivalTime: event.detail.scheduledArrivalTime - }; - showTripDetails = true; - dispatch('tripSelected', selectedTripDetails); - dispatch('updateRouteMap', { show: true }); - } - - function handleCloseTripDetailModal() { - showTripDetails = false; - dispatch('tripSelected', null); - dispatch('updateRouteMap', { show: false }); + function handleAccordionSelectionChanged(event) { + const data = event.detail.activeData; // this is the ArrivalDeparture object plumbed into the AccordionItem + const show = !!data; + dispatch('tripSelected', data); + dispatch('updateRouteMap', { show }); } @@ -126,18 +115,18 @@

{$t('no_arrivals_or_departures_in_next_30_minutes')}

{:else} - {#each arrivalsAndDepartures.arrivalsAndDepartures as arrival} - - {/each} + + {#each arrivalsAndDepartures.arrivalsAndDepartures as arrival} + + + + + + + {/each} + {/if}
{/if} - - {#if showTripDetails} - - {/if}
{/if}