misc adjustments and stop logic for pouring

Author: GreenWizard2015

ui/src/components/HoldToPour.js

@@ -3,12 +3,20 @@ import { connect } from 'react-redux';
 import { Container, Form } from 'react-bootstrap';
 import { useWaterPumpAPI } from '../contexts/WaterPumpAPIContext';
 
-export function HoldToPourComponent({ interval }) {
+export function HoldToPourComponent({ interval, estimatedTeaLevel }) {
   const { API }= useWaterPumpAPI();
   const [isPouring, setIsPouring] = useState(false);
   const [clickToPour, setClickToPour] = useState(false);
   // continuously pour water while the button is pressed
   const lastPouringTime = React.useRef(0);
+  // stop pouring if estimated level is greater than 100%
+  useEffect(() => {
+    if(!isPouring) return;
+    if(estimatedTeaLevel >= 100) {
+      setIsPouring(false);
+    }
+  }, [isPouring, estimatedTeaLevel]);
+  
   const onTick = React.useCallback(
     async () => {
       if(Date.now() < lastPouringTime.current) return;
@@ -77,6 +85,7 @@ function HoldToPourComponent_withExtras({ pouringTime, ...props }) {
 export default connect(
   state => ({
     pouringTime: state.UI.pouringTime,
+    estimatedTeaLevel: state.Temp.estimatedTeaLevel,
   }),
   { }
 )(HoldToPourComponent_withExtras);

ui/src/components/TeaLevel.css

@@ -13,6 +13,7 @@
   max-width: 100%;
   width: fit-content;
   display: flex;
+  padding: 1rem;
 }
 
 .cup-image {
@@ -31,6 +32,7 @@
   height: 3px;
   background-color: #76b7b2;
   z-index: 2;
+  color: #76b7b2;
 }
 
 .est-tea-level {
@@ -40,4 +42,19 @@
   height: 3px;
   border-bottom: 3px dashed red;
   z-index: 3;
+  text-align: right;
+  padding-bottom: 2rem;
+  color: red;
 }
+
+.prev-tea-level {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  height: 3px;
+  border-bottom: 3px dashed black;
+  z-index: 3;
+  text-align: center;
+  padding-bottom: 2rem;
+  color: black;
+}

ui/src/components/TeaLevel.js

@@ -20,13 +20,12 @@ function toPercentage(realLevel) {
 
 function TeaLevel({ 
   lastOperationDuration, speed, startTeaLevel, estimatedTeaLevel,
-  changeStartTeaLevel, changeEstimatedTeaLevel, changeSpeed, lastTeaLevel
+  changeStartTeaLevel, changeEstimatedTeaLevel, changeSpeed, lastTeaLevel,
 }) {
   const [calcSpeed, setCalcSpeed] = useState(speed);
   // update the estimated level if speed or duration changes
   useEffect(() => {
     const estimatedLevel = startTeaLevel + speed * lastOperationDuration / 1000;
-    console.log(startTeaLevel, speed, lastOperationDuration, estimatedLevel);
     changeEstimatedTeaLevel(estimatedLevel);
   }, [lastOperationDuration, speed, startTeaLevel, changeEstimatedTeaLevel]);
 
@@ -37,9 +36,10 @@ function TeaLevel({
     const clickedPercentage = (clickedPosition / height) * 100;
     const newLevel = toPercentage(clickedPercentage);
     // limit the new level to the range [0, 100]
-    changeStartTeaLevel( Math.min(Math.max(newLevel, 0), 100) );
+    const level = Math.min(Math.max(newLevel, 0), 100);
+    changeStartTeaLevel( level );
     // find speed
-    const newSpeed = (newLevel - lastTeaLevel) / (lastOperationDuration / 1000);
+    const newSpeed = (level - lastTeaLevel) / (lastOperationDuration / 1000);
     setCalcSpeed(newSpeed);
   };
 
@@ -56,8 +56,17 @@ function TeaLevel({
             <img src={cup} alt="Cup" className="cup-image" draggable="false" 
               onClick={handleCupClick}
             />
-            <div className="tea-level" style={{ bottom: `${toRealLevel(startTeaLevel)}%` }}></div>
-            <div className="est-tea-level" style={{ bottom: `${toRealLevel(estimatedTeaLevel)}%` }}></div>
+            <div className="tea-level" style={{ bottom: `${toRealLevel(startTeaLevel)}%` }}>
+              {startTeaLevel.toFixed(0)}%
+            </div>
+            
+            <div className="est-tea-level" style={{ bottom: `${toRealLevel(estimatedTeaLevel)}%` }}>
+              {estimatedTeaLevel.toFixed(0)}%
+            </div>
+
+            <div className="prev-tea-level" style={{ bottom: `${toRealLevel(lastTeaLevel)}%` }}>
+              {lastTeaLevel.toFixed(0)}%
+            </div>
           </div>
         </div>
       </div>
@@ -67,7 +76,7 @@ function TeaLevel({
         <p>last tea level: {lastTeaLevel.toFixed(2)}%</p>
       </div>
       <div>
-        <input type="text" value={calcSpeed.toFixed(2)} readOnly />
+        <input type="number" step="0.01" value={calcSpeed.toFixed(2)} />
         <button onClick={onSpeedSet}>Set Speed</button>
       </div>
     </>

ui/src/store/slices/Temp.js

@@ -5,6 +5,7 @@ const initialState = {
   prevTeaLevel: 0,
   startTeaLevel: 0,
   estimatedTeaLevel: 50,
+  estimation: true,
 }
 
 export const TempSlice = createSlice({
@@ -15,18 +16,18 @@ export const TempSlice = createSlice({
       state.lastOperationDuration = action.payload;
     },
     changeEstimatedTeaLevel: (state, action) => {
-      state.estimatedTeaLevel = action.payload;
-    },
-    changePrevTeaLevel: (state, action) => {
-      state.prevTeaLevel = action.payload;
+      if (state.estimation) {
+        state.estimatedTeaLevel = action.payload;
+      }
     },
     pumpStartedEvent: (state, action) => {
       state.prevTeaLevel = state.startTeaLevel;
+      state.estimation = true;
     },
     changeStartTeaLevel: (state, action) => {
       state.startTeaLevel = action.payload;
       state.estimatedTeaLevel = state.startTeaLevel;
-      state.lastOperationDuration = 0;
+      state.estimation = false;
     },
   }
 });
@@ -35,7 +36,6 @@ export const actions = TempSlice.actions;
 export const { 
   changeLastOperationDuration, 
   changeEstimatedTeaLevel, 
-  changePrevTeaLevel, 
   pumpStartedEvent, 
   changeStartTeaLevel
 } = actions;