feat: adjust UX of page Realtime

app/components/group-agency-per-day-table.js

@@ -17,9 +17,9 @@ export default function GroupAgencyPerDayTable ({array, title}){
 		<thead>
 		    <tr>
 			<th>agency_name</th>
-			<th>ABS ? count</th>
-			<th>RT ? count</th>
-			<th>RT ? part</th>
+			<th>ABS trip count</th>
+			<th>RT trip count</th>
+			<th>RT trip part</th>
 			<th>latest RT timestamp</th>
 		    </tr>
 		</thead>

app/components/per-day-table-entries.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function PerDayTableEntries ({array}) {
+    if ( array !== undefined && array !== null && array.length > 0 ) {
+	//TODO Shall we switch from UTC to local time zone for item.timestamp_pgsql?
+        //iterate over array
+        return array.map((item, index) => {
+            return (
+		<tr
+		    key={index}
+		>
+		    <td>{item.count}</td>
+		    <td>{item.rt_part}</td>
+		    <td>{item.count === 0 ? 0 : ((item.rt_part / item.count) * 100).toFixed(2)}</td>
+		    <td>{item.timestamp_pgsql}</td>
+		</tr>
+	    );
+        });
+    }else{
+	//data is empty
+	return null;
+    }
+};
+
+PerDayTableEntries.propTypes = {
+    array: PropTypes.array
+};

app/components/per-day-table.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import PerDayTableEntries from './per-day-table-entries';
+
+/*destructure props object*/
+export default function PerDayTable ({array, title}){
+
+    if ( array !== undefined && array !== null) {
+	/*return a React element*/
+	return (
+            <>
+		<p>Table of {array.length}&nbsp;{title} for today:</p>
+		<table>
+		<thead>
+		    <tr>
+			<th>ABS trip count</th>
+			<th>RT trip count</th>
+			<th>RT trip part</th>
+			<th>latest RT timestamp</th>
+		    </tr>
+		</thead>
+		<tbody>
+		    <PerDayTableEntries array={array} />
+		</tbody>
+		</table>
+            </>
+	);
+    }else{
+	return (
+            <>
+		<p>loading...</p>
+            </>
+	);
+    }
+};
+PerDayTable.propTypes = {
+    array: PropTypes.array,
+    title: PropTypes.string
+};

app/components/realtime.js

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 
 import AgencyPerDay from '../pages/agency-per-day';
 import GroupAgencyPerDay from '../pages/group-agency-per-day';
-//TODO Tbc! import PerDay from '../pages/per-day';
+import PerDay from '../pages/per-day';
 import TripUpdates from '../pages/trip-updates-route-day';
 
 export default function Realtime({ state }) {
@@ -13,7 +13,7 @@ export default function Realtime({ state }) {
 	    <p>
 		Analyse <b>GTFS Realtime</b> entities <b>TripUpdate</b> on <b>feed</b> level
 	    </p>
-	    <p>Loading...</p>
+	    <PerDay />
 	</>
     );
     }

app/pages/per-day.js

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+
+import config from '../config';
+import PerDayTable from '../components/per-day-table';
+import Input from '../components/input';
+
+export default function PerDay() {
+
+    const dateDefault = 'Select date';
+    const [date, setDate] = useState(dateDefault);
+
+    const [rryPerDay, setRryPerDay] = useState([]);
+    const [rryAgencies, setRryAgencies] = useState([]);
+
+    //TODO How do we handle invalid date input?
+    const handleDate = (e) => {
+	if (e.target.value.indexOf('2023') !== -1 ||
+	   e.target.value.indexOf('2024') !== -1) {
+            setDate((date)=>e.target.value);
+	}
+    };
+
+    const getRryPerDay = async () => {
+	if ( date !== dateDefault) {
+        try {
+            /*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
+	    const address = `${config.API}trip-updates-by-day?day=${date}`;
+	    //console.log('address: ' + address);
+            const res = await axios.get(address);
+	    if ( res.data !== undefined && res.data !== null ) {
+		//console.log('res.data.length: ' + res.data.length);
+		setRryPerDay((rryPerDay) => res.data);
+	    } else {
+		console.error('ERROR: trip-updates by routes and day request FAILED');
+	    }
+        } catch (err) {
+            console.error('err.message: ' + err.message);
+        }
+	}
+    };
+
+    /*this hook is run after a DOM update. Changing state might result in an infinite loop*/
+    /*hook need to be placed in body of the function component in which it is used*/
+    useEffect(() => {
+        getRryPerDay();
+    /*use an empty dependency array to ensure the hook is running only once*/
+    /*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
+    }, [date]);
+
+    return <>
+                <label>
+                    <p>Select date:</p>
+		    <Input
+			id="inputDate"
+			name="inputDate"
+			onChange={handleDate}
+			placeholder="Enter date ${dateDefault}"
+			type="date"
+			title="Enter date ${dateDefault}"
+			value={date}
+		    />
+		    </label>
+	       <PerDayTable array={rryPerDay} title={'routes'} />
+	   </>;
+};