added zoom functionality, need to add endpoint to post

src/components/CameraOverview/SnapshotContainer.tsx

@@ -1,17 +1,21 @@
 import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot";
+import type { ZoomLevel } from "../../types/types";
 import NavigationArrow from "../UI/NavigationArrow";
 
 type SnapshotContainerProps = {
   side: string;
   settingsPage?: boolean;
+  zoomLevel?: ZoomLevel;
+  onZoomLevelChange?: (level: ZoomLevel) => void;
 };
 
 export const SnapshotContainer = ({
   side,
   settingsPage,
+  zoomLevel,
+  onZoomLevelChange,
 }: SnapshotContainerProps) => {
   const { canvasRef, isError, isPending } = useGetOverviewSnapshot();
-
   if (isError) return <p className="h-100">An error occurred</p>;
   if (isPending) return <p className="h-100">Loading...</p>;
 
@@ -27,14 +31,20 @@ export const SnapshotContainer = ({
     if (!cw || !ch) return;
     const px = x / cw;
     const py = y / ch;
-    console.log({
+
-      left,
+    const baseLevel = zoomLevel?.level ?? 1;
-      top,
+    const newLevel = baseLevel >= 8 ? 1 : baseLevel * 2;
-      x,
+
-      y,
+    if (onZoomLevelChange)
-      px,
+      onZoomLevelChange({
-      py,
+        left,
-    });
+        top,
+        x,
+        y,
+        px,
+        py,
+        level: newLevel,
+      });
   };
 
   return (

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"

src/components/CameraSettings/CameraSettings.tsx

@@ -1,18 +1,23 @@
 import { useFetchCameraConfig } from "../../hooks/useCameraConfig";
+import type { ZoomLevel } from "../../types/types";
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
 import CameraSettingFields from "./CameraSettingFields";
 import { faWrench } from "@fortawesome/free-solid-svg-icons";
 
-const CameraSettings = ({ title, side }: { title: string; side: string }) => {
+const CameraSettings = ({
-  const {
+  title,
-    data,
+  side,
-    isError,
+  zoomLevel,
-    isPending,
+  onZoomLevelChange,
-    updateCameraConfig,
+}: {
-    updateCameraConfigError,
+  title: string;
-  } = useFetchCameraConfig(side);
+  side: string;
-  console.log(updateCameraConfigError);
+  zoomLevel?: ZoomLevel;
+  onZoomLevelChange?: (level: ZoomLevel) => void;
+}) => {
+  const { data, isError, isPending, updateCameraConfig } =
+    useFetchCameraConfig(side);
 
   return (
     <Card className="overflow-hidden min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%] p-4">
@@ -23,6 +28,8 @@ const CameraSettings = ({ title, side }: { title: string; side: string }) => {
         <CameraSettingFields
           initialData={data}
           updateCameraConfig={updateCameraConfig}
+          zoomLevel={zoomLevel}
+          onZoomLevelChange={onZoomLevelChange}
         />
       </div>
     </Card>

src/components/FrontCameraSettings/OverviewVideoContainer.tsx

@@ -3,14 +3,19 @@ import { SnapshotContainer } from "../CameraOverview/SnapshotContainer";
 import Card from "../UI/Card";
 import { useNavigate } from "react-router";
 import { useSwipeable } from "react-swipeable";
+import type { ZoomLevel } from "../../types/types";
 
 const OverviewVideoContainer = ({
   side,
   settingsPage,
+  zoomLevel,
+  onZoomLevelChange,
 }: {
   title: string;
   side: string;
   settingsPage?: boolean;
+  zoomLevel?: ZoomLevel;
+  onZoomLevelChange?: (level: ZoomLevel) => void;
 }) => {
   const navigate = useNavigate();
   const handlers = useSwipeable({
@@ -24,7 +29,12 @@ const OverviewVideoContainer = ({
       )}
     >
       <div className="w-full" {...handlers}>
-        <SnapshotContainer side={side} settingsPage={settingsPage} />
+        <SnapshotContainer
+          side={side}
+          settingsPage={settingsPage}
+          zoomLevel={zoomLevel}
+          onZoomLevelChange={onZoomLevelChange}
+        />
       </div>
     </Card>
   );

src/hooks/useGetOverviewSnapshot.ts

@@ -5,7 +5,7 @@ import { CAM_BASE } from "../utils/config";
 const apiUrl = CAM_BASE;
 
 async function fetchSnapshot() {
-  const response = await fetch(`${apiUrl}/CameraA-preview`);
+  const response = await fetch(`${apiUrl}/CameraRear-preview`);
   if (!response.ok) {
     throw new Error("Cannot reach endpoint");
   }

src/pages/Dashboard.tsx

@@ -4,7 +4,7 @@ import { SightingFeedProvider } from "../context/providers/SightingFeedProvider"
 import { CAM_BASE } from "../utils/config";
 
 const Dashboard = () => {
-  const base_url = `${CAM_BASE}/SightingList/sightingSummary?mostRecentRef=`;
+  const base_url = `${CAM_BASE}/SightingListFront/sightingSummary?mostRecentRef=`;
   return (
     <SightingFeedProvider url={base_url} side="Front">
       <div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">

src/pages/FrontCamera.tsx

@@ -1,16 +1,34 @@
+import { useState } from "react";
 import CameraSettings from "../components/CameraSettings/CameraSettings";
 import OverviewVideoContainer from "../components/FrontCameraSettings/OverviewVideoContainer";
 import { Toaster } from "sonner";
+import type { ZoomLevel } from "../types/types";
 
 const FrontCamera = () => {
+  const [zoomLevel, setZoomLevel] = useState<ZoomLevel>({
+    left: 0,
+    top: 0,
+    x: 0,
+    y: 0,
+    px: 0,
+    py: 0,
+    level: 1,
+  });
   return (
     <div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
       <OverviewVideoContainer
         title={"Front Camera"}
         side="CameraRear"
         settingsPage={true}
+        zoomLevel={zoomLevel}
+        onZoomLevelChange={setZoomLevel}
+      />
+      <CameraSettings
+        title="Front Camera Settings"
+        side="CameraFront"
+        zoomLevel={zoomLevel}
+        onZoomLevelChange={setZoomLevel}
       />
-      <CameraSettings title="Front Camera Settings" side="CameraFront" />
       <Toaster />
     </div>
   );

src/types/types.ts

@@ -251,3 +251,13 @@ export type CameraBlackBoardOptions = {
 export type CameraBlackboardResponse = {
   data: object;
 };
+
+export type ZoomLevel = {
+  left: number;
+  top: number;
+  x: number;
+  y: number;
+  px: number;
+  py: number;
+  level?: number;
+};

src/utils/config.ts

@@ -1,4 +1,4 @@
-const rawCamBase = import.meta.env.VITE_CAM_BASE;
+const rawCamBase = import.meta.env.VITE_OUTSIDE_BASEURL;
 export const CAM_BASE =
   rawCamBase && rawCamBase.trim().length > 0
     ? rawCamBase