blob: 7cf941ab225ff75fa6119da3c2e8ff5811d58f0f (
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
|
import { JSX, useEffect, useState } from "react";
import { useParams } from "react-router";
import StopDataProvider from "../data/StopDataProvider";
import { Star, Edit2 } from 'lucide-react';
import "../styles/Estimates.css";
import { RegularTable } from "../components/RegularTable";
import { useApp } from "../AppContext";
import { GroupedTable } from "../components/GroupedTable";
export interface StopDetails {
stop: {
id: number;
name: string;
latitude: number;
longitude: number;
}
estimates: {
line: string;
route: string;
minutes: number;
meters: number;
}[]
}
const loadData = async (stopId: string) => {
const resp = await fetch(`/api/GetStopEstimates?id=${stopId}`);
return await resp.json();
};
export function Estimates(): JSX.Element {
const params = useParams();
const stopIdNum = parseInt(params.stopId ?? "");
const [customName, setCustomName] = useState<string | undefined>(undefined);
const [data, setData] = useState<StopDetails | null>(null);
const [dataDate, setDataDate] = useState<Date | null>(null);
const [favourited, setFavourited] = useState(false);
const { tableStyle } = useApp();
useEffect(() => {
loadData(params.stopId!)
.then((body: StopDetails) => {
setData(body);
setDataDate(new Date());
setCustomName(StopDataProvider.getCustomName(stopIdNum));
})
StopDataProvider.pushRecent(parseInt(params.stopId ?? ""));
setFavourited(
StopDataProvider.isFavourite(parseInt(params.stopId ?? ""))
);
}, [params.stopId]);
const toggleFavourite = () => {
if (favourited) {
StopDataProvider.removeFavourite(stopIdNum);
setFavourited(false);
} else {
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 <h1 className="page-title">Cargando datos en tiempo real...</h1>
return (
<div className="page-container">
<div className="estimates-header">
<h1 className="page-title">
<Star className={`star-icon ${favourited ? 'active' : ''}`} onClick={toggleFavourite} />
<Edit2 className="edit-icon" onClick={handleRename} />
{(customName ?? data.stop.name)} <span className="estimates-stop-id">({data.stop.id})</span>
</h1>
</div>
<div className="table-responsive">
{tableStyle === 'grouped' ?
<GroupedTable data={data} dataDate={dataDate} /> :
<RegularTable data={data} dataDate={dataDate} />}
</div>
</div>
)
}
|
