Merge remote-tracking branch 'origin/simulation-agv' into simulation

2025-03-29 18:15:41 +05:30
parent 5564eecf76 9fb0b78e45
commit df571e18fb
19 changed files with 509 additions and 172 deletions
--- a/app/src/components/layout/sidebarLeft/visualization/Templates.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/Templates.tsx
@@ -5,7 +5,6 @@ const Templates = () => {
  const { templates, removeTemplate } = useTemplateStore();
  const { setSelectedZone } = useSelectedZoneStore();

-  console.log("templates: ", templates);
  const handleDeleteTemplate = (id: string) => {
    removeTemplate(id);
  };
--- a/app/src/components/layout/sidebarRight/Header.tsx
+++ b/app/src/components/layout/sidebarRight/Header.tsx
@@ -1,14 +1,17 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { AppDockIcon } from "../../icons/HeaderIcons";
-import orgImg from "../../../assets/orgTemp.png"
+import orgImg from "../../../assets/orgTemp.png";
+import { useActiveUsers } from "../../../store/store";
+import { getAvatarColor } from "../../../modules/collaboration/users/functions/getAvatarColor";
+import { ActiveUser } from "../../../types/users";

 const Header: React.FC = () => {
-  const guestUsers = [
-    { value: "Nazria", color: "#43C06D" },
-    { value: "Name1", color: "#0050EB" },
-    { value: "Abigail", color: "#FF6600" },
-    { value: "Jack", color: "#488EF6" },
-  ]; // Example guest users array
+  const { activeUsers } = useActiveUsers();
+  const userName = localStorage.getItem("userName") || "Anonymous";
+
+  const guestUsers: ActiveUser[] = activeUsers.filter(
+    (user: ActiveUser) => user.userName !== userName
+  );

  return (
    <div className="header-container">
@@ -25,18 +28,23 @@ const Header: React.FC = () => {
            <div className="other-guest">+{guestUsers.length - 3}</div>
          )}
          {guestUsers.slice(0, 3).map((user, index) => (
-            <div
-              key={index}
-              className="user-profile"
-              style={{ background: user.color }}
-            >
-              {user.value[0]}
-            </div>
+            <>
+              <div
+                key={index}
+                className="user-profile"
+                style={{ background: getAvatarColor(index) }}
+              >
+                {user.userName[0]}
+              </div>
+            </>
          ))}
        </div>
        <div className="user-profile-container">
-          <div className="user-profile" style={{ background: "#48AC2A" }}>
-            V
+          <div
+            className="user-profile"
+            style={{ background: "var(--accent-color)" }}
+          >
+            {userName[0]}
          </div>
          <div className="user-organization">
            <img src={orgImg} alt="" />
--- a/app/src/components/layout/sidebarRight/SideBarRight.tsx
+++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx
@@ -14,7 +14,10 @@ import ConveyorMechanics from "./mechanics/ConveyorMechanics";
 import Visualization from "./visualization/Visualization";
 import Analysis from "./analysis/Analysis";
 import Simulations from "./simulation/Simulations";
-import { useSelectedActionSphere } from "../../../store/store";
+import {
+  useSelectedActionSphere,
+  useselectedFloorItem,
+} from "../../../store/store";
 import GlobalProperties from "./properties/GlobalProperties";
 import AsstePropertiies from "./properties/AssetProperties";
 import ZoneProperties from "./properties/ZoneProperties";
@@ -25,6 +28,7 @@ const SideBarRight: React.FC = () => {
  const { toggleUI } = useToggleStore();
  const { selectedActionSphere } = useSelectedActionSphere();
  const { subModule, setSubModule } = useSubModuleStore();
+  const { selectedFloorItem } = useselectedFloorItem();
  // Reset activeList whenever activeModule changes
  useEffect(() => {
    if (activeModule !== "simulation") setSubModule("properties");
@@ -38,8 +42,9 @@ const SideBarRight: React.FC = () => {
        <div className="sidebar-actions-container">
          {/* {activeModule === "builder" && ( */}
          <div
-            className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
-              }`}
+            className={`sidebar-action-list ${
+              subModule === "properties" ? "active" : ""
+            }`}
            onClick={() => setSubModule("properties")}
          >
            <PropertiesIcon isActive={subModule === "properties"} />
@@ -48,22 +53,25 @@ const SideBarRight: React.FC = () => {
          {activeModule === "simulation" && (
            <>
              <div
-                className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""
-                  }`}
+                className={`sidebar-action-list ${
+                  subModule === "mechanics" ? "active" : ""
+                }`}
                onClick={() => setSubModule("mechanics")}
              >
                <MechanicsIcon isActive={subModule === "mechanics"} />
              </div>
              <div
-                className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""
-                  }`}
+                className={`sidebar-action-list ${
+                  subModule === "simulations" ? "active" : ""
+                }`}
                onClick={() => setSubModule("simulations")}
              >
                <SimulationIcon isActive={subModule === "simulations"} />
              </div>
              <div
-                className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""
-                  }`}
+                className={`sidebar-action-list ${
+                  subModule === "analysis" ? "active" : ""
+                }`}
                onClick={() => setSubModule("analysis")}
              >
                <AnalysisIcon isActive={subModule === "analysis"} />
@@ -75,12 +83,21 @@ const SideBarRight: React.FC = () => {
      {/* process builder */}
      {toggleUI &&
        subModule === "properties" &&
-        activeModule !== "visualization" && (
+        activeModule !== "visualization" &&
+        !selectedFloorItem && (
          <div className="sidebar-right-container">
            <div className="sidebar-right-content-container">
              <GlobalProperties />
-              {/* <ZoneProperties /> */}
-              {/* <AsstePropertiies /> */}
+            </div>
+          </div>
+        )}
+      {toggleUI &&
+        subModule === "properties" &&
+        activeModule !== "visualization" &&
+        selectedFloorItem && (
+          <div className="sidebar-right-container">
+            <div className="sidebar-right-content-container">
+              <AsstePropertiies />
            </div>
          </div>
        )}
@@ -89,9 +106,7 @@ const SideBarRight: React.FC = () => {
        activeModule === "builder" && (
          <div className="sidebar-right-container">
            <div className="sidebar-right-content-container">
-              {/* <GlobalProperties /> */}
              <ZoneProperties />
-              {/* <AsstePropertiies /> */}
            </div>
          </div>
        )}
@@ -99,20 +114,24 @@ const SideBarRight: React.FC = () => {

      {toggleUI && activeModule === "simulation" && (
        <>
-          {subModule === "mechanics" && selectedActionSphere && selectedActionSphere.path.type === "Conveyor" && (
-            <div className="sidebar-right-container">
-              <div className="sidebar-right-content-container">
-                <ConveyorMechanics />
+          {subModule === "mechanics" &&
+            selectedActionSphere &&
+            selectedActionSphere.path.type === "Conveyor" && (
+              <div className="sidebar-right-container">
+                <div className="sidebar-right-content-container">
+                  <ConveyorMechanics />
+                </div>
              </div>
-            </div>
-          )}
-          {subModule === "mechanics" && selectedActionSphere && selectedActionSphere.path.type === "Vehicle" && (
-            <div className="sidebar-right-container">
-              <div className="sidebar-right-content-container">
-                <VehicleMechanics />
+            )}
+          {subModule === "mechanics" &&
+            selectedActionSphere &&
+            selectedActionSphere.path.type === "Vehicle" && (
+              <div className="sidebar-right-container">
+                <div className="sidebar-right-content-container">
+                  <VehicleMechanics />
+                </div>
              </div>
-            </div>
-          )}
+            )}
          {subModule === "mechanics" && !selectedActionSphere && (
            <div className="sidebar-right-container">
              <div className="sidebar-right-content-container">
--- a/app/src/components/layout/sidebarRight/customInput/PositionInputs.tsx
+++ b/app/src/components/layout/sidebarRight/customInput/PositionInputs.tsx
@@ -4,12 +4,16 @@ interface PositionInputProps {
  onChange: (value: string) => void; // Callback for value change
  placeholder?: string; // Optional placeholder
  type?: string; // Input type (e.g., text, number, email)
+  value1?: number;
+  value2?: number;
 }

 const PositionInput: React.FC<PositionInputProps> = ({
  onChange,
  placeholder = "Enter value", // Default placeholder
  type = "number", // Default type
+  value1 = "number",
+  value2 = "number",
 }) => {
  return (
    <div className="custom-input-container">
@@ -22,6 +26,7 @@ const PositionInput: React.FC<PositionInputProps> = ({
            type={type}
            onChange={(e) => onChange(e.target.value)}
            placeholder={placeholder}
+            value={value2}
          />
        </div>
        <div className="input-container">
@@ -31,6 +36,7 @@ const PositionInput: React.FC<PositionInputProps> = ({
            type={type}
            onChange={(e) => onChange(e.target.value)}
            placeholder={placeholder}
+            value={value1}
          />
        </div>
      </div>
--- a/app/src/components/layout/sidebarRight/customInput/RotationInput.tsx
+++ b/app/src/components/layout/sidebarRight/customInput/RotationInput.tsx
@@ -4,17 +4,19 @@ interface RotationInputProps {
  onChange: (value: string) => void; // Callback for value change
  placeholder?: string; // Optional placeholder
  type?: string; // Input type (e.g., text, number, email)
+  value?: number;
 }

 const RotationInput: React.FC<RotationInputProps> = ({
  onChange,
  placeholder = "Enter value", // Default placeholder
  type = "number", // Default type
+  value = "number",
 }) => {
  return (
    <div className="custom-input-container">
      <div className="header">Rotation</div>
-      <div className="inputs-container"  style={{display: "block"}}>
+      <div className="inputs-container" style={{ display: "block" }}>
        <div className="input-container">
          <div className="custom-input-label">Rotate : </div>
          <input
@@ -22,6 +24,7 @@ const RotationInput: React.FC<RotationInputProps> = ({
            type={type}
            onChange={(e) => onChange(e.target.value)}
            placeholder={placeholder}
+            value={value}
          />
        </div>
      </div>
--- a/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx
@@ -1,9 +1,11 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import InputToggle from "../../../ui/inputs/InputToggle";
 import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
 import { RemoveIcon } from "../../../icons/ExportCommonIcons";
 import PositionInput from "../customInput/PositionInputs";
 import RotationInput from "../customInput/RotationInput";
+import { useselectedFloorItem } from "../../../../store/store";
+import * as THREE from "three";

 interface UserData {
  id: number; // Unique identifier for the user data
@@ -14,7 +16,13 @@ interface UserData {
 const AssetProperties: React.FC = () => {
  const [userData, setUserData] = useState<UserData[]>([]); // State to track user data
  const [nextId, setNextId] = useState(1); // Unique ID for new entries
+  const { selectedFloorItem } = useselectedFloorItem();
+  let xValue = selectedFloorItem.position.x;
+  let zValue = selectedFloorItem.position.z;
+  let rotationRad = selectedFloorItem.rotation.y;
+  let rotationDeg = THREE.MathUtils.radToDeg(rotationRad);

+  // useEffect(() => {}, [selectedFloorItem]);
  // Function to handle adding new user data
  const handleAddUserData = () => {
    const newUserData: UserData = {
@@ -45,12 +53,16 @@ const AssetProperties: React.FC = () => {
  return (
    <div className="asset-properties-container">
      {/* Name */}
-      <div className="header">Selected Object</div>
+      <div className="header">{selectedFloorItem.userData.name}</div>

      <div className="split"></div>

-      <PositionInput onChange={() => { }} />
-      <RotationInput onChange={() => { }} />
+      <PositionInput
+        onChange={() => {}}
+        value1={xValue.toFixed(5)}
+        value2={zValue.toFixed(5)}
+      />
+      <RotationInput onChange={() => {}} value={rotationDeg} />

      <div className="split"></div>

--- a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
@@ -3,8 +3,31 @@ import InputRange from "../../../ui/inputs/InputRange";
 import InputToggle from "../../../ui/inputs/InputToggle";
 import { AI_Icon } from "../../../icons/ExportCommonIcons";
 import LabeledButton from "../../../ui/inputs/LabledButton";
+import {
+  useAzimuth,
+  useElevation,
+  useRenderDistance,
+  useResetCamera,
+  useRoofVisibility,
+  useSelectedWallItem,
+  useShadows,
+  useSocketStore,
+  useToggleView,
+  useWallVisibility,
+} from "../../../../store/store";
+import { setEnvironment } from "../../../../services/factoryBuilder/environment/setEnvironment";

 const GlobalProperties: React.FC = () => {
+  const { toggleView, setToggleView } = useToggleView();
+  const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
+  const { roofVisibility, setRoofVisibility } = useRoofVisibility();
+  const { wallVisibility, setWallVisibility } = useWallVisibility();
+  const { shadows, setShadows } = useShadows();
+  const { resetCamera, setResetCamera } = useResetCamera();
+  const { elevation, setElevation } = useElevation();
+  const { azimuth, setAzimuth } = useAzimuth();
+  const { renderDistance, setRenderDistance } = useRenderDistance();
+  const { socket } = useSocketStore();
  const [limitDistance, setLimitDistance] = useState(false);
  const [distance, setDistance] = useState<number>(5);

@@ -23,6 +46,93 @@ const GlobalProperties: React.FC = () => {
  function updateGridDistance(value: number) {
    setGridDistance(value);
  }
+  // Function to toggle roof visibility
+  const changeRoofVisibility = async () => {
+    const email = localStorage.getItem("email");
+    const organization = email!.split("@")[1].split(".")[0];
+
+    //using REST
+    const data = await setEnvironment(
+      organization,
+      localStorage.getItem("userId")!,
+      wallVisibility,
+      !roofVisibility,
+      shadows
+    );
+    // console.log('data: ', data);
+
+    //using Socket
+    // const visData = {
+    //   organization: organization,
+    //   userId: localStorage.getItem('userId')!,
+    //   wallVisibility: wallVisibility,
+    //   roofVisibility: !roofVisibility,
+    //   shadowVisibility: shadows,
+    //   socketId: socket.id
+    // };
+    // socket.emit('v1:Environment:set', visData)
+
+    setRoofVisibility(!roofVisibility); // Toggle roof visibility
+  };
+  // Function to toggle wall visibility
+  const changeWallVisibility = async () => {
+    const email = localStorage.getItem("email");
+    const organization = email!.split("@")[1].split(".")[0];
+    //using REST
+    const data = await setEnvironment(
+      organization,
+      localStorage.getItem("userId")!,
+      !wallVisibility,
+      roofVisibility,
+      shadows
+    );
+    // console.log('data: ', data);
+
+    //using Socket
+    // const visData = {
+    //   organization: organization,
+    //   userId: localStorage.getItem('userId')!,
+    //   wallVisibility: !wallVisibility,
+    //   roofVisibility: roofVisibility,
+    //   shadowVisibility: shadows,
+    //   socketId: socket.id
+    // };
+    // socket.emit('v1:Environment:set', visData)
+
+    setWallVisibility(!wallVisibility); // Toggle wall visibility
+  };
+
+  const shadowVisibility = async () => {
+    const email = localStorage.getItem("email");
+    const organization = email!.split("@")[1].split(".")[0];
+    //using REST
+    const data = await setEnvironment(
+      organization,
+      localStorage.getItem("userId")!,
+      wallVisibility,
+      roofVisibility,
+      !shadows
+    );
+    // console.log('data: ', data);
+
+    //using Socket
+    // const visData = {
+    //   organization: organization,
+    //   userId: localStorage.getItem('userId')!,
+    //   wallVisibility: wallVisibility,
+    //   roofVisibility: roofVisibility,
+    //   shadowVisibility: !shadows,
+    //   socketId: socket.id
+    // };
+    // socket.emit('v1:Environment:set', visData)
+
+    setShadows(!shadows);
+  };
+  const toggleResetCamera = () => {
+    if (!toggleView) {
+      setResetCamera(true); // Trigger reset camera action
+    }
+  };

  return (
    <div className="global-properties-container">
@@ -34,10 +144,29 @@ const GlobalProperties: React.FC = () => {

      <div className="split"></div>

-      <InputToggle inputKey="1" label="Roof Visibility" />
-      <InputToggle inputKey="2" label="Wall Visibility" />
-      <InputToggle inputKey="3" label="Shadows Visibility" />
-      <LabeledButton label="Reset Camera" onClick={() => {}} value="Reset"/>
+      <InputToggle
+        value={roofVisibility}
+        inputKey="1"
+        label="Roof Visibility"
+        onClick={changeRoofVisibility}
+      />
+      <InputToggle
+        value={wallVisibility}
+        inputKey="2"
+        label="Wall Visibility"
+        onClick={changeWallVisibility}
+      />
+      <InputToggle
+        value={shadows}
+        inputKey="3"
+        label="Shadows Visibility"
+        onClick={shadowVisibility}
+      />
+      <LabeledButton
+        label="Reset Camera"
+        onClick={toggleResetCamera}
+        value="Reset"
+      />

      <div className="split"></div>