Add simpleCSS, improve usability

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>
 		</>
 	)
 }