TobaOjo/BayIQ-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor camera feed components and add sighting tables

Browse Source 
- Updated mode settings in camera feed reducer to use "painter"
- Renamed PlatePatch component to SightingPatch and updated imports
- Removed obsolete PlatePatch component
- Added SightingEntryTable and SightingExitTable components for displaying sighting data
- Implemented useSightingEntryAndExit hook for fetching entry and exit sightings
- Adjusted VideoFeedGridPainter for improved width calculation
- Introduced DecodeReading type for better typing
This commit is contained in:
Toba Ojo
2025-11-28 12:58:42 +00:00
parent c910a3dd50
commit ddb1fa1bf1
9 changed files with 160 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/features/cameras/components/CameraGrid.tsx
View File

@@ -3,7 +3,7 @@ import { useState } from "react";
import VideoFeedGridPainter from "./Video/VideoFeedGridPainter";
import CameraSettings from "./CameraSettings/CameraSettings";
import PlatePatch from "./PlatePatch/PlatePatch";
import PlatePatch from "./PlatePatch/SightingPatch";
const CameraGrid = () => {
const [tabIndex, setTabIndex] = useState(0);

7
src/features/cameras/components/PlatePatch/PlatePatch.tsx
View File

@@ -1,7 +0,0 @@
import Card from "../../../../ui/Card";
const PlatePatch = () => {
return <Card className="md:row-start-4 md:col-span-2">PlatePatch</Card>;
};
export default PlatePatch;

44
src/features/cameras/components/PlatePatch/SightingEntryTable.tsx Normal file
View File

@@ -0,0 +1,44 @@
import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
import type { DecodeReading } from "../../../../types/types";
import { useSightingEntryAndExit } from "../../hooks/useSightingEntryAndExit";
const SightingEntryTable = () => {
const { state } = useCameraFeedContext();
const cameraFeedID = state.cameraFeedID;
const { entryQuery } = useSightingEntryAndExit(cameraFeedID);
const isLoading = entryQuery?.isFetching;
const readings = entryQuery?.data?.decodes;
if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
return (
<div className="border border-gray-600 rounded-lg overflow-hidden m-2">
<div className="overflow-y-auto ">
<table className="w-full text-left text-sm">
<thead className="bg-gray-700/50 text-gray-200 sticky top-0">
<tr>
<th className="px-4 py-3 font-semibold">VRM</th>
<th className="px-4 py-3 font-semibold">Lane ID</th>
<th className="px-4 py-3 font-semibold text-center">Seen Count</th>
<th className="px-4 py-3 font-semibold">First Seen</th>
<th className="px-4 py-3 font-semibold">Last Seen</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-700">
{readings?.map((reading: DecodeReading) => (
<tr className="hover:bg-gray-800/30 transition-colors" key={reading?.id}>
<td className="px-4 py-3 font-mono font-semibold text-blue-400 text-lg">{reading?.vrm}</td>
<td className="px-4 py-3 text-gray-300">{reading?.laneID}</td>
<td className="px-4 py-3 text-center text-gray-300">{reading?.seenCount}</td>
<td className="px-4 py-3 text-gray-400 text-md">{reading?.firstSeenTimeHumane}</td>
<td className="px-4 py-3 text-gray-400 text-md">{reading?.lastSeenTimeHumane}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
};
export default SightingEntryTable;

44
src/features/cameras/components/PlatePatch/SightingExitTable.tsx Normal file
View File

@@ -0,0 +1,44 @@
import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
import type { DecodeReading } from "../../../../types/types";
import { useSightingEntryAndExit } from "../../hooks/useSightingEntryAndExit";
const SightingExitTable = () => {
const { state } = useCameraFeedContext();
const cameraFeedID = state.cameraFeedID;
const { exitQuery } = useSightingEntryAndExit(cameraFeedID);
const isLoading = exitQuery?.isFetching;
const readings = exitQuery?.data?.decodes;
if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
return (
<div className="border border-gray-600 rounded-lg overflow-hidden m-2">
<div className="overflow-y-auto ">
<table className="w-full text-left text-sm">
<thead className="bg-gray-700/50 text-gray-200 sticky top-0">
<tr>
<th className="px-4 py-3 font-semibold">VRM</th>
<th className="px-4 py-3 font-semibold">Lane ID</th>
<th className="px-4 py-3 font-semibold text-center">Seen Count</th>
<th className="px-4 py-3 font-semibold">First Seen</th>
<th className="px-4 py-3 font-semibold">Last Seen</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-700">
{readings?.map((reading: DecodeReading) => (
<tr className="hover:bg-gray-800/30 transition-colors" key={reading?.id}>
<td className="px-4 py-3 font-mono font-semibold text-red-400 text-lg">{reading?.vrm}</td>
<td className="px-4 py-3 text-gray-300">{reading?.laneID}</td>
<td className="px-4 py-3 text-center text-gray-300">{reading?.seenCount}</td>
<td className="px-4 py-3 text-gray-400 text-md">{reading?.firstSeenTimeHumane}</td>
<td className="px-4 py-3 text-gray-400 text-md">{reading?.lastSeenTimeHumane}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
};
export default SightingExitTable;

27
src/features/cameras/components/PlatePatch/SightingPatch.tsx Normal file
View File

@@ -0,0 +1,27 @@
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import Card from "../../../../ui/Card";
import CardHeader from "../../../../ui/CardHeader";
import SightingEntryTable from "./SightingEntryTable";
import SightingExitTable from "./SightingExitTable";
const PlatePatch = () => {
return (
<Card className="md:row-start-4 md:col-span-2 p-4 h-[190%]">
<CardHeader title="Entry / Exit" />
<Tabs>
<TabList>
<Tab>Entry Sightings</Tab>
<Tab>Exit Sightings</Tab>
</TabList>
<TabPanel>
<SightingEntryTable />
</TabPanel>
<TabPanel>
<SightingExitTable />
</TabPanel>
</Tabs>
</Card>
);
};
export default PlatePatch;

2
src/features/cameras/components/Video/VideoFeedGridPainter.tsx
View File

@@ -88,7 +88,7 @@ const VideoFeedGridPainter = () => {
const width = window.innerWidth;
const aspectRatio = 740 / 460;
const newWidth = width * 0.36;
const newWidth = width * 0.39;
const newHeight = newWidth / aspectRatio;
setStageSize({ width: newWidth, height: newHeight });
};