- more addition bugfixes

src/components/CameraOverview/SnapshotContainer.tsx

@@ -5,7 +5,7 @@ import { useCameraZoom } from "../../hooks/useCameraZoom";
 import { useEffect } from "react";
 import Loading from "../UI/Loading";
 import ErrorState from "../UI/ErrorState";
-import { zoomMapping } from "../../utils/utils";
+import { reverseZoomMapping, zoomMapping } from "../../utils/utils";
 
 type SnapshotContainerProps = {
   side: string;
@@ -17,7 +17,9 @@ type SnapshotContainerProps = {
 export const SnapshotContainer = ({ side, settingsPage, zoomLevel, onZoomLevelChange }: SnapshotContainerProps) => {
   const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side);
   const cameraControllerSide = side === "CameraA" ? "CameraControllerA" : "CameraControllerB";
-  const { mutation } = useCameraZoom({ camera: cameraControllerSide });
+  const { mutation, query } = useCameraZoom({ camera: cameraControllerSide });
+  const magnification = query?.data?.propMagnification?.value;
+  const apiZoom = reverseZoomMapping(magnification);
 
   const handleZoomClick = () => {
     const baseLevel = zoomLevel ?? 1;
@@ -30,16 +32,16 @@ export const SnapshotContainer = ({ side, settingsPage, zoomLevel, onZoomLevelCh
 
   useEffect(() => {
     if (zoomLevel) {
-      const text = zoomMapping(zoomLevel);
+      const text = zoomMapping(apiZoom);
       const zoomInOptions: ZoomInOptions = {
         camera: cameraControllerSide,
         multiplier: zoomLevel,
         multiplierText: text,
       };
+      console.log(zoomInOptions);
       mutation.mutate(zoomInOptions);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [zoomLevel]);
+  }, [cameraControllerSide, apiZoom, zoomLevel]);
 
   return (
     <div className="flex flex-col md:flex-row">

src/components/CameraSettings/CameraSettingFields.tsx

@@ -5,13 +5,13 @@ 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 { parseRTSPUrl, zoomMapping } from "../../utils/utils";
+import { parseRTSPUrl, reverseZoomMapping, zoomMapping } from "../../utils/utils";
 
 type CameraSettingsProps = {
   initialData: CameraConfig;
   updateCameraConfig: (values: CameraSettingValues) => Promise<void> | void;
   zoomLevel?: number;
-  onZoomLevelChange?: (level: number) => void;
+  onZoomLevelChange?: (level: number | undefined) => void;
   updateCameraConfigError: null | Error;
 };
 
@@ -26,36 +26,31 @@ const CameraSettingFields = ({
   const cameraControllerSide = initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB";
   const { mutation, query } = useCameraZoom({ camera: cameraControllerSide });
   const zoomOptions = [1, 2, 4];
-  // const zoomTextOptions = [
-  //   { label: "near", value: 4 },
-  //   { label: "medium", value: 2 },
-  //   { label: "far", value: 1 },
-  // ];
-
+  const magnification = query?.data?.propMagnification?.value;
+  const apiZoom = reverseZoomMapping(magnification);
   const parsed = parseRTSPUrl(initialData?.propURI?.value);
 
   useEffect(() => {
     if (!query?.data) return;
-    const apiZoom = getZoomLevel(query.data);
     onZoomLevelChange?.(apiZoom);
   }, [query?.data, onZoomLevelChange]);
 
-  const getZoomLevel = (levelstring: string | undefined) => {
-    console.log(levelstring);
-    switch (levelstring) {
-      case "1x":
-        return 1;
+  // const getZoomLevel = (levelstring: string | undefined) => {
+  //   console.log(levelstring);
+  //   switch (levelstring) {
+  //     case "1x":
+  //       return 1;
 
-      case "2x":
-        return 2;
+  //     case "2x":
+  //       return 2;
 
-      case "4x":
-        return 4;
+  //     case "4x":
+  //       return 4;
 
-      default:
-        return 1;
-    }
-  };
+  //     default:
+  //       return 1;
+  //   }
+  // };
 
   const initialValues = useMemo<CameraSettingValues>(
     () => ({
@@ -65,7 +60,7 @@ const CameraSettingFields = ({
       password: parsed?.password ?? "",
       id: initialData?.id,
 
-      zoom: zoomLevel,
+      zoom: apiZoom,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [initialData?.id, initialData?.propURI?.value, zoomLevel]

src/components/CameraSettings/CameraSettings.tsx

@@ -13,7 +13,7 @@ const CameraSettings = ({
   title: string;
   side: string;
   zoomLevel?: number;
-  onZoomLevelChange?: (level: number) => void;
+  onZoomLevelChange?: (level: number | undefined) => void;
 }) => {
   const { data, updateCameraConfig, updateCameraConfigError } = useFetchCameraConfig(side);
 

src/components/SettingForms/Channel1-JSON/ChannelCard.tsx

@@ -9,14 +9,17 @@ import { useEffect, useMemo } from "react";
 type ChannelCardProps = {
   touched: FormikTouched<BearerTypeFieldType & InitialValuesForm>;
   isSubmitting: boolean;
+  isBof2ConstantsLoading: boolean;
+  isDispatcherLoading: boolean;
 };
 
-const ChannelCard = ({ touched, isSubmitting }: ChannelCardProps) => {
+const ChannelCard = ({ touched, isSubmitting, isBof2ConstantsLoading, isDispatcherLoading }: ChannelCardProps) => {
   const { values, setFieldValue } = useFormikContext<BearerTypeFieldType & InitialValuesForm>();
   const { backOfficeQuery } = useCameraBackOfficeOutput(values?.format);
+  const isBackOfficeQueryLoading = backOfficeQuery?.isFetching;
 
   const mapped = useMemo(() => {
-    const d = backOfficeQuery.data;
+    const d = backOfficeQuery?.data;
     return {
       backOfficeURL: d?.propBackofficeURL?.value ?? "",
       username: d?.propUsername?.value ?? "",
@@ -27,7 +30,7 @@ const ChannelCard = ({ touched, isSubmitting }: ChannelCardProps) => {
   }, [backOfficeQuery.data]);
 
   useEffect(() => {
-    if (!backOfficeQuery.isSuccess) return;
+    if (!backOfficeQuery?.isSuccess) return;
     for (const [key, value] of Object.entries(mapped)) {
       setFieldValue(key, value);
     }
@@ -36,12 +39,16 @@ const ChannelCard = ({ touched, isSubmitting }: ChannelCardProps) => {
   return (
     <Card className="p-4">
       <CardHeader title={`Channel (${values?.format})`} />
+      {!isBof2ConstantsLoading && !isDispatcherLoading && !isBackOfficeQueryLoading ? (
         <ChannelFields
           touched={touched}
           isSubmitting={isSubmitting}
           backOfficeData={backOfficeQuery}
           format={values?.format}
         />
+      ) : (
+        <>Loading...</>
+      )}
     </Card>
   );
 };

src/components/SettingForms/SettingForms/SettingForms.tsx

@@ -27,6 +27,9 @@ const SettingForms = () => {
   const GPSFormat = bof2ConstantsQuery?.data?.propGpsFormat?.value;
   const timestampSource = bof2ConstantsQuery?.data?.propTimeZoneType?.value;
 
+  const isDispatcherLoading = dispatcherQuery?.isFetching;
+  const isBof2ConstantsLoading = bof2ConstantsQuery?.isFetching;
+
   const initialValues: BearerTypeFieldType & InitialValuesForm & OptionalBOF2Constants = {
     format: format ?? "JSON",
     enabled: enabled === "true",
@@ -63,9 +66,8 @@ const SettingForms = () => {
   };
 
   const handleSubmit = async (values: BearerTypeFieldType & InitialValuesForm & OptionalBOF2Constants) => {
-    // if (formErrors && Object.entries(formErrors).length > 0) {
-    //   return;
-    // }
+    const validResponse = await validateMutation.mutateAsync(values);
+
     const dispatcherData = {
       format: values.format,
       enabled: values.enabled,
@@ -75,13 +77,9 @@ const SettingForms = () => {
     if (result?.id) {
       qc.invalidateQueries({ queryKey: ["dispatcher"] });
       qc.invalidateQueries({ queryKey: ["backoffice", values.format] });
-      const validResponse = await validateMutation.mutateAsync(values);
+
       if (validResponse?.reason === "OK") {
         await backOfficeMutation.mutateAsync(values);
-      } else {
-        return;
-      }
-    }
 
         if (values.format.toLowerCase() === "bof2") {
           const bof2ConstantsData: OptionalBOF2Constants = {
@@ -92,6 +90,11 @@ const SettingForms = () => {
           };
           await backOfficeDispatcherMutation.mutateAsync(bof2ConstantsData);
         }
+      } else {
+        console.log("error");
+        return;
+      }
+    }
   };
 
   return (
@@ -100,7 +103,12 @@ const SettingForms = () => {
         <Form>
           <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-2 sm:px-4 lg:px-0 w-full">
             <BearerTypeCard />
-            <ChannelCard touched={touched} isSubmitting={isSubmitting} />
+            <ChannelCard
+              touched={touched}
+              isSubmitting={isSubmitting}
+              isDispatcherLoading={isDispatcherLoading}
+              isBof2ConstantsLoading={isBof2ConstantsLoading}
+            />
           </div>
         </Form>
       )}

src/hooks/useCameraZoom.ts

@@ -20,13 +20,13 @@ async function zoomIn(options: ZoomInOptions) {
 
 async function fetchZoomInConfig({ queryKey }: QueryFunctionContext<[string, zoomConfig]>) {
   const [, { camera }] = queryKey;
-  const response = await fetch(`${CAM_BASE}/Ip${camera}-command`, {
+  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Ip${camera}`, {
     signal: AbortSignal.timeout(500),
   });
   if (!response.ok) {
     throw new Error("Cannot get camera zoom settings");
   }
-  return response.text();
+  return response.json();
 }
 //change to string
 export const useCameraZoom = (options: zoomConfig) => {
@@ -46,7 +46,7 @@ export const useCameraZoom = (options: zoomConfig) => {
   });
 
   useEffect(() => {
-    if (query.isError) toast.error(query.error.message, { id: "hardReboot" });
+    if (query.isError) toast.error(query.error.message, { id: "zoom" });
   }, [query?.error?.message, query.isError]);
 
   return { mutation, query };

src/pages/FrontCamera.tsx

@@ -4,7 +4,7 @@ import OverviewVideoContainer from "../components/FrontCameraSettings/OverviewVi
 import { Toaster } from "sonner";
 
 const FrontCamera = () => {
-  const [zoomLevel, setZoomLevel] = useState<number>(1);
+  const [zoomLevel, setZoomLevel] = useState<number | undefined>(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

src/pages/RearCamera.tsx

@@ -4,7 +4,7 @@ import { Toaster } from "sonner";
 import { useState } from "react";
 
 const RearCamera = () => {
-  const [zoomLevel, setZoomLevel] = useState<number>(1);
+  const [zoomLevel, setZoomLevel] = useState<number | undefined>(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">
       <CameraSettings

src/utils/utils.ts

@@ -159,14 +159,27 @@ export function getHotlistName(obj: HotlistMatches | undefined) {
 export const getNPEDCategory = (r?: SightingType | null) =>
   r?.metadata?.npedJSON?.["NPED CATEGORY"] as "A" | "B" | "C" | "D" | undefined;
 
-export const zoomMapping = (zoomLevel: number) => {
+export const zoomMapping = (zoomLevel: number | undefined) => {
   switch (zoomLevel) {
     case 1:
-      return "Far";
+      return "Near";
     case 2:
-      return "Medium";
+      return "Mid";
     case 4:
-      return "Close";
+      return "Far";
+    default:
+      break;
+  }
+};
+
+export const reverseZoomMapping = (magnification: string) => {
+  switch (magnification) {
+    case "near":
+      return 1;
+    case "mid":
+      return 2;
+    case "far":
+      return 4;
     default:
       break;
   }