101 lines
3.3 KiB
TypeScript
101 lines
3.3 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import Header from "./Header";
|
|
import useModuleStore from "../../../store/useModuleStore";
|
|
import {
|
|
AnalysisIcon,
|
|
MechanicsIcon,
|
|
PropertiesIcon,
|
|
} from "../../icons/SimulationIcons";
|
|
import useToggleStore from "../../../store/useUIToggleStore";
|
|
import MachineMechanics from "./mechanics/MachineMechanics";
|
|
import Visualization from "./visualization/Visualization";
|
|
import GlobalProperties from "./properties/GlobalProperties";
|
|
import AsstePropertiies from "./properties/AssetProperties";
|
|
import Analysis from "./analysis/Analysis";
|
|
|
|
const SideBarRight: React.FC = () => {
|
|
const { activeModule } = useModuleStore();
|
|
const [activeList, setActiveList] = useState("properties");
|
|
const { toggleUI } = useToggleStore();
|
|
|
|
// Reset activeList whenever activeModule changes
|
|
useEffect(() => {
|
|
setActiveList("properties");
|
|
}, [activeModule]);
|
|
|
|
return (
|
|
<div className="sidebar-right-wrapper">
|
|
<Header />
|
|
{toggleUI && (
|
|
<div className="sidebar-actions-container">
|
|
<div
|
|
className={`sidebar-action-list ${
|
|
activeList === "properties" ? "active" : ""
|
|
}`}
|
|
onClick={() => setActiveList("properties")}
|
|
>
|
|
<PropertiesIcon isActive={activeList === "properties"} />
|
|
</div>
|
|
{activeModule === "simulation" && (
|
|
<>
|
|
<div
|
|
className={`sidebar-action-list ${
|
|
activeList === "mechanics" ? "active" : ""
|
|
}`}
|
|
onClick={() => setActiveList("mechanics")}
|
|
>
|
|
<MechanicsIcon isActive={activeList === "mechanics"} />
|
|
</div>
|
|
<div
|
|
className={`sidebar-action-list ${
|
|
activeList === "analysis" ? "active" : ""
|
|
}`}
|
|
onClick={() => setActiveList("analysis")}
|
|
>
|
|
<AnalysisIcon isActive={activeList === "analysis"} />
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
{/* process builder */}
|
|
{toggleUI &&
|
|
activeList === "properties" &&
|
|
activeModule !== "visualization" && (
|
|
<div className="sidebar-right-container">
|
|
<div className="sidebar-right-content-container">
|
|
<GlobalProperties />
|
|
{/* <AsstePropertiies /> */}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* simulation */}
|
|
|
|
{toggleUI && activeModule === "simulation" && (
|
|
<>
|
|
{activeList === "mechanics" && (
|
|
<div className="sidebar-right-container">
|
|
<div className="sidebar-right-content-container">
|
|
<MachineMechanics />
|
|
</div>
|
|
</div>
|
|
)}
|
|
{activeList === "analysis" && (
|
|
<div className="sidebar-right-container">
|
|
<div className="sidebar-right-content-container">
|
|
<Analysis />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* realtime visualization */}
|
|
{toggleUI && activeModule === "visualization" && <Visualization />}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SideBarRight;
|