updated visualization panel ui and added outer click

2025-04-08 18:34:21 +05:30
parent 61f73369d8 daa507e464
commit ed6edef24e
39 changed files with 2604 additions and 1877 deletions
--- a/app/src/components/layout/sidebarLeft/visualization/Templates.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/Templates.tsx
@@ -3,13 +3,10 @@ import { useDroppedObjectsStore } from "../../../../store/useDroppedObjectsStore
 import useTemplateStore from "../../../../store/useTemplateStore";
 import { useSelectedZoneStore } from "../../../../store/useZoneStore";
 import { getTemplateData } from "../../../../services/realTimeVisulization/zoneData/getTemplate";
-import { deleteTemplateApi } from "../../../../services/realTimeVisulization/zoneData/deleteTemplate";
-import { loadTempleteApi } from "../../../../services/realTimeVisulization/zoneData/loadTemplate";
 import { useSocketStore } from "../../../../store/store";

 const Templates = () => {
-  const { templates, removeTemplate } = useTemplateStore();
-  const { setTemplates } = useTemplateStore();
+  const { templates, removeTemplate, setTemplates } = useTemplateStore();
  const { setSelectedZone, selectedZone } = useSelectedZoneStore();
  const { visualizationSocket } = useSocketStore();

@@ -35,15 +32,11 @@ const Templates = () => {
      let deleteTemplate = {
        organization: organization,
        templateID: id,
-      }
+      };
      if (visualizationSocket) {
-        visualizationSocket.emit("v2:viz-template:deleteTemplate", deleteTemplate)
+        visualizationSocket.emit("v2:viz-template:deleteTemplate", deleteTemplate);
      }
      removeTemplate(id);
-      // let response = await deleteTemplateApi(id, organization);
-
-      // if (response.message === "Template deleted successfully") {
-      // }
    } catch (error) {
      console.error("Error deleting template:", error);
    }
@@ -60,114 +53,54 @@ const Templates = () => {
        organization: organization,
        zoneId: selectedZone.zoneId,
        templateID: template.id,
-      }
-      console.log('template: ', template);
-      console.log('loadingTemplate: ', loadingTemplate);
+      };

      if (visualizationSocket) {
-        visualizationSocket.emit("v2:viz-template:addToZone", loadingTemplate)
+        visualizationSocket.emit("v2:viz-template:addToZone", loadingTemplate);
      }
-      // let response = await loadTempleteApi(template.id, selectedZone.zoneId, organization);

-      // if (response.message === "Template placed in Zone") {
-        setSelectedZone({
-          panelOrder: template.panelOrder,
-          activeSides: Array.from(new Set(template.panelOrder)), // No merging with previous `activeSides`
-          widgets: template.widgets,
+      setSelectedZone({
+        panelOrder: template.panelOrder,
+        activeSides: Array.from(new Set(template.panelOrder)), // No merging with previous `activeSides`
+        widgets: template.widgets,
+      });
+
+      useDroppedObjectsStore.getState().setZone(selectedZone.zoneName, selectedZone.zoneId);
+
+      if (Array.isArray(template.floatingWidget)) {
+        template.floatingWidget.forEach((val: any) => {
+          useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, val);
        });
-
-        useDroppedObjectsStore.getState().setZone(selectedZone.zoneName, selectedZone.zoneId);
-
-        if (Array.isArray(template.floatingWidget)) {
-          template.floatingWidget.forEach((val: any) => {
-            useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, val);
-          });
-        }
-      // }
+      }
    } catch (error) {
      console.error("Error loading template:", error);
    }
  };

-
  return (
-    <div
-      className="template-list"
-      style={{
-        display: "grid",
-        gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
-        gap: "1rem",
-        padding: "1rem",
-      }}
-    >
+    <div className="template-list">
      {templates.map((template) => (
-        <div
-          key={template.id}
-          className="template-item"
-          style={{
-            border: "1px solid #e0e0e0",
-            borderRadius: "8px",
-            padding: "1rem",
-            transition: "box-shadow 0.3s ease",
-          }}
-        >
+        <div key={template.id} className="template-item">
          {template?.snapshot && (
-            <div style={{ position: "relative", paddingBottom: "56.25%" }}>
-              {" "}
-              {/* 16:9 aspect ratio */}
+            <div className="template-image-container">
              <img
-                src={template.snapshot} // Corrected from template.image to template.snapshot
+                src={template.snapshot}
                alt={`${template.name} preview`}
-                style={{
-                  position: "absolute",
-                  width: "100%",
-                  height: "100%",
-                  objectFit: "contain",
-                  borderRadius: "4px",
-                  cursor: "pointer",
-                  transition: "transform 0.3s ease",
-                  // ':hover': {
-                  //   transform: 'scale(1.05)'
-                  // }
-                }}
+                className="template-image"
                onClick={() => handleLoadTemplate(template)}
              />
            </div>
          )}
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center",
-              marginTop: "0.5rem",
-            }}
-          >
+          <div className="template-details">
            <div
              onClick={() => handleLoadTemplate(template)}
-              style={{
-                cursor: "pointer",
-                fontWeight: "500",
-                // ':hover': {
-                //   textDecoration: 'underline'
-                // }
-              }}
+              className="template-name"
            >
              {template.name}
            </div>
            <button
              onClick={() => handleDeleteTemplate(template.id)}
-              style={{
-                padding: "0.25rem 0.5rem",
-                background: "#ff4444",
-                color: "white",
-                border: "none",
-                borderRadius: "4px",
-                cursor: "pointer",
-                transition: "opacity 0.3s ease",
-                // ':hover': {
-                //   opacity: 0.8
-                // }
-              }}
+              className="delete-button"
              aria-label="Delete template"
            >
              Delete
@@ -176,14 +109,7 @@ const Templates = () => {
        </div>
      ))}
      {templates.length === 0 && (
-        <div
-          style={{
-            textAlign: "center",
-            color: "#666",
-            padding: "2rem",
-            gridColumn: "1 / -1",
-          }}
-        >
+        <div className="no-templates">
          No saved templates yet. Create one in the visualization view!
        </div>
      )}
