From d1b6981017f82646537dd1457b7c3d7317a48e6a Mon Sep 17 00:00:00 2001 From: r8btx <60275558+r8btx@users.noreply.github.com> Date: Tue, 21 Nov 2023 02:13:22 -0500 Subject: [PATCH 1/3] fetch alerts from the endpoint --- front-end/src/components/AlertsPage.js | 59 +++++++----------------- front-end/src/utils/alerts.js | 63 ++++++++++++++++++++++++++ 2 files changed, 80 insertions(+), 42 deletions(-) create mode 100644 front-end/src/utils/alerts.js diff --git a/front-end/src/components/AlertsPage.js b/front-end/src/components/AlertsPage.js index 7627bdf..dd9d800 100644 --- a/front-end/src/components/AlertsPage.js +++ b/front-end/src/components/AlertsPage.js @@ -1,5 +1,5 @@ import { useState, useEffect } from 'react'; -import axios from 'axios'; +import { queryAlert } from '../utils/alerts'; import '../css/alertsPage.css'; function AlertsPage() { @@ -8,41 +8,11 @@ function AlertsPage() { const [error, setError] = useState(''); const fetchAlerts = () => { - // axios - // .get(`${process.env.REACT_APP_SERVER_HOSTNAME}/fetchAlerts`) - // .then((response) => { - // // axios bundles up all response data in response.data property - // const alerts = response.data.alerts; - // setAlerts(alerts); - // }) - // .catch((err) => { - // setError(err); - // }) - // .finally(() => { - // // the response has been received, so remove the loading icon - // setLoaded(true); - // }); - - // Only for DEMO remove later - setAlerts([ - { - title: 'Alert Title A', - content: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu bibendum at varius vel pharetra vel turpis nunc. Suscipit adipiscing bibendum est ultricies integer. Turpis nunc eget lorem dolor.', - }, - { - title: 'Alert Title B', - content: - 'Bibendum est ultricies integer quis. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque.', - }, - { - title: 'Alert Title C', - content: - 'Sit amet porttitor eget dolor morbi non arcu risus quis. Quis blandit turpis cursus in hac habitasse platea. Pellentesque elit eget gravida cum sociis natoque penatibus et.', - }, - { title: 'Alert Title D', content: 'Eu feugiat pretium nibh ipsum consequat nisl.' }, - ]); - // -------------------------- + queryAlert(true).then((messages) => { + setAlerts(messages); + setLoaded(true); + // if alerts are loaded, remove the loading icon (if any) + }); }; useEffect(() => { @@ -54,12 +24,17 @@ function AlertsPage() {

Alerts

- {alerts.map((alert, index) => ( -
-

{alert.title}

-

{alert.content}

-
- ))} + {alerts ? ( + alerts.map((alert) => ( +
+

{alert.createdF}

+

{alert.gtfsAlertHeaderText}

+

{alert.gtfsAlertDescriptionText}

+
+ )) + ) : ( +
+ )}
diff --git a/front-end/src/utils/alerts.js b/front-end/src/utils/alerts.js new file mode 100644 index 0000000..1edecf8 --- /dev/null +++ b/front-end/src/utils/alerts.js @@ -0,0 +1,63 @@ +// Todo +// Interval-based background query + +import axios from 'axios'; + +// const QUERY_INTERVAL = 120000; // 2 mins + +// Query alert. referch parameter determines "query all" or "query updates only" +export async function queryAlert(refresh) { + // JSON payload + const json = { + systemSelected0: localStorage.agencyId, + }; + + const subscribedRoutes = localStorage.subscribedRoutes ? localStorage.subscribedRoutes.split(',') : []; + subscribedRoutes.forEach((route, index) => { + json['routeSelected' + index] = route; + }); + + json.amount = 1; + json.routesAmount = subscribedRoutes.length; + + // Params for URL + const params = { + getAlertMessages: '1', + deviceId: localStorage.deviceId, + alertCRC: refresh ? 'na' : localStorage.alertCRC, + buildNo: localStorage.softwareVer, + }; + + // Fetch all or updates + if (refresh) { + params.embedded = '0'; + } else { + params.noOption = '1'; + } + + const urlParams = new URLSearchParams(params); + const url = `${localStorage.serviceEndpointSub}/goServices.php?${urlParams.toString()}`; + + try { + const response = await axios.post(url, json); + const data = response.data; + if (!data) { + throw new Error('empty response'); + } + if (data.agencyPhone) { + localStorage.agencyPhone = data.agencyPhone; + } + if (data.wsUrl) { + localStorage.wsUrl = data.wsUrl; + } + if ((data.alertCRC && data.alertCRC != localStorage.alertCRC) || (data.msgs && data.msgs.length)) { + localStorage.alertCRC = data.alertCRC; + } + const messages = data.msgs && data.msgs.length ? data.msgs : []; + + return messages; + } catch (error) { + console.log('Alerts query error: ' + error.message); + return []; + } +} From 29abb07dee4be86a4866f9bf47371e0992672949 Mon Sep 17 00:00:00 2001 From: r8btx <60275558+r8btx@users.noreply.github.com> Date: Tue, 21 Nov 2023 02:23:20 -0500 Subject: [PATCH 2/3] basic styling --- front-end/src/components/AlertsPage.js | 8 ++++---- front-end/src/css/alertsPage.css | 8 ++++++++ 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/front-end/src/components/AlertsPage.js b/front-end/src/components/AlertsPage.js index dd9d800..8a55cfd 100644 --- a/front-end/src/components/AlertsPage.js +++ b/front-end/src/components/AlertsPage.js @@ -24,16 +24,16 @@ function AlertsPage() {

Alerts

- {alerts ? ( + {alerts && alerts.length ? ( alerts.map((alert) => (
-

{alert.createdF}

-

{alert.gtfsAlertHeaderText}

+ {alert.createdF} +
{alert.gtfsAlertHeaderText}

{alert.gtfsAlertDescriptionText}

)) ) : ( -
+
There is no alert
)}
diff --git a/front-end/src/css/alertsPage.css b/front-end/src/css/alertsPage.css index a5b9d29..17730e0 100644 --- a/front-end/src/css/alertsPage.css +++ b/front-end/src/css/alertsPage.css @@ -22,6 +22,14 @@ @apply bg-lightMidTone w-80 p-4 rounded-xl shadow-md space-y-2; } +.alerts-item .time { + @apply text-sm; +} + +.alerts-item .headertext { + @apply font-semibold text-xl; +} + .dark .alerts-item { @apply bg-darkMode-lightMidTone text-black; } From 266a6fce3e3c9dc899520dba789b1f52a93bbdd8 Mon Sep 17 00:00:00 2001 From: r8btx <60275558+r8btx@users.noreply.github.com> Date: Tue, 21 Nov 2023 02:31:22 -0500 Subject: [PATCH 3/3] prevent too frequent requests --- front-end/src/utils/alerts.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/front-end/src/utils/alerts.js b/front-end/src/utils/alerts.js index 1edecf8..bd50264 100644 --- a/front-end/src/utils/alerts.js +++ b/front-end/src/utils/alerts.js @@ -4,9 +4,17 @@ import axios from 'axios'; // const QUERY_INTERVAL = 120000; // 2 mins +const MIN_QUERY_DELAY = 60000; // 1 min +let lastMessages = []; +let lastQuery = 0; // Query alert. referch parameter determines "query all" or "query updates only" export async function queryAlert(refresh) { + // Prevent too frequent requests + if (performance.now() - lastQuery < MIN_QUERY_DELAY) { + return lastMessages; + } + // JSON payload const json = { systemSelected0: localStorage.agencyId, @@ -55,6 +63,9 @@ export async function queryAlert(refresh) { } const messages = data.msgs && data.msgs.length ? data.msgs : []; + lastMessages = messages; + lastQuery = performance.now(); + return messages; } catch (error) { console.log('Alerts query error: ' + error.message);