seg_yinzy
/
myems
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added customized menus in Web UI 

Merge branch 'PR58' into develop
pull/59/head
13621160019@163.com 2021-08-02 16:36:34 +08:00
parent b5e05ad629 3e813c666b
commit 35181a0dca
2 changed files with 193 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
web/src/components/navbar/NavbarTopDropDownMenus.js
View File

@ -1,42 +1,52 @@
import React, { useContext } from 'react';
import React, {useContext, useEffect, useState} from 'react';
import PropTypes from 'prop-types';
import NavbarDropdown from './NavbarDropdown';
import NavbarDropdownComponents from './NavbarDropdownComponents';
import {
// authenticationRoutes,
// chatRoutes,
// componentRoutes,
// ECommerceRoutes,
// emailRoutes,
// homeRoutes,
// pageRoutes,
// pluginRoutes,
// utilityRoutes,
// widgetsRoutes,
// kanbanRoutes,
dashboardRoutes,
spaceRoutes,
equipmentRoutes,
meterRoutes,
tenantRoutes,
storeRoutes,
shopfloorRoutes,
combinedEquipmentRoutes,
auxiliarySystemRoutes,
fddRoutes,
monitoringRoutes,
advancedReportingRoutes,
knowledgeBaseRoutes
} from '../../routes';
// import {
// // authenticationRoutes,
// // chatRoutes,
// // componentRoutes,
// // ECommerceRoutes,
// // emailRoutes,
// // homeRoutes,
// // pageRoutes,
// // pluginRoutes,
// // utilityRoutes,
// // widgetsRoutes,
// // kanbanRoutes,
// } from '../../routes';
import routes from '../../routes';
import { NavItem } from 'reactstrap';
import { NavLink } from 'react-router-dom';
import { breakpoints, getPageName } from '../../helpers/utils';
import { navbarBreakPoint, topNavbarBreakpoint } from '../../config';
import {breakpoints, createCookie, getCookieValue, getPageName} from '../../helpers/utils';
import {APIBaseURL, navbarBreakPoint, topNavbarBreakpoint} from '../../config';
import AppContext from '../../context/Context';
import { withTranslation } from 'react-i18next';
import withRedirect from "../../hoc/withRedirect";
import {toast} from "react-toastify";
const NavbarTopDropDownMenus = ({ setNavbarCollapsed, setShowBurgerMenu, t }) => {
const NavbarTopDropDownMenus = ({ setRedirectUrl, setRedirect, setNavbarCollapsed, setShowBurgerMenu, t }) => {
useEffect(() => {
let is_logged_in = getCookieValue('is_logged_in');
let user_name = getCookieValue('user_name');
let user_display_name = getCookieValue('user_display_name');
let user_uuid = getCookieValue('user_uuid');
let token = getCookieValue('token');
if (is_logged_in === null || !is_logged_in) {
setRedirectUrl(`/authentication/basic/login`);
setRedirect(true);
} else {
//update expires time of cookies
createCookie('is_logged_in', true, 1000 * 60 * 60 * 8);
createCookie('user_name', user_name, 1000 * 60 * 60 * 8);
createCookie('user_display_name', user_display_name, 1000 * 60 * 60 * 8);
createCookie('user_uuid', user_uuid, 1000 * 60 * 60 * 8);
createCookie('token', token, 1000 * 60 * 60 * 8);
}
});
const { isCombo, isTopNav } = useContext(AppContext);
// const components = [componentRoutes, pluginRoutes, utilityRoutes];
// const pages = [pageRoutes, kanbanRoutes, widgetsRoutes, chatRoutes, emailRoutes, ECommerceRoutes];
@ -46,8 +56,79 @@ const NavbarTopDropDownMenus = ({ setNavbarCollapsed, setShowBurgerMenu, t }) =>
isCombo && windowWidth < breakpoints[navbarBreakPoint] && setShowBurgerMenu(false);
};
const isLanding = getPageName('landing');
const [ showRoutes, setShowRoutes] = useState([routes[0]]);
useEffect(() => {
let isResponseOK = false;
fetch(APIBaseURL + '/menus/web', {
method: 'GET',
headers: {
"Content-type": "application/json",
"User-UUID": getCookieValue('user_uuid'),
"Token": getCookieValue('token')
},
body: null,
}).then(response => {
//console.log(response);
if (response.ok) {
isResponseOK = true;
}
return response.json();
}).then(json => {
//console.log(json);
if (isResponseOK) {
let showRoutes = [routes[0]];
for (let i = 0; i < routes.length; i++) {
let route = routes[i];
if(route.to in json && 'children' in route) {
let showChildren = [];
for (let j = 0; j < route.children.length; j++) {
const child = route.children[j];
if(json[route.to].indexOf(child.to) !== -1) {
showChildren.push(child);
}
}
route.children = showChildren;
showRoutes.push(route)
}else if(route.to in json) {
showRoutes.push(route)
}
}
setShowRoutes(showRoutes);
} else {
toast.error(json.description);
}
}).catch(err => {
console.log(err);
});
}, []);
return (
<>
{showRoutes.map(route =>
{
if ('children' in route) {
return(
<NavbarDropdownComponents
key={route.name}
title={t(route.name)}
items={[route]}
handleSetNavbarCollapsed={handleSetNavbarCollapsed}
/>
)
} else {
return (
<NavItem onClick={handleSetNavbarCollapsed} key={route.name}>
<NavLink className="nav-link" to={route.to}>
{t(route.name)}
</NavLink>
</NavItem>
)
}
}
)}
{/*<NavbarDropdown
title={homeRoutes.name}
items={homeRoutes.children}
@ -70,75 +151,10 @@ const NavbarTopDropDownMenus = ({ setNavbarCollapsed, setShowBurgerMenu, t }) =>
Documentation
</NavLink>
</NavItem> */}
<NavItem onClick={handleSetNavbarCollapsed}>
<NavLink className="nav-link" to={dashboardRoutes.to}>
{t(dashboardRoutes.name)}
</NavLink>
</NavItem>
<NavbarDropdownComponents
title={t(spaceRoutes.name)}
items={[spaceRoutes]}
handleSetNavbarCollapsed={handleSetNavbarCollapsed}
/>
<NavbarDropdownComponents
title={t(equipmentRoutes.name)}
items={[equipmentRoutes]}
handleSetNavbarCollapsed={handleSetNavbarCollapsed}
/>
<NavbarDropdownComponents
title={t(meterRoutes.name)}
items={[meterRoutes]}
handleSetNavbarCollapsed={handleSetNavbarCollapsed}
/>
<NavbarDropdownComponents
title={t(tenantRoutes.name)}
items={[tenantRoutes]}
handleSetNavbarCollapsed={handleSetNavbarCollapsed}
/>
<NavbarDropdownComponents
title={t(storeRoutes.name)}
items={[storeRoutes]}
handleSetNavbarCollapsed={handleSetNavbarCollapsed}
/>
<NavbarDropdownComponents
title={t(shopfloorRoutes.name)}
items={[shopfloorRoutes]}
handleSetNavbarCollapsed={handleSetNavbarCollapsed}
/>
<NavbarDropdownComponents
title={t(combinedEquipmentRoutes.name)}
items={[combinedEquipmentRoutes]}
handleSetNavbarCollapsed={handleSetNavbarCollapsed}
/>
<NavbarDropdownComponents
title={t(auxiliarySystemRoutes.name)}
items={[auxiliarySystemRoutes]}
handleSetNavbarCollapsed={handleSetNavbarCollapsed}
/>
<NavbarDropdownComponents
title={t(fddRoutes.name)}
items={[fddRoutes]}
handleSetNavbarCollapsed={handleSetNavbarCollapsed}
/>
<NavbarDropdownComponents
title={t(monitoringRoutes.name)}
items={[monitoringRoutes]}
handleSetNavbarCollapsed={handleSetNavbarCollapsed}
/>
<NavItem onClick={handleSetNavbarCollapsed}>
<NavLink className="nav-link" to={advancedReportingRoutes.to}>
{t(advancedReportingRoutes.name)}
</NavLink>
</NavItem>
<NavItem onClick={handleSetNavbarCollapsed}>
<NavLink className="nav-link" to={knowledgeBaseRoutes.to}>
{t(knowledgeBaseRoutes.name)}
</NavLink>
</NavItem>
</>
);
};
NavbarTopDropDownMenus.propTypes = { setNavbarCollapsed: PropTypes.func.isRequired };
export default withTranslation()(NavbarTopDropDownMenus);
export default withTranslation()(withRedirect(NavbarTopDropDownMenus));

