feat(ui): add current number of B+R, taxi, ticket machine and ticket office stations
This commit is contained in:
parent
cddb3de560
commit
8633192150
|
@ -1,9 +1,8 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter as Router, Link, Route, Routes } from 'react-router-dom';
|
||||
|
||||
import Entity from './pages/entity';
|
||||
import Home from './pages/home';
|
||||
import TrainStation from './pages/train-station';
|
||||
import ParkRide from './pages/park-ride';
|
||||
|
||||
export default function App(){
|
||||
return (
|
||||
|
@ -11,8 +10,12 @@ export default function App(){
|
|||
<Router>
|
||||
<Routes>
|
||||
<Route path='/' element={<Home/>}/>
|
||||
<Route path='/park-ride' element={<ParkRide/>}/>
|
||||
<Route path='/train-station' element={<TrainStation/>}/>
|
||||
<Route path='/bike-ride' element={<Entity apiRoute='bike-ride/info' title='B+R Stations'/>}/>
|
||||
<Route path='/park-ride' element={<Entity apiRoute='park-ride/info' title='P+R Stations'/>}/>
|
||||
<Route path='/taxi' element={<Entity apiRoute='taxi/info' title='Taxi Stations'/>}/>
|
||||
<Route path='/ticket-machine' element={<Entity apiRoute='ticket-machine/info' title='Ticket Machines'/>}/>
|
||||
<Route path='/ticket-office' element={<Entity apiRoute='ticket-office/info' title='Ticket Offices'/>}/>
|
||||
<Route path='/train-station' element={<Entity apiRoute='train-station/info' title='Train Stations'/>}/>
|
||||
</Routes>
|
||||
</Router>
|
||||
</div>
|
||||
|
|
|
@ -7,7 +7,7 @@ import Map from './map';
|
|||
import Table from './table';
|
||||
|
||||
/*destructure props object*/
|
||||
export default function Fetch ({route}) {
|
||||
export default function Fetch ({route, title}) {
|
||||
|
||||
const [array, setArray] = useState([]);
|
||||
|
||||
|
@ -16,17 +16,16 @@ export default function Fetch ({route}) {
|
|||
if(config && route){
|
||||
try {
|
||||
//console.log("Fetch:fetch(): route: " + route);
|
||||
/*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
|
||||
//fetch data only if user selection is unequal default value
|
||||
const address = `${config.API}${route}`;
|
||||
//console.log("Fetch:fetch(): address: "+address);
|
||||
const res = await axios.get(address);
|
||||
//console.log("Fetch:fetch(): res.length: "+res.data.length);
|
||||
setArray((array) => res.data);
|
||||
} catch (err) {
|
||||
console.error('err.message: ' + err.message);
|
||||
setArray((array) => []);
|
||||
}
|
||||
/*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
|
||||
const address = `${config.API}${route}`;
|
||||
//console.log("Fetch:fetch(): address: "+address);
|
||||
const res = await axios.get(address);
|
||||
//console.log("Fetch:fetch(): res.length: "+res.data.length);
|
||||
setArray((array) => res.data);
|
||||
} catch (err) {
|
||||
console.error('err.message: ' + err.message);
|
||||
setArray((array) => []);
|
||||
}
|
||||
}else{
|
||||
console.error('config or route NOT available');
|
||||
}
|
||||
|
@ -46,9 +45,11 @@ export default function Fetch ({route}) {
|
|||
<>
|
||||
<Map
|
||||
array={array}
|
||||
title={title}
|
||||
/>
|
||||
<Table
|
||||
array={array}
|
||||
title={title}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
@ -61,5 +62,6 @@ export default function Fetch ({route}) {
|
|||
}
|
||||
};
|
||||
Fetch.propTypes = {
|
||||
route: PropTypes.string
|
||||
route: PropTypes.string,
|
||||
title: PropTypes.string
|
||||
};
|
||||
|
|
|
@ -4,12 +4,12 @@ import PropTypes from 'prop-types';
|
|||
import EntitiesMap from './map/entities-map';
|
||||
|
||||
/*destructure props object*/
|
||||
export default function Map ({array}){
|
||||
export default function Map ({array, title}){
|
||||
if (array !== undefined || array !== null || array.length > 0) {
|
||||
/*return a React element*/
|
||||
return (
|
||||
<>
|
||||
<h2>Map of Train Stations</h2>
|
||||
<h2>Map of {title}</h2>
|
||||
<EntitiesMap entities={array} />
|
||||
</>
|
||||
);
|
||||
|
@ -22,5 +22,6 @@ export default function Map ({array}){
|
|||
}
|
||||
};
|
||||
Map.propTypes = {
|
||||
array: PropTypes.array
|
||||
array: PropTypes.array,
|
||||
title: PropTypes.string
|
||||
};
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
/*set up the height of*/
|
||||
.leaflet-container {
|
||||
height: 45vh;
|
||||
height: 75vh;
|
||||
}
|
||||
|
|
|
@ -10,12 +10,14 @@ import EntitiesMarker from './entities-marker';
|
|||
|
||||
export default function EntitiesMap({entities}) {
|
||||
/*lat and lon of Braunschweig,DE*/
|
||||
const position = [52.26594, 10.52673]
|
||||
//const position = [52.26594, 10.52673];
|
||||
/*center map in the middle of RVB*/
|
||||
const position = [52.16594, 10.52673];
|
||||
return (
|
||||
<>
|
||||
<MapContainer
|
||||
center={position}
|
||||
zoom={8}
|
||||
zoom={9}
|
||||
minZoom={4}
|
||||
maxZoom={18}
|
||||
maxBounds={[[-60, -180], [85, 180]]}
|
||||
|
|
|
@ -4,13 +4,13 @@ import PropTypes from 'prop-types';
|
|||
import TableEntries from './table-entries';
|
||||
|
||||
/*destructure props object*/
|
||||
export default function Table ({array}){
|
||||
export default function Table ({array, title}){
|
||||
if (array !== undefined || array !== null || array.length > 0) {
|
||||
/*return a React element*/
|
||||
return (
|
||||
<>
|
||||
<h2>Table</h2>
|
||||
<table>
|
||||
<h2>Table of {title}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>id</th>
|
||||
|
@ -23,18 +23,19 @@ export default function Table ({array}){
|
|||
<tbody>
|
||||
<TableEntries array={array} />
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
</>
|
||||
);
|
||||
}else{
|
||||
return (
|
||||
<>
|
||||
<h2>Table</h2>
|
||||
<p>Table loading...</p>
|
||||
<h2>Table of {title}</h2>
|
||||
<p>Table loading...</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
Table.propTypes = {
|
||||
array: PropTypes.array
|
||||
array: PropTypes.array,
|
||||
title: PropTypes.string
|
||||
};
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types';
|
||||
import { Link} from 'react-router-dom';
|
||||
|
||||
import Fetch from '../components/fetch';
|
||||
|
||||
export default function ParkRide() {
|
||||
export default function Entity({apiRoute, title}) {
|
||||
return(
|
||||
<>
|
||||
<Link
|
||||
|
@ -13,10 +14,14 @@ export default function ParkRide() {
|
|||
Home
|
||||
</button>
|
||||
</Link>
|
||||
<h1>RVB Display</h1>
|
||||
<Fetch
|
||||
route='park-ride/info'
|
||||
route={apiRoute}
|
||||
title={title}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Entity.propTypes = {
|
||||
apiRoute: PropTypes.string,
|
||||
title: PropTypes.string
|
||||
};
|
|
@ -2,12 +2,27 @@ import React, { useState, useEffect } from 'react'
|
|||
import { Link} from 'react-router-dom';
|
||||
|
||||
import '../style.css';
|
||||
import {getBusStopCount, getParkRideCount, getTrainStationCount} from '../utils/api';
|
||||
import {getBusStopCount, getBikeRideCount, getParkRideCount, getTrainStationCount, getTaxiCount, getTicketMachineCount, getTicketOfficeCount} from '../utils/api';
|
||||
export default function Home(){
|
||||
|
||||
const [bikeRideCount, setBikeRideCount] = useState('loading...');
|
||||
const [busStopCount, setBusStopCount] = useState('loading...');
|
||||
const [parkRideCount, setParkRideCount] = useState('loading...');
|
||||
const [taxiCount, setTaxiCount] = useState('loading...');
|
||||
const [ticketMachineCount, setTicketMachineCount] = useState('loading...');
|
||||
const [ticketOfficeCount, setTicketOfficeCount] = useState('loading...');
|
||||
const [trainStationCount, setTrainStationCount] = useState('loading...');
|
||||
|
||||
const fetchBikeRideCount = async () => {
|
||||
try {
|
||||
const rsp=await getBikeRideCount();
|
||||
setBikeRideCount((bikeRideCount) => rsp);
|
||||
} catch (err) {
|
||||
console.error('err.message: ' + err.message);
|
||||
setBikeRideCount((bikeRideCount) => 'loading...');
|
||||
}
|
||||
};
|
||||
|
||||
const fetchBusStopCount = async () => {
|
||||
try {
|
||||
const rsp=await getBusStopCount();
|
||||
|
@ -28,6 +43,36 @@ export default function Home(){
|
|||
}
|
||||
};
|
||||
|
||||
const fetchTaxiCount = async () => {
|
||||
try {
|
||||
const rsp=await getTaxiCount();
|
||||
setTaxiCount((taxiCount) => rsp);
|
||||
} catch (err) {
|
||||
console.error('err.message: ' + err.message);
|
||||
setTaxiCount((taxiCount) => 'loading...');
|
||||
}
|
||||
};
|
||||
|
||||
const fetchTicketMachineCount = async () => {
|
||||
try {
|
||||
const rsp=await getTicketMachineCount();
|
||||
setTicketMachineCount((ticketMachineCount) => rsp);
|
||||
} catch (err) {
|
||||
console.error('err.message: ' + err.message);
|
||||
setTicketMachineCount((ticketMachineCount) => 'loading...');
|
||||
}
|
||||
};
|
||||
|
||||
const fetchTicketOfficeCount = async () => {
|
||||
try {
|
||||
const rsp=await getTicketOfficeCount();
|
||||
setTicketOfficeCount((ticketOfficeCount) => rsp);
|
||||
} catch (err) {
|
||||
console.error('err.message: ' + err.message);
|
||||
setTicketOfficeCount((ticketOfficeCount) => 'loading...');
|
||||
}
|
||||
};
|
||||
|
||||
const fetchTrainStationCount = async () => {
|
||||
try {
|
||||
const rsp=await getTrainStationCount();
|
||||
|
@ -41,8 +86,12 @@ export default function Home(){
|
|||
useEffect(() => {
|
||||
/*effect goes here*/
|
||||
fetchBusStopCount();
|
||||
fetchBikeRideCount();
|
||||
fetchParkRideCount();
|
||||
fetchTicketMachineCount();
|
||||
fetchTicketOfficeCount();
|
||||
fetchTrainStationCount();
|
||||
fetchTaxiCount();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
|
@ -54,20 +103,58 @@ export default function Home(){
|
|||
Home
|
||||
</button>
|
||||
</Link>
|
||||
<Link
|
||||
to='https://www.swingbe.de/imprint/'
|
||||
>
|
||||
<button>
|
||||
Imprint
|
||||
</button>
|
||||
</Link>
|
||||
<Link
|
||||
to='https://www.swingbe.de/privacy-policy/'
|
||||
>
|
||||
<button>
|
||||
Privacy Policy
|
||||
</button>
|
||||
</Link>
|
||||
<h1>RVB Display</h1>
|
||||
<h2>Wellcome to the RVB Display!</h2>
|
||||
<h3>Number of bus stops in the RVB area: {busStopCount}</h3>
|
||||
<h3>Number of train stations in the RVB area: {trainStationCount}</h3>
|
||||
<h3>Number of bike and ride (B&R) stations in the RVB area: {bikeRideCount}</h3>
|
||||
<Link
|
||||
to={'/train-station'}
|
||||
to={'/bike-ride'}
|
||||
>
|
||||
<button>Map of Train Stations</button>
|
||||
<button>Details for B&R Stations</button>
|
||||
</Link>
|
||||
<h3>Number of bus stops in the RVB area: {busStopCount}</h3>
|
||||
<h3>Number of park and ride (P&R) stations in the RVB area: {parkRideCount}</h3>
|
||||
<Link
|
||||
to={'/park-ride'}
|
||||
>
|
||||
<button>Map of P&R Stations</button>
|
||||
<button>Details for P&R Stations</button>
|
||||
</Link>
|
||||
<h3>Number of taxi stations in the RVB area: {taxiCount}</h3>
|
||||
<Link
|
||||
to={'/taxi'}
|
||||
>
|
||||
<button>Details for Taxi Stations</button>
|
||||
</Link>
|
||||
<h3>Number of ticket machines in the RVB area: {ticketMachineCount}</h3>
|
||||
<Link
|
||||
to={'/ticket-machine'}
|
||||
>
|
||||
<button>Details for Ticket Machines</button>
|
||||
</Link>
|
||||
<h3>Number of ticket offices in the RVB area: {ticketOfficeCount}</h3>
|
||||
<Link
|
||||
to={'/ticket-office'}
|
||||
>
|
||||
<button>Details for Ticket Offices</button>
|
||||
</Link>
|
||||
<h3>Number of train stations in the RVB area: {trainStationCount}</h3>
|
||||
<Link
|
||||
to={'/train-station'}
|
||||
>
|
||||
<button>Details for Train Stations</button>
|
||||
</Link>
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -1,19 +0,0 @@
|
|||
import React from 'react'
|
||||
import { Link} from 'react-router-dom';
|
||||
|
||||
export default function Map() {
|
||||
return(
|
||||
<>
|
||||
<Link
|
||||
to='/'
|
||||
>
|
||||
<button>
|
||||
Home
|
||||
</button>
|
||||
</Link>
|
||||
<h1>RVB Display</h1>
|
||||
<h2>Wellcome to the RVB Display!</h2>
|
||||
<h3>Map</h3>
|
||||
</>
|
||||
);
|
||||
};
|
|
@ -1,22 +0,0 @@
|
|||
import React from 'react'
|
||||
import { Link} from 'react-router-dom';
|
||||
|
||||
import Fetch from '../components/fetch';
|
||||
|
||||
export default function TrainStation() {
|
||||
return(
|
||||
<>
|
||||
<Link
|
||||
to='/'
|
||||
>
|
||||
<button>
|
||||
Home
|
||||
</button>
|
||||
</Link>
|
||||
<h1>RVB Display</h1>
|
||||
<Fetch
|
||||
route='train-station/info'
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
|
@ -40,6 +40,25 @@ export async function getParkRideCount(){
|
|||
return count;
|
||||
};
|
||||
|
||||
/*
|
||||
*get count of bike and ride (B&R)
|
||||
*/
|
||||
export async function getBikeRideCount(){
|
||||
//console.log('getBikeRideCount() Start...');
|
||||
|
||||
let count=null;
|
||||
try {
|
||||
//TODO handle errors: https://www.valentinog.com/blog/await-react/
|
||||
const address = `${config.API}bike-ride/count`;
|
||||
const rsp = await axios.get(address);
|
||||
count = rsp.data[0][0];
|
||||
} catch (err) {
|
||||
console.error('err.message: ' + err.message);
|
||||
}
|
||||
//console.log('getBikeRideCount() Done.');
|
||||
return count;
|
||||
};
|
||||
|
||||
/*
|
||||
*get count of train stations
|
||||
*/
|
||||
|
@ -60,20 +79,61 @@ export async function getTrainStationCount(){
|
|||
};
|
||||
|
||||
/*
|
||||
*get all train stations
|
||||
*get count of taxi stations
|
||||
*/
|
||||
export async function getTrainStationInfo(){
|
||||
//console.log('getTrainStationInfo() Start...');
|
||||
export async function getTaxiCount(){
|
||||
//console.log('getTaxiCount() Start...');
|
||||
|
||||
let count=null;
|
||||
try {
|
||||
//TODO handle errors: https://www.valentinog.com/blog/await-react/
|
||||
const address = `${config.API}train-station/count`;
|
||||
const address = `${config.API}taxi/count`;
|
||||
//console.log('getTaxiCount() address: ' + address);
|
||||
const rsp = await axios.get(address);
|
||||
console.log('getTrainStationInfo() rsp.length: ' +rsp.length);
|
||||
count = rsp.data[0][0];
|
||||
} catch (err) {
|
||||
console.error('err.message: ' + err.message);
|
||||
}
|
||||
//console.log('getTrainStationInfo() Done.');
|
||||
return null;
|
||||
//console.log('getTaxiCount() Done.');
|
||||
return count;
|
||||
};
|
||||
|
||||
/*
|
||||
*get count of ticket machines
|
||||
*/
|
||||
export async function getTicketMachineCount(){
|
||||
//console.log('getTicketMachineCount() Start...');
|
||||
|
||||
let count=null;
|
||||
try {
|
||||
//TODO handle errors: https://www.valentinog.com/blog/await-react/
|
||||
const address = `${config.API}ticket-machine/count`;
|
||||
//console.log('getTicketMachineCount() address: ' + address);
|
||||
const rsp = await axios.get(address);
|
||||
count = rsp.data[0][0];
|
||||
} catch (err) {
|
||||
console.error('err.message: ' + err.message);
|
||||
}
|
||||
//console.log('getTicketMachineCount() Done.');
|
||||
return count;
|
||||
};
|
||||
|
||||
/*
|
||||
*get count of ticket offices
|
||||
*/
|
||||
export async function getTicketOfficeCount(){
|
||||
//console.log('getTicketOfficeCount() Start...');
|
||||
|
||||
let count=null;
|
||||
try {
|
||||
//TODO handle errors: https://www.valentinog.com/blog/await-react/
|
||||
const address = `${config.API}ticket-office/count`;
|
||||
//console.log('getTicketOfficeCount() address: ' + address);
|
||||
const rsp = await axios.get(address);
|
||||
count = rsp.data[0][0];
|
||||
} catch (err) {
|
||||
console.error('err.message: ' + err.message);
|
||||
}
|
||||
//console.log('getTicketOfficeCount() Done.');
|
||||
return count;
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue