From ee69c62adc5943a1dbd154df5142c0e726bdd317 Mon Sep 17 00:00:00 2001 From: Ariel Costas Guerrero Date: Fri, 13 Mar 2026 16:49:10 +0100 Subject: feat(routes): add realtime estimates panel with pattern-aware styling - New GET /api/stops/estimates endpoint (nano mode: tripId, patternId, estimate, delay only) - useStopEstimates hook wiring estimates to routes-$id stop panel - Pattern-aware styling: dim schedules and estimates from other patterns - Past scheduled departures shown with strikethrough instead of hidden - Persist selected pattern in URL hash (replace navigation, no history push) - Fix planner arrivals using new estimates endpoint --- src/frontend/app/routes/routes-$id.tsx | 189 +++++++++++++++++---------------- 1 file changed, 100 insertions(+), 89 deletions(-) (limited to 'src/frontend/app/routes/routes-$id.tsx') diff --git a/src/frontend/app/routes/routes-$id.tsx b/src/frontend/app/routes/routes-$id.tsx index 2174244..bccaf56 100644 --- a/src/frontend/app/routes/routes-$id.tsx +++ b/src/frontend/app/routes/routes-$id.tsx @@ -19,7 +19,7 @@ import { Source, type MapRef, } from "react-map-gl/maplibre"; -import { Link, useParams } from "react-router"; +import { Link, useLocation, useNavigate, useParams } from "react-router"; import { fetchRouteDetails } from "~/api/transit"; import { AppMap } from "~/components/shared/AppMap"; import { @@ -28,7 +28,7 @@ import { usePageTitle, usePageTitleNode, } from "~/contexts/PageTitleContext"; -import { useStopArrivals } from "~/hooks/useArrivals"; +import { useStopEstimates } from "~/hooks/useArrivals"; import { useFavorites } from "~/hooks/useFavorites"; import { formatHex } from "~/utils/colours"; import "../tailwind-full.css"; @@ -59,9 +59,9 @@ function FavoriteStar({ id }: { id?: string }) { export default function RouteDetailsPage() { const { id } = useParams(); const { t, i18n } = useTranslation(); - const [selectedPatternId, setSelectedPatternId] = useState( - null - ); + const navigate = useNavigate(); + const location = useLocation(); + const selectedPatternId = location.hash ? location.hash.slice(1) : null; const [selectedStopId, setSelectedStopId] = useState(null); const [layoutMode, setLayoutMode] = useState<"balanced" | "map" | "list">( "balanced" @@ -103,34 +103,13 @@ export default function RouteDetailsPage() { queryFn: () => fetchRouteDetails(id!, selectedDateKey), enabled: !!id, }); - const { data: selectedStopRealtime, isLoading: isRealtimeLoading } = - useStopArrivals( + const { data: selectedStopEstimates, isLoading: isRealtimeLoading } = + useStopEstimates( selectedStopId ?? "", - true, - Boolean(selectedStopId) && isTodaySelectedDate + id ?? "", + undefined, + Boolean(selectedStopId) && Boolean(id) && isTodaySelectedDate ); - const filteredRealtimeArrivals = useMemo(() => { - const arrivals = selectedStopRealtime?.arrivals ?? []; - if (arrivals.length === 0) { - return []; - } - - const routeId = id?.trim(); - const routeShortName = route?.shortName?.trim().toLowerCase(); - - return arrivals.filter((arrival) => { - const arrivalGtfsId = arrival.route.gtfsId?.trim(); - if (routeId && arrivalGtfsId) { - return arrivalGtfsId === routeId; - } - - if (routeShortName) { - return arrival.route.shortName.trim().toLowerCase() === routeShortName; - } - - return true; - }); - }, [selectedStopRealtime?.arrivals, id, route?.shortName]); usePageTitle( route?.shortName @@ -589,7 +568,10 @@ export default function RouteDetailsPage() { key={pattern.id} type="button" onClick={() => { - setSelectedPatternId(pattern.id); + navigate( + { hash: "#" + pattern.id }, + { replace: true } + ); setSelectedStopId(null); setIsPatternPickerOpen(false); }} @@ -748,33 +730,31 @@ export default function RouteDetailsPage() { {selectedStopId === stop.id && (departuresByStop.get(stop.id)?.length ?? 0) > 0 && (
- {( - departuresByStop - .get(stop.id) - ?.filter((item) => - isTodaySelectedDate - ? item.departure >= - nowSeconds - ONE_HOUR_SECONDS - : true - ) ?? [] - ).map((item, i) => ( - - {Math.floor(item.departure / 3600) - .toString() - .padStart(2, "0")} - : - {Math.floor((item.departure % 3600) / 60) - .toString() - .padStart(2, "0")} - - ))} + {(departuresByStop.get(stop.id) ?? []).map( + (item, i) => { + const isPast = + isTodaySelectedDate && + item.departure < nowSeconds; + return ( + + {Math.floor(item.departure / 3600) + .toString() + .padStart(2, "0")} + : + {Math.floor((item.departure % 3600) / 60) + .toString() + .padStart(2, "0")} + + ); + } + )}
)} @@ -787,7 +767,8 @@ export default function RouteDetailsPage() {
{t("routes.loading_realtime", "Cargando...")}
- ) : filteredRealtimeArrivals.length === 0 ? ( + ) : (selectedStopEstimates?.arrivals.length ?? 0) === + 0 ? (
{t( "routes.realtime_no_route_estimates", @@ -796,37 +777,67 @@ export default function RouteDetailsPage() {
) : ( <> -
- - {t("routes.next_arrival", "Próximo")} - - - {filteredRealtimeArrivals[0].estimate.minutes}′ - {filteredRealtimeArrivals[0].delay?.minutes - ? formatDelayMinutes( - filteredRealtimeArrivals[0].delay.minutes - ) - : ""} - -
- - {filteredRealtimeArrivals.length > 1 && ( + {(() => { + const firstArrival = + selectedStopEstimates!.arrivals[0]; + const isFirstSelectedPattern = + firstArrival.patternId === selectedPattern?.id; + return ( +
+ + {t("routes.next_arrival", "Próximo")} + + + {firstArrival.estimate.minutes}′ + {firstArrival.delay?.minutes + ? formatDelayMinutes( + firstArrival.delay.minutes + ) + : ""} + +
+ ); + })()} + + {selectedStopEstimates!.arrivals.length > 1 && (
- {filteredRealtimeArrivals + {selectedStopEstimates!.arrivals .slice(1) - .map((arrival, i) => ( - - {arrival.estimate.minutes}′ - {arrival.delay?.minutes - ? formatDelayMinutes( - arrival.delay.minutes - ) - : ""} - - ))} + .map((arrival, i) => { + const isSelectedPattern = + arrival.patternId === selectedPattern?.id; + return ( + + {arrival.estimate.minutes}′ + {arrival.delay?.minutes + ? formatDelayMinutes( + arrival.delay.minutes + ) + : ""} + + ); + })}
)} -- cgit v1.3