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

- added reset all modal and integrate with camera settings

Browse Source
This commit is contained in:
Toba Ojo
2025-12-08 11:49:12 +00:00
parent 8b3bff8a45
commit eefa98f03a
10 changed files with 167 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/features/cameras/components/CameraSettings/CameraPanel.tsx
View File

@@ -5,9 +5,12 @@ import RegionSelector from "./RegionSelector";
type CameraPanelProps = {
tabIndex: number;
isResetAllModalOpen: boolean;
handleClose: () => void;
setIsResetModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
};
const CameraPanel = ({ tabIndex }: CameraPanelProps) => {
const CameraPanel = ({ tabIndex, isResetAllModalOpen, handleClose, setIsResetModalOpen }: CameraPanelProps) => {
const { state, dispatch } = useCameraFeedContext();
const cameraFeedID = state.cameraFeedID;
const regions = state.regionsByCamera[cameraFeedID];
@@ -45,6 +48,9 @@ const CameraPanel = ({ tabIndex }: CameraPanelProps) => {
selectedRegionIndex={selectedRegionIndex}
mode={mode}
cameraFeedID={cameraFeedID}
isResetAllModalOpen={isResetAllModalOpen}
handleClose={handleClose}
setIsResetModalOpen={setIsResetModalOpen}
/>
</TabPanel>
<TabPanel>

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

@@ -6,9 +6,18 @@ import CameraPanel from "./CameraPanel";
type CameraSettingsProps = {
setTabIndex: (tabIndex: number) => void;
tabIndex: number;
isResetAllModalOpen: boolean;
handleClose: () => void;
setIsResetModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
};
const CameraSettings = ({ tabIndex, setTabIndex }: CameraSettingsProps) => {
const CameraSettings = ({
tabIndex,
setTabIndex,
isResetAllModalOpen,
handleClose,
setIsResetModalOpen,
}: CameraSettingsProps) => {
return (
<Card className="p-4 w-full h-full max-h-screen">
<Tabs
@@ -22,13 +31,28 @@ const CameraSettings = ({ tabIndex, setTabIndex }: CameraSettingsProps) => {
<Tab>Camera C</Tab>
</TabList>
<TabPanel>
<CameraPanel tabIndex={tabIndex} />
<CameraPanel
tabIndex={tabIndex}
isResetAllModalOpen={isResetAllModalOpen}
handleClose={handleClose}
setIsResetModalOpen={setIsResetModalOpen}
/>
</TabPanel>
<TabPanel>
<CameraPanel tabIndex={tabIndex} />
<CameraPanel
tabIndex={tabIndex}
isResetAllModalOpen={isResetAllModalOpen}
handleClose={handleClose}
setIsResetModalOpen={setIsResetModalOpen}
/>
</TabPanel>
<TabPanel>
<CameraPanel tabIndex={tabIndex} />
<CameraPanel
tabIndex={tabIndex}
isResetAllModalOpen={isResetAllModalOpen}
handleClose={handleClose}
setIsResetModalOpen={setIsResetModalOpen}
/>
</TabPanel>
</Tabs>
</Card>

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

@@ -10,9 +10,20 @@ type RegionSelectorProps = {
selectedRegionIndex: number;
mode: string;
cameraFeedID: "A" | "B" | "C";
isResetAllModalOpen: boolean;
handleClose: () => void;
setIsResetModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
};
const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: RegionSelectorProps) => {
const RegionSelector = ({
regions,
selectedRegionIndex,
mode,
cameraFeedID,
isResetAllModalOpen,
setIsResetModalOpen,
}: RegionSelectorProps) => {
const { colourMutation } = useColourDectection();
const { state, dispatch } = useCameraFeedContext();
const { blackboardMutation } = useBlackBoard();
@@ -61,8 +72,9 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
});
};
const handleResetAll = () => {
dispatch({ type: "RESET_CAMERA_FEED" });
const openResetModal = () => {
if (isResetAllModalOpen) return;
setIsResetModalOpen(true);
};
const handleSaveclick = () => {
@@ -228,7 +240,7 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
Reset Region
</button>
<button
onClick={handleResetAll}
onClick={openResetModal}
className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-full hover:bg-red-700 hover:cursor-pointer"
>
Reset All

55
src/features/cameras/components/CameraSettings/resetAllModal/ResetAllModal.tsx Normal file
View File

@@ -0,0 +1,55 @@
import { toast } from "sonner";
import { useCameraFeedContext } from "../../../../../app/context/CameraFeedContext";
import { useBlackBoard } from "../../../../../hooks/useBlackBoard";
import ModalComponent from "../../../../../ui/ModalComponent";
type ResetAllModalProps = {
isResetAllModalOpen: boolean;
handleClose: () => void;
};
const ResetAllModal = ({ isResetAllModalOpen, handleClose }: ResetAllModalProps) => {
const { state, dispatch } = useCameraFeedContext();
const { blackboardMutation } = useBlackBoard();
const handleResetAll = async () => {
dispatch({ type: "RESET_CAMERA_FEED" });
handleClose();
const result = await blackboardMutation.mutateAsync({
operation: "INSERT",
path: `cameraFeed`,
value: state,
});
// Need endpoint to reset all target detection painted cells
if (result?.reason === "OK") {
toast.success("All camera settings have been reset to default values.");
}
};
return (
<ModalComponent isModalOpen={isResetAllModalOpen} close={handleClose}>
<div>
<h2 className="text-xl font-bold mb-4">Reset All Camera Settings</h2>
<p className="mb-4">
Are you sure you want to reset all camera settings to their default values? This action cannot be undone.
</p>
<div className="flex justify-end gap-4">
<button
onClick={handleResetAll}
className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 hover:cursor-pointer"
>
Reset
</button>
<button
onClick={handleClose}
className="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700 hover:cursor-pointer "
>
Cancel
</button>
</div>
</div>
</ModalComponent>
);
};
export default ResetAllModal;