From 220ec2d376b806c3232c3987d38082aba7a07485 Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Mon, 29 Sep 2025 08:47:13 +0100
Subject: [PATCH] updated cam base

---
 .../CameraOverview/SnapshotContainer.tsx      | 23 +++++++++++++++++++
 src/hooks/useCameraBlackboard.ts              |  6 ++---
 src/pages/Dashboard.tsx                       |  8 +++----
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/components/CameraOverview/SnapshotContainer.tsx b/src/components/CameraOverview/SnapshotContainer.tsx
index 51a5821..1ad72e2 100644
--- a/src/components/CameraOverview/SnapshotContainer.tsx
+++ b/src/components/CameraOverview/SnapshotContainer.tsx
@@ -15,11 +15,34 @@ export const SnapshotContainer = ({
   if (isError) return <>An error occurred</>;
   if (isPending) return <>Loading...</>;
 
+  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;
+    console.log({
+      left,
+      top,
+      x,
+      y,
+      px,
+      py,
+    });
+  };
+
   return (
     <div className="flex flex-col md:flex-row">
       <NavigationArrow side={side} settingsPage={settingsPage} />
       <div className="w-full">
         <canvas
+          onClick={handleZoomClick}
           ref={canvasRef}
           className="absolute inset-0 object-contain min-h-[100%] z-20"
         />
diff --git a/src/hooks/useCameraBlackboard.ts b/src/hooks/useCameraBlackboard.ts
index d8cd31b..187b084 100644
--- a/src/hooks/useCameraBlackboard.ts
+++ b/src/hooks/useCameraBlackboard.ts
@@ -1,9 +1,9 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { CAM_BASE } from "../utils/config";
+import { OUTSIDE_CAM_BASE } from "../utils/config";
 import type { CameraBlackBoardOptions } from "../types/types";
 
 const getBlackboardData = async () => {
-  const response = await fetch(`${CAM_BASE}/api/blackboard`);
+  const response = await fetch(`${OUTSIDE_CAM_BASE}/api/blackboard`);
   if (!response.ok) {
     throw new Error("Failed to fetch blackboard data");
   }
@@ -11,7 +11,7 @@ const getBlackboardData = async () => {
 };
 
 const viewBlackboardData = async (options: CameraBlackBoardOptions) => {
-  const response = await fetch(`${CAM_BASE}/api/blackboard`, {
+  const response = await fetch(`${OUTSIDE_CAM_BASE}/api/blackboard`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(options),
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index cb81f39..7dad655 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -1,13 +1,13 @@
 import FrontCameraOverviewCard from "../components/FrontCameraOverview/FrontCameraOverviewCard";
 import SightingHistoryWidget from "../components/SightingsWidget/SightingWidget";
 import { SightingFeedProvider } from "../context/providers/SightingFeedProvider";
-// import { OUTSIDE_CAM_BASE } from "../utils/config";
+import { OUTSIDE_CAM_BASE } from "../utils/config";
 
 const Dashboard = () => {
-  // const dev_OUTSIDE_URL = `${OUTSIDE_CAM_BASE}/SightingListFront/sightingSummary?mostRecentRef=`;
-  const folkestone_OUTSIDE_URL = `http://100.116.253.81/mergedHistory/sightingSummary?mostRecentRef=`;
+  const dev_OUTSIDE_URL = `${OUTSIDE_CAM_BASE}/SightingListFront/sightingSummary?mostRecentRef=`;
+  // const folkestone_OUTSIDE_URL = `http://100.116.253.81/mergedHistory/sightingSummary?mostRecentRef=`;
   return (
-    <SightingFeedProvider url={folkestone_OUTSIDE_URL} side="Front">
+    <SightingFeedProvider url={dev_OUTSIDE_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">
         <FrontCameraOverviewCard />
         <SightingHistoryWidget title="Sightings" />