Merge pull request 'feature/modals' (#3) from feature/modals into develop

Reviewed-on: #3
2025-12-23 14:40:00 +00:00
parent a299960dfb 9394793669
commit 8dac436831
16 changed files with 605 additions and 719 deletions
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "react-konva": "^19.2.1",
+    "react-modal": "^3.16.3",
    "tailwindcss": "^4.1.18"
  },
  "devDependencies": {
@@ -30,6 +31,7 @@
    "@types/node": "^24.10.1",
    "@types/react": "^19.2.5",
    "@types/react-dom": "^19.2.3",
+    "@types/react-modal": "^3.16.3",
    "@vitejs/plugin-react": "^5.1.1",
    "eslint": "^9.39.1",
    "eslint-plugin-react-hooks": "^7.0.1",
--- a/src/app/reducers/cameraSettingsReducer.ts
+++ b/src/app/reducers/cameraSettingsReducer.ts
@@ -2,6 +2,7 @@ import type { CameraSettings, CameraSettingsAction } from "../../utils/types";

 export const initialState: CameraSettings = {
  mode: 0,
+  imageSize: { width: 1280, height: 960 },
 };

 export const cameraSettingsReducer = (state: CameraSettings, action: CameraSettingsAction) => {
@@ -11,6 +12,11 @@ export const cameraSettingsReducer = (state: CameraSettings, action: CameraSetti
        ...state,
        mode: action.payload,
      };
+    case "SET_IMAGE_SIZE":
+      return {
+        ...state,
+        imageSize: action.payload,
+      };
    default:
      return state;
  }
--- a/src/components/ui/ModalComponent.tsx
+++ b/src/components/ui/ModalComponent.tsx
@@ -0,0 +1,38 @@
+import Modal from "react-modal";
+
+type ModalComponentProps = {
+  isModalOpen: boolean;
+  children: React.ReactNode;
+  close: () => void;
+};
+const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) => {
+  return (
+    <Modal
+      isOpen={isModalOpen}
+      onRequestClose={close}
+      className="bg-[#1e2a38] p-6 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[60%] z-100 overflow-y-auto border border-gray-600 max-h-[90%]"
+      overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
+      closeTimeoutMS={200}
+      style={{
+        overlay: {
+          transition: "opacity 200ms ease-in-out",
+        },
+        content: {
+          transition: "all 200ms ease-in-out",
+        },
+      }}
+    >
+      <div className="flex justify-end">
+        <button
+          onClick={close}
+          className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg mb-4 hover:cursor-pointer"
+        >
+          Close
+        </button>
+      </div>
+      {children}
+    </Modal>
+  );
+};
+
+export default ModalComponent;
--- a/src/features/dashboard/Dashboard.tsx
+++ b/src/features/dashboard/Dashboard.tsx
@@ -2,15 +2,19 @@ import PlateRead from "./components/plateRead/PlateRead";
 import SightingStack from "./components/sightingStack/SightingStack";
 import VideoFeed from "./components/videoFeed/VideoFeed";
 import { useSightingList } from "./hooks/useSightingList";
