dancingCycle
/
gtfs-display
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adjust Trips page

This commit is contained in:
dancingCycle 2023-11-24 22:32:41 +01:00
parent e33b5e203c
commit cd71cda6e6
3 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/route-select.js
View File

@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
*/
export default function RouteSelect({ name, onChange, rry }) {
if (rry !== undefined && rry !== null && rry.length > 0) {
if (rry !== undefined && rry !== null) {
return (<>
<form >
<label htmlFor="input-route">{name}: </label>

10
app/components/trips-route-day-table.js
View File

@ -4,12 +4,13 @@ import PropTypes from 'prop-types';
import TableEntries from './trips-route-day-table-entries';
/*destructure props object*/
export default function Table ({array, title}){
if ( array !== undefined && array !== null && array.length > 0 ) {
export default function TripsRouteDayTable ({array, title}){
if ( array !== undefined && array !== null) {
/*return a React element*/
return (
<>
<p>Table of {array.length}&nbsp;{title}</p>
<p>Table of {array.length}&nbsp;{title} today:</p>
<table>
<thead>
<tr>
@ -27,13 +28,12 @@ export default function Table ({array, title}){
}else{
return (
<>
<h1>Table of {title}</h1>
<p>loading...</p>
</>
);
}
};
Table.propTypes = {
TripsRouteDayTable.propTypes = {
array: PropTypes.array,
title: PropTypes.string
};

26
app/pages/trips-route-day.js
View File

@ -25,7 +25,7 @@ export default function Trips() {
console.log('trips-route-day res.data.length: address: ' + address);
const res = await axios.get(address);
console.log('trips-route-day res.data.length: Agencies: ' + res.data.length);
setRryAgencies(res.data);
setRryAgencies((rryAgency) => res.data);
} catch (err) {
console.error('err.message: ' + err.message);
}
@ -38,8 +38,18 @@ export default function Trips() {
const address = `${config.API}routes?agencyid=${strngAgencyId}`;
console.log('trips-route-day res.data.length: address: ' + address);
const res = await axios.get(address);
console.log('trips-route-day res.data.length: Routes: ' + res.data.length);
setRryRoutes(res.data);
if ( res.data !== undefined && res.data !== null ) {
console.log('trips-route-day res.data.length: Routes: ' + res.data.length);
setRryRoutes((rryRoutes) => res.data);
if ( res.data.length > 0 ) {
setStrngRouteId((strngRouteId) => res.data[0].route_id);
} else {
console.error('ERROR: agency has NO routes');
}
} else {
console.error('ERROR: routes by agency request FAILED');
}
} catch (err) {
console.error('err.message: ' + err.message);
}
@ -50,15 +60,19 @@ export default function Trips() {
};
const getRryTrips = async () => {
if ( strngRouteId !== routeNameDefault ) {
try {
/*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
//TODO Get trips based on route_id
const res = await axios.get(`${config.API}trips-by-route-day?routeid=68442&day=2023-11-24`);
const res = await axios.get(`${config.API}trips-by-route-day?routeid=${strngRouteId}&day=2023-11-24`);
console.log('trips-route-day res.data.length: Trips: ' + res.data.length);
setRryTrips(res.data);
} catch (err) {
console.error('err.message: ' + err.message);
}
} else {
console.error('trips-route-day strngRouteId NOT available');
}
};
const handleChangeAgencyId = (event) => {
@ -75,7 +89,6 @@ export default function Trips() {
/*hook need to be placed in body of the function component in which it is used*/
useEffect(() => {
getRryAgencies();
getRryTrips();
/*use an empty dependency array to ensure the hook is running only once*/
/*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
}, []);
@ -83,13 +96,12 @@ export default function Trips() {
useEffect(() => {
console.log('trips-route-day: useEffect() strngAgencyId: ' + strngAgencyId);
getRryRoutes();
/*use an empty dependency array to ensure the hook is running only once*/
/*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
}, [strngAgencyId]);
useEffect(() => {
console.log('trips-route-day: useEffect() strngRouteId: ' + strngRouteId);
/*use an empty dependency array to ensure the hook is running only once*/
getRryTrips();
/*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
}, [strngRouteId]);