diff --git a/ui/src/components/SystemStatusArea.js b/ui/src/components/SystemStatusArea.js
index 7b58101..1279b0b 100644
--- a/ui/src/components/SystemStatusArea.js
+++ b/ui/src/components/SystemStatusArea.js
@@ -2,21 +2,36 @@ import React from 'react';
import { Card } from 'react-bootstrap';
import { connect } from 'react-redux';
-// TODO: Update time since last update every second,
-// currently it only updates when the status changes
-function _systemStatus(status) {
+// time elapsed since last update
+function TimeElapsedComponent({ updated }) {
+ const [diffString, setDiffString] = React.useState('');
+ React.useEffect(() => {
+ const interval = setInterval(() => {
+ const now = new Date();
+ const diff = now - updated;
+ const newDiffString = new Date(diff).toISOString().substr(11, 8);
+ setDiffString(newDiffString);
+ }, 1000);
+
+ return () => clearInterval(interval);
+ }, [updated]);
+
+ return (
+ {diffString}
+ );
+}
+
+function _systemStatus(status) {
if (null === status) {
return (Not connected);
}
-
+
const pump = status.pump;
- // TODO: check is this is a valid way to get the time since last update
- const now = new Date();
- const diff = now - status.updated;
- const diffString = new Date(diff).toISOString().substr(11, 8);
return (
<>
- Time since last update: {diffString}
+ Time since last update:{' '}
+
+
Pump Running: {pump.running ? "Yes" : "No"}
Time Left: {pump.timeLeft} ms
>
diff --git a/ui/src/store/slices/SystemStatus.js b/ui/src/store/slices/SystemStatus.js
index e9e9c91..86b047e 100644
--- a/ui/src/store/slices/SystemStatus.js
+++ b/ui/src/store/slices/SystemStatus.js
@@ -10,9 +10,8 @@ const systemStatus = {
running: false,
timeLeft: 0,
},
- updated: new Date(),
+ updated: Date.now(),
};
-// NOTE: SystemStatusSlice can't store unseralizable data, such as Date objects!
// slice for system status
export const SystemStatusSlice = createSlice({