From 3676b1d1d9216a676c7d5a40affa5b3256ca8df3 Mon Sep 17 00:00:00 2001 From: Ariel Costas Guerrero Date: Sun, 20 Apr 2025 20:15:55 +0200 Subject: Refactor stop data handling with caching and custom names support --- src/data/StopDataProvider.ts | 101 +++++++++++++++++++++++++++++++------------ src/pages/Estimates.tsx | 28 +++++++++--- src/pages/Map.tsx | 14 ++---- src/pages/StopList.tsx | 16 ++++--- src/styles/Estimates.css | 80 ++++++++++++++++++++-------------- 5 files changed, 156 insertions(+), 83 deletions(-) (limited to 'src') diff --git a/src/data/StopDataProvider.ts b/src/data/StopDataProvider.ts index 55d0e78..0c1e46e 100644 --- a/src/data/StopDataProvider.ts +++ b/src/data/StopDataProvider.ts @@ -17,41 +17,72 @@ export interface Stop { favourite?: boolean; } -export default { - getStops, - getDisplayName, - addFavourite, - removeFavourite, - isFavourite, - pushRecent, - getRecent -}; +// In-memory cache and lookup map +let cachedStops: Stop[] | null = null; +let stopsMap: Record = {}; +// Custom names loaded from localStorage +let customNames: Record = {}; + +// Initialize cachedStops and customNames once +async function initStops() { + if (!cachedStops) { + const response = await fetch('/stops.json'); + const stops = await response.json() as Stop[]; + // build array and map + stopsMap = {}; + cachedStops = stops.map(stop => { + const entry = { ...stop, favourite: false } as Stop; + stopsMap[stop.stopId] = entry; + return entry; + }); + // load custom names + const rawCustom = localStorage.getItem('customStopNames'); + if (rawCustom) customNames = JSON.parse(rawCustom) as Record; + } +} async function getStops(): Promise { - const rawFavouriteStops = localStorage.getItem('favouriteStops'); - let favouriteStops: number[] = []; - if (rawFavouriteStops) { - favouriteStops = JSON.parse(rawFavouriteStops) as number[]; - } - - const response = await fetch('/stops.json'); - const stops = await response.json() as Stop[]; + await initStops(); + // update favourites + const rawFav = localStorage.getItem('favouriteStops'); + const favouriteStops = rawFav ? JSON.parse(rawFav) as number[] : []; + cachedStops!.forEach(stop => stop.favourite = favouriteStops.includes(stop.stopId)); + return cachedStops!; +} - return stops.map((stop: Stop) => { - return { - ...stop, - favourite: favouriteStops.includes(stop.stopId) - }; - }); +// New: get single stop by id +async function getStopById(stopId: number): Promise { + await initStops(); + const stop = stopsMap[stopId]; + if (stop) { + const rawFav = localStorage.getItem('favouriteStops'); + const favouriteStops = rawFav ? JSON.parse(rawFav) as number[] : []; + stop.favourite = favouriteStops.includes(stopId); + } + return stop; } -// Get display name based on preferences or context +// Updated display name to include custom names function getDisplayName(stop: Stop): string { - if (typeof stop.name === 'string') { - return stop.name; - } + if (customNames[stop.stopId]) return customNames[stop.stopId]; + const nameObj = stop.name; + return nameObj.intersect || nameObj.original; +} - return stop.name.intersect || stop.name.original; +// New: set or remove custom names +function setCustomName(stopId: number, label: string) { + customNames[stopId] = label; + localStorage.setItem('customStopNames', JSON.stringify(customNames)); +} + +function removeCustomName(stopId: number) { + delete customNames[stopId]; + localStorage.setItem('customStopNames', JSON.stringify(customNames)); +} + +// New: get custom label for a stop +function getCustomName(stopId: number): string | undefined { + return customNames[stopId]; } function addFavourite(stopId: number) { @@ -113,3 +144,17 @@ function getRecent(): number[] { } return []; } + +export default { + getStops, + getStopById, + getCustomName, + getDisplayName, + setCustomName, + removeCustomName, + addFavourite, + removeFavourite, + isFavourite, + pushRecent, + getRecent +}; diff --git a/src/pages/Estimates.tsx b/src/pages/Estimates.tsx index 90745da..7cf941a 100644 --- a/src/pages/Estimates.tsx +++ b/src/pages/Estimates.tsx @@ -1,7 +1,7 @@ import { JSX, useEffect, useState } from "react"; import { useParams } from "react-router"; import StopDataProvider from "../data/StopDataProvider"; -import { Star } from 'lucide-react'; +import { Star, Edit2 } from 'lucide-react'; import "../styles/Estimates.css"; import { RegularTable } from "../components/RegularTable"; import { useApp } from "../AppContext"; @@ -28,10 +28,12 @@ const loadData = async (stopId: string) => { }; export function Estimates(): JSX.Element { + const params = useParams(); + const stopIdNum = parseInt(params.stopId ?? ""); + const [customName, setCustomName] = useState(undefined); const [data, setData] = useState(null); const [dataDate, setDataDate] = useState(null); const [favourited, setFavourited] = useState(false); - const params = useParams(); const { tableStyle } = useApp(); useEffect(() => { @@ -39,6 +41,7 @@ export function Estimates(): JSX.Element { .then((body: StopDetails) => { setData(body); setDataDate(new Date()); + setCustomName(StopDataProvider.getCustomName(stopIdNum)); }) @@ -52,14 +55,28 @@ export function Estimates(): JSX.Element { const toggleFavourite = () => { if (favourited) { - StopDataProvider.removeFavourite(parseInt(params.stopId ?? "")); + StopDataProvider.removeFavourite(stopIdNum); setFavourited(false); } else { - StopDataProvider.addFavourite(parseInt(params.stopId ?? "")); + StopDataProvider.addFavourite(stopIdNum); setFavourited(true); } } + const handleRename = () => { + const current = customName ?? data?.stop.name; + const input = window.prompt('Custom name for this stop:', current); + if (input === null) return; // cancelled + const trimmed = input.trim(); + if (trimmed === '') { + StopDataProvider.removeCustomName(stopIdNum); + setCustomName(undefined); + } else { + StopDataProvider.setCustomName(stopIdNum, trimmed); + setCustomName(trimmed); + } + }; + if (data === null) return

