diff options
Diffstat (limited to 'src/pages/Stop.tsx')
| -rw-r--r-- | src/pages/Stop.tsx | 26 |
1 files changed, 23 insertions, 3 deletions
diff --git a/src/pages/Stop.tsx b/src/pages/Stop.tsx index 2ee077c..33f1a31 100644 --- a/src/pages/Stop.tsx +++ b/src/pages/Stop.tsx @@ -19,7 +19,7 @@ interface StopDetails { export function Stop(): JSX.Element { const params = useParams(); - const { data, error, isLoading } = useSWR<StopDetails>('home', async () => { + const { data, error, isLoading } = useSWR<StopDetails>(`stop-${params.stopId}`, async () => { let response; try { @@ -31,6 +31,15 @@ export function Stop(): JSX.Element { } }); + const absoluteArrivalTime = (minutes: number) => { + const now = new Date() + const arrival = new Date(now.getTime() + minutes * 60000) + return Intl.DateTimeFormat(navigator.language, { + hour: '2-digit', + minute: '2-digit' + }).format(arrival) + } + if (isLoading) return <h1>Loading...</h1> if (error) return <h1>Error: {JSON.stringify(error)}</h1> if (data === undefined) return <h1>No data</h1> @@ -58,12 +67,23 @@ export function Stop(): JSX.Element { <tr key={idx}> <td>{estimate.line}</td> <td>{estimate.route}</td> - <td>{estimate.minutes}</td> - <td>{estimate.meters}</td> + <td> + {estimate.minutes} ({absoluteArrivalTime(estimate.minutes)}) + </td> + <td> + {estimate.meters > -1 + ? `${estimate.meters} metros` + : "No disponible" + } + </td> </tr> ))} </tbody> </table> + + <p> + <a href="/">Volver al inicio</a> + </p> </> ) } |