@@ -192,4 +118,3 @@ const Templates = () => {
 };

 export default Templates;
-
--- a/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx
@@ -46,7 +46,7 @@ const WidgetsFloating = () => {
      ))} */}
      {/* Floating 1 */}
      <SimpleCard
-        header={"Today’s Money"}
+        header={"Today’s Earnings"}
        icon={WalletIcon}
        value={"$53,000"}
        per={"+55%"}
--- a/app/src/components/layout/sidebarRight/SideBarRight.tsx
+++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx
@@ -22,6 +22,8 @@ import GlobalProperties from "./properties/GlobalProperties";
 import AsstePropertiies from "./properties/AssetProperties";
 import ZoneProperties from "./properties/ZoneProperties";
 import VehicleMechanics from "./mechanics/VehicleMechanics";
+import StaticMachineMechanics from "./mechanics/StaticMachineMechanics";
+import ArmBotMechanics from "./mechanics/ArmBotMechanics";

 const SideBarRight: React.FC = () => {
  const { activeModule } = useModuleStore();
@@ -42,9 +44,8 @@ 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"} />
@@ -53,25 +54,22 @@ 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"} />
@@ -132,10 +130,28 @@ const SideBarRight: React.FC = () => {
                </div>
              </div>
            )}
+          {subModule === "mechanics" &&
+            selectedActionSphere &&
+            selectedActionSphere.path.type === "StaticMachine" && (
+              <div className="sidebar-right-container">
+                <div className="sidebar-right-content-container">
+                  <StaticMachineMechanics /> 
+                </div>
+              </div>
+            )}
+          {subModule === "mechanics" &&
+            selectedActionSphere &&
+            selectedActionSphere.path.type === "ArmBot" && (
+              <div className="sidebar-right-container">
+                <div className="sidebar-right-content-container">
+                  <ArmBotMechanics /> 
+                </div>
+              </div>
+            )}
          {subModule === "mechanics" && !selectedActionSphere && (
            <div className="sidebar-right-container">
              <div className="sidebar-right-content-container">
-                <ConveyorMechanics />
+                <ConveyorMechanics /> {/*  default */}
              </div>
            </div>
          )}
