merged and resolved conflicts

2025-10-02 22:59:07 +01:00
parent 054b0bf4ea 104fcf2455
commit 576afbb282
16 changed files with 181 additions and 202 deletions
--- a/.env
+++ b/.env
@@ -6,16 +6,4 @@ VITE_OUTSIDE_BASEURL=http://100.82.205.44
 VITE_FOLKESTONE_URL=http://100.116.253.81/mergedHistory/sightingSummary?mostRecentRef=
 VITE_MAV_URL=http://192.168.75.11/SightingListFront/sightingSummary?mostRecentRef=

-VITE_AGX_BOX_FRONT_URL=http://192.168.0.90:8080/SightingListFront/sightingSummary?mostRecentRef=
-VITE_AGX_BOX_REAR_URL=http://192.168.0.90:8080/SightingListRear/sightingSummary?mostRecentRef=
-
-VITE_AGX=http://100.72.72.70:8080/SightingListRear/sightingSummary?mostRecentRef=
-VITE_AGX_FRONT=http://100.72.72.70:8080/SightingListFront/sightingSummary?mostRecentRef=
-
-VITE_AGX_FRONT_BASE=http://100.72.72.70:8080/
-
-VITE_LOCAL=http://10.42.0.1:8080/SightingListRear/sightingSummary?mostRecentRef=
-VITE_LOCAL_FRONT=http://10.42.0.1:8080/SightingListFront/sightingSummary?mostRecentRef=
-
-VITE_LOCAL_BASE=http://10.42.0.1:8080/
-VITE_LOCAL_BASE_NEW=http://100.113.222.39
+VITE_AGX_BOX_URL=http://100.118.196.113:8080
--- a/src/components/CameraOverview/SnapshotContainer.tsx
+++ b/src/components/CameraOverview/SnapshotContainer.tsx
@@ -1,12 +1,14 @@
 import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot";
-import type { ZoomLevel } from "../../types/types";
+import type { ZoomInOptions } from "../../types/types";
 import NavigationArrow from "../UI/NavigationArrow";
