Restore time display
This commit is contained in:
parent
6317c900ef
commit
2230058826
@ -1,11 +1,40 @@
|
||||
import './sncf.scss'
|
||||
import {useParams} from "react-router-dom"
|
||||
import {useParams, useSearchParams} from "react-router-dom"
|
||||
import TrainsTable from "./TrainsTable"
|
||||
import {useEffect, useState} from "react";
|
||||
|
||||
function DateTimeSelector({date, time}) {
|
||||
return <>
|
||||
<form>
|
||||
<div className="form-group row">
|
||||
<div className="col-sm-2">
|
||||
Modifier la date et l'heure de recherche
|
||||
</div>
|
||||
<label htmlFor="date" className="col-sm-1 col-form-label">Date</label>
|
||||
<div className="col-sm-1">
|
||||
<input type="date" name="date" className="form-control" id="date" defaultValue={date} />
|
||||
</div>
|
||||
<label htmlFor="time" className="col-sm-1 col-form-label">Heure</label>
|
||||
<div className="col-sm-1">
|
||||
<input type="time" name="time" className="form-control" id="time" defaultValue={time} />
|
||||
</div>
|
||||
<div className="col-sm-1">
|
||||
<button type="submit" className="btn btn-primary">Rechercher</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
}
|
||||
|
||||
function Station() {
|
||||
let {stopId} = useParams()
|
||||
let [stop, setStop] = useState({'name': "Chargement…"})
|
||||
let [searchParams, setSearchParams] = useSearchParams()
|
||||
const now = new Date()
|
||||
let dateNow = now.toISOString().split('T')[0]
|
||||
let timeNow = now.toTimeString().split(' ')[0].substring(0, 5)
|
||||
let [date, setDate] = useState(searchParams.get('date') || dateNow)
|
||||
let [time, setTime] = useState(searchParams.get('time') || timeNow)
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`http://localhost:8000/api/gtfs/stop/${stopId}/`)
|
||||
@ -22,8 +51,9 @@ function Station() {
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<TrainsTable stop={stop} tableType="departures" />
|
||||
<TrainsTable stop={stop} tableType="arrivals" />
|
||||
<DateTimeSelector date={date} time={time} />
|
||||
<TrainsTable stop={stop} date={date} time={time} tableType="departures" />
|
||||
<TrainsTable stop={stop} date={date} time={time} tableType="arrivals" />
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
|
@ -1,12 +1,12 @@
|
||||
import {useEffect, useState} from "react";
|
||||
|
||||
function TrainsTable({stop, tableType}) {
|
||||
function TrainsTable({stop, date, time, tableType}) {
|
||||
let tableClass = tableType === "departures" ? "table-departures" : "table-arrivals"
|
||||
tableClass = `table table-striped ${tableClass}`
|
||||
return <>
|
||||
<table className={tableClass}>
|
||||
<TrainsTableHeader />
|
||||
<TrainsTableBody stop={stop} tableType={tableType} />
|
||||
<TrainsTableBody stop={stop} date={date} time={time} tableType={tableType} />
|
||||
</table>
|
||||
</>
|
||||
}
|
||||
@ -21,19 +21,19 @@ function TrainsTableHeader() {
|
||||
</thead>
|
||||
}
|
||||
|
||||
function TrainsTableBody({stop, tableType}) {
|
||||
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}&format=json`)
|
||||
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])
|
||||
}, [stop, tableType, date, time])
|
||||
|
||||
let table_rows = trains.map((train) => <TrainRow train={train} tableType={tableType} />)
|
||||
|
||||
@ -127,7 +127,7 @@ function TrainRow({train, tableType}) {
|
||||
</td>
|
||||
<td>
|
||||
<div className="table-hour d-flex align-items-center justify-content-center text-time fw-bold h-100">
|
||||
{train.departure_time}
|
||||
{getDisplayTime(train, tableType)}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
@ -182,4 +182,10 @@ function getTextColor(train, route) {
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
@ -45,8 +45,8 @@ class StopTimeViewSet(viewsets.ReadOnlyModelViewSet):
|
||||
serializer_class = StopTimeSerializer
|
||||
filter_backends = [DjangoFilterBackend, OrderingFilter]
|
||||
filterset_fields = '__all__'
|
||||
ordering_fields = ['arrival_time', 'departure_time', 'stop_sequence',]
|
||||
ordering = ['stop_sequence',]
|
||||
ordering_fields = ['arrival_time', 'departure_time', 'stop_sequence', ]
|
||||
ordering = ['stop_sequence', ]
|
||||
|
||||
|
||||
class CalendarViewSet(viewsets.ReadOnlyModelViewSet):
|
||||
@ -88,7 +88,9 @@ class NextDeparturesViewSet(viewsets.ReadOnlyModelViewSet):
|
||||
stop_name = self.request.query_params.get('stop_name', None)
|
||||
query_date = date.fromisoformat(self.request.query_params.get('date', now.date().isoformat()))
|
||||
query_time = self.request.query_params.get('time', now.time().isoformat(timespec='seconds'))
|
||||
query_time = timedelta(seconds=int(query_time[:2]) * 3600 + int(query_time[3:5]) * 60 + int(query_time[6:]))
|
||||
query_time = timedelta(seconds=int(query_time[:2]) * 3600
|
||||
+ int(query_time[3:5]) * 60
|
||||
+ (int(query_time[6:]) if len(query_time) > 6 else 0))
|
||||
|
||||
yesterday = query_date - timedelta(days=1)
|
||||
time_yesterday = query_time + timedelta(days=1)
|
||||
@ -144,7 +146,9 @@ class NextArrivalsViewSet(viewsets.ReadOnlyModelViewSet):
|
||||
stop_name = self.request.query_params.get('stop_name', None)
|
||||
query_date = date.fromisoformat(self.request.query_params.get('date', now.date().isoformat()))
|
||||
query_time = self.request.query_params.get('time', now.time().isoformat(timespec='seconds'))
|
||||
query_time = timedelta(seconds=int(query_time[:2]) * 3600 + int(query_time[3:5]) * 60 + int(query_time[6:]))
|
||||
query_time = timedelta(seconds=int(query_time[:2]) * 3600
|
||||
+ int(query_time[3:5]) * 60
|
||||
+ (int(query_time[6:]) if len(query_time) > 6 else 0))
|
||||
|
||||
yesterday = query_date - timedelta(days=1)
|
||||
time_yesterday = query_time + timedelta(days=1)
|
||||
|
Loading…
Reference in New Issue
Block a user