added Sodiohome under the side bar of monitor

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() {
                 }
               />
 
+              <Route
+                path={routes.sodiohome_installations + '*'}
+                element={
+                  <AccessContextProvider>
+                    <SodiohomeInstallationTabs />
+                  </AccessContextProvider>
+                }
+              />
+
               <Route path={routes.users + '*'} element={<Users />} />
               <Route
                 path={'*'}

typescript/frontend-marios2/src/Resources/routes.json

@@ -2,6 +2,7 @@
   "users": "/users/",
   "installations": "/installations/",
   "salidomo_installations": "/salidomo_installations/",
+  "sodiohome_installations": "/sodiohome_installations/",
   "installation": "installation/",
   "login": "/login/",
   "forgotPassword": "/forgotPassword/",

typescript/frontend-marios2/src/components/login.tsx

@@ -36,7 +36,7 @@ function Login() {
 
   const theme = useTheme();
   const context = useContext(UserContext);
-  const { setAccessToSalimax, setAccessToSalidomo } =
+  const { setAccessToSalimax, setAccessToSalidomo,setAccessToSodiohome } =
     useContext(ProductIdContext);
   const navigate = useNavigate();
 
@@ -78,6 +78,7 @@ function Login() {
 
           setAccessToSalimax(response.data.accessToSalimax);
           setAccessToSalidomo(response.data.accessToSalidomo);
+          setAccessToSodiohome(response.data.accessToSodioHome);
 
           if (rememberMe) {
             cookies.set('rememberedUsername', username, { path: '/' });
@@ -85,8 +86,10 @@ function Login() {
           }
           if (response.data.accessToSalimax) {
             navigate(routes.installations);
-          } else {
+          } else if(response.data.accessToSalidomo){
             navigate(routes.salidomo_installations);
+          } else{
+            navigate(routes.sodiohome_installations);
           }
         }
       })

typescript/frontend-marios2/src/contexts/InstallationsContextProvider.tsx

@@ -28,6 +28,9 @@ const InstallationsContextProvider = ({
   const [salidomoInstallations, setSalidomoInstallations] = useState<
     I_Installation[]
   >([]);
+  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(
+        JSON.stringify(installationsToSend.map((installation) => installation.id))
-          product === 1
-            ? salidomoInstallations.map((installation) => installation.id)
-            : salimaxInstallations.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<I_Installation[]>) =>
+        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,

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<ProductIdContextType | undefined>(
   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<number>(
+    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 (
     <ProductIdContext.Provider
       value={{
@@ -54,8 +75,10 @@ export const ProductIdContextProvider = ({
         setProduct: changeProductId,
         accessToSalimax,
         accessToSalidomo,
+        accessToSodiohome,
         setAccessToSalimax: changeAccessSalimax,
-        setAccessToSalidomo: changeAccessSalidomo
+        setAccessToSalidomo: changeAccessSalidomo,
+        setAccessToSodiohome: changeAccessSodiohome
       }}
     >
       {children}

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() {
                 </ListItem>
               </List>
             )}
+
+            {accessToSodiohome && (
+              <List component="div">
+                <ListItem component="div">
+                  <Button
+                    disableRipple
+                    component={RouterLink}
+                    onClick={closeSidebar}
+                    to="/sodiohome_installations"
+                    startIcon={<BrightnessLowTwoToneIcon />}
+                  >
+                    <Box sx={{ marginTop: '3px' }}>
+                      <FormattedMessage id="sodiohome" defaultMessage="Sodiohome" />
+                    </Box>
+                  </Button>
+                </ListItem>
+              </List>
+            )}
           </SubMenuWrapper>
         </List>