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

- Enhance layout and responsiveness of camera components

Browse Source 
- update system health hook for periodic refetching
This commit is contained in:
Toba Ojo
2025-12-03 13:39:18 +00:00
parent 10590e5658
commit 59bcb3c45b
7 changed files with 9 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,7 +9,7 @@ const CameraGrid = () => {
const [tabIndex, setTabIndex] = useState(0);
return (
<div className="grid grid-cols-1 md:grid-cols-5 md:grid-rows-5 max-h-screen">
<div className="flex flex-col gap-4 p-4 md:grid md:grid-cols-5 md:grid-rows-5 md:max-h-screen md:gap-0 md:p-0">
<VideoFeedGridPainter />
<CameraSettings tabIndex={tabIndex} setTabIndex={setTabIndex} />
<PlatePatch />

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

@@ -10,7 +10,7 @@ type CameraSettingsProps = {
const CameraSettings = ({ tabIndex, setTabIndex }: CameraSettingsProps) => {
return (
<Card className="p-4 col-span-2 row-span-5 col-start-3 md:col-span-3 md:row-span-5 overflow-auto">
<Card className="p-4 w-full overflow-auto md:col-span-2 md:row-span-5 md:col-start-4 md:row-start-1">
<Tabs
selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
className="react-tabs"

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

@@ -19,14 +19,6 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID: cameraFeedID, mode: e.target.value } });
};
const handleAddRegionClick = () => {
const regionName = `Region ${regions.length + 1}`;
dispatch({
type: "ADD_NEW_REGION",
payload: { cameraFeedID: cameraFeedID, regionName: regionName, brushColour: "#ffffff" },
});
};
const handleResetRegion = () => {
dispatch({
type: "RESET_PAINTED_CELLS",
@@ -34,13 +26,6 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
});
};
const handleRemoveClick = () => {
dispatch({
type: "REMOVE_REGION",
payload: { cameraFeedID: cameraFeedID, regionName: regions[selectedRegionIndex].name },
});
};
const handleModeChange = (newMode: string) => {
dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID: cameraFeedID, mode: newMode } });
};
@@ -177,14 +162,6 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
);
})}
</>
<div className=" mx-auto flex flex-row gap-4 mt-4">
<button className="border border-blue-900 bg-blue-700 px-4 py-1 rounded-md" onClick={handleAddRegionClick}>
Add Region
</button>
<button className="border border-red-900 bg-red-700 px-4 py-1 rounded-md" onClick={handleRemoveClick}>
Remove Region
</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/SightingPatch.tsx
View File

@@ -6,7 +6,7 @@ import SightingExitTable from "./SightingExitTable";
const PlatePatch = () => {
return (
<Card className="md:row-start-4 md:col-span-2 p-4 h-[190%]">
<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>
<TabList>

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

@@ -93,7 +93,7 @@ const VideoFeedGridPainter = () => {
const width = window.innerWidth;
const aspectRatio = BACKEND_WIDTH / BACKEND_HEIGHT;
const newWidth = width * 0.39;
const newWidth = width * 0.55;
const newHeight = newWidth / aspectRatio;
setStageSize({ width: newWidth, height: newHeight });
};
@@ -107,7 +107,7 @@ const VideoFeedGridPainter = () => {
if (image === null || isloading) return <span className="text-slate-500">Loading Video feed…</span>;
return (
<div
className={`mt-4.5 row-span-1 col-span-2 ${mode === "painter" ? "hover:cursor-crosshair" : ""} ${
className={`w-full md:row-span-3 md:col-span-3 ${mode === "painter" ? "hover:cursor-crosshair" : ""} ${
mode === "eraser" ? "hover:cursor-pointer" : ""
}`}
>

4
src/features/dashboard/components/systemHealth/SystemHealth.tsx
View File

@@ -38,7 +38,7 @@ const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpd
return <span className="text-slate-500">Loading system health…</span>;
}
return (
<div className="h-100 md:h-75 overflow-y-auto flex flex-col gap-4">
<div className="relative h-100 md:h-75 overflow-y-auto flex flex-col gap-4">
<div className="p-2 border-b border-gray-600 grid grid-cols-2 justify-between">
<div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
<h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
@@ -50,7 +50,7 @@ const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpd
<div className="overflow-auto gap-4">
<StatusGridItem title={"Modules"} statusCategory={categoryDefault} />
</div>
<div className="border-t border-gray-500">
<div className="absolute bottom-0 left-0 border-t border-gray-500 w-full">
<small className="italic text-gray-400 ">{`Last refeshed ${updatedDate}`}</small>
</div>
</div>

1
src/features/dashboard/hooks/useGetSystemHealth.ts
View File

@@ -11,6 +11,7 @@ export const useGetSystemHealth = () => {
const query = useQuery({
queryKey: ["fetchSystemData"],
queryFn: fetchData,
refetchInterval: 300000,
});
return { query };
};