Cargando datos en tiempo real...

return ( @@ -67,7 +84,8 @@ export function Estimates(): JSX.Element {

- {data?.stop.name} ({data?.stop.id}) + + {(customName ?? data.stop.name)} ({data.stop.id})

diff --git a/src/pages/Map.tsx b/src/pages/Map.tsx index af95bf9..1f0a9e0 100644 --- a/src/pages/Map.tsx +++ b/src/pages/Map.tsx @@ -41,17 +41,9 @@ export function StopMap() { const { mapState } = useApp(); useEffect(() => { - StopDataProvider.getStops().then((stops) => { setStops(stops); }); + StopDataProvider.getStops().then(setStops); }, []); - const getDisplayName = (stop: Stop): string => { - if (typeof stop.name === 'string') { - return stop.name; - } - - return stop.name.intersect || stop.name.original; - } - return ( - {stops.map((stop) => ( + {stops.map(stop => ( - {getDisplayName(stop)} + {StopDataProvider.getDisplayName(stop)}
{stop.lines.map((line) => ( diff --git a/src/pages/StopList.tsx b/src/pages/StopList.tsx index 449ae84..a2269ec 100644 --- a/src/pages/StopList.tsx +++ b/src/pages/StopList.tsx @@ -37,12 +37,16 @@ export function StopList() { }, [data]) const recentStops = useMemo(() => { - const recent = StopDataProvider.getRecent(); - - if (recent.length === 0) return null; - - return recent.map(stopId => data?.find(stop => stop.stopId === stopId) as Stop).reverse(); - }, [data]) + // no recent items if data not loaded + if (!data) return null; + const recentIds = StopDataProvider.getRecent(); + if (recentIds.length === 0) return null; + // map and filter out missing entries + const stopsList = recentIds + .map(id => data.find(stop => stop.stopId === id)) + .filter((s): s is Stop => Boolean(s)); + return stopsList.reverse(); + }, [data]); if (data === null) return

Loading...

diff --git a/src/styles/Estimates.css b/src/styles/Estimates.css index 1fce445..86ca09b 100644 --- a/src/styles/Estimates.css +++ b/src/styles/Estimates.css @@ -13,7 +13,8 @@ font-weight: 500; } -.table th, .table td { +.table th, +.table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid #eee; @@ -29,63 +30,76 @@ /* Estimates page specific styles */ .estimates-header { - display: flex; - align-items: center; - margin-bottom: 1rem; + display: flex; + align-items: center; + margin-bottom: 1rem; } .estimates-stop-id { - font-size: 1rem; - color: var(--subtitle-color); - margin-left: 0.5rem; + font-size: 1rem; + color: var(--subtitle-color); + margin-left: 0.5rem; } .estimates-arrival { - color: #28a745; - font-weight: 500; + color: #28a745; + font-weight: 500; } .estimates-delayed { - color: #dc3545; + color: #dc3545; } .button-group { - display: flex; - gap: 1rem; - margin-bottom: 1.5rem; - flex-wrap: wrap; + display: flex; + gap: 1rem; + margin-bottom: 1.5rem; + flex-wrap: wrap; } .button { - padding: 0.75rem 1rem; - background-color: var(--button-background-color); - color: white; - border: none; - border-radius: 8px; - font-size: 1rem; - font-weight: 500; - cursor: pointer; - text-align: center; - text-decoration: none; - display: inline-block; + padding: 0.75rem 1rem; + background-color: var(--button-background-color); + color: white; + border: none; + border-radius: 8px; + font-size: 1rem; + font-weight: 500; + cursor: pointer; + text-align: center; + text-decoration: none; + display: inline-block; } .button:hover { - background-color: var(--button-hover-background-color); + background-color: var(--button-hover-background-color); } .button:disabled { - background-color: var(--button-disabled-background-color); - cursor: not-allowed; + background-color: var(--button-disabled-background-color); + cursor: not-allowed; } .star-icon { - margin-right: 0.5rem; - color: #ccc; - fill: none; + margin-right: 0.5rem; + color: #ccc; + fill: none; } .star-icon.active { - color: var(--star-color); /* Yellow color for active star */ - fill: var(--star-color); + color: var(--star-color); + /* Yellow color for active star */ + fill: var(--star-color); +} + +/* Pencil (edit) icon next to header */ +.edit-icon { + margin-right: 0.5rem; + color: #ccc; + cursor: pointer; + stroke-width: 2px; +} + +.edit-icon:hover { + color: var(--star-color); } \ No newline at end of file -- cgit v1.3