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({