diff --git a/src/components/ui/ModalComponent.tsx b/src/components/ui/ModalComponent.tsx index bcad2ba..f392570 100644 --- a/src/components/ui/ModalComponent.tsx +++ b/src/components/ui/ModalComponent.tsx @@ -10,7 +10,7 @@ const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) = { return ( <> - +
{sightings.map((sighting) => ( diff --git a/src/features/dashboard/components/sightingStack/sightingItemModal/SightingModalContent.tsx b/src/features/dashboard/components/sightingStack/sightingItemModal/SightingModalContent.tsx index 41d868a..a33013c 100644 --- a/src/features/dashboard/components/sightingStack/sightingItemModal/SightingModalContent.tsx +++ b/src/features/dashboard/components/sightingStack/sightingItemModal/SightingModalContent.tsx @@ -1,5 +1,6 @@ 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"; @@ -11,11 +12,13 @@ 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 (
{sighting ? ( <> -
+

Sighting Details

@@ -24,24 +27,32 @@ const SightingModalContent = ({ sighting }: SightingModalContentProps) => {
-
+
-

VRM

+

VRM

{sighting.vrm}

-

Timestamp

-

{new Date(sighting.timeStampMillis).toLocaleString()}

+

Seen

+

{timeStamp}

-

Motion

+

Timestamp

+

{new Date(sighting.timeStampMillis).toLocaleString()}

+
+
+

Motion

{sighting.motion}

+
+

Radar Speed

+

{sighting.radarSpeed} mph

+
) : ( -

No sighting data available.

+

No sighting data available.

)}
); diff --git a/src/features/dashboard/components/videoFeed/VideoFeed.tsx b/src/features/dashboard/components/videoFeed/VideoFeed.tsx index d3e275a..2f776ea 100644 --- 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"; @@ -96,6 +96,23 @@ const VideoFeed = ({ mostRecentSighting, isLoading, size, modeSetting, isModal = ))} )} + + + +
); diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 2c9a3f3..5485171 100644 --- 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) {