From 86153fc9a4fae7b69b7a490c7be92b4918ab9eed Mon Sep 17 00:00:00 2001
From: GreenWizard2015 <forwork.anton@gmail.com>
Date: Sat, 13 Jan 2024 17:45:49 +0000
Subject: [PATCH] UI tweaks and fixes

---
 ui/src/Utils/time.js                          |  6 ++++--
 ui/src/components/CurrentOperationInfoArea.js |  2 +-
 ui/src/components/SystemControls.js           | 12 ++++++------
 ui/src/components/SystemStatusArea.js         | 10 ++++++----
 ui/src/components/TimerArea.js                |  6 +++---
 ui/src/store/slices/Notifications.js          |  9 ++++++++-
 ui/src/store/slices/SystemStatus.js           |  4 +++-
 7 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/ui/src/Utils/time.js b/ui/src/Utils/time.js
index 248738e..c5efa65 100644
--- a/ui/src/Utils/time.js
+++ b/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);
 }
\ No newline at end of file
diff --git a/ui/src/components/CurrentOperationInfoArea.js b/ui/src/components/CurrentOperationInfoArea.js
index b4ed46c..016fb18 100644
--- a/ui/src/components/CurrentOperationInfoArea.js
+++ b/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} />
diff --git a/ui/src/components/SystemControls.js b/ui/src/components/SystemControls.js
index 16d1a8a..b98b6e5 100644
--- a/ui/src/components/SystemControls.js
+++ b/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>
   );
 }
 
diff --git a/ui/src/components/SystemStatusArea.js b/ui/src/components/SystemStatusArea.js
index b95373f..974fb4d 100644
--- a/ui/src/components/SystemStatusArea.js
+++ b/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>
diff --git a/ui/src/components/TimerArea.js b/ui/src/components/TimerArea.js
index 2eb0a69..90e4429 100644
--- a/ui/src/components/TimerArea.js
+++ b/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">
diff --git a/ui/src/store/slices/Notifications.js b/ui/src/store/slices/Notifications.js
index 9fbc377..7913f1c 100644
--- a/ui/src/store/slices/Notifications.js
+++ b/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;
diff --git a/ui/src/store/slices/SystemStatus.js b/ui/src/store/slices/SystemStatus.js
index 8e80d2f..a1f4eae 100644
--- a/ui/src/store/slices/SystemStatus.js
+++ b/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;
+    });
   }
 });