From eaf33646936563d7dc043197fc38ce9d0aa20efb Mon Sep 17 00:00:00 2001 From: Yinyin Liu Date: Fri, 17 Jan 2025 14:59:47 +0100 Subject: [PATCH] added Sodiohome under the side bar of monitor --- typescript/frontend-marios2/src/App.tsx | 17 ++++- .../src/Resources/routes.json | 1 + .../frontend-marios2/src/components/login.tsx | 7 +- .../contexts/InstallationsContextProvider.tsx | 68 +++++++++++++++++-- .../src/contexts/ProductIdContextProvider.tsx | 29 +++++++- .../Sidebar/SidebarMenu/index.tsx | 20 +++++- 6 files changed, 127 insertions(+), 15 deletions(-) diff --git a/typescript/frontend-marios2/src/App.tsx b/typescript/frontend-marios2/src/App.tsx index 2233a4448..5a8d30096 100644 --- a/typescript/frontend-marios2/src/App.tsx +++ b/typescript/frontend-marios2/src/App.tsx @@ -19,6 +19,7 @@ import { axiosConfigWithoutToken } from './Resources/axiosConfig'; import InstallationsContextProvider from './contexts/InstallationsContextProvider'; import AccessContextProvider from './contexts/AccessContextProvider'; import SalidomoInstallationTabs from './content/dashboards/SalidomoInstallations'; +import SodiohomeInstallationTabs from './content/dashboards/Installations/index'; import { ProductIdContext } from './contexts/ProductIdContextProvider'; function App() { @@ -29,7 +30,7 @@ function App() { const navigate = useNavigate(); const searchParams = new URLSearchParams(location.search); const username = searchParams.get('username'); - const { setAccessToSalimax, setAccessToSalidomo } = + const { setAccessToSalimax, setAccessToSalidomo,setAccessToSodiohome } = useContext(ProductIdContext); const [language, setLanguage] = useState('en'); @@ -71,10 +72,13 @@ function App() { setUser(response.data.user); setAccessToSalimax(response.data.accessToSalimax); setAccessToSalidomo(response.data.accessToSalidomo); + setAccessToSodiohome(response.data.accessToSodiohome); if (response.data.accessToSalimax) { navigate(routes.installations); - } else { + } else if(response.data.accessToSalidomo){ navigate(routes.salidomo_installations); + } else{ + navigate(routes.sodiohome_installations); } } }) @@ -162,6 +166,15 @@ function App() { } /> + + + + } + /> + } /> ([]); + const [sodiohomeInstallations, setSodiohomeInstallations] = useState< + I_Installation[] + >([]); const [foldersAndInstallations, setFoldersAndInstallations] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(false); @@ -75,12 +78,24 @@ const InstallationsContextProvider = ({ : installation; }); + const updatedSodiohome = sodiohomeInstallations.map((installation) => { + const update = pendingUpdates.current[installation.id]; + return update + ? { + ...installation, + status: update.status, + testingMode: update.testingMode + } + : installation; + }); + setSalidomoInstallations(updatedSalidomo); setSalimaxInstallations(updatedSalimax); + setSodiohomeInstallations(updatedSodiohome); // Clear the pending updates after applying pendingUpdates.current = {}; - }, [salidomoInstallations, salimaxInstallations]); + }, [salidomoInstallations, salimaxInstallations,sodiohomeInstallations]); useEffect(() => { const timer = setInterval(() => { @@ -98,17 +113,33 @@ const InstallationsContextProvider = ({ const socket = new WebSocket(urlWithToken); - // Connection opened socket.addEventListener('open', () => { + let installationsToSend = []; + + if (product === 0) { + installationsToSend = salimaxInstallations; + } else if (product === 1) { + installationsToSend = salidomoInstallations; + } else if (product === 2) { + installationsToSend = sodiohomeInstallations; + } + + // Send the corresponding installation IDs socket.send( - JSON.stringify( - product === 1 - ? salidomoInstallations.map((installation) => installation.id) - : salimaxInstallations.map((installation) => installation.id) - ) + JSON.stringify(installationsToSend.map((installation) => installation.id)) ); }); + // socket.addEventListener('open', () => { + // socket.send( + // JSON.stringify( + // product === 1 + // ? salidomoInstallations.map((installation) => installation.id) + // : salimaxInstallations.map((installation) => installation.id) + // ) + // ); + // }); + // Periodically send ping messages to keep the connection alive const pingInterval = setInterval(() => { if (socket.readyState === WebSocket.OPEN) { @@ -166,6 +197,20 @@ const InstallationsContextProvider = ({ }); }, [navigate, removeToken]); + const fetchAllSodiohomeInstallations = useCallback(async () => { + axiosConfig + .get('/GetAllSodiohomeInstallations') + .then((res: AxiosResponse) => + setSodiohomeInstallations(res.data) + ) + .catch((err: AxiosError) => { + if (err.response?.status === 401) { + removeToken(); + navigate(routes.login); + } + }); + }, [navigate, removeToken]); + const fetchAllFoldersAndInstallations = useCallback( async (product: number) => { axiosConfig @@ -207,6 +252,8 @@ const InstallationsContextProvider = ({ fetchAllInstallations(); else if (formValues.product === 1 && view === 'installation') fetchAllSalidomoInstallations(); + else if (formValues.product === 2 && view === 'installation') + fetchAllSodiohomeInstallations(); else fetchAllFoldersAndInstallations(formValues.product); setTimeout(() => setUpdated(false), 3000); }) @@ -222,6 +269,7 @@ const InstallationsContextProvider = ({ fetchAllFoldersAndInstallations, fetchAllInstallations, fetchAllSalidomoInstallations, + fetchAllSodiohomeInstallations, navigate, removeToken ] @@ -237,6 +285,8 @@ const InstallationsContextProvider = ({ fetchAllInstallations(); else if (formValues.product === 1 && view === 'installation') fetchAllSalidomoInstallations(); + else if (formValues.product === 2 && view === 'installation') + fetchAllSodiohomeInstallations(); else fetchAllFoldersAndInstallations(formValues.product); setTimeout(() => setUpdated(false), 3000); }) @@ -252,6 +302,7 @@ const InstallationsContextProvider = ({ fetchAllFoldersAndInstallations, fetchAllInstallations, fetchAllSalidomoInstallations, + fetchAllSodiohomeInstallations, navigate, removeToken ] @@ -317,9 +368,11 @@ const InstallationsContextProvider = ({ () => ({ salimaxInstallations, salidomoInstallations, + sodiohomeInstallations, foldersAndInstallations, fetchAllInstallations, fetchAllSalidomoInstallations, + fetchAllSodiohomeInstallations, fetchAllFoldersAndInstallations, createInstallation, updateInstallation, @@ -341,6 +394,7 @@ const InstallationsContextProvider = ({ [ salimaxInstallations, salidomoInstallations, + sodiohomeInstallations, foldersAndInstallations, loading, error, diff --git a/typescript/frontend-marios2/src/contexts/ProductIdContextProvider.tsx b/typescript/frontend-marios2/src/contexts/ProductIdContextProvider.tsx index be16df74a..69727358e 100644 --- a/typescript/frontend-marios2/src/contexts/ProductIdContextProvider.tsx +++ b/typescript/frontend-marios2/src/contexts/ProductIdContextProvider.tsx @@ -7,8 +7,10 @@ interface ProductIdContextType { setProduct: (new_product: number) => void; accessToSalimax: boolean; accessToSalidomo: boolean; + accessToSodiohome: boolean; setAccessToSalimax: (access: boolean) => void; setAccessToSalidomo: (access: boolean) => void; + setAccessToSodiohome: (access: boolean) => void; } // Create the context. @@ -16,6 +18,14 @@ export const ProductIdContext = createContext( undefined ); +// Define the product mapping for dynamic assignment +const productMapping: { [key: string]: number } = { + salimax: 0, + salidomo: 1, + sodiohome: 2, + // Additional mappings can be added here +}; + // Create a UserContextProvider component export const ProductIdContextProvider = ({ children @@ -31,8 +41,14 @@ export const ProductIdContextProvider = ({ const storedValue = localStorage.getItem('accessToSalidomo'); return storedValue === 'true'; }); - const [product, setProduct] = useState(location.includes('salidomo') ? 1 : 0); - + const [accessToSodiohome, setAccessToSodiohome] = useState(() => { + const storedValue = localStorage.getItem('accessToSodiohome'); + return storedValue === 'true'; + }); + // const [product, setProduct] = useState(location.includes('salidomo') ? 1 : 0); + const [product, setProduct] = useState( + productMapping[Object.keys(productMapping).find((key) => location.includes(key)) || ''] || -1 + ); const changeProductId = (new_product: number) => { setProduct(new_product); }; @@ -47,6 +63,11 @@ export const ProductIdContextProvider = ({ localStorage.setItem('accessToSalidomo', JSON.stringify(access)); }; + const changeAccessSodiohome = (access: boolean) => { + setAccessToSodiohome(access); + localStorage.setItem('accessToSodiohome', JSON.stringify(access)); + }; + return ( {children} diff --git a/typescript/frontend-marios2/src/layouts/SidebarLayout/Sidebar/SidebarMenu/index.tsx b/typescript/frontend-marios2/src/layouts/SidebarLayout/Sidebar/SidebarMenu/index.tsx index 9b9ce4207..80501219d 100644 --- a/typescript/frontend-marios2/src/layouts/SidebarLayout/Sidebar/SidebarMenu/index.tsx +++ b/typescript/frontend-marios2/src/layouts/SidebarLayout/Sidebar/SidebarMenu/index.tsx @@ -164,7 +164,7 @@ function SidebarMenu() { const { closeSidebar } = useContext(SidebarContext); const context = useContext(UserContext); const { currentUser, setUser } = context; - const { accessToSalimax, accessToSalidomo } = useContext(ProductIdContext); + const { accessToSalimax, accessToSalidomo,accessToSodiohome } = useContext(ProductIdContext); return ( <> @@ -216,6 +216,24 @@ function SidebarMenu() { )} + + {accessToSodiohome && ( + + + + + + )}