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

- addressing feedback

Browse Source
This commit is contained in:
Toba Ojo
2025-12-04 19:14:14 +00:00
parent 3af4e585e7
commit 9208470e53
13 changed files with 229 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/features/cameras/components/CameraSettings/RegionSelector.tsx
View File

@@ -43,14 +43,29 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
});
};
const handleAddRegionClick = () => {
const regionName = `Bay ${regions.length + 1}`;
dispatch({
type: "ADD_NEW_REGION",
payload: { cameraFeedID: cameraFeedID, regionName: regionName, brushColour: "#ffffff" },
});
};
const handleRemoveClick = () => {
dispatch({
type: "REMOVE_REGION",
payload: { cameraFeedID: cameraFeedID, regionName: regions[selectedRegionIndex].name },
});
};
const handleSaveclick = () => {
const regions: ColourData[] = [];
const test = Array.from(paintedCells.entries());
const region1 = test.filter(([, cell]) => cell.region.name === "Region 1");
const region2 = test.filter(([, cell]) => cell.region.name === "Region 2");
const region3 = test.filter(([, cell]) => cell.region.name === "Region 3");
const region4 = test.filter(([, cell]) => cell.region.name === "Region 4");
const region5 = test.filter(([, cell]) => cell.region.name === "Region 5");
const region1 = test.filter(([, cell]) => cell.region.name === "Bay 1");
const region2 = test.filter(([, cell]) => cell.region.name === "Bay 2");
const region3 = test.filter(([, cell]) => cell.region.name === "Bay 3");
const region4 = test.filter(([, cell]) => cell.region.name === "Bay 4");
const region5 = test.filter(([, cell]) => cell.region.name === "Bay 5");
const region1Data = {
id: 1,
cells: region1.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
@@ -130,7 +145,7 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
</div>
</div>
<div className="p-2 border border-gray-600 rounded-lg flex flex-col">
<h2 className="text-2xl mb-2">Region Select</h2>
<h2 className="text-2xl mb-2">Bay Select</h2>
<>
{regions?.map((region, idx) => {
const isSelected = selectedRegionIndex === idx;
@@ -162,6 +177,14 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
);
})}
</>
<div className="flex flex-col gap-4 mt-4">
<button className="border border-blue-900 bg-blue-700 px-4 py-1 rounded-md" onClick={handleAddRegionClick}>
Add Bay
</button>
<button className="border border-red-900 bg-red-700 px-4 py-1 rounded-md" onClick={handleRemoveClick}>
Remove Bay
</button>
</div>
</div>
<div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2 h-50">

2
src/features/cameras/components/PlatePatch/SightingEntryTable.tsx
View File

@@ -18,7 +18,7 @@ const SightingEntryTable = () => {
<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">Bay 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>

2
src/features/cameras/components/PlatePatch/SightingExitTable.tsx
View File

@@ -18,7 +18,7 @@ const SightingExitTable = () => {
<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">Bay 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>

2
src/features/cameras/components/PlatePatch/SightingPatch.tsx
View File

@@ -8,7 +8,7 @@ const PlatePatch = () => {
return (
<Card className="p-4 w-full md:w-[95%] md:row-start-4 md:col-span-3 md:h-[190%]">
<CardHeader title="Entry / Exit" />
<Tabs>
<Tabs defaultIndex={1}>
<TabList>
<Tab>Entry Sightings</Tab>
<Tab>Exit Sightings</Tab>

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

@@ -118,6 +118,7 @@ const VideoFeedGridPainter = () => {
onMouseMove={handleStageMouseMove}
onMouseUp={handleStageMouseUp}
onMouseLeave={handleStageMouseUp}
className="max-w-[55%]"
>
<Layer>
<Image image={image} width={stageSize.width} height={stageSize.height} classname={"rounded-lg"} />