added Sodiohome under the side bar of monitor

This commit is contained in:
Yinyin Liu 2025-01-17 14:59:47 +01:00
parent 7045648622
commit eaf3364693
6 changed files with 127 additions and 15 deletions

View File

@ -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={'*'}

View File

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

View File

@ -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);
}
}
})

View File

@ -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(
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<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,

View File

@ -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}

View File

@ -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>