feat(automatic): Add API call for setpoint changes & integrate with W…

…ebSocket updates

* Introduced `handleSetpointChange` function in `apiCalls.tsx` for API interactions
* Incorporated WebSocket updates in `page.tsx` using `useWebSocket` hook
* Introduced logic to enable / disable automatic control
    * controllable with Switch

app/automatic/apiCalls.tsx

@@ -0,0 +1,27 @@
+"use server";
+
+import {
+  client,
+  postSetpointV1SensorsFlowmetersSensorIdSetpointPost,
+} from "../api";
+
+client.setConfig({
+  baseURL: process.env.BACKEND_URI,
+  proxy: false,
+});
+
+export async function handleSetpointChange(
+  setpoint: number | null,
+  sensorId: number
+) {
+  postSetpointV1SensorsFlowmetersSensorIdSetpointPost({
+    body: { setpoint: setpoint },
+    path: {
+      sensor_id: sensorId,
+    },
+  }).then((response) => {
+    if (response.data) {
+      return response.data;
+    }
+  });
+}

app/automatic/page.tsx

@@ -1,18 +1,40 @@
 "use client";
 
-import { useState } from "react";
+import { use, useEffect, useState } from "react";
 import { FlowmeterWidgets } from "../sensors/ui/flowmeterWidgets";
 import { InputConfirmed } from "../actuators/ui/inputConfirmed";
+import useWebSocket from "../hooks/useWebSocket";
+import { handleSetpointChange } from "./apiCalls";
+import { Switch } from "antd";
 
 export default function Page() {
   let [setpoint, setSetpoint] = useState<number>(0);
 
+  const { data: websocketState, error } = useWebSocket<number | null>({
+    hostname: window.location.hostname,
+    route: "/v1/sensors/flowmeters/ws/setpoint/0",
+  });
+
+  useEffect(() => {
+    if (typeof websocketState === "number") {
+      setSetpoint(websocketState);
+    }
+  }, [websocketState]);
+
   const onSetpointChange = (newSetpoint: number) => {
     setSetpoint(newSetpoint);
   };
 
   const onSetpointConfirm = () => {
-    console.log("Setpoint confirmed: ", setpoint);
+    handleSetpointChange(setpoint, 0);
+  };
+
+  const handleToggle = (checked: boolean) => {
+    if (checked) {
+      handleSetpointChange(setpoint, 0);
+    } else {
+      handleSetpointChange(null, 0);
+    }
   };
 
   return (
@@ -26,6 +48,12 @@ export default function Page() {
         </h2>
         <FlowmeterWidgets />
       </div>
+      <div>
+        <Switch
+          checked={typeof websocketState === "number"}
+          onClick={(checked) => handleToggle(checked)}
+        />
+      </div>
       <div>
         <InputConfirmed
           min={0.0}
@@ -34,6 +62,7 @@ export default function Page() {
           value={setpoint}
           onValueChange={onSetpointChange}
           onConfirm={onSetpointConfirm}
+          disabled={!(typeof websocketState === "number")}
         />
       </div>
     </div>