diff --git a/ui/app/app.jsx b/ui/app/app.jsx
index 730bb68..cc76470 100644
--- a/ui/app/app.jsx
+++ b/ui/app/app.jsx
@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Link, Route, Routes } from 'react-router-dom';
import Home from './pages/home';
import TrainStation from './pages/train-station';
+import ParkRide from './pages/park-ride';
export default function App(){
return (
@@ -10,6 +11,7 @@ export default function App(){
}/>
+ }/>
}/>
diff --git a/ui/app/components/fetch.jsx b/ui/app/components/fetch.jsx
index 8d98110..3ec61d3 100644
--- a/ui/app/components/fetch.jsx
+++ b/ui/app/components/fetch.jsx
@@ -1,4 +1,5 @@
import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
import axios from 'axios';
import config from '../utils/config';
@@ -6,16 +7,18 @@ import Map from './map';
import Table from './table';
/*destructure props object*/
-export default function Fetch () {
+export default function Fetch ({route}) {
const [array, setArray] = useState([]);
/*fetch array in a JavaScript function*/
const fetch = async () => {
- try {
+ 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}train-station/info`;
+ 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);
@@ -24,6 +27,9 @@ export default function Fetch () {
console.error('err.message: ' + err.message);
setArray((array) => []);
}
+ }else{
+ console.error('config or route NOT available');
+ }
};
useEffect(() => {
@@ -54,3 +60,6 @@ export default function Fetch () {
);
}
};
+Fetch.propTypes = {
+ route: PropTypes.string
+};
diff --git a/ui/app/pages/home.jsx b/ui/app/pages/home.jsx
index 7e85f3d..5626b19 100644
--- a/ui/app/pages/home.jsx
+++ b/ui/app/pages/home.jsx
@@ -2,9 +2,10 @@ import React, { useState, useEffect } from 'react'
import { Link} from 'react-router-dom';
import '../style.css';
-import {getBusStopCount, getTrainStationCount} from '../utils/api';
+import {getBusStopCount, getParkRideCount, getTrainStationCount} from '../utils/api';
export default function Home(){
const [busStopCount, setBusStopCount] = useState('loading...');
+ const [parkRideCount, setParkRideCount] = useState('loading...');
const [trainStationCount, setTrainStationCount] = useState('loading...');
const fetchBusStopCount = async () => {
@@ -17,6 +18,16 @@ export default function Home(){
}
};
+ const fetchParkRideCount = async () => {
+ try {
+ const rsp=await getParkRideCount();
+ setParkRideCount((parkRideCount) => rsp);
+ } catch (err) {
+ console.error('err.message: ' + err.message);
+ setParkRideCount((parkRideCount) => 'loading...');
+ }
+ };
+
const fetchTrainStationCount = async () => {
try {
const rsp=await getTrainStationCount();
@@ -30,6 +41,7 @@ export default function Home(){
useEffect(() => {
/*effect goes here*/
fetchBusStopCount();
+ fetchParkRideCount();
fetchTrainStationCount();
}, []);
@@ -44,17 +56,19 @@ export default function Home(){
RVB Display
Wellcome to the RVB Display!
-
- Current number of bus stops in the RVB area: {busStopCount}
-
-
- Current number of train stations in the RVB area: {trainStationCount}
-
-
-
-
+ Number of bus stops in the RVB area: {busStopCount}
+ Number of train stations in the RVB area: {trainStationCount}
+
+
+
+ Number of park and ride (P&R) stations in the RVB area: {parkRideCount}
+
+
+
>
);
}
diff --git a/ui/app/pages/park-ride.jsx b/ui/app/pages/park-ride.jsx
new file mode 100644
index 0000000..bd77bf4
--- /dev/null
+++ b/ui/app/pages/park-ride.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { Link} from 'react-router-dom';
+
+import Fetch from '../components/fetch';
+
+export default function ParkRide() {
+ return(
+ <>
+
+
+
+ RVB Display
+
+ >
+ );
+};
diff --git a/ui/app/pages/train-station.jsx b/ui/app/pages/train-station.jsx
index 1a48756..9d856c7 100644
--- a/ui/app/pages/train-station.jsx
+++ b/ui/app/pages/train-station.jsx
@@ -14,7 +14,9 @@ export default function TrainStation() {
RVB Display
-
+
>
);
};
diff --git a/ui/app/utils/api.js b/ui/app/utils/api.js
index 9021cf2..1540d61 100644
--- a/ui/app/utils/api.js
+++ b/ui/app/utils/api.js
@@ -21,6 +21,25 @@ export async function getBusStopCount(){
return count;
};
+/*
+ *get count of park and ride (P&R)
+ */
+export async function getParkRideCount(){
+ //console.log('getParkRideCount() Start...');
+
+ let count=null;
+ try {
+ //TODO handle errors: https://www.valentinog.com/blog/await-react/
+ const address = `${config.API}park-ride/count`;
+ const rsp = await axios.get(address);
+ count = rsp.data[0][0];
+ } catch (err) {
+ console.error('err.message: ' + err.message);
+ }
+ //console.log('getParkRideCount() Done.');
+ return count;
+};
+
/*
*get count of train stations
*/