"Hold to pour" button added to UI

Author: GreenWizard2015

ui/public/valve.png

@@ -6,4 +6,10 @@
   text-align: center;
   font-weight: bold;
   font-size: 2rem;
+}
+
+.hold-to-pour-image {
+  object-fit: contain;
+  width: 25%;
+  height: auto;
 }

ui/src/App.css

@@ -9,6 +9,7 @@ import PourTimeField from './components/PourTimeField.js';
 import SystemControls from './components/SystemControls.js';
 import SystemStatusArea from './components/SystemStatusArea.js';
 import CurrentOperationInfoArea from './components/CurrentOperationInfoArea.js';
+import HoldToPour from './components/HoldToPour.js';
 
 function App({ isConnected }) {
   return (
@@ -23,6 +24,7 @@ function App({ isConnected }) {
             <PourTimeField />
             <CurrentOperationInfoArea />
             <SystemControls />
+            <HoldToPour />
           </>
         ) : null}
       </Form>

ui/src/App.js

@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { Container } from 'react-bootstrap';
+import { useWaterPumpAPI } from '../contexts/WaterPumpAPIContext';
+import { startPump, stopPump } from '../store/slices/SystemStatus.js';
+
+export function HoldToPourComponent({ startPump, stopPump }) {
+  const pouringTime = 1500;
+  const api = useWaterPumpAPI().API;
+  const [isPouring, setIsPouring] = useState(false);
+
+  useEffect(() => {
+    if (!isPouring) return;
+
+    const tid = setInterval(() => {
+      startPump({ api, pouringTime });
+    }, pouringTime - 500);
+
+    return () => {
+      clearInterval(tid);
+      stopPump({ api });
+    };
+  }, [isPouring, api, startPump, stopPump]);
+
+  const handlePress = () => { setIsPouring(true); };
+  const handleRelease = () => { setIsPouring(false); };
+
+  return (
+    <Container className="d-flex justify-content-center mt-3">
+      <img src="valve.png" className='hold-to-pour-image' alt="Hold to pour button" 
+        draggable="false" onMouseDown={handlePress} onMouseUp={handleRelease}
+      />
+    </Container>
+  );
+}
+
+export default connect(
+  state => ({}),
+  { startPump, stopPump }
+)(HoldToPourComponent);