From 48ec0aae80a200d7eb50639ff4c4ca8ae564f29b Mon Sep 17 00:00:00 2001 From: Ariel Costas Guerrero Date: Sun, 28 Dec 2025 22:24:26 +0100 Subject: Implement displaying routes with dynamic data from OTP --- src/frontend/app/routes/lines.tsx | 40 ----- src/frontend/app/routes/routes-$id.tsx | 269 +++++++++++++++++++++++++++++++++ src/frontend/app/routes/routes.tsx | 76 ++++++++++ 3 files changed, 345 insertions(+), 40 deletions(-) delete mode 100644 src/frontend/app/routes/lines.tsx create mode 100644 src/frontend/app/routes/routes-$id.tsx create mode 100644 src/frontend/app/routes/routes.tsx (limited to 'src/frontend/app/routes') diff --git a/src/frontend/app/routes/lines.tsx b/src/frontend/app/routes/lines.tsx deleted file mode 100644 index 900c543..0000000 --- a/src/frontend/app/routes/lines.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { useTranslation } from "react-i18next"; -import LineIcon from "~/components/LineIcon"; -import { usePageTitle } from "~/contexts/PageTitleContext"; -import { VIGO_LINES } from "~/data/LinesData"; -import "../tailwind-full.css"; - -export default function LinesPage() { - const { t } = useTranslation(); - usePageTitle(t("navbar.lines", "Líneas")); - - return ( -
-

- {t( - "lines.description", - "A continuación se muestra una lista de las líneas de autobús urbano de Vigo con sus respectivas rutas y enlaces a los horarios oficiales." - )} -

- -
- {VIGO_LINES.map((line) => ( - - -
-

- {line.routeName} -

-
- - ))} -
-
- ); -} diff --git a/src/frontend/app/routes/routes-$id.tsx b/src/frontend/app/routes/routes-$id.tsx new file mode 100644 index 0000000..8dd7e1c --- /dev/null +++ b/src/frontend/app/routes/routes-$id.tsx @@ -0,0 +1,269 @@ +import { useQuery } from "@tanstack/react-query"; +import { useRef, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { Layer, Source, type MapRef } from "react-map-gl/maplibre"; +import { useParams } from "react-router"; +import { fetchRouteDetails } from "~/api/transit"; +import { AppMap } from "~/components/shared/AppMap"; +import { usePageTitle } from "~/contexts/PageTitleContext"; +import "../tailwind-full.css"; + +export default function RouteDetailsPage() { + const { id } = useParams(); + const { t } = useTranslation(); + const [selectedPatternId, setSelectedPatternId] = useState( + null + ); + const [selectedStopId, setSelectedStopId] = useState(null); + const mapRef = useRef(null); + const stopRefs = useRef>({}); + + const { data: route, isLoading } = useQuery({ + queryKey: ["route", id], + queryFn: () => fetchRouteDetails(id!), + enabled: !!id, + }); + + usePageTitle( + route?.shortName + ? `${route.shortName} - ${route.longName}` + : t("routes.details", "Detalles de ruta") + ); + + if (isLoading) { + return ( +
+
+
+ ); + } + + if (!route) { + return ( +
{t("routes.not_found", "Línea no encontrada")}
+ ); + } + + const activePatterns = route.patterns.filter((p) => p.tripCount > 0); + + const patternsByDirection = activePatterns.reduce( + (acc, pattern) => { + const dir = pattern.directionId; + if (!acc[dir]) acc[dir] = []; + acc[dir].push(pattern); + return acc; + }, + {} as Record + ); + + const selectedPattern = + activePatterns.find((p) => p.id === selectedPatternId) || activePatterns[0]; + + const handleStopClick = ( + stopId: string, + lat: number, + lon: number, + scroll = true + ) => { + setSelectedStopId(stopId); + mapRef.current?.flyTo({ + center: [lon, lat], + zoom: 16, + duration: 1000, + }); + + if (scroll) { + stopRefs.current[stopId]?.scrollIntoView({ + behavior: "smooth", + block: "center", + }); + } + }; + + const geojson: GeoJSON.FeatureCollection = { + type: "FeatureCollection", + features: selectedPattern?.geometry + ? [ + { + type: "Feature", + geometry: { + type: "LineString", + coordinates: selectedPattern.geometry, + }, + properties: {}, + }, + ] + : [], + }; + + const stopsGeojson: GeoJSON.FeatureCollection = { + type: "FeatureCollection", + features: + selectedPattern?.stops.map((stop) => ({ + type: "Feature", + geometry: { + type: "Point", + coordinates: [stop.lon, stop.lat], + }, + properties: { + id: stop.id, + name: stop.name, + code: stop.code, + lat: stop.lat, + lon: stop.lon, + }, + })) || [], + }; + + return ( +
+
+ +
+ +
+
+
+ { + const feature = e.features?.[0]; + if (feature && feature.layer.id === "stop-circles") { + const { id, lat, lon } = feature.properties; + handleStopClick(id, lat, lon, true); + } + }} + > + {selectedPattern?.geometry && ( + + + + )} + + + + +
+ +
+

+ {t("routes.stops", "Paradas")} +

+
+ {selectedPattern?.stops.map((stop, idx) => ( +
{ + stopRefs.current[stop.id] = el; + }} + onClick={() => + handleStopClick(stop.id, stop.lat, stop.lon, false) + } + className={`flex items-start gap-4 p-3 rounded-lg border transition-colors cursor-pointer ${ + selectedStopId === stop.id + ? "bg-primary/5 border-primary" + : "bg-surface border-border hover:border-primary/50" + }`} + > +
+
+ {idx < selectedPattern.stops.length - 1 && ( +
+ )} +
+
+

+ {stop.name} + {stop.code && ( + + {stop.code} + + )} +

+ + {selectedStopId === stop.id && + stop.scheduledDepartures.length > 0 && ( +
+ {stop.scheduledDepartures.map((dep, i) => ( + + {Math.floor(dep / 3600) + .toString() + .padStart(2, "0")} + : + {Math.floor((dep % 3600) / 60) + .toString() + .padStart(2, "0")} + + ))} +
+ )} +
+
+ ))} +
+
+
+
+
+ ); +} diff --git a/src/frontend/app/routes/routes.tsx b/src/frontend/app/routes/routes.tsx new file mode 100644 index 0000000..2c11168 --- /dev/null +++ b/src/frontend/app/routes/routes.tsx @@ -0,0 +1,76 @@ +import { useQuery } from "@tanstack/react-query"; +import { useTranslation } from "react-i18next"; +import { Link } from "react-router"; +import { fetchRoutes } from "~/api/transit"; +import LineIcon from "~/components/LineIcon"; +import { usePageTitle } from "~/contexts/PageTitleContext"; +import "../tailwind-full.css"; + +export default function RoutesPage() { + const { t } = useTranslation(); + usePageTitle(t("navbar.routes", "Rutas")); + + const { data: routes, isLoading } = useQuery({ + queryKey: ["routes"], + queryFn: () => fetchRoutes(["santiago", "vitrasa", "coruna", "feve"]), + }); + + const routesByAgency = routes?.reduce( + (acc, route) => { + const agency = route.agencyName || t("routes.unknown_agency", "Otros"); + if (!acc[agency]) acc[agency] = []; + acc[agency].push(route); + return acc; + }, + {} as Record + ); + + return ( +
+

+ {t( + "routes.description", + "A continuación se muestra una lista de las rutas de autobús urbano con sus respectivos trayectos." + )} +

+ + {isLoading && ( +
+
+
+ )} + +
+ {routesByAgency && + Object.entries(routesByAgency).map(([agency, agencyRoutes]) => ( +
+

+ {agency} +

+
+ {agencyRoutes.map((route) => ( + + +
+

+ {route.longName} +

+
+ + ))} +
+
+ ))} +
+
+ ); +} -- cgit v1.3