From 8633192150ce2e8ea16caf83670f3469e0bfefe6 Mon Sep 17 00:00:00 2001 From: "Begerad, Stefan" Date: Tue, 1 Aug 2023 14:06:45 +0200 Subject: [PATCH] feat(ui): add current number of B+R, taxi, ticket machine and ticket office stations --- ui/app/app.jsx | 11 ++- ui/app/components/fetch.jsx | 28 +++--- ui/app/components/map.jsx | 7 +- ui/app/components/map/entities-map.css | 2 +- ui/app/components/map/entities-map.jsx | 6 +- ui/app/components/table.jsx | 15 ++-- ui/app/pages/{park-ride.jsx => entity.jsx} | 11 ++- ui/app/pages/home.jsx | 99 ++++++++++++++++++++-- ui/app/pages/map.jsx | 19 ----- ui/app/pages/train-station.jsx | 22 ----- ui/app/utils/api.js | 74 ++++++++++++++-- 11 files changed, 207 insertions(+), 87 deletions(-) rename ui/app/pages/{park-ride.jsx => entity.jsx} (54%) delete mode 100644 ui/app/pages/map.jsx delete mode 100644 ui/app/pages/train-station.jsx diff --git a/ui/app/app.jsx b/ui/app/app.jsx index cc76470..b136891 100644 --- a/ui/app/app.jsx +++ b/ui/app/app.jsx @@ -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(){ }/> - }/> - }/> + }/> + }/> + }/> + }/> + }/> + }/> diff --git a/ui/app/components/fetch.jsx b/ui/app/components/fetch.jsx index 3ec61d3..2d5a525 100644 --- a/ui/app/components/fetch.jsx +++ b/ui/app/components/fetch.jsx @@ -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}) { <> ); @@ -61,5 +62,6 @@ export default function Fetch ({route}) { } }; Fetch.propTypes = { - route: PropTypes.string + route: PropTypes.string, + title: PropTypes.string }; diff --git a/ui/app/components/map.jsx b/ui/app/components/map.jsx index 42f50b3..b670a95 100644 --- a/ui/app/components/map.jsx +++ b/ui/app/components/map.jsx @@ -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 ( <> -

Map of Train Stations

+

Map of {title}

); @@ -22,5 +22,6 @@ export default function Map ({array}){ } }; Map.propTypes = { - array: PropTypes.array + array: PropTypes.array, + title: PropTypes.string }; diff --git a/ui/app/components/map/entities-map.css b/ui/app/components/map/entities-map.css index da75f66..fd37b77 100644 --- a/ui/app/components/map/entities-map.css +++ b/ui/app/components/map/entities-map.css @@ -1,4 +1,4 @@ /*set up the height of*/ .leaflet-container { - height: 45vh; + height: 75vh; } diff --git a/ui/app/components/map/entities-map.jsx b/ui/app/components/map/entities-map.jsx index 3bbe861..82dfccd 100644 --- a/ui/app/components/map/entities-map.jsx +++ b/ui/app/components/map/entities-map.jsx @@ -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 ( <> 0) { /*return a React element*/ return ( <> -

Table

-
+

Table of {title}

+
@@ -23,18 +23,19 @@ export default function Table ({array}){ -
id
+ ); }else{ return ( <> -

Table

-

Table loading...

+

Table of {title}

+

Table loading...

); } }; Table.propTypes = { - array: PropTypes.array + array: PropTypes.array, + title: PropTypes.string }; diff --git a/ui/app/pages/park-ride.jsx b/ui/app/pages/entity.jsx similarity index 54% rename from ui/app/pages/park-ride.jsx rename to ui/app/pages/entity.jsx index bd77bf4..2ea1728 100644 --- a/ui/app/pages/park-ride.jsx +++ b/ui/app/pages/entity.jsx @@ -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( <> -

RVB Display

); }; +Entity.propTypes = { + apiRoute: PropTypes.string, + title: PropTypes.string +}; diff --git a/ui/app/pages/home.jsx b/ui/app/pages/home.jsx index 5626b19..6e3f5ac 100644 --- a/ui/app/pages/home.jsx +++ b/ui/app/pages/home.jsx @@ -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 + + + + + +

RVB Display

Wellcome to the RVB Display!

-

Number of bus stops in the RVB area: {busStopCount}

-

Number of train stations in the RVB area: {trainStationCount}

+

Number of bike and ride (B&R) stations in the RVB area: {bikeRideCount}

- + +

Number of bus stops in the RVB area: {busStopCount}

Number of park and ride (P&R) stations in the RVB area: {parkRideCount}

- + + +

Number of taxi stations in the RVB area: {taxiCount}

+ + + +

Number of ticket machines in the RVB area: {ticketMachineCount}

+ + + +

Number of ticket offices in the RVB area: {ticketOfficeCount}

+ + + +

Number of train stations in the RVB area: {trainStationCount}

+ + ); diff --git a/ui/app/pages/map.jsx b/ui/app/pages/map.jsx deleted file mode 100644 index bcbaaaf..0000000 --- a/ui/app/pages/map.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react' -import { Link} from 'react-router-dom'; - -export default function Map() { - return( - <> - - - -

RVB Display

-

Wellcome to the RVB Display!

-

Map

- - ); -}; diff --git a/ui/app/pages/train-station.jsx b/ui/app/pages/train-station.jsx deleted file mode 100644 index 9d856c7..0000000 --- a/ui/app/pages/train-station.jsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react' -import { Link} from 'react-router-dom'; - -import Fetch from '../components/fetch'; - -export default function TrainStation() { - return( - <> - - - -

RVB Display

- - - ); -}; diff --git a/ui/app/utils/api.js b/ui/app/utils/api.js index 1540d61..12e3564 100644 --- a/ui/app/utils/api.js +++ b/ui/app/utils/api.js @@ -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; };