139 lines
4.8 KiB
TypeScript
139 lines
4.8 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import ModuleToggle from "../components/ui/ModuleToggle";
|
|
import SideBarLeft from "../components/layout/sidebarLeft/SideBarLeft";
|
|
import SideBarRight from "../components/layout/sidebarRight/SideBarRight";
|
|
import useModuleStore, { useThreeDStore } from "../store/useModuleStore";
|
|
import RealTimeVisulization from "../modules/visualization/RealTimeVisulization";
|
|
import Tools from "../components/ui/Tools";
|
|
import {
|
|
useSocketStore,
|
|
useFloorItems,
|
|
useOrganization,
|
|
useUserName,
|
|
useWallItems,
|
|
useZones,
|
|
useLoadingProgress,
|
|
useWidgetSubOption,
|
|
} from "../store/store";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { usePlayButtonStore } from "../store/usePlayButtonStore";
|
|
import MarketPlace from "../modules/market/MarketPlace";
|
|
import LoadingPage from "../components/templates/LoadingPage";
|
|
import SimulationPlayer from "../components/ui/simulation/simulationPlayer";
|
|
import KeyPressListener from "../utils/shortcutkeys/handleShortcutKeys";
|
|
import { useSelectedUserStore } from "../store/useCollabStore";
|
|
import FollowPerson from "../components/templates/FollowPerson";
|
|
import Scene from "../modules/scene/scene";
|
|
import { createHandleDrop } from "../modules/visualization/functions/handleUiDrop";
|
|
import { useSelectedZoneStore } from "../store/visualization/useZoneStore";
|
|
import { useFloatingWidget } from "../store/visualization/useDroppedObjectsStore";
|
|
import { useLogger } from "../components/ui/log/LoggerContext";
|
|
import Footer from "../components/ui/footer/Footer";
|
|
import RenderOverlay from "../components/templates/Overlay";
|
|
import LogList from "../components/ui/log/LogList";
|
|
|
|
const Project: React.FC = () => {
|
|
let navigate = useNavigate();
|
|
const logger = useLogger();
|
|
|
|
const { activeModule, setActiveModule } = useModuleStore();
|
|
const { loadingProgress } = useLoadingProgress();
|
|
const { setUserName } = useUserName();
|
|
const { setOrganization } = useOrganization();
|
|
const { setFloorItems } = useFloorItems();
|
|
const { setWallItems } = useWallItems();
|
|
const { setZones } = useZones();
|
|
|
|
useEffect(() => {
|
|
setFloorItems([]);
|
|
setWallItems([]);
|
|
setZones([]);
|
|
setActiveModule("builder");
|
|
const email = localStorage.getItem("email");
|
|
if (email) {
|
|
const Organization = email.split("@")[1].split(".")[0];
|
|
useSocketStore.getState().initializeSocket(email, Organization);
|
|
const name = localStorage.getItem("userName");
|
|
if (Organization && name) {
|
|
setOrganization(Organization);
|
|
setUserName(name);
|
|
}
|
|
logger.info("Log in success full");
|
|
} else {
|
|
navigate("/");
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
// global store
|
|
const { toggleThreeD } = useThreeDStore();
|
|
|
|
// simulation store
|
|
const { isPlaying } = usePlayButtonStore();
|
|
|
|
// collaboration store
|
|
const { selectedUser } = useSelectedUserStore();
|
|
const { isLogListVisible } = useLogger();
|
|
|
|
// real-time visualization store
|
|
const { widgetSubOption } = useWidgetSubOption();
|
|
const { visualizationSocket } = useSocketStore();
|
|
const { selectedZone } = useSelectedZoneStore();
|
|
const { setFloatingWidget } = useFloatingWidget();
|
|
|
|
return (
|
|
<div className="project-main">
|
|
{!selectedUser && (
|
|
<>
|
|
<KeyPressListener />
|
|
{loadingProgress > 0 && <LoadingPage progress={loadingProgress} />}
|
|
{!isPlaying && (
|
|
<>
|
|
{toggleThreeD && <ModuleToggle />}
|
|
<SideBarLeft />
|
|
<SideBarRight />
|
|
</>
|
|
)}
|
|
<RealTimeVisulization />
|
|
{activeModule === "market" && <MarketPlace />}
|
|
{activeModule !== "market" && <Tools />}
|
|
{isPlaying && activeModule === "simulation" && <SimulationPlayer />}
|
|
</>
|
|
)}
|
|
<div
|
|
className="scene-container"
|
|
id="real-time-vis-canvas"
|
|
style={{
|
|
height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
|
|
width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
|
|
left: isPlaying || activeModule !== "visualization" ? "0%" : "",
|
|
borderRadius:
|
|
isPlaying || activeModule !== "visualization" ? "" : "6px",
|
|
}}
|
|
role="application"
|
|
onDrop={(event) =>
|
|
createHandleDrop({
|
|
widgetSubOption,
|
|
visualizationSocket,
|
|
selectedZone,
|
|
setFloatingWidget,
|
|
event,
|
|
})
|
|
}
|
|
onDragOver={(event) => event.preventDefault()}
|
|
>
|
|
<Scene />
|
|
</div>
|
|
{selectedUser && <FollowPerson />}
|
|
{isLogListVisible && (
|
|
<RenderOverlay>
|
|
<LogList />
|
|
</RenderOverlay>
|
|
)}
|
|
<Footer />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Project;
|