From 6b201572cfc3ea02b193cbeea7c5dd8dd7c88c0e Mon Sep 17 00:00:00 2001 From: Yinyin Liu Date: Tue, 16 Jul 2024 11:53:37 +0200 Subject: [PATCH] add frontend and backend for "Test Mode" toggle in Salimax this toggle is designed to mark any hardware and software tests on the installation and "lock" the installation from others this toggle is under "Add New Action" in "History of Action" tab turn on the toggle when starting test and add test content turn off the toggle when finishing test --- typescript/frontend-marios2/src/App.tsx | 3 ++ .../content/dashboards/History/History.tsx | 39 +++++++++++++++---- .../Installations/FlatInstallationView.tsx | 17 ++++++++ .../dashboards/Installations/Installation.tsx | 17 ++++++++ .../src/contexts/TestModeContext.tsx | 30 ++++++++++++++ 5 files changed, 99 insertions(+), 7 deletions(-) create mode 100644 typescript/frontend-marios2/src/contexts/TestModeContext.tsx diff --git a/typescript/frontend-marios2/src/App.tsx b/typescript/frontend-marios2/src/App.tsx index 9dda2d8b3..dcbe7ae4a 100644 --- a/typescript/frontend-marios2/src/App.tsx +++ b/typescript/frontend-marios2/src/App.tsx @@ -11,6 +11,7 @@ import fr from './lang/fr.json'; import SuspenseLoader from './components/SuspenseLoader'; import SidebarLayout from './layouts/SidebarLayout'; import { TokenContext } from './contexts/tokenContext'; +import { TestModeProvider } from './contexts/TestModeContext'; import ResetPassword from './components/ResetPassword'; import InstallationTabs from './content/dashboards/Installations/index'; import routes from 'src/Resources/routes.json'; @@ -142,7 +143,9 @@ function App() { element={ + + } diff --git a/typescript/frontend-marios2/src/content/dashboards/History/History.tsx b/typescript/frontend-marios2/src/content/dashboards/History/History.tsx index b9518fb9d..1b12bf486 100644 --- a/typescript/frontend-marios2/src/content/dashboards/History/History.tsx +++ b/typescript/frontend-marios2/src/content/dashboards/History/History.tsx @@ -9,7 +9,9 @@ import { IconButton, Modal, TextField, - useTheme + useTheme, + Switch, + FormControlLabel } from '@mui/material'; import Typography from '@mui/material/Typography'; import { FormattedMessage } from 'react-intl'; @@ -18,6 +20,7 @@ import { AxiosError, AxiosResponse } from 'axios/index'; import routes from '../../../Resources/routes.json'; import { useNavigate } from 'react-router-dom'; import { TokenContext } from '../../../contexts/tokenContext'; +import { useTestMode } from '../../../contexts/TestModeContext'; import { Action } from '../../../interfaces/S3Types'; import Button from '@mui/material/Button'; import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers'; @@ -45,7 +48,12 @@ function HistoryOfActions(props: HistoryProps) { timestamp: actionDate.toDate(), description: '' }); + const { testModeMap, setTestMode } = useTestMode(); + const isTestMode = testModeMap[props.id]||false; + const handleTestModeToggle = () => { + setTestMode(props.id,!isTestMode); + }; const handleDateChange = (newdate) => { setActionDate(newdate); setNewAction({ @@ -132,15 +140,26 @@ function HistoryOfActions(props: HistoryProps) { }} >
+ {/* handleDateChange(newDate)}*/} + {/* sx={{*/} + {/* width: 450,*/} + {/* marginTop: 2*/} + {/* }}*/} + {/*/>*/} handleDateChange(newDate)} - sx={{ - width: 450, - marginTop: 2 - }} + onChange={handleDateChange} + renderInput={(params) => ( + + )} /> + } + label="Test Mode" + /> +
diff --git a/typescript/frontend-marios2/src/content/dashboards/Installations/Installation.tsx b/typescript/frontend-marios2/src/content/dashboards/Installations/Installation.tsx index 6d5e822ac..28dc59a27 100644 --- a/typescript/frontend-marios2/src/content/dashboards/Installations/Installation.tsx +++ b/typescript/frontend-marios2/src/content/dashboards/Installations/Installation.tsx @@ -18,6 +18,7 @@ import Overview from '../Overview/overview'; import Configuration from '../Configuration/Configuration'; import { fetchData } from 'src/content/dashboards/Installations/fetchData'; import CancelIcon from '@mui/icons-material/Cancel'; +import BuildIcon from '@mui/icons-material/Build'; import { Navigate, Route, Routes, useLocation } from 'react-router-dom'; import routes from '../../../Resources/routes.json'; import Information from '../Information/Information'; @@ -25,6 +26,7 @@ import BatteryView from '../BatteryView/BatteryView'; import { UserType } from '../../../interfaces/UserTypes'; import HistoryOfActions from '../History/History'; import PvView from '../PvView/PvView'; +import { useTestMode } from '../../../contexts/TestModeContext'; interface singleInstallationProps { current_installation?: I_Installation; @@ -43,6 +45,7 @@ function Installation(props: singleInstallationProps) { const [values, setValues] = useState(null); const status = getStatus(props.current_installation.id); const [connected, setConnected] = useState(true); + const { testModeMap } = useTestMode(); if (props.current_installation == undefined) { return null; @@ -346,6 +349,20 @@ function Installation(props: singleInstallationProps) { : 'green' }} /> + + {testModeMap[props.current_installation.id] && ( + + )} diff --git a/typescript/frontend-marios2/src/contexts/TestModeContext.tsx b/typescript/frontend-marios2/src/contexts/TestModeContext.tsx new file mode 100644 index 000000000..b277096ec --- /dev/null +++ b/typescript/frontend-marios2/src/contexts/TestModeContext.tsx @@ -0,0 +1,30 @@ +import React, { createContext, useContext, useState, ReactNode } from 'react'; + +interface TestModeContextProps { + testModeMap: { [key: number]: boolean }; + setTestMode: (id: number, mode: boolean) => void; +} + +const TestModeContext = createContext(undefined); + +export const useTestMode = () => { + const context = useContext(TestModeContext); + if (!context) { + throw new Error('useTestMode must be used within a TestModeProvider'); + } + return context; +}; + +export const TestModeProvider: React.FC<{ children: ReactNode }> = ({ children }) => { + const [testModeMap, setTestModeMap] = useState<{ [key: number]: boolean }>({}); + + const setTestMode = (id: number, mode: boolean) => { + setTestModeMap(prev => ({ ...prev, [id]: mode })); + }; + + return ( + + {children} + + ); +};