added zoom functionality, need to add endpoint to post

src/components/CameraSettings/CameraSettingFields.tsx

@@ -3,19 +3,25 @@ import type {
   CameraConfig,
   CameraSettingErrorValues,
   CameraSettingValues,
+  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";
 
 type CameraSettingsProps = {
   initialData: CameraConfig;
   updateCameraConfig: (values: CameraSettingValues) => Promise<void> | void;
+  zoomLevel?: ZoomLevel;
+  onZoomLevelChange?: (level: ZoomLevel) => void;
 };
 
 const CameraSettingFields = ({
   initialData,
   updateCameraConfig,
+  zoomLevel,
+  onZoomLevelChange,
 }: CameraSettingsProps) => {
   const [showPwd, setShowPwd] = useState(false);
 
@@ -26,8 +32,9 @@ const CameraSettingFields = ({
       userName: "",
       password: "",
       id: initialData?.id,
+      zoom: zoomLevel?.level ? zoomLevel.level : 1,
     }),
-    [initialData?.id, initialData?.propURI?.value]
+    [initialData?.id, initialData?.propURI?.value, zoomLevel?.level]
   );
 
   const validateValues = (values: CameraSettingValues) => {
@@ -41,16 +48,24 @@ const CameraSettingFields = ({
   };
 
   const handleSubmit = (values: CameraSettingValues) => {
+    console.log(values);
     updateCameraConfig(values);
   };
 
+  const handleRadioButtonChange = (levelNumber: number) => {
+    if (!onZoomLevelChange || !zoomLevel) return;
+    onZoomLevelChange({
+      ...zoomLevel,
+      level: zoomLevel?.level !== levelNumber ? levelNumber : zoomLevel?.level,
+    });
+  };
+
   return (
     <Formik
       initialValues={initialValues}
       onSubmit={handleSubmit}
       validate={validateValues}
       validateOnChange={false}
-      enableReinitialize
     >
       {({ errors, touched }) => (
         <Form className="flex flex-col space-y-6 p-2">
@@ -111,7 +126,7 @@ const CameraSettingFields = ({
                 {errors.password}
               </small>
             )}
-            <div className="flex gap-2 items-center relative">
+            <div className="flex gap-2 items-center relative mb-4">
               <Field
                 id="password"
                 name="password"
@@ -127,7 +142,82 @@ const CameraSettingFields = ({
                 icon={showPwd ? faEyeSlash : faEye}
               />
             </div>
+            <div className="my-3">
+              <CardHeader title="Zoom settings" />
+              <div className="mx-auto flex gap-10 items-center ">
+                <div>
+                  <Field
+                    type="radio"
+                    name="zoom"
+                    value={zoomLevel?.level ? zoomLevel.level.toString() : "1"}
+                    checked={zoomLevel?.level === 1}
+                    className="hidden peer"
+                    id="zoom1"
+                    onChange={() => handleRadioButtonChange(1)}
+                  />
+                  <label
+                    htmlFor="zoom1"
+                    className="px-6 py-2 rounded-md border border-gray-300 peer-checked:border-2 peer-checked:border-blue-900  peer-checked:text-blue-600 peer-checked:bg-gray-100"
+                  >
+                    x1
+                  </label>
+                </div>
 
+                <div>
+                  <Field
+                    type="radio"
+                    name="zoom"
+                    value={zoomLevel?.level ? zoomLevel.level.toString() : "2"}
+                    checked={zoomLevel?.level === 2}
+                    className="hidden peer"
+                    id="zoom2"
+                    onChange={() => handleRadioButtonChange(2)}
+                  />
+                  <label
+                    htmlFor="zoom2"
+                    className="px-6 py-2 rounded-md border border-gray-300 peer-checked:border-2 peer-checked:border-blue-900  peer-checked:text-blue-600 peer-checked:bg-gray-100"
+                  >
+                    x2
+                  </label>
+                </div>
+
+                <div>
+                  <Field
+                    type="radio"
+                    name="zoom"
+                    value={zoomLevel?.level ? zoomLevel.level.toString() : "4"}
+                    checked={zoomLevel?.level === 4}
+                    className="hidden peer"
+                    id="zoom4"
+                    onChange={() => handleRadioButtonChange(4)}
+                  />
+                  <label
+                    htmlFor="zoom4"
+                    className="px-6 py-2 rounded-md border border-gray-300 peer-checked:border-2 peer-checked:border-blue-900  peer-checked:text-blue-600 peer-checked:bg-gray-100"
+                  >
+                    x4
+                  </label>
+                </div>
+
+                <div>
+                  <Field
+                    type="radio"
+                    name="zoom"
+                    value={zoomLevel?.level ? zoomLevel.level.toString() : "8"}
+                    checked={zoomLevel?.level === 8}
+                    className="hidden peer"
+                    id="zoom8"
+                    onChange={() => handleRadioButtonChange(8)}
+                  />
+                  <label
+                    htmlFor="zoom8"
+                    className="px-6 py-2 rounded-md border border-gray-300 peer-checked:border-2 peer-checked:border-blue-900  peer-checked:text-blue-600 peer-checked:bg-gray-100"
+                  >
+                    x8
+                  </label>
+                </div>
+              </div>
+            </div>
             <button
               type="submit"
               className="bg-[#26B170] text-white rounded-lg p-2 mx-auto h-[100%] w-full"