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

feat: add table-page

This commit is contained in:
dancingCycle 2023-02-02 22:28:41 +01:00
parent 1afd076685
commit b3ee8908b7
8 changed files with 143 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/app.jsx
View File

@ -6,6 +6,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
import Contact from './pages/contact';
import Home from './pages/home';
import Table from './pages/table-page';
import Map from './pages/map-page';
import NavBar from './components/nav-bar';
@ -19,6 +20,7 @@ export default function App() {
<NavBar />
<Routes>
<Route path="/" element={<Map />} />
<Route path="/table" element={<Table />} />
<Route path="/map" element={<Map />} />
<Route path="/contact" element={<Contact />} />
</Routes>

5
app/components/nav-bar.js
View File

@ -9,6 +9,11 @@ function NavigationBar () {
<Navbar.Brand href="/">GTFS Realtime Display</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<LinkContainer to="/table">
<Nav.Link>Table</Nav.Link>
</LinkContainer>
</Nav>
<Nav className="mr-auto">
<LinkContainer to="/map">
<Nav.Link>Map</Nav.Link>

16
app/components/table/table-body-entry.jsx Normal file
View File

@ -0,0 +1,16 @@
import React from 'react';
import PropTypes from 'prop-types';
export default function TableBodyEntry({tsMsgCreationItcs,id,vehicleId,tripId,routeId,lat,lon}){
return (
<tr>
<td>{tsMsgCreationItcs}</td>
<td>{id}</td>
<td>{vehicleId}</td>
<td>{tripId}</td>
<td>{routeId}</td>
<td>{lat}</td>
<td>{lon}</td>
</tr>
);
}

34
app/components/table/table-body.jsx Normal file
View File

@ -0,0 +1,34 @@
import React from 'react';
import PropTypes from 'prop-types';
import Entry from './table-body-entry';
export default function TableBody({messages}) {
//console.log('TableBody: messages.length:'+messages.length);
if(messages==undefined || messages==null){
return (
<p>TableBody not available</p>
);
}else if(messages.length > 0){
return messages.map((item, index) => {
return (
<Entry
tsMsgCreationItcs={item.tsMsgCreationItcs}
id={item.id}
vehicleId={item.vehicleId}
tripId={item.tripId}
routeId={item.routeId}
lat={item.lat}
lon={item.lon}
key={index}
/>
);
});
}else{
return (
<p>TableBody loading...</p>
);
}
}
TableBody.propTypes = {
messages: PropTypes.array
};

14
app/components/table/table-head.jsx Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
export default function TableHead(){
return (
<tr>
<th>tsMsgCreationItcs</th>
<th>id</th>
<th>vehicleId</th>
<th>tripId</th>
<th>routeId</th>
<th>lat</th>
<th>lon</th>
</tr>
);
};

22
app/components/table/table.jsx Normal file
View File

@ -0,0 +1,22 @@
import React from 'react';
import PropTypes from 'prop-types';
import Body from './table-body';
import Head from './table-head';
export default function Table({messages}) {
return (
<>
<p>Table</p>
<table>
<thead>
<Head />
</thead>
<tbody>
<Body messages={messages} />
</tbody>
</table>
</>
);
}
Table.propTypes = {
messages: PropTypes.array
};

6
app/pages/map-page.jsx
View File

@ -19,15 +19,15 @@ export default function MapPage() {
});
if(res.data){
//TODO remove debugging
//console.log('getVehPos() res available');
//console.log('getData() res available');
/*parse messages*/
const messages = parseMessages(res.data);
//console.log('getVehPos() messages.length: '+messages.length);
//console.log('getData() messages.length: '+messages.length);
/*set state*/
setVehPos(messages);
}else{
console.error('getVehPos() res NOT available');
console.error('getData() res NOT available');
}
} catch (err) {
console.error('err.message: ' + err.message);

47
app/pages/table-page.jsx Normal file
View File

@ -0,0 +1,47 @@
import React, {useEffect,useState} from 'react';
import axios from 'axios';
import parseMessages from '../utils/gtfs-rt-utils';
import Table from '../components/table/table';
export default function TablePage() {
const [vehPos, setVehPos] = useState([]);
const getData= async ()=>{
//console.log('getData() start...');
try {
/*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
//TODO Make fields available via configuration!
let url = 'https://api.entur.io/realtime/v1/gtfs-rt/vehicle-positions';
const res = await axios.get(url,
{
responseType: 'arraybuffer'
});
if(res.data){
//console.log('getData() res available');
const messages = parseMessages(res.data);
//console.log('getData() messages.length: '+messages.length);
setVehPos(messages);
}else{
console.error('getData() res NOT available');
}
} catch (err) {
console.error('err.message: ' + err.message);
}
//console.log('getData() done.');
};
useEffect(()=>{
getData();
const intervalCall=setInterval(()=>{
getData();
}, 5000);
/*TODO adjust interval, make it available via config file*/
return ()=>{
clearInterval(intervalCall);
};
},[]);
return (
<>
<p>TablePage</p>
<Table messages={vehPos}/>
</>
);
}