feat: adjust UX of page Realtime

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function GroupAgencyPerDayTableEntries ({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.agency_name}</td>
+		    <td>{item.agency_id}</td>
+		    <td>{item.rt_part}</td>
+		    <td>{item.agency_id === 0 ? 0 : ((item.rt_part / item.agency_id) * 100).toFixed(2)}</td>
+		    <td>{item.timestamp_pgsql}</td>
+		</tr>
+	    );
+        });
+    }else{
+	//data is empty
+	return null;
+    }
+};
+
+GroupAgencyPerDayTableEntries.propTypes = {
+    array: PropTypes.array
+};

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import GroupAgencyPerDayTableEntries from './group-agency-per-day-table-entries';
+
+//TODO For the cnnct feed, why do we get a 93 length agency array instead of 123?
+
+/*destructure props object*/
+export default function GroupAgencyPerDayTable ({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>agency_name</th>
+			<th>ABS ? count</th>
+			<th>RT ? count</th>
+			<th>RT ? part</th>
+			<th>latest RT timestamp</th>
+		    </tr>
+		</thead>
+		<tbody>
+		    <GroupAgencyPerDayTableEntries array={array} />
+		</tbody>
+		</table>
+            </>
+	);
+    }else{
+	return (
+            <>
+		<p>loading...</p>
+            </>
+	);
+    }
+};
+GroupAgencyPerDayTable.propTypes = {
+    array: PropTypes.array,
+    title: PropTypes.string
+};

app/components/realtime.js

@@ -2,6 +2,8 @@ import PropTypes from 'prop-types';
 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 TripUpdates from '../pages/trip-updates-route-day';
 
 export default function Realtime({ state }) {
@@ -21,7 +23,7 @@ export default function Realtime({ state }) {
 	    <p>
 		Analyse <b>GTFS Realtime</b> entities <b>TripUpdate</b> on <b>agencies</b> level
 	    </p>
-	    <p>Loading...</p>
+	    <GroupAgencyPerDay />
 	</>
     );
     } else if ( state === 'routes' ) {

app/pages/agency-per-day.js

@@ -34,7 +34,7 @@ export default function AgencyPerDay() {
 	    //console.log('trip-updates-route-day res.data.length: address: ' + address);
             const res = await axios.get(address);
 	    //console.log('trip-updates-route-day res.data.length: Agencies: ' + res.data.length);
-            setRryAgencies((rryAgency) => res.data);
+            setRryAgencies((rryAgencies) => res.data);
         } catch (err) {
             console.error('err.message: ' + err.message);
         }
@@ -81,7 +81,6 @@ export default function AgencyPerDay() {
     }, [strngAgencyId, date]);
 
 
-    //TODO get rry based on agency_id!
     return <>
                 <label>
                     <p>Select date:</p>

app/pages/group-agency-per-day.js

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+
+import config from '../config';
+import GroupAgencyPerDayTable from '../components/group-agency-per-day-table';
+import Input from '../components/input';
+
+export default function GroupAgencyPerDay() {
+
+    const dateDefault = 'Select date';
+    const [date, setDate] = useState(dateDefault);
+
+    const [rryGroupAgencyPerDay, setRryGroupAgencyPerDay] = 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 getRryGroupAgencyPerDay = async () => {
+	if ( date !== dateDefault) {
+        try {
+            /*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
+	    const address = `${config.API}trip-updates-by-group-agency-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);
+		setRryGroupAgencyPerDay((rryGroupAgencyPerDay) => 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(() => {
+        getRryGroupAgencyPerDay();
+    /*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>
+	       <GroupAgencyPerDayTable array={rryGroupAgencyPerDay} title={'routes'} />
+	   </>;
+};