UI tweaks and fixes

Author: GreenWizard2015

ui/src/Utils/time.js

@@ -10,11 +10,13 @@ function toTimeStr(diff) {
   return `${hoursStr}:${minutesStr}:${secondsStr}`;
 }
 
-export function timeBetweenAsString({endTime=null, startTime=null}) {
+export function timeBetweenAsString({endTime=null, startTime=null, bounded=false}) {
   if (null === startTime) startTime = new Date();
   if (null === endTime) endTime = new Date();
 
-  const diff = endTime - startTime; // in ms
+  let diff = endTime - startTime; // in ms
+  if (bounded && (diff < 0)) diff = 0;
+
   if (diff < 0) return '-' + toTimeStr(-diff);
   return toTimeStr(diff);
 }

ui/src/components/CurrentOperationInfoArea.js

@@ -5,7 +5,7 @@ import TimerArea from "./TimerArea";
 export function CurrentOperationInfoAreaComponent({
   isRunning, estimatedEndTime
 }) {
-  if (!isRunning) return null;
+  estimatedEndTime = isRunning ? estimatedEndTime : null;
   return (
     <div className="countdown-area">
       <TimerArea startTime={null} endTime={estimatedEndTime} />

ui/src/components/SystemControls.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Button } from 'react-bootstrap';
+import { Button, Container } from 'react-bootstrap';
 
 import { useWaterPumpAPI } from '../contexts/WaterPumpAPIContext';
 import { startPump, stopPump } from '../store/slices/SystemStatus.js';
@@ -19,14 +19,14 @@ export function SystemControlsComponent({
 
   const isRunning = systemStatus.pump.running;
   return (
-    <>
-      <Button variant="primary" onClick={handleStart} disabled={isRunning}>
+    <Container className="d-flex justify-content-center">
+      <Button variant="primary" onClick={handleStart} disabled={isRunning} size="lg">
         Start
-      </Button>{' '}
-      <Button variant="secondary" onClick={handleStop} disabled={!isRunning}>
+      </Button>
+      <Button variant="secondary" onClick={handleStop} disabled={!isRunning} className='ms-5' size="lg">
         Stop
       </Button>
-    </>
+    </Container>
   );
 }
 

ui/src/components/SystemStatusArea.js

@@ -9,20 +9,22 @@ function _systemStatus(status) {
   }
 
   const pump = status.pump;
+  const color = pump.running ? "green" : "black";
   return (
     <>
       <strong>Time since last update:</strong>{' '}
         <TimerArea startTime={status.updated} />
-      <br />
-      <strong>Pump Running:</strong> {pump.running ? "Yes" : "No"}<br />
-      <strong>Time Left:</strong> {pump.timeLeft} ms
+      {' | '}
+      <span style={{color: color}}>
+        <strong>Pump Running:</strong> {pump.running ? "Yes" : "No"}
+      </span>
     </>
   );
 }
 
 export function SystemStatusAreaComponent({ status }) {
   return (
-    <Card>
+    <Card className="my-3">
       <Card.Body>
         <Card.Title>System Status</Card.Title>
         <Card.Text>

ui/src/components/TimerArea.js

@@ -1,16 +1,16 @@
 import React from "react";
 import { timeBetweenAsString } from "../Utils/time";
 
-export function TimerArea({ startTime=null, endTime=null, interval=450 }) {
+export function TimerArea({ startTime=null, endTime=null, interval=450, bounded=true }) {
   const [countdown, setCountdown] = React.useState('');
 
   React.useEffect(() => {
     const tid = setInterval(() => {
-      setCountdown(timeBetweenAsString({ startTime, endTime }));
+      setCountdown(timeBetweenAsString({ startTime, endTime, bounded }));
     }, interval);
 
     return () => clearInterval(tid);
-  }, [startTime, endTime, interval]);
+  }, [startTime, endTime, bounded, interval]);
 
   return (
     <span className="timer-area">

ui/src/store/slices/Notifications.js

@@ -7,7 +7,14 @@ export const NotificationsSlice = createSlice({
   },
   reducers: {
     alert: (state, action) => {
-      state.currentNotifications = action.payload;
+      const { message, ...rest } = action.payload;
+      // prepend HH:MM:SS to message
+      const now = new Date();
+      const time = now.toTimeString().split(' ')[0];
+      state.currentNotifications = {
+        message: `[${time}] ${message}`,
+        ...rest
+      };
     },
     clear: state => {
       state.currentNotifications = null;

ui/src/store/slices/SystemStatus.js

@@ -63,7 +63,9 @@ export const SystemStatusSlice = createSlice({
     // on error, do not update system status
     builder.addCase(startPump.rejected, (state, action) => state);
     builder.addCase(stopPump.rejected, (state, action) => state);
-    builder.addCase(updateSystemStatus.rejected, (state, action) => state);
+    builder.addCase(updateSystemStatus.rejected, (state, action) => {
+      return null;
+    });
   }
 });