impl. power level control in UI

Author: GreenWizard2015

ui/package-lock.json

@@ -12,6 +12,7 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.9.2",
     "react-dom": "^18.2.0",
+    "react-input-slider": "^6.0.1",
     "react-redux": "^9.0.4",
     "react-scripts": "5.0.1",
     "redux-persist": "^6.0.0",

ui/package.json

@@ -10,6 +10,7 @@ import SystemControls from './components/SystemControls.js';
 import SystemStatusArea from './components/SystemStatusArea.js';
 import CurrentOperationInfoArea from './components/CurrentOperationInfoArea.js';
 import HoldToPour from './components/HoldToPour.js';
+import PowerLevel from './components/PowerLevel.js';
 
 function App({ isConnected }) {
   return (
@@ -21,6 +22,7 @@ function App({ isConnected }) {
         <APIAddressField />
         {isConnected ? (
           <>
+            <PowerLevel />
             <PourTimeField />
             <CurrentOperationInfoArea />
             <SystemControls />

ui/public/gauge.png

@@ -29,7 +29,10 @@ class CWaterPumpAPI {
     });
   }
 
-  async start(runTimeMs) { return await this._impl.start(runTimeMs); }
+  async start(runTimeMs, powerLevelInPercents) {
+    return await this._impl.start(runTimeMs, powerLevelInPercents);
+  }
+
   async stop() { return await this._impl.stop(); }
   async status() { return await this._impl.status(); }
 }

ui/src/App.js

@@ -11,9 +11,27 @@ class CWaterPumpAPIImpl {
     return { response, requestTime: end - start };
   }
 
-  async start(runTimeMs) {
+  async start(runTimeMs, powerLevelInPercents) {
+    // basic validation
+    const isValidTime = Number.isInteger(runTimeMs) && (0 < runTimeMs);
+    if(!isValidTime) {
+      throw new Error('Pouring time is not a valid number');
+    }
+
+    const isValidPowerLevel = Number.isInteger(powerLevelInPercents) &&
+      (0 < powerLevelInPercents) && (powerLevelInPercents <= 100);
+    if(!isValidPowerLevel) {
+      throw new Error('Power level is not a valid number');
+    }
+    /////////////////////////////////////////////////////////////////
     const { response: { data }, requestTime } = await this._execute(
-      async () => await this._client.get('/pour_tea', { params: { milliseconds: runTimeMs } })
+      async () => await this._client.get(
+        '/pour_tea',
+        { params: {
+          milliseconds: runTimeMs,
+          powerLevel: powerLevelInPercents,
+        }}
+      )
     );
     return this.preprocessResponse({ response: data, requestTime });
   }

ui/src/api/CWaterPumpAPI.js

@@ -52,12 +52,30 @@ describe('CWaterPumpAPIImpl', () => {
   // tests per method
   describe('start', () => {
     it('common test cases', async () => {
-      const T = Math.random() * 1000;
-      const callback = async (api) => await api.start(T);
+      const T = Math.floor(Math.random() * 1000);
+      const P = Math.floor(Math.random() * 99) + 1;
+      const callback = async (api) => await api.start(T, P);
       await shouldThrowErrorFromResponse(callback);
       await shouldRethrowError(callback);
       await shouldPreprocessResponse(callback);
-      await shouldBeCalledWith(callback, '/pour_tea', { milliseconds: T });
+      await shouldBeCalledWith(callback, '/pour_tea', { milliseconds: T, powerLevel: P});
+    });
+
+    it('should throw error if pouring time is not a valid number', async () => {
+      const message = 'Pouring time is not a valid number';
+      const api = new CWaterPumpAPIImpl({ client: {} });
+      await expect(api.start('abc', 100)).rejects.toThrow(message);
+      await expect(api.start(-1, 100)).rejects.toThrow(message);
+      await expect(api.start(0, 100)).rejects.toThrow(message);
+    });
+
+    it('should throw error if power level is not a valid number', async () => {
+      const message = 'Power level is not a valid number';
+      const api = new CWaterPumpAPIImpl({ client: {} });
+      await expect(api.start(100, 'abc')).rejects.toThrow(message);
+      await expect(api.start(100, -1)).rejects.toThrow(message);
+      await expect(api.start(100, 0)).rejects.toThrow(message);
+      await expect(api.start(100, 101)).rejects.toThrow(message);
     });
   });
 

ui/src/api/CWaterPumpAPIImpl.js

@@ -65,12 +65,23 @@ export function HoldToPourComponent({ startPump, stopPump, interval }) {
 }
 
 // Helper wrapper to simplify the code in the component
-function HoldToPourComponent_withExtras({ pouringTime, startPump, stopPump }) {
+function HoldToPourComponent_withExtras({ pouringTime, powerLevel, startPump, stopPump }) {
   const api = useWaterPumpAPI().API;
+  // to prevent the callback from changing when the pouringTime or powerLevel changes
+  const _pouringTime = React.useRef(pouringTime);
+  React.useEffect(() => { _pouringTime.current = pouringTime; }, [pouringTime]);
+
+  const _powerLevel = React.useRef(powerLevel);
+  React.useEffect(() => { _powerLevel.current = powerLevel; }, [powerLevel]);
 
   const _startPump = React.useCallback(
-    async () => { await startPump({ api, pouringTime }); },
-    [api, startPump, pouringTime]
+    async () => {
+      await startPump({ 
+        api,
+        pouringTime: _pouringTime.current,
+        powerLevel: _powerLevel.current,
+      });
+    }, [api, startPump, _pouringTime, _powerLevel]
   );
   const _stopPump = React.useCallback(
     async () => { await stopPump({ api }); },
@@ -88,6 +99,9 @@ function HoldToPourComponent_withExtras({ pouringTime, startPump, stopPump }) {
 };
 
 export default connect(
-  state => ({ pouringTime: state.UI.pouringTime }),
+  state => ({
+    pouringTime: state.UI.pouringTime,
+    powerLevel: state.UI.powerLevelInPercents,
+  }),
   { startPump, stopPump }
 )(HoldToPourComponent_withExtras);