129 lines
4.4 KiB
JavaScript
129 lines
4.4 KiB
JavaScript
import { useMemo, useEffect, useState, useCallback } from "react";
|
|
import { Outlet, NavLink } from "react-router-dom";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { Container, Nav, Navbar, NavDropdown } from "react-bootstrap";
|
|
import { fetchUserInfo, fetchUserAuthPages, changeBuilding, fetchSysMainSub } from "@STORE";
|
|
import Logo from "@ASSET/img/logo.png";
|
|
import { userAllAuthPages } from "@CON";
|
|
import AlarmOffcanvas from "@COM/app/AlarmOffcanvas";
|
|
import SystemOffcanvas from "@COM/app/SystemOffcanvas";
|
|
|
|
function App() {
|
|
const dispatch = useDispatch();
|
|
// user
|
|
const { userAuthPages, userInfo } = useSelector((state) => state.user);
|
|
const TopMenu = useMemo(() => {
|
|
let menu = [
|
|
userAllAuthPages.find((auth) => auth.name === "首頁"),
|
|
...userAuthPages?.map((page) => {
|
|
if (userAllAuthPages.some((auth) => auth.name === page.subName)) {
|
|
return { ...page, ...userAllAuthPages.find((auth) => auth.name === page.subName) };
|
|
}
|
|
return page;
|
|
}),
|
|
];
|
|
return menu;
|
|
}, [userAuthPages]);
|
|
|
|
// building
|
|
const { buildingList, selectedBuiFullName, selectedBuiTag } = useSelector(
|
|
(state) => state.buildingInfo,
|
|
);
|
|
const updateBuilding = (building_tag, urn_3D) => {
|
|
dispatch(changeBuilding({ building_tag, urn_3D }));
|
|
};
|
|
|
|
// system
|
|
const { mainSub } = useSelector((state) => state.system);
|
|
const [systemMenuShow, setSystemMenuShow] = useState(false);
|
|
const systemOffCanvasHandler = (e, name) => {
|
|
if (name === "系統監控") {
|
|
e.preventDefault();
|
|
setSystemMenuShow(!systemMenuShow);
|
|
}
|
|
};
|
|
useEffect(() => {
|
|
// 取得使用者資料跟建築物資料(地區及棟別)
|
|
dispatch(fetchUserAuthPages());
|
|
if (selectedBuiTag) {
|
|
dispatch(fetchSysMainSub(selectedBuiTag));
|
|
}
|
|
}, [selectedBuiTag]);
|
|
|
|
// 離開頁面就清除所有 cookie
|
|
//const removeAllCookie = useCallback(() => {
|
|
// console.log("關閉分頁時，清除所有 cookie")
|
|
// window.addEventListener("beforeunload",() => {
|
|
// document.cookie.match(/[^ =;]+(?=\=)/g).forEach(key => {
|
|
// document.cookie = `${key}=""; max-age=0`;
|
|
// }) })
|
|
//}, [])
|
|
|
|
return (
|
|
<div className="App">
|
|
{/* 主選單 */}
|
|
<Navbar bg="dark" variant="dark">
|
|
<Container fluid>
|
|
<Navbar.Brand href="#home">
|
|
<img alt="" src={Logo} width="150" className="d-inline-block align-top img-fluid" />
|
|
</Navbar.Brand>
|
|
<Nav className="w-100 d-flex justify-content-between">
|
|
<NavDropdown
|
|
title={selectedBuiFullName ? selectedBuiFullName : "選擇大樓"}
|
|
className="d-flex align-items-center fs-5"
|
|
>
|
|
<NavDropdown.Item disabled href="#">
|
|
選擇大樓
|
|
</NavDropdown.Item>
|
|
{buildingList.map(({ full_name, building_tag, urn_3D }) => (
|
|
<NavDropdown.Item
|
|
data-urn={urn_3D}
|
|
key={building_tag}
|
|
onClick={() => {
|
|
updateBuilding(building_tag, urn_3D);
|
|
}}
|
|
>
|
|
{full_name}
|
|
</NavDropdown.Item>
|
|
))}
|
|
</NavDropdown>
|
|
<div className="d-flex">
|
|
{TopMenu.map(({ name, path, icon }) => (
|
|
<NavLink
|
|
key={name}
|
|
to={path ?? "none"}
|
|
className="nav-link mx-2 d-flex flex-column align-items-center justify-content-between"
|
|
onClick={(e) => {
|
|
systemOffCanvasHandler(e, name);
|
|
}}
|
|
>
|
|
{icon}
|
|
<span className="mt-1">{name}</span>
|
|
</NavLink>
|
|
))}
|
|
</div>
|
|
<div className="d-flex align-items-center">
|
|
<AlarmOffcanvas />
|
|
<div className="mx-3 text-center">
|
|
<label className="mb-0 fs-6 position-relative">
|
|
Diamond Controls<span className="position-absolute">®</span>
|
|
</label>
|
|
<br />
|
|
<label className="mb-0 fs-6">智慧大樓管理平台</label>
|
|
</div>
|
|
</div>
|
|
</Nav>
|
|
</Container>
|
|
</Navbar>
|
|
<SystemOffcanvas
|
|
list={mainSub}
|
|
systemMenuShow={systemMenuShow}
|
|
setSystemMenuShow={setSystemMenuShow}
|
|
/>
|
|
<Outlet />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|