+import { useCameraZoom } from "../../hooks/useCameraZoom";
+import { useEffect } from "react";

 type SnapshotContainerProps = {
  side: string;
  settingsPage?: boolean;
-  zoomLevel?: ZoomLevel;
-  onZoomLevelChange?: (level: ZoomLevel) => void;
+  zoomLevel?: number;
+  onZoomLevelChange?: (level: number) => void;
 };

 export const SnapshotContainer = ({
@@ -15,38 +17,34 @@ export const SnapshotContainer = ({
  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>;
+  const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side);
+  const cameraControllerSide =
+    side === "CameraA" ? "CameraControllerA" : "CameraControllerB";
+  const { mutation } = useCameraZoom({ camera: cameraControllerSide });

-  const handleZoomClick = (event: React.MouseEvent<HTMLCanvasElement>) => {
-    const bounds = canvasRef.current?.getBoundingClientRect();
-    if (!bounds) return;
-    const left = bounds.left;
-    const top = bounds.top;
-    const x = event.pageX;
-    const y = event.pageY;
-    const cw = canvasRef.current?.clientWidth;
-    const ch = canvasRef.current?.clientHeight;
-    if (!cw || !ch) return;
-    const px = x / cw;
-    const py = y / ch;
-
-    const baseLevel = zoomLevel?.level ?? 1;
+  const handleZoomClick = () => {
+    const baseLevel = zoomLevel ?? 1;
    const newLevel = baseLevel >= 8 ? 1 : baseLevel * 2;

-    if (onZoomLevelChange)
-      onZoomLevelChange({
-        left,
-        top,
-        x,
-        y,
-        px,
-        py,
-        level: newLevel,
-      });
+    if (onZoomLevelChange) onZoomLevelChange(newLevel);
+
+    if (!zoomLevel) return;
  };

+  useEffect(() => {
+    if (zoomLevel) {
+      const zoomInOptions: ZoomInOptions = {
+        camera: cameraControllerSide,
+        multiplier: zoomLevel,
+      };
+      mutation.mutate(zoomInOptions);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [zoomLevel]);
+
+  if (isError) return <p className="h-100">An error occurred</p>;
+  if (isPending) return <p className="h-100">Loading...</p>;
+
  return (
    <div className="flex flex-col md:flex-row">
      <NavigationArrow side={side} settingsPage={settingsPage} />
--- a/src/components/CameraSettings/CameraSettingFields.tsx
+++ b/src/components/CameraSettings/CameraSettingFields.tsx
@@ -3,18 +3,19 @@ import type {
  CameraConfig,
  CameraSettingErrorValues,
  CameraSettingValues,
-  ZoomLevel,
+  ZoomInOptions,
 } from "../../types/types";
-import { useMemo, useState } from "react";
+import { useEffect, 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";

 type CameraSettingsProps = {
  initialData: CameraConfig;
  updateCameraConfig: (values: CameraSettingValues) => Promise<void> | void;
-  zoomLevel?: ZoomLevel;
-  onZoomLevelChange?: (level: ZoomLevel) => void;
+  zoomLevel?: number;
+  onZoomLevelChange?: (level: number) => void;
 };

 const CameraSettingFields = ({
@@ -24,7 +25,38 @@ const CameraSettingFields = ({
  onZoomLevelChange,
 }: CameraSettingsProps) => {
  const [showPwd, setShowPwd] = useState(false);
+  const cameraControllerSide =
+    initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB";
+  const { mutation, query } = useCameraZoom({ camera: cameraControllerSide });
+  const zoomOptions = [1, 2, 4, 8];

+  useEffect(() => {
+    if (!query.data) return;
+    const apiZoom = getZoomLevel(query.data);
+    onZoomLevelChange?.(apiZoom);
+  }, [query.data, onZoomLevelChange]);
+
+  const getZoomLevel = (levelstring: string | undefined) => {
+    switch (levelstring) {
+      case "1x":
+        return 1;
+        break;
+      case "2x":
+        return 2;
+        break;
+      case "4x":
+        return 4;
+        break;
+      case "8x":
+        return 8;
+      default:
+        return 1;
+    }
+  };
+  const level = getZoomLevel(query.data);
+
+  console.log("level from get", level);
+  console.log("zoomLevel state", zoomLevel);
  const initialValues = useMemo<CameraSettingValues>(
    () => ({
      friendlyName: initialData?.id ?? "",
@@ -32,18 +64,16 @@ const CameraSettingFields = ({
      userName: "",
      password: "",
      id: initialData?.id,
-      zoom: zoomLevel?.level ? zoomLevel.level : 1,
+
+      zoom: zoomLevel,
    }),
-    [initialData?.id, initialData?.propURI?.value, zoomLevel?.level]
+    [initialData?.id, initialData?.propURI?.value, zoomLevel]
  );

  const validateValues = (values: CameraSettingValues) => {
    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;
  };

@@ -51,20 +81,26 @@ const CameraSettingFields = ({
    updateCameraConfig(values);
  };

-  const handleRadioButtonChange = (levelNumber: number) => {
+  const handleRadioButtonChange = async (levelNumber: number) => {
    if (!onZoomLevelChange || !zoomLevel) return;
-    onZoomLevelChange({
-      ...zoomLevel,
-      level: zoomLevel?.level !== levelNumber ? levelNumber : zoomLevel?.level,
-    });
-  };
+    onZoomLevelChange(levelNumber);

+    const zoomInOptions: ZoomInOptions = {
+      camera: cameraControllerSide,
+      multiplier: levelNumber,
+    };
+
+    mutation.mutate(zoomInOptions);
+  };
+  const selectedZoom = zoomLevel ?? 1;
+  console.log(selectedZoom);
  return (
    <Formik
      initialValues={initialValues}
      onSubmit={handleSubmit}
      validate={validateValues}
      validateOnChange={false}
+      enableReinitialize
    >
      {({ errors, touched }) => (
        <Form className="flex flex-col space-y-6 p-2">
@@ -143,78 +179,28 @@ const CameraSettingFields = ({
            </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 className="mx-auto flex gap-10 items-center">
+                {zoomOptions.map((zoom) => (
+                  <div key={zoom}>
+                    <Field
+                      type="radio"
+                      name="zoom"
+                      value={zoom.toString()}
+                      checked={selectedZoom === zoom}
+                      className="hidden peer"
+                      id={`zoom${zoom}`}
+                      onChange={() => handleRadioButtonChange(zoom)}
+                    />
+                    <label
+                      htmlFor={`zoom${zoom}`}
+                      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"
+                    >
+                      x{zoom}
+                    </label>
+                  </div>
+                ))}
              </div>
            </div>
            <button
--- a/src/components/CameraSettings/CameraSettings.tsx
+++ b/src/components/CameraSettings/CameraSettings.tsx
@@ -1,5 +1,5 @@
 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";
@@ -13,8 +13,8 @@ const CameraSettings = ({
 }: {
  title: string;
  side: string;
-  zoomLevel?: ZoomLevel;
-  onZoomLevelChange?: (level: ZoomLevel) => void;
+  zoomLevel?: number;
+  onZoomLevelChange?: (level: number) => void;
 }) => {
  const { data, isError, isPending, updateCameraConfig } =
    useFetchCameraConfig(side);
--- a/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx
+++ b/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx
@@ -2,11 +2,10 @@ import clsx from "clsx";
 import Card from "../UI/Card";
 import { useSwipeable } from "react-swipeable";
 import { useNavigate } from "react-router";
-import { useOverviewVideo } from "../../hooks/useOverviewVideo";
+
 import SightingOverview from "../SightingOverview/SightingOverview";

 const FrontCameraOverviewCard = () => {
-  useOverviewVideo();
  const navigate = useNavigate();
  const handlers = useSwipeable({
    onSwipedRight: () => navigate("/camera-settings"),
--- a/src/components/FrontCameraSettings/OverviewVideoContainer.tsx
+++ b/src/components/FrontCameraSettings/OverviewVideoContainer.tsx
@@ -3,7 +3,6 @@ import { SnapshotContainer } from "../CameraOverview/SnapshotContainer";
 import Card from "../UI/Card";
 import { useNavigate, useLocation } from "react-router";
 import { useSwipeable } from "react-swipeable";
-import type { ZoomLevel } from "../../types/types";

 const OverviewVideoContainer = ({
  side,
@@ -14,8 +13,8 @@ const OverviewVideoContainer = ({
  title: string;
  side: string;
  settingsPage?: boolean;
-  zoomLevel?: ZoomLevel;
-  onZoomLevelChange?: (level: ZoomLevel) => void;
+  zoomLevel?: number;
+  onZoomLevelChange?: (level: number) => void;
 }) => {
  const navigate = useNavigate();
  const location = useLocation();
--- a/src/hooks/useCameraBlackboard.ts
+++ b/src/hooks/useCameraBlackboard.ts
@@ -2,7 +2,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { CAM_BASE } from "../utils/config";
 import type { CameraBlackBoardOptions } from "../types/types";

-const getBlackboardData = async () => {
+const getAllBlackboardData = async () => {
  const response = await fetch(`${CAM_BASE}/api/blackboard`);
  if (!response.ok) {
    throw new Error("Failed to fetch blackboard data");
@@ -25,7 +25,7 @@ const viewBlackboardData = async (options: CameraBlackBoardOptions) => {
 export const useCameraBlackboard = () => {
  const query = useQuery({
    queryKey: ["cameraBlackboard"],
-    queryFn: getBlackboardData,
+    queryFn: getAllBlackboardData,
  });

  const mutation = useMutation({
--- a/src/hooks/useCameraConfig.ts
+++ b/src/hooks/useCameraConfig.ts
@@ -19,10 +19,10 @@ const updateCamerasideConfig = async (data: {
  const updateUrl = `${base_url}/update-config?id=${data.id}`;

  const updateConfigPayload = {
-    id: data.id,
+    id: data.friendlyName,
    fields: [
      {
-        property: "propLEDDriverControlURI",
+        property: "id",
        value: data.friendlyName,
      },
    ],
--- a/src/hooks/useCameraZoom.ts
+++ b/src/hooks/useCameraZoom.ts
@@ -0,0 +1,44 @@
+import {
+  useMutation,
+  useQuery,
+  type QueryFunctionContext,
+} from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+import type { zoomConfig, ZoomInOptions } from "../types/types";
+
+async function zoomIn(options: ZoomInOptions) {
+  const response = await fetch(
+    `${CAM_BASE}/Ip${options.camera}-command?magnification=${options.multiplier}x`
+  );
+  if (!response.ok) {
+    throw new Error("Cannot reach camera zoom endpoint");
+  }
+  const data = await response.json();
+  console.log(data);
+  return;
+}
+
+async function fetchZoomInConfig({
+  queryKey,
+}: QueryFunctionContext<[string, zoomConfig]>) {
+  const [, { camera }] = queryKey;
+  console.log(camera);
+  const response = await fetch(`${CAM_BASE}/Ip${camera}-inspect`);
+  if (!response.ok) {
+    throw new Error("Cannot get camera zoom settings");
+  }
+  return response.text();
+}
+//change to string
+export const useCameraZoom = (options: zoomConfig) => {
+  const mutation = useMutation({
+    mutationKey: ["zoomIn"],
+    mutationFn: (options: ZoomInOptions) => zoomIn(options),
+  });
+
+  const query = useQuery({
+    queryKey: ["fetchZoomInConfig", options],
+    queryFn: fetchZoomInConfig,
+  });
+  return { mutation, query };
+};
--- a/src/hooks/useGetOverviewSnapshot.ts
+++ b/src/hooks/useGetOverviewSnapshot.ts
@@ -4,8 +4,8 @@ import { CAM_BASE } from "../utils/config";

 const apiUrl = CAM_BASE;

-async function fetchSnapshot() {
-  const response = await fetch(`${apiUrl}/CameraRear-preview`);
+async function fetchSnapshot(cameraSide: string) {
+  const response = await fetch(`${apiUrl}/${cameraSide}-preview`);
  if (!response.ok) {
    throw new Error("Cannot reach endpoint");
  }
@@ -13,7 +13,7 @@ async function fetchSnapshot() {
  return await response.blob();
 }

-export function useGetOverviewSnapshot() {
+export function useGetOverviewSnapshot(side: string) {
  const latestUrlRef = useRef<string | null>(null);
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const imageRef = useRef<HTMLImageElement | null>(null);
@@ -38,7 +38,7 @@ export function useGetOverviewSnapshot() {
    isPending,
  } = useQuery({
    queryKey: ["overviewSnapshot"],
-    queryFn: () => fetchSnapshot(),
+    queryFn: () => fetchSnapshot(side),
    refetchOnWindowFocus: false,
    refetchInterval: 250,
  });
--- a/src/hooks/useOverviewVideo.ts
+++ b/src/hooks/useOverviewVideo.ts
@@ -1,36 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { useRef } from "react";
-import { CAM_BASE } from "../utils/config";
-
-async function fetchOverviewImage(cameraSide: string) {
-  const response = await fetch(`${CAM_BASE}/${cameraSide}-preview`);
-  if (!response.ok) throw new Error("could not fetch overview image");
-  return response.blob();
-}
-
-export function useOverviewVideo() {
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  const { isPending, isError, data } = useQuery({
-    queryKey: ["overviewVideo"],
-    queryFn: () => fetchOverviewImage("CameraFront"),
-    // refetchInterval: () =>
-    //   typeof document !== "undefined" && document.visibilityState === "hidden"
-    //     ? SLOW_MS
-    //     : FAST_MS,
-    // refetchIntervalInBackground: false,
-  });
-
-  if (isPending) return;
-
-  if (isError) return;
-
-  const img = new Image();
-  const imgUrl = URL.createObjectURL(data);
-  img.src = imgUrl;
-
-  const canvas = canvasRef.current;
-  if (!canvas) return;
-  const ctx = canvas.getContext("2d");
-
-  ctx?.drawImage(img, 0, 0);
-}
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -4,7 +4,9 @@ import { SightingFeedProvider } from "../context/providers/SightingFeedProvider"
 import { CAM_BASE } from "../utils/config";

 const Dashboard = () => {
-  const base_url = `${CAM_BASE}/SightingListFront/sightingSummary?mostRecentRef=`;
+  const mode = import.meta.env.MODE;
+  const base_url = `${CAM_BASE}/SightingList/sightingSummary?mostRecentRef=`;
+  console.log(mode);
  return (
    <SightingFeedProvider url={base_url}>
      <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">
--- a/src/pages/FrontCamera.tsx
+++ b/src/pages/FrontCamera.tsx
@@ -2,30 +2,21 @@ 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,
-  });
+  const [zoomLevel, setZoomLevel] = useState<number>(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="CameraFront"
+        title={"Camera A"}
+        side="CameraA"
        settingsPage={true}
        zoomLevel={zoomLevel}
        onZoomLevelChange={setZoomLevel}
      />
      <CameraSettings
-        title="Front Camera Settings"
-        side="CameraFront"
+        title="Camera A Settings"
+        side="CameraA"
        zoomLevel={zoomLevel}
        onZoomLevelChange={setZoomLevel}
      />
--- a/src/pages/RearCamera.tsx
+++ b/src/pages/RearCamera.tsx
@@ -17,14 +17,14 @@ const RearCamera = () => {
  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
-        title="Rear Camera Settings"
-        side={"CameraRear"}
+        title="Camera B Settings"
+        side={"CameraB"}
        zoomLevel={zoomLevel}
        onZoomLevelChange={setZoomLevel}
      />
      <OverviewVideoContainer
-        title={"Rear Camera"}
-        side={"CameraRear"}
+        title={"Camera B"}
+        side={"CameraB"}
        settingsPage={true}
        zoomLevel={zoomLevel}
        onZoomLevelChange={setZoomLevel}
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -280,3 +280,11 @@ export type WifiConfig = {
    datatype: string;
  };
 };
+export type ZoomInOptions = {
+  camera: string;
+  multiplier: number;
+};
+
+export type zoomConfig = {
+  camera: string;
+};
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -1,4 +1,4 @@
-const rawCamBase = import.meta.env.VITE_CAM_BASE;
+const rawCamBase = import.meta.env.VITE_AGX_BOX_URL;
 export const CAM_BASE =
  rawCamBase && rawCamBase.trim().length > 0
    ? rawCamBase