Add camera zoom functionality and refactor blackboard data fetching

- Introduced `useCameraZoom` hook for managing camera zoom operations.
- Refactored `useCameraBlackboard` to improve data fetching function naming.
- Updated `CameraSettingFields` to utilize new zoom functionality and handle zoom level changes.
- Removed unnecessary console logs from `Dashboard`.

src/components/CameraSettings/CameraSettingFields.tsx

@@ -3,12 +3,15 @@ import type {
   CameraConfig,
   CameraSettingErrorValues,
   CameraSettingValues,
+  ZoomInOptions,
   ZoomLevel,
 } from "../../types/types";
 import { useMemo, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
 import CardHeader from "../UI/CardHeader";
+import { useCameraZoom } from "../../hooks/useCameraZoom";
+import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
 
 type CameraSettingsProps = {
   initialData: CameraConfig;
@@ -24,7 +27,9 @@ const CameraSettingFields = ({
   onZoomLevelChange,
 }: CameraSettingsProps) => {
   const [showPwd, setShowPwd] = useState(false);
-  console.log(initialData);
+  const { mutation } = useCameraZoom();
+  const { mutation: blackboardMuation, query: blackboardQuery } =
+    useCameraBlackboard();
   const initialValues = useMemo<CameraSettingValues>(
     () => ({
       friendlyName: initialData?.id ?? "",
@@ -32,6 +37,7 @@ const CameraSettingFields = ({
       userName: "",
       password: "",
       id: initialData?.id,
+      //TODO: update zoomlevel to query data
       zoom: zoomLevel?.level ? zoomLevel.level : 1,
     }),
     [initialData?.id, initialData?.propURI?.value, zoomLevel?.level]
@@ -41,23 +47,42 @@ const CameraSettingFields = ({
     const errors: CameraSettingErrorValues = {};
     if (!values.friendlyName) errors.friendlyName = "Required";
     if (!values.cameraAddress) errors.cameraAddress = "Required";
-    if (!values.userName) errors.userName = "Required";
-    if (!values.password) errors.password = "Required";
-
     return errors;
   };
 
   const handleSubmit = (values: CameraSettingValues) => {
-    console.log(values);
     updateCameraConfig(values);
   };
 
-  const handleRadioButtonChange = (levelNumber: number) => {
+  const handleRadioButtonChange = async (levelNumber: number) => {
     if (!onZoomLevelChange || !zoomLevel) return;
     onZoomLevelChange({
       ...zoomLevel,
       level: zoomLevel?.level !== levelNumber ? levelNumber : zoomLevel?.level,
     });
+    const cameraControllerSide =
+      initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB";
+
+    const zoomInOptions: ZoomInOptions = {
+      camera: cameraControllerSide,
+      multiplier: levelNumber,
+    };
+
+    mutation.mutate(zoomInOptions);
+
+    if (!blackboardQuery.data.cameraZoom) {
+      blackboardMuation.mutate({
+        operation: "INSERT",
+        path: "cameraZoom",
+        value: zoomInOptions,
+      });
+    } else {
+      blackboardMuation.mutate({
+        operation: "APPEND",
+        path: "cameraZoom",
+        value: zoomInOptions,
+      });
+    }
   };
 
   return (