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
|
import { useEffect, useMemo, useState } from "react";
import { Link, useNavigate } from "react-router";
import { Stop, StopDataProvider } from "../data/StopDataProvider";
import LineIcon from "../components/LineIcon";
const sdp = new StopDataProvider();
export function StopMap() {
const [data, setData] = useState<Stop[] | null>(null)
const navigate = useNavigate();
useEffect(() => {
sdp.getStops().then((stops: Stop[]) => setData(stops))
}, []);
const handleStopSearch = async (event: React.FormEvent) => {
event.preventDefault()
const stopId = (event.target as HTMLFormElement).stopId.value
const searchNumber = parseInt(stopId)
if (data?.find(stop => stop.stopId === searchNumber)) {
navigate(`/estimates/${searchNumber}`)
} else {
alert("Parada no encontrada")
}
}
if (data === null) return <h1 className="page-title">Loading...</h1>
return (
<div className="page-container">
<h1 className="page-title">Map View</h1>
<div className="map-container">
{/* Map placeholder - in a real implementation, this would be a map component */}
<div style={{
height: '100%',
backgroundColor: '#f0f0f0',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderRadius: '8px'
}}>
<p>Map will be displayed here</p>
</div>
</div>
<form className="search-form" onSubmit={handleStopSearch}>
<div className="form-group">
<label className="form-label" htmlFor="stopId">
Find Stop by ID
</label>
<input className="form-input" type="number" placeholder="Stop ID" id="stopId" />
</div>
<button className="form-button" type="submit">Search</button>
</form>
<div className="list-container">
<h2 className="page-subtitle">Nearby Stops</h2>
<ul className="list">
{data?.slice(0, 5).map((stop: Stop) => (
<li className="list-item" key={stop.stopId}>
<Link className="list-item-link" to={`/estimates/${stop.stopId}`}>
({stop.stopId}) {stop.name}
<div className="line-icons">
{stop.lines?.map(line => <LineIcon key={line} line={line} />)}
</div>
</Link>
</li>
))}
</ul>
</div>
</div>
)
}
|
