added market placeCards

2025-03-26 12:32:09 +05:30
parent b585e74fcb 6971fff571
commit 9a358bc1c0
23 changed files with 967 additions and 671 deletions
--- a/app/src/components/layout/sidebarRight/SideBarRight.tsx
+++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx
@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from "react";
 import Header from "./Header";
-import useModuleStore from "../../../store/useModuleStore";
+import useModuleStore, {
+  useSubModuleStore,
+} from "../../../store/useModuleStore";
 import {
  AnalysisIcon,
  MechanicsIcon,
@@ -14,15 +16,19 @@ import GlobalProperties from "./properties/GlobalProperties";
 import AsstePropertiies from "./properties/AssetProperties";
 import Analysis from "./analysis/Analysis";
 import Simulations from "./simulation/Simulations";
+import { useSelectedActionSphere } from "../../../store/store";
+import ZoneProperties from "./properties/ZoneProperties";

 const SideBarRight: React.FC = () => {
  const { activeModule } = useModuleStore();
-  const [activeList, setActiveList] = useState("properties");
+  const [activeList] = useState("properties");
  const { toggleUI } = useToggleStore();
-
+  const { selectedActionSphere } = useSelectedActionSphere();
+  const { subModule, setSubModule } = useSubModuleStore();
  // Reset activeList whenever activeModule changes
  useEffect(() => {
-    setActiveList("properties");
+    if (activeModule !== "simulation") setSubModule("properties");
+    if (activeModule === "simulation") setSubModule("mechanics");
  }, [activeModule]);

  return (
@@ -30,37 +36,39 @@ const SideBarRight: React.FC = () => {
      <Header />
      {toggleUI && (
        <div className="sidebar-actions-container">
+          {/* {activeModule === "builder" && ( */}
          <div
            className={`sidebar-action-list ${
-              activeList === "properties" ? "active" : ""
+              subModule === "properties" ? "active" : ""
            }`}
-            onClick={() => setActiveList("properties")}
+            onClick={() => setSubModule("properties")}
          >
-            <PropertiesIcon isActive={activeList === "properties"} />
+            <PropertiesIcon isActive={subModule === "properties"} />
          </div>
+          {/* )} */}
          {activeModule === "simulation" && (
            <>
              <div
                className={`sidebar-action-list ${
-                  activeList === "mechanics" ? "active" : ""
+                  subModule === "mechanics" ? "active" : ""
                }`}
-                onClick={() => setActiveList("mechanics")}
+                onClick={() => setSubModule("mechanics")}
              >
                <MechanicsIcon isActive={activeList === "mechanics"} />
              </div>
              <div
                className={`sidebar-action-list ${
-                  activeList === "simulations" ? "active" : ""
+                  subModule === "simulations" ? "active" : ""
                }`}
-                onClick={() => setActiveList("simulations")}
+                onClick={() => setSubModule("simulations")}
              >
                <SimulationIcon isActive={activeList === "simulations"} />
              </div>
              <div
                className={`sidebar-action-list ${
-                  activeList === "analysis" ? "active" : ""
+                  subModule === "analysis" ? "active" : ""
                }`}
-                onClick={() => setActiveList("analysis")}
+                onClick={() => setSubModule("analysis")}
              >
                <AnalysisIcon isActive={activeList === "analysis"} />
              </div>
@@ -75,6 +83,7 @@ const SideBarRight: React.FC = () => {
          <div className="sidebar-right-container">
            <div className="sidebar-right-content-container">
              <GlobalProperties />
+              {/* <ZoneProperties /> */}
              {/* <AsstePropertiies /> */}
            </div>
          </div>
@@ -84,14 +93,21 @@ const SideBarRight: React.FC = () => {

      {toggleUI && activeModule === "simulation" && (
        <>
-          {activeList === "mechanics" && (
+          {subModule === "mechanics" && selectedActionSphere && (
            <div className="sidebar-right-container">
              <div className="sidebar-right-content-container">
                <MachineMechanics />
              </div>
            </div>
          )}
-          {activeList === "analysis" && (
+          {subModule === "mechanics" && !selectedActionSphere && (
+            <div className="sidebar-right-container">
+              <div className="sidebar-right-content-container">
+                <MachineMechanics />
+              </div>
+            </div>
+          )}
+          {subModule === "analysis" && (
            <div className="sidebar-right-container">
              <div className="sidebar-right-content-container">
                <Analysis />
--- a/app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx
+++ b/app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import { EyeDroperIcon } from "../../../icons/ExportCommonIcons";
+
+interface PositionInputProps {
+  onChange: (value: string) => void; // Callback for value change
+  header: string;
+  placeholder?: string; // Optional placeholder
+  type?: string; // Input type (e.g., text, number, email)
+}
+
+const Vector3Input: React.FC<PositionInputProps> = ({
+  onChange,
+  header,
+  placeholder = "Enter value", // Default placeholder
+  type = "number", // Default type
+}) => {
+  return (
+    <div className="custom-input-container">
+      <div className="header">
+        {header}{" "}
+        <div className="eyedrop-button">
+          <EyeDroperIcon isActive={false} />
+        </div>
+      </div>
+      <div className="inputs-container">
+        <div className="input-container">
+          <div className="custom-input-label">X : </div>
+          <input
+            className="custom-input-field"
+            type={type}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder}
+          />
+        </div>
+        <div className="input-container">
+          <div className="custom-input-label">Y : </div>
+          <input
+            className="custom-input-field"
+            type={type}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder}
+            min={0}
+          />
+        </div>
+        <div className="input-container">
+          <div className="custom-input-label">Z : </div>
+          <input
+            className="custom-input-field"
+            type={type}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Vector3Input;
--- a/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx
@@ -14,8 +14,8 @@ import EyeDropInput from "../../../ui/inputs/EyeDropInput";
 import { useSelectedActionSphere } from "../../../../store/store";

 const MachineMechanics: React.FC = () => {
-  const { selectedActionSphere, setSelectedActionSphere } = useSelectedActionSphere();
-  console.log('selectedActionSphere: ', selectedActionSphere);
+  const { selectedActionSphere } = useSelectedActionSphere();
+  console.log("selectedActionSphere: ", selectedActionSphere);
  const [actionList, setActionList] = useState<string[]>([]);
  const [triggerList, setTriggerList] = useState<string[]>([]);
  const [selectedItem, setSelectedItem] = useState<{
@@ -71,7 +71,9 @@ const MachineMechanics: React.FC = () => {

  return (
    <div className="machine-mechanics-container">
-      <div className="machine-mechanics-header">{selectedActionSphere.path.modelName}</div>
+      <div className="machine-mechanics-header">
+        {selectedActionSphere?.path?.modelName || "path name not found"}
+      </div>
      {/* <div className="process-list-container">
        <div className="label">Process:</div>
        <RegularDropDown
@@ -100,11 +102,12 @@ const MachineMechanics: React.FC = () => {
              {actionList.map((action, index) => (
                <div
                  key={index}
-                  className={`list-item ${selectedItem?.type === "action" &&
+                  className={`list-item ${
+                    selectedItem?.type === "action" &&
                    selectedItem.name === action
-                    ? "active"
-                    : ""
-                    }`}
+                      ? "active"
+                      : ""
+                  }`}
                >
                  <div
                    className="value"
@@ -146,11 +149,12 @@ const MachineMechanics: React.FC = () => {
              {triggerList.map((trigger, index) => (
                <div
                  key={index}
-                  className={`list-item ${selectedItem?.type === "trigger" &&
+                  className={`list-item ${
+                    selectedItem?.type === "trigger" &&
                    selectedItem.name === trigger
-                    ? "active"
-                    : ""
-                    }`}
+                      ? "active"
+                      : ""
+                  }`}
                >
                  <div
                    className="value"
@@ -188,7 +192,7 @@ const MachineMechanics: React.FC = () => {
                label="Speed"
                value=""
                activeOption=".mm"
-                onChange={() => { }}
+                onChange={() => {}}
              />
              <EyeDropInput />
            </>
--- a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import RenameInput from "../../../ui/inputs/RenameInput";
+import Vector3Input from "../customInput/Vector3Input";
+
+const ZoneProperties = () => {
+  return (
+    <div className="zone-properties-container">
+      <div className="header">
+        <RenameInput value="Selected Zone Name" />
+      </div>
+      <Vector3Input onChange={()=>{}} header="Target"/>
+      <Vector3Input onChange={()=>{}} header="Position"/>
+    </div>
+  );
+};
+
+export default ZoneProperties;
--- a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx
+++ b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx
@@ -28,7 +28,7 @@ const DropList: React.FC<DropListProps> = ({ val }) => {
        }}
      >
        {val.pathName}
-        <div className="arrow-container">
+        <div className={`arrow-container${openDrop ? " active" : ""}`}>
          <ArrowIcon />
        </div>
      </div>
@@ -87,8 +87,9 @@ const Simulations: React.FC = () => {
              {productsList.map((action, index) => (
                <div
                  key={index}
-                  className={`list-item ${selectedItem === action ? "active" : ""
-                    }`}
+                  className={`list-item ${
+                    selectedItem === action ? "active" : ""
+                  }`}
                >
                  <div
                    className="value"