diff --git a/src/features/dashboard/Dashboard.tsx b/src/features/dashboard/Dashboard.tsx
index f244267..2b34df1 100644
--- a/src/features/dashboard/Dashboard.tsx
+++ b/src/features/dashboard/Dashboard.tsx
@@ -1,3 +1,4 @@
+import PlateRead from "./components/plateRead/PlateRead";
import SightingStack from "./components/sightingStack/SightingStack";
import VideoFeed from "./components/videoFeed/VideoFeed";
import { useSightingList } from "./hooks/useSightingList";
@@ -7,8 +8,11 @@ const Dashboard = () => {
const mostRecent = sightingList[0];
return (
-
-
+
);
diff --git a/src/features/dashboard/components/plateRead/PlateRead.tsx b/src/features/dashboard/components/plateRead/PlateRead.tsx
new file mode 100644
index 0000000..bfd0505
--- /dev/null
+++ b/src/features/dashboard/components/plateRead/PlateRead.tsx
@@ -0,0 +1,56 @@
+import type { SightingType } from "../../../../utils/types";
+import Card from "../../../../components/ui/Card";
+import CardHeader from "../../../../components/CardHeader";
+
+type PlateReadProps = {
+ sighting: SightingType;
+};
+
+const PlateRead = ({ sighting }: PlateReadProps) => {
+ console.log(sighting);
+ const vrm = sighting?.vrm;
+ const region = sighting?.laneID;
+ const timestamp = sighting?.timeStamp;
+ const seenCount = sighting?.seenCount;
+ const radarSpeed = sighting?.radarSpeed;
+ const motion = sighting?.motion;
+ const countryCode = sighting?.countryCode;
+ const plateColorUrl = sighting?.plateUrlColour;
+
+ if (!sighting) return
No sighting data available.
;
+
+ return (
+
+
+
+ - VRM:
+ - {vrm}
+ - Region:
+ - {region}
+ - Timestamp:
+ - {timestamp}
+
+ - Seen Count:
+ - {seenCount}
+
+ - Radar Speed:
+ - {radarSpeed} mph
+
+ - Motion:
+ - {motion}
+
+ - Country Code:
+ - {countryCode}
+
+ - Plate Image:
+ -
+
+ View Image
+
+
+
+
+ );
+};
+
+export default PlateRead;
diff --git a/src/features/dashboard/components/sightingStack/SightingItem.tsx b/src/features/dashboard/components/sightingStack/SightingItem.tsx
index 4009b44..8ec0d3c 100644
--- a/src/features/dashboard/components/sightingStack/SightingItem.tsx
+++ b/src/features/dashboard/components/sightingStack/SightingItem.tsx
@@ -6,7 +6,6 @@ type SightingItemProps = {
};
const SightingItem = ({ sighting }: SightingItemProps) => {
- console.log(sighting);
const motion = sighting.motion.toLowerCase() === "away" ? true : false;
return (
diff --git a/src/features/dashboard/components/sightingStack/SightingStack.tsx b/src/features/dashboard/components/sightingStack/SightingStack.tsx
index 69917e3..15fcad5 100644
--- a/src/features/dashboard/components/sightingStack/SightingStack.tsx
+++ b/src/features/dashboard/components/sightingStack/SightingStack.tsx
@@ -8,7 +8,7 @@ type SightingStackProps = {
};
const SightingStack = ({ sightings }: SightingStackProps) => {
return (
-
+
{sightings.map((sighting) => (
diff --git a/src/features/dashboard/components/videoFeed/VideoFeed.tsx b/src/features/dashboard/components/videoFeed/VideoFeed.tsx
index 44ec195..2c85705 100644
--- a/src/features/dashboard/components/videoFeed/VideoFeed.tsx
+++ b/src/features/dashboard/components/videoFeed/VideoFeed.tsx
@@ -20,8 +20,8 @@ const VideoFeed = ({ mostRecentSighting, isLoading }: VideoFeedProps) => {
useEffect(() => {
const updateSize = () => {
- const width = window.innerWidth * 0.5;
- const height = (width * 3) / 4;
+ const width = window.innerWidth * 0.48;
+ const height = (width * 2) / 3;
setSize({ width, height });
};
updateSize();
@@ -59,7 +59,7 @@ const VideoFeed = ({ mostRecentSighting, isLoading }: VideoFeedProps) => {
height={plateRect?.[3] * size.height}
stroke="blue"
strokeWidth={4}
- zIndex={1}
+ cornerRadius={5}
/>
)}
@@ -75,7 +75,7 @@ const VideoFeed = ({ mostRecentSighting, isLoading }: VideoFeedProps) => {
height={rect[3] * size.height}
stroke="red"
strokeWidth={2}
- zIndex={1}
+ cornerRadius={5}
/>
))}
diff --git a/src/features/dashboard/hooks/useCreateVideoSnapshot.ts b/src/features/dashboard/hooks/useCreateVideoSnapshot.ts
index f682e12..a7aa9c4 100644
--- a/src/features/dashboard/hooks/useCreateVideoSnapshot.ts
+++ b/src/features/dashboard/hooks/useCreateVideoSnapshot.ts
@@ -9,8 +9,6 @@ export const useCreateVideoSnapshot = (mostRecentSighting: SightingType) => {
image.src = snapshotUrl;
- console.log(mostRecentSighting);
-
const plateRect = mostRecentSighting?.overviewPlateRect;
const plateTrack = mostRecentSighting?.plateTrack;