From 2a9aca302485bc08f5b2dd2a54987de6f80fc338 Mon Sep 17 00:00:00 2001 From: Ariel Costas Guerrero Date: Fri, 19 Dec 2025 13:06:27 +0100 Subject: Implement loading stops as tiles from OTP --- src/frontend/app/components/LineIcon.tsx | 27 +- src/frontend/app/components/PlannerOverlay.tsx | 3 +- src/frontend/app/components/RegionSelector.tsx | 33 --- src/frontend/app/components/StopMapModal.tsx | 6 +- src/frontend/app/components/StopSummarySheet.css | 309 --------------------- src/frontend/app/components/StopSummarySheet.tsx | 209 -------------- .../app/components/StopSummarySheetSkeleton.tsx | 79 ------ .../app/components/map/StopSummarySheet.css | 309 +++++++++++++++++++++ .../app/components/map/StopSummarySheet.tsx | 220 +++++++++++++++ .../components/map/StopSummarySheetSkeleton.tsx | 79 ++++++ 10 files changed, 634 insertions(+), 640 deletions(-) delete mode 100644 src/frontend/app/components/RegionSelector.tsx delete mode 100644 src/frontend/app/components/StopSummarySheet.css delete mode 100644 src/frontend/app/components/StopSummarySheet.tsx delete mode 100644 src/frontend/app/components/StopSummarySheetSkeleton.tsx create mode 100644 src/frontend/app/components/map/StopSummarySheet.css create mode 100644 src/frontend/app/components/map/StopSummarySheet.tsx create mode 100644 src/frontend/app/components/map/StopSummarySheetSkeleton.tsx (limited to 'src/frontend/app/components') diff --git a/src/frontend/app/components/LineIcon.tsx b/src/frontend/app/components/LineIcon.tsx index 8bbeb20..5d85c60 100644 --- a/src/frontend/app/components/LineIcon.tsx +++ b/src/frontend/app/components/LineIcon.tsx @@ -4,9 +4,16 @@ import "./LineIcon.css"; interface LineIconProps { line: string; mode?: "rounded" | "pill" | "default"; + colour?: string; + textColour?: string; } -const LineIcon: React.FC = ({ line, mode = "default" }) => { +const LineIcon: React.FC = ({ + line, + mode = "default", + colour, + textColour, +}) => { const actualLine = useMemo(() => { return line.trim().replace("510", "NAD"); }, [line]); @@ -15,16 +22,26 @@ const LineIcon: React.FC = ({ line, mode = "default" }) => { return /^[a-zA-Z]/.test(actualLine) ? actualLine : `L${actualLine}`; }, [actualLine]); - const cssVarName = `--line-${formattedLine.toLowerCase()}`; - const cssTextVarName = `--line-${formattedLine.toLowerCase()}-text`; + const actualLineColour = useMemo(() => { + const actualColour = colour?.startsWith("#") ? colour : `#${colour}`; + return colour ? actualColour : `var(--line-${formattedLine.toLowerCase()})`; + }, [formattedLine]); + const actualTextColour = useMemo(() => { + const actualTextColour = textColour?.startsWith("#") + ? textColour + : `#${textColour}`; + return textColour + ? actualTextColour + : `var(--line-${formattedLine.toLowerCase()}-text, #000000)`; + }, [formattedLine]); return ( diff --git a/src/frontend/app/components/PlannerOverlay.tsx b/src/frontend/app/components/PlannerOverlay.tsx index 12cfb0f..af71e48 100644 --- a/src/frontend/app/components/PlannerOverlay.tsx +++ b/src/frontend/app/components/PlannerOverlay.tsx @@ -8,7 +8,6 @@ import React, { } from "react"; import { useTranslation } from "react-i18next"; import PlaceListItem from "~/components/PlaceListItem"; -import { REGION_DATA } from "~/config/RegionConfig"; import { reverseGeocode, searchPlaces, @@ -59,7 +58,7 @@ export const PlannerOverlay: React.FC = ({ [] ); const [recentPlaces, setRecentPlaces] = useState([]); - const RECENT_KEY = `recentPlaces_${REGION_DATA.id}`; + const RECENT_KEY = `recentPlaces`; const clearRecentPlaces = useCallback(() => { setRecentPlaces([]); try { diff --git a/src/frontend/app/components/RegionSelector.tsx b/src/frontend/app/components/RegionSelector.tsx deleted file mode 100644 index 124b574..0000000 --- a/src/frontend/app/components/RegionSelector.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { useApp } from "../AppContext"; -import { getAvailableRegions } from "../config/RegionConfig"; -import "./RegionSelector.css"; - -export function RegionSelector() { - const { region, setRegion } = useApp(); - const regions = getAvailableRegions(); - - const handleRegionChange = (e: React.ChangeEvent) => { - const newRegion = e.target.value as any; - setRegion(newRegion); - }; - - return ( -
- - -
- ); -} diff --git a/src/frontend/app/components/StopMapModal.tsx b/src/frontend/app/components/StopMapModal.tsx index 1cb6d88..bb6a3fa 100644 --- a/src/frontend/app/components/StopMapModal.tsx +++ b/src/frontend/app/components/StopMapModal.tsx @@ -9,7 +9,7 @@ import React, { import Map, { Layer, Marker, Source, type MapRef } from "react-map-gl/maplibre"; import { Sheet } from "react-modal-sheet"; import { useApp } from "~/AppContext"; -import { REGION_DATA } from "~/config/RegionConfig"; +import { APP_CONSTANTS } from "~/config/constants"; import { getLineColour } from "~/data/LineColors"; import type { Stop } from "~/data/StopDataProvider"; import { loadStyle } from "~/maps/styleloader"; @@ -243,7 +243,7 @@ export const StopMapModal: React.FC = ({ !selectedBus || !selectedBus.schedule?.shapeId || selectedBus.currentPosition?.shapeIndex === undefined || - !REGION_DATA.shapeEndpoint + !APP_CONSTANTS.shapeEndpoint ) { setShapeData(null); setPreviousShapeData(null); @@ -263,7 +263,7 @@ export const StopMapModal: React.FC = ({ sLat?: number, sLon?: number ) => { - let url = `${REGION_DATA.shapeEndpoint}?shapeId=${sId}`; + let url = `${APP_CONSTANTS.shapeEndpoint}?shapeId=${sId}`; if (bIndex !== undefined) url += `&busShapeIndex=${bIndex}`; if (sIndex !== undefined) url += `&stopShapeIndex=${sIndex}`; else if (sLat && sLon) url += `&stopLat=${sLat}&stopLon=${sLon}`; diff --git a/src/frontend/app/components/StopSummarySheet.css b/src/frontend/app/components/StopSummarySheet.css deleted file mode 100644 index 5869d41..0000000 --- a/src/frontend/app/components/StopSummarySheet.css +++ /dev/null @@ -1,309 +0,0 @@ -/* Stop Sheet Styles */ -.react-modal-sheet-container { - background-color: var(--background-color) !important; - touch-action: none; -} - -/*.react-modal-sheet-content > * > *:not(.stop-sheet-actions){ - interactivity: inert; -}*/ - -.react-modal-sheet-content-scroller { - overscroll-behavior-y: unset !important; - overflow-y: unset !important; -} - -.stop-sheet-content { - padding: 16px; - display: flex; - flex-direction: column; - /* overflow: hidden; */ - touch-action: pan-y; -} - -.stop-sheet-header { - display: flex; - align-items: center; - gap: 8px; - margin-bottom: 16px; -} - -.stop-sheet-title { - font-size: 1.5rem; - font-weight: 600; - color: var(--text-color); - margin: 0; -} - -.stop-sheet-id { - font-size: 1rem; - color: var(--subtitle-color); -} - -.stop-sheet-lines-container { - display: flex; - gap: 0.5rem; - flex-wrap: wrap; -} - -.stop-sheet-lines-container.scrollable { - display: grid; - grid-template-rows: repeat(2, 1fr); - grid-auto-flow: column; - /* align-content: flex-start; */ - scrollbar-width: thin; - gap: 0.5rem 1rem; - overflow-x: scroll; -} - -.stop-sheet-lines-container.scrollable::-webkit-scrollbar { - height: 6px; -} - -.stop-sheet-lines-container.scrollable::-webkit-scrollbar-thumb { - background-color: var(--border-color); - border-radius: 3px; -} - -.stop-sheet-line-icon { - flex-shrink: 0; -} - -.stop-sheet-loading { - display: flex; - justify-content: center; - align-items: center; - padding: 32px; - color: var(--subtitle-color); - font-size: 1rem; -} - -.stop-sheet-estimates { - flex: 1; - min-height: 0; - margin-block-start: 1.25rem; -} - -.stop-sheet-subtitle { - font-size: 1.1rem; - font-weight: 500; - color: var(--text-color); - margin: 0 0 12px 0; -} - -.stop-sheet-no-estimates { - text-align: center; - padding: 32px 16px; - color: var(--subtitle-color); - font-size: 0.95rem; -} - -.stop-sheet-estimates-list { - display: flex; - flex-direction: column; - gap: 12px; -} - -.stop-sheet-estimate-item { - display: flex; - align-items: center; - gap: 12px; - padding: 12px; - background-color: var(--message-background-color); - border-radius: 8px; - border: 1px solid var(--border-color); -} - -.stop-sheet-estimate-line { - flex-shrink: 0; -} - -.stop-sheet-estimate-details { - flex: 1; - min-width: 0; -} - -.stop-sheet-estimate-route { - font-weight: 500; - color: var(--text-color); - font-size: 0.95rem; - margin-bottom: 2px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.stop-sheet-estimate-arrival { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 4px; - flex-shrink: 0; -} - -.stop-sheet-estimate-time { - display: flex; - align-items: center; - gap: 6px; - font-size: 1.05rem; - font-weight: 600; - color: var(--text-color); -} - -.stop-sheet-estimate-time.is-minutes { - color: #22c55e; -} - -.stop-sheet-estimate-time svg { - width: 18px; - height: 18px; - color: var(--subtitle-color); - flex-shrink: 0; -} - -.stop-sheet-estimate-time.is-minutes svg { - color: #22c55e; -} - -.stop-sheet-estimate-distance { - font-size: 0.75rem; - color: var(--subtitle-color); - text-align: right; -} - -.stop-sheet-footer { - display: flex; - flex-direction: column; - gap: 0.75rem; - margin: 0; - padding: 0.75rem 16px 1rem 16px; - border-top: 1px solid var(--border-color); - background-color: var(--background-color); - z-index: 10; -} - -.stop-sheet-timestamp { - font-size: 0.8rem; - color: var(--subtitle-color); - text-align: center; -} - -.stop-sheet-actions { - display: flex; - gap: 0.75rem; -} - -.stop-sheet-reload { - display: inline-flex; - align-items: center; - gap: 0.4rem; - background: transparent; - border: 1px solid var(--border-color); - color: var(--text-color); - padding: 0.5rem 0.75rem; - border-radius: 6px; - font-size: 0.85rem; - cursor: pointer; - transition: all 0.2s ease; - flex: 1; - justify-content: center; -} - -.stop-sheet-reload:hover:not(:disabled) { - background: var(--message-background-color); - border-color: var(--button-background-color); -} - -.stop-sheet-reload:disabled { - opacity: 0.6; - cursor: not-allowed; -} - -.reload-icon { - width: 14px; - height: 14px; - transition: transform 0.5s ease; -} - -.reload-icon.spinning { - animation: spin 1s linear infinite; -} - -@keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -.stop-sheet-view-all { - display: block; - padding: 0.5rem 0.75rem; - background-color: var(--button-background-color); - color: white; - text-decoration: none; - text-align: center; - border-radius: 6px; - font-weight: 500; - font-size: 0.85rem; - transition: background-color 0.2s ease; - flex: 2; -} - -.stop-sheet-view-all:hover { - background-color: var(--button-hover-background-color); - text-decoration: none; -} - -/* Error display adjustments for sheet */ -.stop-sheet-content .error-display { - margin: 1rem 0; -} - -.stop-sheet-content .error-display.compact { - min-height: 100px; - padding: 1rem; -} - -.stop-sheet-content .error-display.compact .error-icon { - width: 28px; - height: 28px; -} - -.stop-sheet-content .error-display.compact .error-title { - font-size: 1.1rem; -} - -.stop-sheet-content .error-display.compact .error-message { - font-size: 0.85rem; -} - -[data-rsbs-overlay] { - background-color: rgba(0, 0, 0, 0.3); -} - -[data-rsbs-header] { - background-color: var(--background-color); - border-bottom: 1px solid var(--border-color); - touch-action: none; -} - -[data-rsbs-header]:before { - background-color: var(--subtitle-color); -} - -[data-rsbs-root] [data-rsbs-overlay] { - border-top-left-radius: 16px; - border-top-right-radius: 16px; -} - -[data-rsbs-root] [data-rsbs-content] { - background-color: var(--background-color); - border-top-left-radius: 16px; - border-top-right-radius: 16px; - max-height: 95vh; - overflow: hidden; - touch-action: none; -} diff --git a/src/frontend/app/components/StopSummarySheet.tsx b/src/frontend/app/components/StopSummarySheet.tsx deleted file mode 100644 index c2d6ffe..0000000 --- a/src/frontend/app/components/StopSummarySheet.tsx +++ /dev/null @@ -1,209 +0,0 @@ -import { RefreshCw } from "lucide-react"; -import React, { useEffect, useState } from "react"; -import { useTranslation } from "react-i18next"; -import { Sheet } from "react-modal-sheet"; -import { Link } from "react-router"; -import { ConsolidatedCirculationList } from "~/components/Stops/ConsolidatedCirculationList"; -import { REGION_DATA } from "~/config/RegionConfig"; -import type { Stop } from "~/data/StopDataProvider"; -import { type ConsolidatedCirculation } from "../routes/stops-$id"; -import { ErrorDisplay } from "./ErrorDisplay"; -import LineIcon from "./LineIcon"; -import { StopAlert } from "./StopAlert"; -import "./StopSummarySheet.css"; -import { StopSummarySheetSkeleton } from "./StopSummarySheetSkeleton"; - -interface StopSheetProps { - isOpen: boolean; - onClose: () => void; - stop: Stop; -} - -interface ErrorInfo { - type: "network" | "server" | "unknown"; - status?: number; - message?: string; -} - -const loadConsolidatedData = async ( - stopId: string -): Promise => { - const resp = await fetch( - `${REGION_DATA.consolidatedCirculationsEndpoint}?stopId=${stopId}`, - { - headers: { - Accept: "application/json", - }, - } - ); - - if (!resp.ok) { - throw new Error(`HTTP ${resp.status}: ${resp.statusText}`); - } - - return await resp.json(); -}; - -export const StopSheet: React.FC = ({ - isOpen, - onClose, - stop, -}) => { - const { t } = useTranslation(); - const [data, setData] = useState(null); - const [loading, setLoading] = useState(false); - const [error, setError] = useState(null); - const [lastUpdated, setLastUpdated] = useState(null); - - const parseError = (error: any): ErrorInfo => { - if (!navigator.onLine) { - return { type: "network", message: "No internet connection" }; - } - - if ( - error.message?.includes("Failed to fetch") || - error.message?.includes("NetworkError") - ) { - return { type: "network" }; - } - - if (error.message?.includes("HTTP")) { - const statusMatch = error.message.match(/HTTP (\d+):/); - const status = statusMatch ? parseInt(statusMatch[1]) : undefined; - return { type: "server", status }; - } - - return { type: "unknown", message: error.message }; - }; - - const loadData = async () => { - try { - setLoading(true); - setError(null); - setData(null); - - const stopData = await loadConsolidatedData(stop.stopId); - setData(stopData); - setLastUpdated(new Date()); - } catch (err) { - console.error("Failed to load stop data:", err); - setError(parseError(err)); - } finally { - setLoading(false); - } - }; - - useEffect(() => { - if (isOpen && stop.stopId) { - loadData(); - } - }, [isOpen, stop.stopId]); - - // Show only the next 4 arrivals - const sortedData = data - ? [...data].sort( - (a, b) => - (a.realTime?.minutes ?? a.schedule?.minutes ?? 999) - - (b.realTime?.minutes ?? b.schedule?.minutes ?? 999) - ) - : []; - const limitedEstimates = sortedData.slice(0, 4); - - return ( - - - - -
-
-

{stop.name.original}

- ({stop.stopId}) -
- -
= 10 ? "scrollable" : ""}`} - > - {stop.lines.map((line) => ( -
- -
- ))} -
- - - - {loading ? ( - - ) : error ? ( - - ) : data ? ( - <> -
-

- {t("estimates.next_arrivals", "Next arrivals")} -

- - {limitedEstimates.length === 0 ? ( -
- {t("estimates.none", "No hay estimaciones disponibles")} -
- ) : ( - - )} -
- - ) : null} -
- - -
- {lastUpdated && ( -
- {t("estimates.last_updated", "Actualizado a las")}{" "} - {lastUpdated.toLocaleTimeString(undefined, { - hour: "2-digit", - minute: "2-digit", - second: "2-digit", - })} -
- )} - -
- - - - {t("map.view_all_estimates", "Ver todas las estimaciones")} - -
-
- - - - ); -}; diff --git a/src/frontend/app/components/StopSummarySheetSkeleton.tsx b/src/frontend/app/components/StopSummarySheetSkeleton.tsx deleted file mode 100644 index 7697efc..0000000 --- a/src/frontend/app/components/StopSummarySheetSkeleton.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import React from "react"; -import { useTranslation } from "react-i18next"; -import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; -import "react-loading-skeleton/dist/skeleton.css"; - -interface StopSheetSkeletonProps { - rows?: number; -} - -export const StopSummarySheetSkeleton: React.FC = ({ - rows = 4, -}) => { - const { t } = useTranslation(); - - return ( - -
-

- {t("estimates.next_arrivals", "Next arrivals")} -

- -
- {Array.from({ length: rows }, (_, index) => ( -
-
- -
- -
-
- -
-
- -
-
-
- ))} -
-
- -
-
- -
- -
-
- -
- -
- -
-
-
- - ); -}; diff --git a/src/frontend/app/components/map/StopSummarySheet.css b/src/frontend/app/components/map/StopSummarySheet.css new file mode 100644 index 0000000..5869d41 --- /dev/null +++ b/src/frontend/app/components/map/StopSummarySheet.css @@ -0,0 +1,309 @@ +/* Stop Sheet Styles */ +.react-modal-sheet-container { + background-color: var(--background-color) !important; + touch-action: none; +} + +/*.react-modal-sheet-content > * > *:not(.stop-sheet-actions){ + interactivity: inert; +}*/ + +.react-modal-sheet-content-scroller { + overscroll-behavior-y: unset !important; + overflow-y: unset !important; +} + +.stop-sheet-content { + padding: 16px; + display: flex; + flex-direction: column; + /* overflow: hidden; */ + touch-action: pan-y; +} + +.stop-sheet-header { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 16px; +} + +.stop-sheet-title { + font-size: 1.5rem; + font-weight: 600; + color: var(--text-color); + margin: 0; +} + +.stop-sheet-id { + font-size: 1rem; + color: var(--subtitle-color); +} + +.stop-sheet-lines-container { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; +} + +.stop-sheet-lines-container.scrollable { + display: grid; + grid-template-rows: repeat(2, 1fr); + grid-auto-flow: column; + /* align-content: flex-start; */ + scrollbar-width: thin; + gap: 0.5rem 1rem; + overflow-x: scroll; +} + +.stop-sheet-lines-container.scrollable::-webkit-scrollbar { + height: 6px; +} + +.stop-sheet-lines-container.scrollable::-webkit-scrollbar-thumb { + background-color: var(--border-color); + border-radius: 3px; +} + +.stop-sheet-line-icon { + flex-shrink: 0; +} + +.stop-sheet-loading { + display: flex; + justify-content: center; + align-items: center; + padding: 32px; + color: var(--subtitle-color); + font-size: 1rem; +} + +.stop-sheet-estimates { + flex: 1; + min-height: 0; + margin-block-start: 1.25rem; +} + +.stop-sheet-subtitle { + font-size: 1.1rem; + font-weight: 500; + color: var(--text-color); + margin: 0 0 12px 0; +} + +.stop-sheet-no-estimates { + text-align: center; + padding: 32px 16px; + color: var(--subtitle-color); + font-size: 0.95rem; +} + +.stop-sheet-estimates-list { + display: flex; + flex-direction: column; + gap: 12px; +} + +.stop-sheet-estimate-item { + display: flex; + align-items: center; + gap: 12px; + padding: 12px; + background-color: var(--message-background-color); + border-radius: 8px; + border: 1px solid var(--border-color); +} + +.stop-sheet-estimate-line { + flex-shrink: 0; +} + +.stop-sheet-estimate-details { + flex: 1; + min-width: 0; +} + +.stop-sheet-estimate-route { + font-weight: 500; + color: var(--text-color); + font-size: 0.95rem; + margin-bottom: 2px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.stop-sheet-estimate-arrival { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 4px; + flex-shrink: 0; +} + +.stop-sheet-estimate-time { + display: flex; + align-items: center; + gap: 6px; + font-size: 1.05rem; + font-weight: 600; + color: var(--text-color); +} + +.stop-sheet-estimate-time.is-minutes { + color: #22c55e; +} + +.stop-sheet-estimate-time svg { + width: 18px; + height: 18px; + color: var(--subtitle-color); + flex-shrink: 0; +} + +.stop-sheet-estimate-time.is-minutes svg { + color: #22c55e; +} + +.stop-sheet-estimate-distance { + font-size: 0.75rem; + color: var(--subtitle-color); + text-align: right; +} + +.stop-sheet-footer { + display: flex; + flex-direction: column; + gap: 0.75rem; + margin: 0; + padding: 0.75rem 16px 1rem 16px; + border-top: 1px solid var(--border-color); + background-color: var(--background-color); + z-index: 10; +} + +.stop-sheet-timestamp { + font-size: 0.8rem; + color: var(--subtitle-color); + text-align: center; +} + +.stop-sheet-actions { + display: flex; + gap: 0.75rem; +} + +.stop-sheet-reload { + display: inline-flex; + align-items: center; + gap: 0.4rem; + background: transparent; + border: 1px solid var(--border-color); + color: var(--text-color); + padding: 0.5rem 0.75rem; + border-radius: 6px; + font-size: 0.85rem; + cursor: pointer; + transition: all 0.2s ease; + flex: 1; + justify-content: center; +} + +.stop-sheet-reload:hover:not(:disabled) { + background: var(--message-background-color); + border-color: var(--button-background-color); +} + +.stop-sheet-reload:disabled { + opacity: 0.6; + cursor: not-allowed; +} + +.reload-icon { + width: 14px; + height: 14px; + transition: transform 0.5s ease; +} + +.reload-icon.spinning { + animation: spin 1s linear infinite; +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.stop-sheet-view-all { + display: block; + padding: 0.5rem 0.75rem; + background-color: var(--button-background-color); + color: white; + text-decoration: none; + text-align: center; + border-radius: 6px; + font-weight: 500; + font-size: 0.85rem; + transition: background-color 0.2s ease; + flex: 2; +} + +.stop-sheet-view-all:hover { + background-color: var(--button-hover-background-color); + text-decoration: none; +} + +/* Error display adjustments for sheet */ +.stop-sheet-content .error-display { + margin: 1rem 0; +} + +.stop-sheet-content .error-display.compact { + min-height: 100px; + padding: 1rem; +} + +.stop-sheet-content .error-display.compact .error-icon { + width: 28px; + height: 28px; +} + +.stop-sheet-content .error-display.compact .error-title { + font-size: 1.1rem; +} + +.stop-sheet-content .error-display.compact .error-message { + font-size: 0.85rem; +} + +[data-rsbs-overlay] { + background-color: rgba(0, 0, 0, 0.3); +} + +[data-rsbs-header] { + background-color: var(--background-color); + border-bottom: 1px solid var(--border-color); + touch-action: none; +} + +[data-rsbs-header]:before { + background-color: var(--subtitle-color); +} + +[data-rsbs-root] [data-rsbs-overlay] { + border-top-left-radius: 16px; + border-top-right-radius: 16px; +} + +[data-rsbs-root] [data-rsbs-content] { + background-color: var(--background-color); + border-top-left-radius: 16px; + border-top-right-radius: 16px; + max-height: 95vh; + overflow: hidden; + touch-action: none; +} diff --git a/src/frontend/app/components/map/StopSummarySheet.tsx b/src/frontend/app/components/map/StopSummarySheet.tsx new file mode 100644 index 0000000..b24e71c --- /dev/null +++ b/src/frontend/app/components/map/StopSummarySheet.tsx @@ -0,0 +1,220 @@ +import { RefreshCw } from "lucide-react"; +import React, { useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { Sheet } from "react-modal-sheet"; +import { Link } from "react-router"; +import { ConsolidatedCirculationList } from "~/components/Stops/ConsolidatedCirculationList"; +import { APP_CONSTANTS } from "~/config/constants"; +import { type ConsolidatedCirculation } from "../../routes/stops-$id"; +import { ErrorDisplay } from "../ErrorDisplay"; +import LineIcon from "../LineIcon"; +import "./StopSummarySheet.css"; +import { StopSummarySheetSkeleton } from "./StopSummarySheetSkeleton"; + +export interface StopSheetProps { + isOpen: boolean; + onClose: () => void; + stop: { + stopId: string; + stopCode?: string; + stopFeed?: string; + name: string; + lines: { + line: string; + colour?: string; + textColour?: string; + }[]; + }; +} + +interface ErrorInfo { + type: "network" | "server" | "unknown"; + status?: number; + message?: string; +} + +const loadConsolidatedData = async ( + stopId: string +): Promise => { + const resp = await fetch( + `${APP_CONSTANTS.consolidatedCirculationsEndpoint}?stopId=${stopId}`, + { + headers: { + Accept: "application/json", + }, + } + ); + + if (!resp.ok) { + throw new Error(`HTTP ${resp.status}: ${resp.statusText}`); + } + + return await resp.json(); +}; + +export const StopSheet: React.FC = ({ + isOpen, + onClose, + stop, +}) => { + const { t } = useTranslation(); + const [data, setData] = useState(null); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + const [lastUpdated, setLastUpdated] = useState(null); + + const parseError = (error: any): ErrorInfo => { + if (!navigator.onLine) { + return { type: "network", message: "No internet connection" }; + } + + if ( + error.message?.includes("Failed to fetch") || + error.message?.includes("NetworkError") + ) { + return { type: "network" }; + } + + if (error.message?.includes("HTTP")) { + const statusMatch = error.message.match(/HTTP (\d+):/); + const status = statusMatch ? parseInt(statusMatch[1]) : undefined; + return { type: "server", status }; + } + + return { type: "unknown", message: error.message }; + }; + + const loadData = async () => { + try { + setLoading(true); + setError(null); + setData(null); + + const stopData = await loadConsolidatedData(stop.stopId); + setData(stopData); + setLastUpdated(new Date()); + } catch (err) { + console.error("Failed to load stop data:", err); + setError(parseError(err)); + } finally { + setLoading(false); + } + }; + + useEffect(() => { + if (isOpen && stop.stopId) { + loadData(); + } + }, [isOpen, stop.stopId]); + + // Show only the next 4 arrivals + const sortedData = data + ? [...data].sort( + (a, b) => + (a.realTime?.minutes ?? a.schedule?.minutes ?? 999) - + (b.realTime?.minutes ?? b.schedule?.minutes ?? 999) + ) + : []; + const limitedEstimates = sortedData.slice(0, 4); + + return ( + + + + +
+
+

{stop.name}

+ ({stop.stopCode}) +
+ +
+ {stop.lines.map((lineObj) => ( + + ))} +
+ + {/* TODO: Enable stop alerts when available */} + {/**/} + + {loading ? ( + + ) : error ? ( + + ) : data ? ( + <> +
+

+ {t("estimates.next_arrivals", "Next arrivals")} +

+ + {limitedEstimates.length === 0 ? ( +
+ {t("estimates.none", "No hay estimaciones disponibles")} +
+ ) : ( + + )} +
+ + ) : null} +
+ + +
+ {lastUpdated && ( +
+ {t("estimates.last_updated", "Actualizado a las")}{" "} + {lastUpdated.toLocaleTimeString(undefined, { + hour: "2-digit", + minute: "2-digit", + second: "2-digit", + })} +
+ )} + +
+ + + + {t("map.view_all_estimates", "Ver todas las estimaciones")} + +
+
+ + + + ); +}; diff --git a/src/frontend/app/components/map/StopSummarySheetSkeleton.tsx b/src/frontend/app/components/map/StopSummarySheetSkeleton.tsx new file mode 100644 index 0000000..7697efc --- /dev/null +++ b/src/frontend/app/components/map/StopSummarySheetSkeleton.tsx @@ -0,0 +1,79 @@ +import React from "react"; +import { useTranslation } from "react-i18next"; +import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; +import "react-loading-skeleton/dist/skeleton.css"; + +interface StopSheetSkeletonProps { + rows?: number; +} + +export const StopSummarySheetSkeleton: React.FC = ({ + rows = 4, +}) => { + const { t } = useTranslation(); + + return ( + +
+

+ {t("estimates.next_arrivals", "Next arrivals")} +

+ +
+ {Array.from({ length: rows }, (_, index) => ( +
+
+ +
+ +
+
+ +
+
+ +
+
+
+ ))} +
+
+ +
+
+ +
+ +
+
+ +
+ +
+ +
+
+
+ + ); +}; -- cgit v1.3