feat: adjust UX of page Realtime
This commit is contained in:
parent
a40b0df485
commit
0cee85f2c1
|
@ -1,23 +1,50 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
|
||||
import config from '../config';
|
||||
import Input from '../components/input';
|
||||
|
||||
export default function OddTrips() {
|
||||
const [data, setData] = useState([]);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const itemsPerPage = 10; // Number of items to display per page
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const response = await axios.get('https://v1api.cnnct.dp.gtfs.swingbe.de/trip-updates-odd-routes?day=2024-01-31');
|
||||
setData(response.data);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
const dateDefault = 'Select date';
|
||||
const [date, setDate] = useState(dateDefault);
|
||||
const [data, setData] = useState([]);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const itemsPerPage = 10; // Number of items to display per page
|
||||
|
||||
//TODO How do we handle invalid date input?
|
||||
const handleDate = (e) => {
|
||||
if (e.target.value.indexOf('2023') !== -1 ||
|
||||
e.target.value.indexOf('2024') !== -1) {
|
||||
setDate((date) => e.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
/*this hook is run after a DOM update. Changing state might result in an infinite loop*/
|
||||
/*hook need to be placed in body of the function component in which it is used*/
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
/*use an empty dependency array to ensure the hook is running only once*/
|
||||
/*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
|
||||
}, [date]);
|
||||
|
||||
const fetchData = async () => {
|
||||
if ( date !== dateDefault) {
|
||||
try {
|
||||
const address = `${config.API}trip-updates-odd-routes?day=${date}`;
|
||||
//console.log('address: ' + address);
|
||||
const res = await axios.get(address);
|
||||
if ( res.data !== undefined && res.data !== null ) {
|
||||
//console.log('res.data.length: ' + res.data.length);
|
||||
setData((data) => res.data);
|
||||
} else {
|
||||
console.error('ERROR: trip-updates with odd routes request FAILED');
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
const endIndex = startIndex + itemsPerPage;
|
||||
|
@ -37,14 +64,29 @@ export default function OddTrips() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<dl>
|
||||
<>
|
||||
<label>
|
||||
<p>Select date:</p>
|
||||
<Input
|
||||
id="inputDate"
|
||||
name="inputDate"
|
||||
onChange={handleDate}
|
||||
placeholder="Enter date ${dateDefault}"
|
||||
type="date"
|
||||
title="Enter date ${dateDefault}"
|
||||
value={date}
|
||||
/>
|
||||
</label>
|
||||
<p>
|
||||
abs odd route count: {data.length}, total pages: {Math.ceil(data.length / itemsPerPage)}, current page: {currentPage}
|
||||
</p>
|
||||
<dl>
|
||||
{currentItems.map((item, index) => (
|
||||
<dt key={index}>{item.trip_route_id}</dt>
|
||||
))}
|
||||
</dl>
|
||||
<button onClick={handlePreviousPage}>Previous</button>
|
||||
<button onClick={handleNextPage}>Next</button>
|
||||
</div>
|
||||
</dl>
|
||||
<button onClick={handlePreviousPage}>Previous</button>
|
||||
<button onClick={handleNextPage}>Next</button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -1,23 +1,50 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
|
||||
import config from '../config';
|
||||
import Input from '../components/input';
|
||||
|
||||
export default function OddTrips() {
|
||||
const [data, setData] = useState([]);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const itemsPerPage = 10; // Number of items to display per page
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const fetchData = async () => {
|
||||
const dateDefault = 'Select date';
|
||||
const [date, setDate] = useState(dateDefault);
|
||||
const [data, setData] = useState([]);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const itemsPerPage = 10; // Number of items to display per page
|
||||
|
||||
//TODO How do we handle invalid date input?
|
||||
const handleDate = (e) => {
|
||||
if (e.target.value.indexOf('2023') !== -1 ||
|
||||
e.target.value.indexOf('2024') !== -1) {
|
||||
setDate((date) => e.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
/*this hook is run after a DOM update. Changing state might result in an infinite loop*/
|
||||
/*hook need to be placed in body of the function component in which it is used*/
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
/*use an empty dependency array to ensure the hook is running only once*/
|
||||
/*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
|
||||
}, [date]);
|
||||
|
||||
const fetchData = async () => {
|
||||
if ( date !== dateDefault) {
|
||||
try {
|
||||
const response = await axios.get('https://v1api.ccnnct.dp.gtfs.swingbe.de/trip-updates-odd-trips?day=2024-01-31');
|
||||
setData(response.data);
|
||||
const address = `${config.API}trip-updates-odd-trips?day=${date}`;
|
||||
//console.log('address: ' + address);
|
||||
const res = await axios.get(address);
|
||||
if ( res.data !== undefined && res.data !== null ) {
|
||||
//console.log('res.data.length: ' + res.data.length);
|
||||
setData((data) => res.data);
|
||||
} else {
|
||||
console.error('ERROR: trip-updates with odd trips request FAILED');
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
const endIndex = startIndex + itemsPerPage;
|
||||
|
@ -37,7 +64,22 @@ export default function OddTrips() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<label>
|
||||
<p>Select date:</p>
|
||||
<Input
|
||||
id="inputDate"
|
||||
name="inputDate"
|
||||
onChange={handleDate}
|
||||
placeholder="Enter date ${dateDefault}"
|
||||
type="date"
|
||||
title="Enter date ${dateDefault}"
|
||||
value={date}
|
||||
/>
|
||||
</label>
|
||||
<p>
|
||||
abs odd trip count: {data.length}, total pages: {Math.ceil(data.length / itemsPerPage)}, current page: {currentPage}
|
||||
</p>
|
||||
<dl>
|
||||
{currentItems.map((item, index) => (
|
||||
<dt key={index}>{item.trip_trip_id}</dt>
|
||||
|
@ -45,6 +87,6 @@ export default function OddTrips() {
|
|||
</dl>
|
||||
<button onClick={handlePreviousPage}>Previous</button>
|
||||
<button onClick={handleNextPage}>Next</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -10,24 +10,38 @@ import TripUpdates from '../pages/trip-updates-route-day';
|
|||
|
||||
export default function Realtime({ state }) {
|
||||
if ( state === 'odd-routes' ) {
|
||||
return <OddRoutes />;
|
||||
return (
|
||||
<>
|
||||
<p>
|
||||
Show <b>GTFS Realtime TripUpdate</b> entities that do <b>not</b> match any <b>GTFS Schedule routes</b>:
|
||||
</p>
|
||||
<OddRoutes />
|
||||
</>
|
||||
);
|
||||
} else if ( state === 'odd-trips' ) {
|
||||
return <OddTrips />;
|
||||
return (
|
||||
<>
|
||||
<p>
|
||||
Show <b>GTFS Realtime TripUpdate</b> entities that do <b>not</b> match any <b>GTFS Schedule trips</b>:
|
||||
</p>
|
||||
<OddTrips />
|
||||
</>
|
||||
);
|
||||
} else if ( state === 'feed' ) {
|
||||
return (
|
||||
<>
|
||||
<p>
|
||||
Analyse <b>GTFS Realtime</b> entities <b>TripUpdate</b> on <b>feed</b> level
|
||||
</p>
|
||||
<PerDay />
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<p>
|
||||
Analyse <b>GTFS Realtime</b> entities <b>TripUpdate</b> on <b>feed</b> level:
|
||||
</p>
|
||||
<PerDay />
|
||||
</>
|
||||
);
|
||||
}
|
||||
else if ( state === 'agencies' ) {
|
||||
return (
|
||||
<>
|
||||
<p>
|
||||
Analyse <b>GTFS Realtime</b> entities <b>TripUpdate</b> on <b>agencies</b> level
|
||||
Analyse <b>GTFS Realtime</b> entities <b>TripUpdate</b> on <b>agencies</b> level:
|
||||
</p>
|
||||
<GroupAgencyPerDay />
|
||||
</>
|
||||
|
@ -36,7 +50,7 @@ export default function Realtime({ state }) {
|
|||
return (
|
||||
<>
|
||||
<p>
|
||||
Analyse <b>GTFS Realtime</b> entities <b>TripUpdate</b> on <b>routes</b> level
|
||||
Analyse <b>GTFS Realtime</b> entities <b>TripUpdate</b> on <b>routes</b> level:
|
||||
</p>
|
||||
<AgencyPerDay />
|
||||
</>
|
||||
|
@ -45,15 +59,13 @@ export default function Realtime({ state }) {
|
|||
return (
|
||||
<>
|
||||
<p>
|
||||
Analyse <b>GTFS Realtime</b> entities <b>TripUpdate</b> on <b>trips</b> level
|
||||
Analyse <b>GTFS Realtime</b> entities <b>TripUpdate</b> on <b>trips</b> level:
|
||||
</p>
|
||||
<TripUpdates />
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
return <p>
|
||||
Select a <b>GTFS Realtime</b> analysis rule to contine!
|
||||
</p>;
|
||||
return <p>Select a <b>GTFS Realtime</b> analysis rule to contine!</p>;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
@ -21,7 +21,7 @@ export default function PerDay() {
|
|||
}
|
||||
};
|
||||
|
||||
const getRryPerDay = async () => {
|
||||
const fetchData = async () => {
|
||||
if ( date !== dateDefault) {
|
||||
try {
|
||||
/*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
|
||||
|
@ -43,7 +43,7 @@ export default function PerDay() {
|
|||
/*this hook is run after a DOM update. Changing state might result in an infinite loop*/
|
||||
/*hook need to be placed in body of the function component in which it is used*/
|
||||
useEffect(() => {
|
||||
getRryPerDay();
|
||||
fetchData();
|
||||
/*use an empty dependency array to ensure the hook is running only once*/
|
||||
/*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
|
||||
}, [date]);
|
||||
|
|
Loading…
Reference in New Issue