87
web/src/components/navbar/NavbarVertical.js
View File

@ -1,10 +1,10 @@
import classNames from 'classnames';
import is from 'is_js';
import PropTypes from 'prop-types';
import React, { useContext, useEffect, useRef } from 'react';
import { Button, Collapse, Nav, Navbar } from 'reactstrap';
import React, {useContext, useEffect, useRef, useState} from 'react';
import {Button, Collapse, Nav, Navbar, NavItem} from 'reactstrap';
import bgNavbarImg from '../../assets/img/generic/bg-navbar.png';
import { navbarBreakPoint, topNavbarBreakpoint } from '../../config';
import {APIBaseURL, navbarBreakPoint, topNavbarBreakpoint} from '../../config';
import AppContext from '../../context/Context';
import routes from '../../routes';
import Flex from '../common/Flex';
@ -13,8 +13,31 @@ import NavbarTopDropDownMenus from './NavbarTopDropDownMenus';
import NavbarVerticalMenu from './NavbarVerticalMenu';
import ToggleButton from './ToggleButton';
import { withTranslation } from 'react-i18next';
import {createCookie, getCookieValue} from "../../helpers/utils";
import {toast} from "react-toastify";
import withRedirect from "../../hoc/withRedirect";
const NavbarVertical = ({ setRedirectUrl, setRedirect, navbarStyle, t }) => {
useEffect(() => {
let is_logged_in = getCookieValue('is_logged_in');
let user_name = getCookieValue('user_name');
let user_display_name = getCookieValue('user_display_name');
let user_uuid = getCookieValue('user_uuid');
let token = getCookieValue('token');
if (is_logged_in === null || !is_logged_in) {
setRedirectUrl(`/authentication/basic/login`);
setRedirect(true);
} else {
//update expires time of cookies
createCookie('is_logged_in', true, 1000 * 60 * 60 * 8);
createCookie('user_name', user_name, 1000 * 60 * 60 * 8);
createCookie('user_display_name', user_display_name, 1000 * 60 * 60 * 8);
createCookie('user_uuid', user_uuid, 1000 * 60 * 60 * 8);
createCookie('token', token, 1000 * 60 * 60 * 8);
}
});
const NavbarVertical = ({ navbarStyle, t }) => {
const navBarRef = useRef(null);
const {
@ -32,6 +55,8 @@ const NavbarVertical = ({ navbarStyle, t }) => {
HTMLClassList.add('navbar-vertical-collapsed');
}
const [ showRoutes, setShowRoutes] = useState([routes[0]]);
useEffect(() => {
if (is.windows()) {
HTMLClassList.add('windows');
@ -56,6 +81,56 @@ const NavbarVertical = ({ navbarStyle, t }) => {
}, 100);
}
};
useEffect(() => {
let isResponseOK = false;
fetch(APIBaseURL + '/menus/web', {
method: 'GET',
headers: {
"Content-type": "application/json",
"User-UUID": getCookieValue('user_uuid'),
"Token": getCookieValue('token')
},
body: null,
}).then(response => {
//console.log(response);
if (response.ok) {
isResponseOK = true;
}
return response.json();
}).then(json => {
//console.log(json);
if (isResponseOK) {
let showRoutes = [routes[0]];
for (let i = 0; i < routes.length; i++) {
let route = routes[i];
if(route.to in json && 'children' in route) {
let showChildren = [];
for (let j = 0; j < route.children.length; j++) {
const child = route.children[j];
if(json[route.to].indexOf(child.to) !== -1) {
showChildren.push(child);
}
}
route.children = showChildren;
showRoutes.push(route)
}else if(route.to in json) {
showRoutes.push(route)
}
}
setShowRoutes(showRoutes);
} else {
toast.error(json.description);
}
}).catch(err => {
console.log(err);
});
}, [ ]);
return (
<Navbar
expand={navbarBreakPoint}
@ -89,7 +164,7 @@ const NavbarVertical = ({ navbarStyle, t }) => {
}
>
<Nav navbar vertical>
<NavbarVerticalMenu routes={routes} />
<NavbarVerticalMenu routes={showRoutes} />
</Nav>
<div className="settings px-3 px-xl-0">
{isCombo && (
@ -130,4 +205,4 @@ NavbarVertical.defaultProps = {
navbarStyle: 'transparent'
};
export default withTranslation()(NavbarVertical);
export default withTranslation()(withRedirect(NavbarVertical));