+import { useCameraSettingsContext } from "../../app/context/CameraSettingsContext";

 const Dashboard = () => {
  const { sightingList, isLoading } = useSightingList();
+  const { state: cameraSettings } = useCameraSettingsContext();
+  const size = cameraSettings.imageSize;
+
  const mostRecent = sightingList[0];

  return (
    <div className="grid gird-cols-1 md:grid-cols-2 gap-2 md:gap-5">
      <div>
-        <VideoFeed mostRecentSighting={mostRecent} isLoading={isLoading} />
+        <VideoFeed mostRecentSighting={mostRecent} isLoading={isLoading} size={size} />
        <PlateRead sighting={mostRecent} />
      </div>
      <SightingStack sightings={sightingList} />
--- a/src/features/dashboard/components/plateRead/PlateRead.tsx
+++ b/src/features/dashboard/components/plateRead/PlateRead.tsx
@@ -7,7 +7,6 @@ type PlateReadProps = {
 };

 const PlateRead = ({ sighting }: PlateReadProps) => {
-  console.log(sighting);
  const vrm = sighting?.vrm;
  const region = sighting?.laneID;
  const timestamp = sighting?.timeStamp;
--- a/src/features/dashboard/components/sightingStack/SightingItem.tsx
+++ b/src/features/dashboard/components/sightingStack/SightingItem.tsx
@@ -4,25 +4,34 @@ import NumberPlate from "../platePatch/NumberPlate";

 type SightingItemProps = {
  sighting: SightingType;
+  onOpenModal: () => void;
 };

-const SightingItem = ({ sighting }: SightingItemProps) => {
+const SightingItem = ({ sighting, onOpenModal }: SightingItemProps) => {
  const motion = sighting.motion.toLowerCase() === "away" ? true : false;
-
  const timeStamp = timeAgo(sighting.timeStampMillis);

  return (
-    <div className="flex flex-row items-center border p-2 mb-2 rounded-lg border-gray-500 justify-between hover:bg-[#233241] hover:cursor-pointer">
-      <div>
+    <>
+      <div
+        className="flex flex-row items-center border p-2 mb-2 rounded-lg border-gray-500 justify-between hover:bg-[#233241] hover:cursor-pointer"
+        onClick={onOpenModal}
+      >
        <div>
-          <span className="font-light border bg-blue-400 text-blue-800 px-2 rounded">{timeStamp}</span>
-        </div>
-        <div className="text-xl">
-          <span className="font-semibold text-gray-200">{sighting.vrm}</span>
+          <div>
+            <span className="font-light border bg-blue-400 text-blue-800 px-2 rounded">{timeStamp}</span>
+          </div>
+          <div className="text-xl">
+            <span className="font-semibold text-gray-200">{sighting.vrm}</span>
+          </div>
        </div>
+        {window.innerWidth > 768 ? (
+          <NumberPlate vrm={sighting.vrm} motion={motion} size="md" />
+        ) : (
+          <NumberPlate vrm={sighting.vrm} motion={motion} size="sm" />
+        )}
      </div>
-      <NumberPlate vrm={sighting.vrm} motion={motion} size="md" />
-    </div>
+    </>
  );
 };

--- a/src/features/dashboard/components/sightingStack/SightingStack.tsx
+++ b/src/features/dashboard/components/sightingStack/SightingStack.tsx
@@ -1,21 +1,38 @@
+import { useState } from "react";
 import CardHeader from "../../../../components/CardHeader";
 import Card from "../../../../components/ui/Card";
 import type { SightingType } from "../../../../utils/types";
 import SightingItem from "./SightingItem";
+import SightingItemModal from "./sightingItemModal/SightingItemModal";

 type SightingStackProps = {
  sightings: SightingType[];
 };
 const SightingStack = ({ sightings }: SightingStackProps) => {
+  const [isSightingModalOpen, setIsSightingModalOpen] = useState(false);
+  const [currentSighting, setCurrentSighting] = useState<SightingType | null>(null);
+  const handleOpenModal = (sighting: SightingType | null) => {
+    if (!sighting) return;
+    setCurrentSighting(sighting);
+    setIsSightingModalOpen(true);
+  };
+
  return (
-    <Card className="p-4 w-full h-full ">
-      <CardHeader title="Live Sightings" />
-      <div className="md:h-[65%]">
-        {sightings.map((sighting) => (
-          <SightingItem key={sighting.ref} sighting={sighting} />
-        ))}
-      </div>
-    </Card>
+    <>
+      <Card className="p-4 w-full h-full">
+        <CardHeader title="Live Sightings" />
+        <div className="md:h-[65%]">
+          {sightings.map((sighting) => (
+            <SightingItem key={sighting.ref} sighting={sighting} onOpenModal={() => handleOpenModal(sighting)} />
+          ))}
+        </div>
+      </Card>
+      <SightingItemModal
+        isOpen={isSightingModalOpen}
+        close={() => setIsSightingModalOpen(false)}
+        sighting={currentSighting}
+      />
+    </>
  );
 };

--- a/src/features/dashboard/components/sightingStack/sightingItemModal/SightingItemModal.tsx
+++ b/src/features/dashboard/components/sightingStack/sightingItemModal/SightingItemModal.tsx
@@ -0,0 +1,18 @@
+import ModalComponent from "../../../../../components/ui/ModalComponent";
+import type { SightingType } from "../../../../../utils/types";
+import SightingModalContent from "./SightingModalContent";
+
+type SightingItemModalProps = {
+  isOpen: boolean;
+  close: () => void;
+  sighting: SightingType | null;
+};
+const SightingItemModal = ({ isOpen, close, sighting }: SightingItemModalProps) => {
+  return (
+    <ModalComponent isModalOpen={isOpen} close={close}>
+      <SightingModalContent sighting={sighting} />
+    </ModalComponent>
+  );
+};
+
+export default SightingItemModal;
--- a/src/features/dashboard/components/sightingStack/sightingItemModal/SightingModalContent.tsx
+++ b/src/features/dashboard/components/sightingStack/sightingItemModal/SightingModalContent.tsx
@@ -0,0 +1,61 @@
+import { useCameraSettingsContext } from "../../../../../app/context/CameraSettingsContext";
+import type { SightingType } from "../../../../../utils/types";
+import { timeAgo } from "../../../../../utils/utils";
+import NumberPlate from "../../platePatch/NumberPlate";
+import VideoFeed from "../../videoFeed/VideoFeed";
+
+type SightingModalContentProps = {
+  sighting: SightingType | null;
+};
+
+const SightingModalContent = ({ sighting }: SightingModalContentProps) => {
+  const { state: cameraSettings } = useCameraSettingsContext();
+  const size = cameraSettings.imageSize;
+  const modalImageSize = { width: size.width / 1.5, height: size.height / 1.5 };
+  const timeStamp = timeAgo(sighting?.timeStampMillis ?? null);
+
+  return (
+    <div>
+      {sighting ? (
+        <>
+          <div className="flex flex-row items-center justify-between mb-6 border-b border-gray-600">
+            <h2 className="text-2xl font-bold">Sighting Details</h2>
+            <NumberPlate vrm={sighting.vrm} motion={sighting.motion.toLowerCase() === "away"} size="md" />
+          </div>
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <div className="lg:col-span-2">
+              <VideoFeed mostRecentSighting={sighting} isLoading={false} size={modalImageSize} isModal={true} />
+            </div>
+
+            <div className="space-y-4 border p-4 rounded-lg border-gray-600">
+              <div>
+                <p className="text-md text-gray-300">VRM</p>
+                <p className="text-lg font-semibold">{sighting.vrm}</p>
+              </div>
+              <div>
+                <p className="text-md text-gray-300">Seen</p>
+                <p className="text-md">{timeStamp}</p>
+              </div>
+              <div>
+                <p className="text-md text-gray-300">Timestamp</p>
+                <p className="text-md">{new Date(sighting.timeStampMillis).toLocaleString()}</p>
+              </div>
+              <div>
+                <p className="text-md text-gray-300">Motion</p>
+                <p className="text-lg font-semibold">{sighting.motion}</p>
+              </div>
+              <div>
+                <p className="text-md text-gray-300">Radar Speed</p>
+                <p className="text-lg font-semibold">{sighting.radarSpeed} mph</p>
+              </div>
+            </div>
+          </div>
+        </>
+      ) : (
+        <p className="text-gray-300">No sighting data available.</p>
+      )}
+    </div>
+  );
+};
+
+export default SightingModalContent;
--- a/src/features/dashboard/components/videoFeed/VideoFeed.tsx
+++ b/src/features/dashboard/components/videoFeed/VideoFeed.tsx
@@ -1,4 +1,4 @@
-import { Stage, Layer, Image, Rect } from "react-konva";
+import { Stage, Layer, Image, Rect, Text } from "react-konva";
 import type { SightingType } from "../../../../utils/types";
 import { useCreateVideoSnapshot } from "../../hooks/useCreateVideoSnapshot";
 import { useEffect, useState } from "react";
@@ -7,26 +7,36 @@ import { useCameraSettingsContext } from "../../../../app/context/CameraSettings
 type VideoFeedProps = {
  mostRecentSighting: SightingType;
  isLoading: boolean;
+  size: { width: number; height: number };
+
+  modeSetting?: number;
+  isModal?: boolean;
 };

-const VideoFeed = ({ mostRecentSighting, isLoading }: VideoFeedProps) => {
+const VideoFeed = ({ mostRecentSighting, isLoading, size, modeSetting, isModal = false }: VideoFeedProps) => {
  const { state: cameraSettings, dispatch } = useCameraSettingsContext();
-
-  const mode = cameraSettings.mode;
-  const [size, setSize] = useState<{ width: number; height: number }>({ width: 1280, height: 960 });
-
+  const contextMode = cameraSettings.mode;
+  const [localMode, setLocalMode] = useState(0);
+  const mode = isModal ? localMode : contextMode;
  const { image, plateRect, plateTrack } = useCreateVideoSnapshot(mostRecentSighting);

  const handleModeChange = (newMode: number) => {
-    if (newMode > 2) dispatch({ type: "SET_MODE", payload: 0 });
-    else dispatch({ type: "SET_MODE", payload: newMode });
+    if (modeSetting) return;
+
+    const nextMode = newMode > 2 ? 0 : newMode;
+
+    if (isModal) {
+      setLocalMode(nextMode);
+    } else {
+      dispatch({ type: "SET_MODE", payload: nextMode });
+    }
  };

  useEffect(() => {
    const updateSize = () => {
      const width = window.innerWidth * 0.48;
      const height = (width * 2) / 3;
-      setSize({ width, height });
+      dispatch({ type: "SET_IMAGE_SIZE", payload: { width, height } });
    };
    updateSize();
    window.addEventListener("resize", updateSize);
@@ -39,20 +49,22 @@ const VideoFeed = ({ mostRecentSighting, isLoading }: VideoFeedProps) => {
    <div className="w-[70%] mt-[2%]">
      <Stage width={size.width} height={size.height} onClick={() => handleModeChange(mode + 1)}>
        <Layer>
-          <Image
-            image={image}
-            height={size.height}
-            width={size.width}
-            onMouseEnter={(e) => {
-              const container = e.target.getStage()?.container();
-              if (container) container.style.cursor = "pointer";
-            }}
-            onMouseLeave={(e) => {
-              const container = e.target.getStage()?.container();
-              if (container) container.style.cursor = "default";
-            }}
-            cornerRadius={10}
-          />
+          {image && (
+            <Image
+              image={image}
+              height={size.height}
+              width={size.width}
+              onMouseEnter={(e) => {
+                const container = e.target.getStage()?.container();
+                if (container) container.style.cursor = "pointer";
+              }}
+              onMouseLeave={(e) => {
+                const container = e.target.getStage()?.container();
+                if (container) container.style.cursor = "default";
+              }}
+              cornerRadius={10}
+            />
+          )}
        </Layer>
        {plateRect && mode === 1 && (
          <Layer>
@@ -84,6 +96,23 @@ const VideoFeed = ({ mostRecentSighting, isLoading }: VideoFeedProps) => {
            ))}
          </Layer>
        )}
+        <Layer>
+          <Rect
+            x={5}
+            y={0.955 * size.height}
+            width={size.width * 0.35}
+            height={30}
+            fill="rgba(255, 255, 255, 0.45)"
+            cornerRadius={5}
+          />
+          <Text
+            text={`Overlay Mode: ${mode === 0 ? "None" : mode === 1 ? "Plate Highlight" : "Plate Track"}`}
+            x={10}
+            y={0.96 * size.height}
+            fontSize={16}
+            fill="#000000"
+          />
+        </Layer>
      </Stage>
    </div>
  );
--- a/src/features/dashboard/hooks/useCreateVideoSnapshot.ts
+++ b/src/features/dashboard/hooks/useCreateVideoSnapshot.ts
@@ -1,8 +1,18 @@
 import { useRef } from "react";
 import type { SightingType } from "../../../utils/types";

-export const useCreateVideoSnapshot = (mostRecentSighting: SightingType) => {
+export const useCreateVideoSnapshot = (mostRecentSighting: SightingType | null) => {
  const latestBitMapRef = useRef<ImageBitmap | null>(null);
+  if (!mostRecentSighting) {
+    return {
+      snapshotUrl: null,
+      latestBitMapRef: null,
+      image: null,
+      plateRect: null,
+      plateTrack: null,
+    };
+  }
+
  const snapshotUrl = mostRecentSighting?.overviewUrl;

  const image = new Image();
--- a/src/features/dashboard/hooks/useVideoFeed.ts
+++ b/src/features/dashboard/hooks/useVideoFeed.ts
@@ -16,7 +16,7 @@ export const useVideoFeed = () => {
  const videoFeedQuery = useQuery({
    queryKey: ["videoFeed"],
    queryFn: () => fetchVideoFeed(currentRefId.current),
-    refetchInterval: 1000,
+    refetchInterval: 400,
    refetchOnWindowFocus: false,
    retry: false,
    staleTime: 0,
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,12 +4,13 @@ import "./index.css";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { routeTree } from "./routeTree.gen.ts";
 import AppProviders from "./app/providers/AppProviders.tsx";
+import Modal from "react-modal";

 const router = createRouter({
  routeTree,
  basepath: "/aiq-lite",
 });
-
+Modal.setAppElement("#root");
 declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -54,8 +54,14 @@ export type NpedJSON = {

 export type CameraSettings = {
  mode: number;
+  imageSize: { width: number; height: number };
 };
-export type CameraSettingsAction = {
-  type: "SET_MODE";
-  payload: number;
-};
+export type CameraSettingsAction =
+  | {
+      type: "SET_MODE";
+      payload: number;
+    }
+  | {
+      type: "SET_IMAGE_SIZE";
+      payload: { width: number; height: number };
+    };
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -5,7 +5,8 @@ export const formatNumberPlate = (plate: string) => {
  return formattedPlate;
 };

-export const timeAgo = (timestampmili: number) => {
+export const timeAgo = (timestampmili: number | null) => {
+  if (timestampmili === null) return "unknown";
  const diffMs = Date.now() - new Date(timestampmili).getTime();
  const diffMins = Math.floor(diffMs / 60000);
  if (diffMins < 60) {
--- a/yarn.lock
+++ b/yarn.lock