2024-01-28 20:06:55 +01:00
|
|
|
import {useEffect, useState} from "react";
|
|
|
|
|
2024-01-28 20:48:44 +01:00
|
|
|
function TrainsTable({stop, date, time, tableType}) {
|
2024-01-28 20:06:55 +01:00
|
|
|
let tableClass = tableType === "departures" ? "table-departures" : "table-arrivals"
|
|
|
|
tableClass = `table table-striped ${tableClass}`
|
|
|
|
return <>
|
|
|
|
<table className={tableClass}>
|
|
|
|
<TrainsTableHeader />
|
2024-01-28 20:48:44 +01:00
|
|
|
<TrainsTableBody stop={stop} date={date} time={time} tableType={tableType} />
|
2024-01-28 20:06:55 +01:00
|
|
|
</table>
|
|
|
|
</>
|
|
|
|
}
|
|
|
|
|
|
|
|
function TrainsTableHeader() {
|
|
|
|
return <thead>
|
|
|
|
<tr>
|
|
|
|
<th className="px-3 py-1" scope="col" colSpan="2">Train</th>
|
|
|
|
<th className="px-3 py-1" scope="col">Heure</th>
|
|
|
|
<th className="px-3 py-1" scope="col">Destination</th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
}
|
|
|
|
|
2024-01-28 20:48:44 +01:00
|
|
|
function TrainsTableBody({stop, date, time, tableType}) {
|
2024-01-28 20:06:55 +01:00
|
|
|
const [trains, setTrains] = useState([])
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (stop.id !== undefined) {
|
2024-01-28 20:48:44 +01:00
|
|
|
fetch(`http://localhost:8000/api/station/next_${tableType}/?stop_id=${stop.id}&date=${date}&time=${time}&format=json`)
|
2024-01-28 20:06:55 +01:00
|
|
|
.then(response => response.json())
|
|
|
|
.then(data => data.results)
|
|
|
|
.then(data => {
|
|
|
|
setTrains(data)
|
|
|
|
})
|
|
|
|
}
|
2024-01-28 20:48:44 +01:00
|
|
|
}, [stop, tableType, date, time])
|
2024-01-28 20:06:55 +01:00
|
|
|
|
|
|
|
let table_rows = trains.map((train) => <TrainRow train={train} tableType={tableType} />)
|
|
|
|
|
|
|
|
return <tbody>
|
|
|
|
{table_rows}
|
|
|
|
</tbody>
|
|
|
|
}
|
|
|
|
|
|
|
|
function TrainRow({train, tableType}) {
|
|
|
|
const [trip, setTrip] = useState({})
|
|
|
|
const [route, setRoute] = useState({})
|
|
|
|
const [stopTimes, setStopTimes] = useState([])
|
|
|
|
const [trainType, setTrainType] = useState("")
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (train.trip !== undefined) {
|
|
|
|
fetch(`http://localhost:8000/api/gtfs/trip/${train.trip}/`)
|
|
|
|
.then(response => response.json())
|
|
|
|
.then(t => {
|
|
|
|
t.stop_times = []
|
|
|
|
setTrip(t)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}, [train.trip])
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (trip.route !== undefined) {
|
|
|
|
fetch(`http://localhost:8000/api/gtfs/route/${trip.route}/`)
|
|
|
|
.then(response => response.json())
|
|
|
|
.then(data => {
|
|
|
|
setRoute(data)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}, [trip.route])
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (route !== undefined) {
|
|
|
|
setTrainType(getTrainType(train, route))
|
|
|
|
}
|
|
|
|
}, [train, route]);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (trip.route !== undefined) {
|
|
|
|
fetch(`http://localhost:8000/api/gtfs/stop_time/?trip=${trip.id}&order=stop_sequence&limit=1000`)
|
|
|
|
.then(response => response.json())
|
|
|
|
.then(data => data.results)
|
|
|
|
.then(stop_times => {
|
|
|
|
Promise.all(stop_times.map(stop_time =>
|
|
|
|
fetch(`http://localhost:8000/api/gtfs/stop/${stop_time.stop}/`).then(response => response.json())
|
|
|
|
)).then(stops => {
|
|
|
|
setStopTimes(stop_times.map((stop_time, index) => {
|
|
|
|
stop_time.stop = stops[index]
|
|
|
|
return stop_time
|
|
|
|
}))
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}, [trip.route])
|
|
|
|
|
|
|
|
let headline = stopTimes[tableType === "departures" ? stopTimes.length - 1 : 0]?.stop ?? {name: "Chargement…"}
|
|
|
|
let stops_names = stopTimes.filter(stop_time => tableType === "departures" ? stop_time.stop_sequence > train.stop_sequence : stop_time.stop_sequence < train.stop_sequence)
|
|
|
|
.map(stop_time => stop_time?.stop.name ?? "").join(", ")
|
|
|
|
|
|
|
|
let style = {
|
|
|
|
width: "4em",
|
|
|
|
height: "4em",
|
|
|
|
borderRadius: "15%",
|
|
|
|
backgroundColor: `#${getBackgroundColor(train, route)}`,
|
|
|
|
color: `#${getTextColor(train, route)}`,
|
|
|
|
fontWeight: "bold",
|
|
|
|
}
|
|
|
|
|
|
|
|
return <>
|
|
|
|
<tr className="h-100">
|
|
|
|
<td className="h-100">
|
|
|
|
<div className="train-type d-flex h-100 align-items-center justify-content-center">
|
|
|
|
<div
|
|
|
|
className="transilien-route d-flex align-items-center justify-content-center font-weight-bold small p-1 m-2 text-center text-wrap"
|
|
|
|
style={style}>
|
|
|
|
{trainType}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
<td className="h-100">
|
|
|
|
<div className="train-number d-flex align-items-center justify-content-center h-100">
|
|
|
|
<div>
|
|
|
|
<div>{trip.short_name}</div>
|
|
|
|
<div>{trip.headsign}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
<div className="table-hour d-flex align-items-center justify-content-center text-time fw-bold h-100">
|
2024-01-28 20:48:44 +01:00
|
|
|
{getDisplayTime(train, tableType)}
|
2024-01-28 20:06:55 +01:00
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
<h3 className="headline">{headline.name}</h3>
|
|
|
|
<span className="stops">{stops_names}</span>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</>
|
|
|
|
}
|
|
|
|
|
|
|
|
function getTrainType(train, route) {
|
|
|
|
if (train.id.startsWith("IDFM"))
|
|
|
|
return route.short_name
|
|
|
|
else {
|
|
|
|
let trainType = train.stop.split("StopPoint:OCE")[1].split("-")[0]
|
|
|
|
if (trainType === "Train TER")
|
|
|
|
trainType = "TER"
|
|
|
|
else if (trainType === "INTERCITES")
|
|
|
|
trainType = "INTER-CITÉS"
|
|
|
|
else if (trainType === "INTERCITES de nuit")
|
|
|
|
trainType = "INTER-CITÉS de nuit"
|
|
|
|
return trainType
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function getBackgroundColor(train, route) {
|
|
|
|
if (route.color)
|
|
|
|
return route.color
|
|
|
|
else if (getTrainType(train, route) === "OUIGO")
|
|
|
|
return "E60075"
|
|
|
|
return "FFFFFF"
|
|
|
|
}
|
|
|
|
|
|
|
|
function getTextColor(train, route) {
|
|
|
|
if (route.text_color)
|
|
|
|
return route.text_color
|
|
|
|
else {
|
|
|
|
let trainType = getTrainType(train, route)
|
|
|
|
switch (trainType) {
|
|
|
|
case "OUIGO":
|
|
|
|
return "FFFFFF"
|
|
|
|
case "TGV INOUI":
|
|
|
|
return "9B2743"
|
|
|
|
case "ICE":
|
|
|
|
return "B4B4B4"
|
|
|
|
case "INTER-CITÉS":
|
|
|
|
case "INTER-CITÉS de nuit":
|
|
|
|
return "404042"
|
|
|
|
default:
|
|
|
|
return "000000"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-01-28 20:48:44 +01:00
|
|
|
function getDisplayTime(train, tableType) {
|
|
|
|
let time = tableType === "departures" ? train.departure_time : train.arrival_time
|
|
|
|
let day_split = time.split(' ')
|
|
|
|
return day_split[day_split.length - 1].substring(0, 5)
|
|
|
|
}
|
|
|
|
|
2024-01-28 20:06:55 +01:00
|
|
|
export default TrainsTable;
|