import {useEffect, useState} from "react";
import {
Box,
Paper,
styled,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Typography
} from "@mui/material";
const StyledTableRow = styled(TableRow)(({ theme, tableType }) => ({
'tbody &:nth-of-type(odd)': {
backgroundColor: theme.palette.sncf[tableType].light,
},
'th, &:nth-of-type(even)': {
backgroundColor: theme.palette.sncf[tableType].dark,
},
// hide last border
'&:last-child td, &:last-child th': {
border: 0,
},
}));
function TrainsTable({stop, date, time, tableType}) {
return <>
>
}
function TrainsTableHeader({tableType}) {
return <>
Train
Heure
Destination
>
}
function TrainsTableBody({stop, date, time, tableType}) {
const [trains, setTrains] = useState([])
useEffect(() => {
if (stop.id !== undefined) {
fetch(`http://localhost:8000/api/station/next_${tableType}/?stop_id=${stop.id}&date=${date}&time=${time}&format=json`)
.then(response => response.json())
.then(data => data.results)
.then(data => {
setTrains(data)
})
}
}, [stop, tableType, date, time])
let table_rows = trains.map((train) => )
return
{table_rows}
}
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_filter
if (tableType === "departures")
stops_filter = (stop_time) => stop_time.stop_sequence > train.stop_sequence && stop_time.drop_off_type === 0
else
stops_filter = (stop_time) => stop_time.stop_sequence < train.stop_sequence && stop_time.pickup_type === 0
let stops_names = stopTimes.filter(stops_filter).map(stop_time => stop_time?.stop.name ?? "").join(", ")
return <>
{trainType}
{trip.short_name}
{trip.headsign}
{getDisplayTime(train, tableType)}
{headline.name}
{stops_names}
>
}
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"
}
}
}
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)
}
export default TrainsTable;