basic system status area

ui/src/App.js

@@ -6,19 +6,39 @@ import NotificationsArea from './components/NotificationsArea.js';
 import APIAddressField from './components/APIAddressField';
 import PourTimeField from './components/PourTimeField';
 import SystemControls from './components/SystemControls';
+import SystemStatusArea from './components/SystemStatusArea';
+
+// TODO: Replace this with a real system status
+//       replace "water threshold" with "waterThreshold"
+//       replace "time left" with "timeLeft"
+//       add field "updated"
+const systemStatus = {
+  waterThreshold: 1234,
+  pump: {
+    running: false,
+    timeLeft: 0,
+  },
+  updated: new Date(),
+};
 
 function App() {
   const [pourTime, setPourTime] = useState(1000);
-
+  // TODO: Add a fake countdown timer of timeLeft
   return (
     <Container className="App">
       <h1>Tea System UI</h1>
+      <SystemStatusArea status={systemStatus} />
+
       <Form>
         <APIAddressField />
-        <PourTimeField onChange={setPourTime} min={100} max={10000} />
-
-        <SystemControls pouringTime={pourTime} />
+        {(null === systemStatus) ? null : (
+          <>
+            <PourTimeField onChange={setPourTime} min={100} max={systemStatus.waterThreshold} />
+            <SystemControls pouringTime={pourTime} systemStatus={systemStatus} />
+          </>
+        )}
       </Form>
+
       <div className="spacer my-3" />
       <NotificationsArea />
     </Container>

ui/src/components/SystemControls.js

@@ -4,7 +4,7 @@ import { Button } from 'react-bootstrap';
 import { useWaterPumpAPI } from '../contexts/WaterPumpAPIContext';
 import { useNotificationsSystem } from '../contexts/NotificationsContext.js';
 
-function SystemControls({ pouringTime }) {
+function SystemControls({ pouringTime, systemStatus }) {
   const waterPump = useWaterPumpAPI().API;
   const NotificationsSystem = useNotificationsSystem();
 
@@ -26,12 +26,13 @@ function SystemControls({ pouringTime }) {
     }
   };
 
+  const isRunning = systemStatus.pump.running;
   return (
     <>
-      <Button variant="primary" onClick={handleStart}>
+      <Button variant="primary" onClick={handleStart} disabled={isRunning}>
         Start
       </Button>{' '}
-      <Button variant="secondary" onClick={handleStop}>
+      <Button variant="secondary" onClick={handleStop} disabled={!isRunning}>
         Stop
       </Button>
     </>

ui/src/components/SystemStatusArea.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Card } from 'react-bootstrap';
+
+// TODO: Update time since last update every second,
+//       currently it only updates when the status changes
+function _systemStatus(status) {
+  if (null === status) {
+    return (<b>Not connected</b>);
+  }
+
+  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 (
+    <>
+      <strong>Time since last update:</strong> {diffString}<br />
+      <strong>Pump Running:</strong> {pump.running ? "Yes" : "No"}<br />
+      <strong>Time Left:</strong> {pump.timeLeft} ms
+    </>
+  );
+}
+
+function SystemStatusArea({ status }) {
+  return (
+    <Card>
+      <Card.Body>
+        <Card.Title>System Status</Card.Title>
+        <Card.Text>
+          {_systemStatus(status)}
+        </Card.Text>
+      </Card.Body>
+    </Card>
+  );
+}
+
+export default SystemStatusArea;