updated cam base

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"
         />

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),

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" />