socket added for 3d and floating Widget

app/src/components/ui/componets/DroppedFloatingWidgets.tsx

@@ -21,6 +21,7 @@ import TotalCardComponent from "../realTimeVis/floating/TotalCardComponent";
 import WarehouseThroughputComponent from "../realTimeVis/floating/WarehouseThroughputComponent";
 import FleetEfficiencyComponent from "../realTimeVis/floating/FleetEfficiencyComponent";
 import { useWidgetStore } from "../../../store/useWidgetStore";
+import { useSocketStore } from "../../../store/store";
 interface DraggingState {
   zone: string;
   index: number;
@@ -43,6 +44,7 @@ interface DraggingState {
   };
 }
 const DroppedObjects: React.FC = () => {
+  const { visualizationSocket } = useSocketStore();
   const zones = useDroppedObjectsStore((state) => state.zones);
   const [openKebabId, setOpenKebabId] = useState<string | null>(null);
   const updateObjectPosition = useDroppedObjectsStore(
@@ -98,29 +100,41 @@ const DroppedObjects: React.FC = () => {
   const zoneEntries = Object.entries(zones);
   if (zoneEntries.length === 0) return null;
   const [zoneName, zone] = zoneEntries[0];
+  
 
   function handleDuplicate(zoneName: string, index: number) {
     setOpenKebabId(null)
     duplicateObject(zoneName, index); // Call the duplicateObject method from the store
   }
 
-  async function handleDelete(zoneName: string, id: string, index: number) {
+  async function handleDelete(zoneName: string, id: string) {
     try {
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
-
-      let res = await deleteFloatingWidgetApi(id, organization);
-      console.log('res: ', res);
-
-      if (res.message === "FloatingWidget deleted successfully") {
-        deleteObject(zoneName, id, index); // Call the deleteObject method from the store
+      
+      
+      let deleteFloatingWidget = {
+        floatWidgetID: id,
+        organization: organization,
+        zoneId: zone.zoneId
       }
+      
+      if (visualizationSocket) {
+        visualizationSocket.emit("v2:viz-float:delete", deleteFloatingWidget)
+      }
+      deleteObject(zoneName, id);
+
+      // let res = await deleteFloatingWidgetApi(id, organization);
+      // s
+
+      // if (res.message === "FloatingWidget deleted successfully") {
+      //   deleteObject(zoneName, id, index); // Call the deleteObject method from the store
+      // }
     } catch (error) {
-      console.error("Error deleting floating widget:", error);
+      
     }
   }
 
-
   const handlePointerDown = (event: React.PointerEvent, index: number) => {
     if ((event.target as HTMLElement).closest(".kebab-options") || (event.target as HTMLElement).closest(".kebab")) {
       return; // Prevent dragging when clicking on the kebab menu or its options
@@ -278,15 +292,30 @@ const DroppedObjects: React.FC = () => {
       // Save to backend
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
-      const response = await addingFloatingWidgets(zone.zoneId, organization, {
-        ...zone.objects[draggingIndex.index],
-        position: boundedPosition,
-      });
-      console.log('response: ', response);
+      // const response = await addingFloatingWidgets(zone.zoneId, organization, {
+      //   ...zone.objects[draggingIndex.index],
+      //   position: boundedPosition,
+      // });
+      
 
-      if (response.message === "Widget updated successfully") {
-        updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
+      let updateFloatingWidget = {
+        organization: organization,
+        widget: {
+          ...zone.objects[draggingIndex.index],
+          position: boundedPosition,
+        },
+        index:draggingIndex.index,
+        zoneId: zone.zoneId
       }
+      if (visualizationSocket) {
+        visualizationSocket.emit("v2:viz-float:add", updateFloatingWidget)
+      }
+
+      // if (response.message === "Widget updated successfully") {
+        
+      console.log('boundedPosition: ', boundedPosition);
+      updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
+      // }
 
       // // Clean up
       // setDraggingIndex(null);
@@ -298,7 +327,7 @@ const DroppedObjects: React.FC = () => {
       //   animationRef.current = null;
       // }
     } catch (error) {
-      console.error("Error in handlePointerUp:", error);
+      
     } finally {
       // Clean up regardless of success or failure
       setDraggingIndex(null);
@@ -390,7 +419,7 @@ const DroppedObjects: React.FC = () => {
               </div>
               <div className="edit btn" onClick={(event) => {
                 event.stopPropagation();
-                handleDelete(zoneName, obj.id, index); // Call the delete handler
+                handleDelete(zoneName, obj.id); // Call the delete handler
               }}>
                 <div className="icon">
                   <DeleteIcon />