From eefa98f03aca90ac9506731206ea9614ec95c66c Mon Sep 17 00:00:00 2001 From: Toba Ojo Date: Mon, 8 Dec 2025 11:49:12 +0000 Subject: [PATCH] - added reset all modal and integrate with camera settings --- .../cameras/components/CameraGrid.tsx | 29 +++++++--- .../components/CameraSettings/CameraPanel.tsx | 8 ++- .../CameraSettings/CameraSettings.tsx | 32 +++++++++-- .../CameraSettings/RegionSelector.tsx | 20 +++++-- .../resetAllModal/ResetAllModal.tsx | 55 +++++++++++++++++++ .../components/Video/VideoFeedGridPainter.tsx | 1 - .../output/components/ChannelCard.tsx | 2 +- src/features/output/components/OSDFields.tsx | 2 +- src/index.css | 30 ++++++++++ src/ui/ModalComponent.tsx | 9 +++ 10 files changed, 167 insertions(+), 21 deletions(-) create mode 100644 src/features/cameras/components/CameraSettings/resetAllModal/ResetAllModal.tsx diff --git a/src/features/cameras/components/CameraGrid.tsx b/src/features/cameras/components/CameraGrid.tsx index 541ae1c..8f8c92c 100644 --- a/src/features/cameras/components/CameraGrid.tsx +++ b/src/features/cameras/components/CameraGrid.tsx @@ -4,22 +4,33 @@ import VideoFeedGridPainter from "./Video/VideoFeedGridPainter"; import CameraSettings from "./CameraSettings/CameraSettings"; import PlatePatch from "./PlatePatch/SightingPatch"; +import ResetAllModal from "./CameraSettings/resetAllModal/ResetAllModal"; const CameraGrid = () => { const [tabIndex, setTabIndex] = useState(0); + const [isResetModalOpen, setIsResetModalOpen] = useState(false); return ( -
-
-
- -
-
- + <> +
+
+
+ +
+
+ +
+ setIsResetModalOpen(false)} + setIsResetModalOpen={setIsResetModalOpen} + />
- -
+ setIsResetModalOpen(false)} /> + ); }; diff --git a/src/features/cameras/components/CameraSettings/CameraPanel.tsx b/src/features/cameras/components/CameraSettings/CameraPanel.tsx index 51250c5..1b7a651 100644 --- a/src/features/cameras/components/CameraSettings/CameraPanel.tsx +++ b/src/features/cameras/components/CameraSettings/CameraPanel.tsx @@ -5,9 +5,12 @@ import RegionSelector from "./RegionSelector"; type CameraPanelProps = { tabIndex: number; + isResetAllModalOpen: boolean; + handleClose: () => void; + setIsResetModalOpen: React.Dispatch>; }; -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} /> diff --git a/src/features/cameras/components/CameraSettings/CameraSettings.tsx b/src/features/cameras/components/CameraSettings/CameraSettings.tsx index 211b2f3..2b5b1a5 100644 --- a/src/features/cameras/components/CameraSettings/CameraSettings.tsx +++ b/src/features/cameras/components/CameraSettings/CameraSettings.tsx @@ -6,9 +6,18 @@ import CameraPanel from "./CameraPanel"; type CameraSettingsProps = { setTabIndex: (tabIndex: number) => void; tabIndex: number; + isResetAllModalOpen: boolean; + handleClose: () => void; + setIsResetModalOpen: React.Dispatch>; }; -const CameraSettings = ({ tabIndex, setTabIndex }: CameraSettingsProps) => { +const CameraSettings = ({ + tabIndex, + setTabIndex, + isResetAllModalOpen, + handleClose, + setIsResetModalOpen, +}: CameraSettingsProps) => { return ( { Camera C - + - + - + diff --git a/src/features/cameras/components/CameraSettings/RegionSelector.tsx b/src/features/cameras/components/CameraSettings/RegionSelector.tsx index 653e39b..67f31ac 100644 --- a/src/features/cameras/components/CameraSettings/RegionSelector.tsx +++ b/src/features/cameras/components/CameraSettings/RegionSelector.tsx @@ -10,9 +10,20 @@ type RegionSelectorProps = { selectedRegionIndex: number; mode: string; cameraFeedID: "A" | "B" | "C"; + isResetAllModalOpen: boolean; + handleClose: () => void; + setIsResetModalOpen: React.Dispatch>; }; -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 + +
+
+ + ); +}; + +export default ResetAllModal; diff --git a/src/features/cameras/components/Video/VideoFeedGridPainter.tsx b/src/features/cameras/components/Video/VideoFeedGridPainter.tsx index 1c775cc..b17c837 100644 --- a/src/features/cameras/components/Video/VideoFeedGridPainter.tsx +++ b/src/features/cameras/components/Video/VideoFeedGridPainter.tsx @@ -93,7 +93,6 @@ const VideoFeedGridPainter = () => { const width = window.innerWidth; const aspectRatio = BACKEND_WIDTH / BACKEND_HEIGHT; - console.log(window.innerWidth); if (width < 768) { const newWidth = width * 0.8; const newHeight = newWidth / aspectRatio; diff --git a/src/features/output/components/ChannelCard.tsx b/src/features/output/components/ChannelCard.tsx index 6a6ec51..811af53 100644 --- a/src/features/output/components/ChannelCard.tsx +++ b/src/features/output/components/ChannelCard.tsx @@ -23,7 +23,7 @@ const ChannelCard = () => { type="submit" className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer" > - {"Save Changes"} + {"Save Settings"} ); diff --git a/src/features/output/components/OSDFields.tsx b/src/features/output/components/OSDFields.tsx index 6e0f25f..56e2954 100644 --- a/src/features/output/components/OSDFields.tsx +++ b/src/features/output/components/OSDFields.tsx @@ -62,7 +62,7 @@ const OSDFields = ({ isOSDLoading }: OSDFieldsProps) => { onClick={() => handleSubmit(values)} className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer" > - Submit + Save Settings diff --git a/src/index.css b/src/index.css index 9951853..3cc880d 100644 --- a/src/index.css +++ b/src/index.css @@ -5,3 +5,33 @@ body { color: #fff; font-family: Arial, Helvetica, sans-serif; } + +/* Modal animations */ +.ReactModal__Overlay { + opacity: 0; + transition: opacity 200ms ease-in-out; +} + +.ReactModal__Overlay--after-open { + opacity: 1; +} + +.ReactModal__Overlay--before-close { + opacity: 0; +} + +.ReactModal__Content { + transform: scale(0.9) translateY(-20px); + opacity: 0; + transition: all 200ms ease-in-out; +} + +.ReactModal__Content--after-open { + transform: scale(1) translateY(0); + opacity: 1; +} + +.ReactModal__Content--before-close { + transform: scale(0.9) translateY(-20px); + opacity: 0; +} diff --git a/src/ui/ModalComponent.tsx b/src/ui/ModalComponent.tsx index e433bd6..e14f622 100644 --- a/src/ui/ModalComponent.tsx +++ b/src/ui/ModalComponent.tsx @@ -13,6 +13,15 @@ const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) = onRequestClose={close} className="bg-[#1e2a38] p-6 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[40%] z-100 overflow-y-auto border border-gray-600 max-h-[90%]" overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100" + closeTimeoutMS={200} + style={{ + overlay: { + transition: "opacity 200ms ease-in-out", + }, + content: { + transition: "all 200ms ease-in-out", + }, + }} > {children}