--- a/app/src/components/layout/sidebarRight/mechanics/ArmBotMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/mechanics/ArmBotMechanics.tsx
@@ -0,0 +1,90 @@
+import React, { useRef, useMemo } from "react";
+import { InfoIcon } from "../../../icons/ExportCommonIcons";
+import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
+import { useEditingPoint, useEyeDropMode, usePreviewPosition, useSelectedActionSphere, useSimulationStates, useSocketStore } from "../../../../store/store";
+import * as Types from '../../../../types/world/worldTypes';
+import PositionInput from "../customInput/PositionInputs";
+import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt";
+
+const ArmBotMechanics: React.FC = () => {
+    const { selectedActionSphere } = useSelectedActionSphere();
+    const { simulationStates, setSimulationStates } = useSimulationStates();
+    const { socket } = useSocketStore();
+
+    const propertiesContainerRef = useRef<HTMLDivElement>(null);
+
+    const { selectedPoint, connectedPointUuids } = useMemo(() => {
+        if (!selectedActionSphere?.points?.uuid) return { selectedPoint: null, connectedPointUuids: [] };
+
+        const vehiclePaths = simulationStates.filter(
+            (path): path is Types.ArmBotEventsSchema => path.type === "ArmBot"
+        );
+
+        const points = vehiclePaths.find(
+            (path) => path.points.uuid === selectedActionSphere.points.uuid
+        )?.points;
+
+        if (!points) return { selectedPoint: null, connectedPointUuids: [] };
+
+        const connectedUuids: string[] = [];
+        if (points.connections?.targets) {
+            points.connections.targets.forEach(target => {
+                connectedUuids.push(target.pointUUID);
+            });
+        }
+
+        return {
+            selectedPoint: points,
+            connectedPointUuids: connectedUuids
+        };
+    }, [selectedActionSphere, simulationStates]);
+
+    const updateBackend = async (updatedPath: Types.ArmBotEventsSchema | undefined) => {
+        if (!updatedPath) return;
+        const email = localStorage.getItem("email");
+        const organization = email ? email.split("@")[1].split(".")[0] : "";
+
+        // await setEventApi(
+        //     organization,
+        //     updatedPath.modeluuid,
+        //     { type: "ArmBot", points: updatedPath.points }
+        // );
+
+        const data = {
+            organization: organization,
+            modeluuid: updatedPath.modeluuid,
+            eventData: { type: "ArmBot", points: updatedPath.points }
+        }
+
+        socket.emit('v2:model-asset:updateEventData', data);
+
+    }
+
+
+    return (
+        <div className="machine-mechanics-container" key={selectedPoint?.uuid}>
+            <div className="machine-mechanics-header">
+                {selectedActionSphere?.path?.modelName || "ArmBot point not found"}
+            </div>
+
+            <div className="machine-mechanics-content-container">
+                <div className="selected-properties-container" ref={propertiesContainerRef}>
+                    <div className="properties-header">ArmBot Properties</div>
+
+                    {selectedPoint && (
+                        <>
+
+                        </>
+                    )}
+                </div>
+
+                <div className="footer">
+                    <InfoIcon />
+                    Configure armbot properties.
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default React.memo(ArmBotMechanics);
--- a/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx
--- a/app/src/components/layout/sidebarRight/mechanics/StaticMachineMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/mechanics/StaticMachineMechanics.tsx
@@ -0,0 +1,90 @@
+import React, { useRef, useMemo } from "react";
+import { InfoIcon } from "../../../icons/ExportCommonIcons";
+import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
+import { useEditingPoint, useEyeDropMode, usePreviewPosition, useSelectedActionSphere, useSimulationStates, useSocketStore } from "../../../../store/store";
+import * as Types from '../../../../types/world/worldTypes';
+import PositionInput from "../customInput/PositionInputs";
+import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt";
+
+const StaticMachineMechanics: React.FC = () => {
+    const { selectedActionSphere } = useSelectedActionSphere();
+    const { simulationStates, setSimulationStates } = useSimulationStates();
+    const { socket } = useSocketStore();
+
+    const propertiesContainerRef = useRef<HTMLDivElement>(null);
+
+    const { selectedPoint, connectedPointUuids } = useMemo(() => {
+        if (!selectedActionSphere?.points?.uuid) return { selectedPoint: null, connectedPointUuids: [] };
+
+        const vehiclePaths = simulationStates.filter(
+            (path): path is Types.StaticMachineEventsSchema => path.type === "StaticMachine"
+        );
+
+        const points = vehiclePaths.find(
+            (path) => path.points.uuid === selectedActionSphere.points.uuid
+        )?.points;
+
+        if (!points) return { selectedPoint: null, connectedPointUuids: [] };
+
+        const connectedUuids: string[] = [];
+        if (points.connections?.targets) {
+            points.connections.targets.forEach(target => {
+                connectedUuids.push(target.pointUUID);
+            });
+        }
+
+        return {
+            selectedPoint: points,
+            connectedPointUuids: connectedUuids
+        };
+    }, [selectedActionSphere, simulationStates]);
+
+    const updateBackend = async (updatedPath: Types.StaticMachineEventsSchema | undefined) => {
+        if (!updatedPath) return;
+        const email = localStorage.getItem("email");
+        const organization = email ? email.split("@")[1].split(".")[0] : "";
+
+        // await setEventApi(
+        //     organization,
+        //     updatedPath.modeluuid,
+        //     { type: "StaticMachine", points: updatedPath.points }
+        // );
+
+        const data = {
+            organization: organization,
+            modeluuid: updatedPath.modeluuid,
+            eventData: { type: "StaticMachine", points: updatedPath.points }
+        }
+
+        socket.emit('v2:model-asset:updateEventData', data);
+
+    }
+
+
+    return (
+        <div className="machine-mechanics-container" key={selectedPoint?.uuid}>
+            <div className="machine-mechanics-header">
+                {selectedActionSphere?.path?.modelName || "Machine point not found"}
+            </div>
+
+            <div className="machine-mechanics-content-container">
+                <div className="selected-properties-container" ref={propertiesContainerRef}>
+                    <div className="properties-header">Machine Properties</div>
+
+                    {selectedPoint && (
+                        <>
+
+                        </>
+                    )}
+                </div>
+
+                <div className="footer">
+                    <InfoIcon />
+                    Configure machine properties.
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default React.memo(StaticMachineMechanics);
--- a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
@@ -28,9 +28,12 @@ const ZoneProperties: React.FC = () => {
      };

      let response = await zoneCameraUpdate(zonesdata, organization);
-      console.log('response: ', response);
+      if (response.message === "updated successfully") {
+        setEdit(false);
+      } else {
+        console.log("Not updated Camera Position and Target");
+      }

-      setEdit(false);
    } catch (error) {
      console.error("Error in handleSetView:", error);
    }