From b04fd7d33d07f9eddea2eb53e1389d5ca5453413 Mon Sep 17 00:00:00 2001 From: Ariel Costas Guerrero Date: Tue, 5 Aug 2025 23:36:20 +0200 Subject: Add timetable feature with caching and localization support --- src/frontend/app/routes/estimates-$id.css | 46 +++++ src/frontend/app/routes/estimates-$id.tsx | 49 +++++- src/frontend/app/routes/timetable-$id.css | 139 +++++++++++++++ src/frontend/app/routes/timetable-$id.tsx | 275 ++++++++++++++++++++++++++++++ 4 files changed, 507 insertions(+), 2 deletions(-) create mode 100644 src/frontend/app/routes/timetable-$id.css create mode 100644 src/frontend/app/routes/timetable-$id.tsx (limited to 'src/frontend/app/routes') diff --git a/src/frontend/app/routes/estimates-$id.css b/src/frontend/app/routes/estimates-$id.css index 3905f3e..8906147 100644 --- a/src/frontend/app/routes/estimates-$id.css +++ b/src/frontend/app/routes/estimates-$id.css @@ -103,3 +103,49 @@ .edit-icon:hover { color: var(--star-color); } + +/* Timetable section styles */ +.timetable-section { + padding-top: 1.5rem; + padding-bottom: 3rem; /* Add bottom padding before footer */ +} + +/* Timetable cards should be single column */ +.timetable-section .timetable-cards { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.timetable-section .timetable-card { + padding: 0.875rem; +} + +.timetable-actions { + margin-top: 1.5rem; + text-align: center; +} + +.view-all-link { + display: inline-flex; + align-items: center; + gap: 0.5rem; + color: var(--link-color, #007bff); + text-decoration: none; + font-weight: 500; + padding: 0.5rem 1rem; + border: 1px solid var(--link-color, #007bff); + border-radius: 6px; + transition: all 0.2s ease; +} + +.view-all-link:hover { + background-color: var(--link-color, #007bff); + color: white; + text-decoration: none; +} + +.external-icon { + width: 1rem; + height: 1rem; +} diff --git a/src/frontend/app/routes/estimates-$id.tsx b/src/frontend/app/routes/estimates-$id.tsx index f2ef83a..b5ae91a 100644 --- a/src/frontend/app/routes/estimates-$id.tsx +++ b/src/frontend/app/routes/estimates-$id.tsx @@ -1,12 +1,13 @@ import { type JSX, useEffect, useState } from "react"; -import { useParams } from "react-router"; +import { useParams, Link } from "react-router"; import StopDataProvider from "../data/StopDataProvider"; -import { Star, Edit2 } from "lucide-react"; +import { Star, Edit2, ExternalLink } from "lucide-react"; import "./estimates-$id.css"; import { RegularTable } from "../components/RegularTable"; import { useApp } from "../AppContext"; import { GroupedTable } from "../components/GroupedTable"; import { useTranslation } from "react-i18next"; +import { TimetableTable, type TimetableEntry } from "../components/TimetableTable"; export interface StopDetails { stop: { @@ -32,6 +33,24 @@ const loadData = async (stopId: string) => { return await resp.json(); }; +const loadTimetableData = async (stopId: string) => { + const today = new Date().toISOString().split('T')[0]; // YYYY-MM-DD format + try { + const resp = await fetch(`/api/GetStopTimetable?date=${today}&stopId=${stopId}`, { + headers: { + Accept: "application/json", + }, + }); + if (!resp.ok) { + throw new Error(`HTTP error! status: ${resp.status}`); + } + return await resp.json(); + } catch (error) { + console.error('Error loading timetable data:', error); + return []; + } +}; + export default function Estimates() { const { t } = useTranslation(); const params = useParams(); @@ -40,15 +59,22 @@ export default function Estimates() { const [data, setData] = useState(null); const [dataDate, setDataDate] = useState(null); const [favourited, setFavourited] = useState(false); + const [timetableData, setTimetableData] = useState([]); const { tableStyle } = useApp(); useEffect(() => { + // Load real-time estimates loadData(params.id!).then((body: StopDetails) => { setData(body); setDataDate(new Date()); setCustomName(StopDataProvider.getCustomName(stopIdNum)); }); + // Load timetable data + loadTimetableData(params.id!).then((timetableBody: TimetableEntry[]) => { + setTimetableData(timetableBody); + }); + StopDataProvider.pushRecent(parseInt(params.id ?? "")); setFavourited(StopDataProvider.isFavourite(parseInt(params.id ?? ""))); @@ -102,6 +128,25 @@ export default function Estimates() { )} + +
+ + + {timetableData.length > 0 && ( +
+ + + {t("timetable.viewAll", "Ver todos los horarios")} + +
+ )} +
); } diff --git a/src/frontend/app/routes/timetable-$id.css b/src/frontend/app/routes/timetable-$id.css new file mode 100644 index 0000000..5ae472c --- /dev/null +++ b/src/frontend/app/routes/timetable-$id.css @@ -0,0 +1,139 @@ +.timetable-full-header { + margin-bottom: 2rem; +} + +.back-link { + display: inline-flex; + align-items: center; + gap: 0.5rem; + color: var(--link-color, #007bff); + text-decoration: none; + margin-bottom: 1rem; + font-weight: 500; + transition: color 0.2s ease; +} + +.back-link:hover { + color: var(--link-hover-color, #0056b3); + text-decoration: underline; +} + +.back-icon { + width: 1.2rem; + height: 1.2rem; +} + +.page-title .stop-name { + font-size: 1.2rem; + font-weight: 600; + color: var(--text-primary, #333); +} + +.page-title .stop-id { + font-size: 1rem; + color: var(--text-secondary, #666); + font-weight: normal; + margin-left: 0.5rem; +} + +.timetable-full-content { + margin-top: 1rem; +} + +.error-message { + text-align: center; + padding: 3rem 2rem; + background-color: var(--error-background, #f8f9fa); + border: 1px solid var(--error-border, #dee2e6); + border-radius: 8px; + margin: 2rem 0; +} + +.error-message p { + margin-bottom: 1rem; + color: var(--error-color, #dc3545); + font-weight: 500; +} + +.error-detail { + font-size: 0.9rem; + color: var(--text-secondary, #666) !important; + font-weight: normal !important; +} + +.timetable-controls { + margin-bottom: 1.5rem; + display: flex; + justify-content: center; +} + +.past-toggle { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background-color: var(--button-background, #f8f9fa); + color: var(--text-primary, #333); + border: 1px solid var(--button-border, #dee2e6); + border-radius: 6px; + font-size: 0.9rem; + font-weight: 500; + cursor: pointer; + transition: all 0.2s ease; +} + +.past-toggle:hover { + background-color: var(--button-hover-background, #e9ecef); +} + +.past-toggle.active { + background-color: var(--link-color, #007bff); + color: white; + border-color: var(--link-color, #007bff); +} + +.toggle-icon { + width: 1rem; + height: 1rem; +} + +/* Next entry highlight */ +.timetable-card.timetable-next { + border: 2px solid var(--accent-color, #28a745); + background: var(--surface-next, #e8f5e8) !important; +} + +/* Override timetable cards styles for full page */ +.timetable-full-content .timetable-cards { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.timetable-full-content .timetable-caption { + font-size: 1.2rem; + margin-bottom: 1.5rem; +} + +.timetable-full-content .timetable-card { + padding: 1.25rem; +} + +/* Responsive design */ +@media (max-width: 768px) { + .page-title { + font-size: 1.5rem; + } + + .page-title .stop-name { + font-size: 1.1rem; + } + + .timetable-full-content .timetable-cards { + gap: 0.75rem; + } + + .timetable-full-content .timetable-card { + padding: 1rem; + } +} diff --git a/src/frontend/app/routes/timetable-$id.tsx b/src/frontend/app/routes/timetable-$id.tsx new file mode 100644 index 0000000..073dddb --- /dev/null +++ b/src/frontend/app/routes/timetable-$id.tsx @@ -0,0 +1,275 @@ +import { useEffect, useState, useRef } from "react"; +import { useParams, Link } from "react-router"; +import StopDataProvider from "../data/StopDataProvider"; +import { ArrowLeft, Eye, EyeOff } from "lucide-react"; +import { TimetableTable, type TimetableEntry } from "../components/TimetableTable"; +import LineIcon from "../components/LineIcon"; +import { useTranslation } from "react-i18next"; +import "./timetable-$id.css"; + +const loadTimetableData = async (stopId: string) => { + const today = new Date().toISOString().split('T')[0]; // YYYY-MM-DD format + try { + const resp = await fetch(`/api/GetStopTimetable?date=${today}&stopId=${stopId}`, { + headers: { + Accept: "application/json", + }, + }); + if (!resp.ok) { + throw new Error(`HTTP error! status: ${resp.status}`); + } + return await resp.json(); + } catch (error) { + console.error('Error loading timetable data:', error); + return []; + } +}; + +// Utility function to compare times +const timeToMinutes = (time: string): number => { + const [hours, minutes] = time.split(':').map(Number); + return hours * 60 + minutes; +}; + +// Filter past entries (keep only a few recent past ones) +const filterTimetableData = (data: TimetableEntry[], currentTime: string, showPast: boolean = false): TimetableEntry[] => { + if (showPast) return data; + + const currentMinutes = timeToMinutes(currentTime); + const sortedData = [...data].sort((a, b) => + timeToMinutes(a.departure_time) - timeToMinutes(b.departure_time) + ); + + // Find the current position + const currentIndex = sortedData.findIndex(entry => + timeToMinutes(entry.departure_time) >= currentMinutes + ); + + if (currentIndex === -1) { + // All entries are in the past, show last 3 + return sortedData.slice(-3); + } + + // Show 3 past entries + all future entries + const startIndex = Math.max(0, currentIndex - 3); + return sortedData.slice(startIndex); +}; + +// Utility function to parse service ID and get the turn number +const parseServiceId = (serviceId: string): string => { + const parts = serviceId.split('_'); + if (parts.length === 0) return ''; + + const lastPart = parts[parts.length - 1]; + if (lastPart.length < 6) return ''; + + const last6 = lastPart.slice(-6); + const lineCode = last6.slice(0, 3); + const turnCode = last6.slice(-3); + + // Remove leading zeros from turn + const turnNumber = parseInt(turnCode, 10).toString(); + + // Parse line number with special cases + const lineNumber = parseInt(lineCode, 10); + let displayLine: string; + + switch (lineNumber) { + case 1: displayLine = "C1"; break; + case 3: displayLine = "C3"; break; + case 30: displayLine = "N1"; break; + case 33: displayLine = "N4"; break; + case 8: displayLine = "A"; break; + case 101: displayLine = "H"; break; + case 150: displayLine = "REF"; break; + case 500: displayLine = "TUR"; break; + default: displayLine = `L${lineNumber}`; + } + + return `${displayLine}-${turnNumber}`; +}; + +export default function Timetable() { + const { t } = useTranslation(); + const params = useParams(); + const stopIdNum = parseInt(params.id ?? ""); + const [timetableData, setTimetableData] = useState([]); + const [customName, setCustomName] = useState(undefined); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const [showPastEntries, setShowPastEntries] = useState(false); + const nextEntryRef = useRef(null); + + const currentTime = new Date().toTimeString().slice(0, 8); // HH:MM:SS + const filteredData = filterTimetableData(timetableData, currentTime, showPastEntries); + + useEffect(() => { + loadTimetableData(params.id!).then((timetableBody: TimetableEntry[]) => { + setTimetableData(timetableBody); + setLoading(false); + if (timetableBody.length === 0) { + setError(t("timetable.noDataAvailable", "No hay datos de horarios disponibles para hoy")); + } else { + // Scroll to next entry after a short delay to allow rendering + setTimeout(() => { + const currentMinutes = timeToMinutes(currentTime); + const sortedData = [...timetableBody].sort((a, b) => + timeToMinutes(a.departure_time) - timeToMinutes(b.departure_time) + ); + + const nextIndex = sortedData.findIndex(entry => + timeToMinutes(entry.departure_time) >= currentMinutes + ); + + if (nextIndex !== -1 && nextEntryRef.current) { + nextEntryRef.current.scrollIntoView({ + behavior: 'smooth', + block: 'center' + }); + } + }, 500); + } + }).catch((err) => { + setError(t("timetable.loadError", "Error al cargar los horarios")); + setLoading(false); + }); + + setCustomName(StopDataProvider.getCustomName(stopIdNum)); + }, [params.id, stopIdNum, t, currentTime]); + + if (loading) { + return

{t("common.loading")}

; + } + + // Get stop name from timetable data or use stop ID + const stopName = customName || + (timetableData.length > 0 ? `Parada ${params.id}` : `Parada ${params.id}`); + + return ( +
+
+ +

+ {t("timetable.fullTitle", "Horarios teóricos")} ({params.id}) +

+ + + {t("timetable.backToEstimates", "Volver a estimaciones")} + +
+ + {error ? ( +
+

{error}

+

+ {t("timetable.errorDetail", "Los horarios teóricos se actualizan diariamente. Inténtalo más tarde.")} +

+
+ ) : ( +
+
+ +
+ + +
+ )} +
+ ); +} + +// Custom component for the full timetable with scroll reference +const TimetableTableWithScroll: React.FC<{ + data: TimetableEntry[]; + showAll: boolean; + currentTime: string; + nextEntryRef: React.RefObject; +}> = ({ data, showAll, currentTime, nextEntryRef }) => { + const { t } = useTranslation(); + const nowMinutes = timeToMinutes(currentTime); + + return ( +
+
+ {t("timetable.fullCaption", "Horarios teóricos de la parada")} +
+ +
+ {data.map((entry, index) => { + const entryMinutes = timeToMinutes(entry.departure_time); + const isPast = entryMinutes < nowMinutes; + const isNext = !isPast && (index === 0 || timeToMinutes(data[index - 1]?.departure_time || '00:00:00') < nowMinutes); + + return ( +
+
+
+ +
+ +
+ {entry.trip.headsign && entry.trip.headsign.trim() ? ( + {entry.trip.headsign} + ) : ( + {t("timetable.noDestination", "Línea")} {entry.line.name} + )} +
+ +
+ + {entry.departure_time.slice(0, 5)} + +
+ {parseServiceId(entry.trip.service_id)} +
+
+
+
+ {!isPast && entry.next_streets.length > 0 && ( +
+ {entry.next_streets.join(' — ')} +
+ )} +
+
+ ); + })} +
+ + {data.length === 0 && ( +

{t("timetable.noData", "No hay datos de horarios disponibles")}

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