blob: 4fa68cf32e938c406085bb5223f479623d1d69db (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { StopDataProvider } from "../data/stopDataProvider";
interface StopDetails {
stop: {
id: number;
name: string;
latitude: number;
longitude: number;
}
estimates: {
line: string;
route: string;
minutes: number;
meters: number;
}[]
}
export function Stop(): JSX.Element {
const sdp = new StopDataProvider();
const [data, setData] = useState<StopDetails | null>(null);
const [favourited, setFavourited] = useState(false);
const params = useParams();
const loadData = () => {
fetch(`/api/GetStopEstimates?id=${params.stopId}`)
.then(r => r.json())
.then((body: StopDetails) => setData(body));
};
useEffect(() => {
loadData();
setFavourited(
sdp.isFavourite(parseInt(params.stopId ?? ""))
);
})
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 (data === null) return <h1>Cargando datos en tiempo real...</h1>
return (
<>
<div>
<h1>{data?.stop.name} ({data?.stop.id})</h1>
</div>
<div style={{display: 'flex', gap: '1rem'}}>
<Link to="/" className="button">
🔙 Volver al listado de paradas
</Link>
{!favourited && (
<button type="button" onClick={() => {
sdp.addFavourite(parseInt(params.stopId ?? ""));
setFavourited(true);
}}>
⭐ Añadir a favoritos
</button>
)}
{favourited && (
<button type="button" onClick={() => {
sdp.removeFavourite(parseInt(params.stopId ?? ""));
setFavourited(false);
}}>
⭐Quitar de favoritos
</button>
)}
<button onClick={loadData}>⬇️ Recargar</button>
</div>
<table>
<caption>Estimaciones de llegadas</caption>
<thead>
<tr>
<th>Línea</th>
<th>Ruta</th>
<th>Minutos</th>
<th>Metros</th>
</tr>
</thead>
<tbody>
{data.estimates
.sort((a, b) => a.minutes - b.minutes)
.map((estimate, idx) => (
<tr key={idx}>
<td>{estimate.line}</td>
<td>{estimate.route}</td>
<td>
{estimate.minutes} ({absoluteArrivalTime(estimate.minutes)})
</td>
<td>
{estimate.meters > -1
? `${estimate.meters} metros`
: "No disponible"
}
</td>
</tr>
))}
</tbody>
{data?.estimates.length === 0 && (
<tfoot>
<tr>
<td colSpan={4}>No hay estimaciones disponibles</td>
</tr>
</tfoot>
)}
</table>
<p>
<Link to="/">Volver al inicio</Link>
</p>
</>
)
}
|
