Merge branch 'rtViz' of http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev into rtViz

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

@@ -9,9 +9,15 @@ import useModuleStore from "../../../store/useModuleStore";
 
 import DroppedObjects from "./DroppedFloatingWidgets";
 import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
-import { useAsset3dWidget, useZones } from "../../../store/store";
-import { getZoneData } from "../../../services/realTimeVisulization/zoneData/getZones";
+import {
+  useAsset3dWidget,
+  useWidgetSubOption,
+  useZones,
+} from "../../../store/store";
 import { getZone2dData } from "../../../services/realTimeVisulization/zoneData/getZoneData";
+import { generateUniqueId } from "../../../functions/generateUniqueId";
+import { determinePosition } from "./functions/determinePosition";
+import { addingFloatingWidgets } from "../../../services/realTimeVisulization/zoneData/addFloatingWidgets";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -49,6 +55,8 @@ const RealTimeVisulization: React.FC = () => {
     Record<string, { zoneName: string; zoneId: string; objects: any[] }>
   >({});
   const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
+  const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
+
   useEffect(() => {
     async function GetZoneData() {
       const email = localStorage.getItem("email") || "";
@@ -103,48 +111,67 @@ const RealTimeVisulization: React.FC = () => {
 
   useEffect(() => {}, [floatingWidgets]);
 
-  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    const data = event.dataTransfer.getData("text/plain");
-    if (widgetSelect !== "") return;
-    if (!data || selectedZone.zoneName === "") return;
+  const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
+    try {
+      event.preventDefault();
+      const email = localStorage.getItem("email") || "";
+      const organization = email?.split("@")[1]?.split(".")[0];
 
-    const droppedData = JSON.parse(data);
-    const canvasElement = document.getElementById("real-time-vis-canvas");
-    if (!canvasElement) return;
+      const data = event.dataTransfer.getData("text/plain");
+      // if (widgetSelect !== "") return;
+      if (widgetSubOption === "3D") return;
+      if (!data || selectedZone.zoneName === "") return;
 
-    const canvasRect = canvasElement.getBoundingClientRect();
-    const relativeX = event.clientX - canvasRect.left;
-    const relativeY = event.clientY - canvasRect.top;
+      const droppedData = JSON.parse(data);
+      const canvasElement = document.getElementById("real-time-vis-canvas");
+      if (!canvasElement) throw new Error("Canvas element not found");
 
-    const newObject = {
-      ...droppedData,
-      position: [relativeY, relativeX], // Y first because of top/left style
-    };
-    // Only set zone if it’s not already in the store (prevents overwriting objects)
-    const existingZone =
-      useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
-    if (!existingZone) {
-      useDroppedObjectsStore
-        .getState()
-        .setZone(selectedZone.zoneName, selectedZone.zoneId);
-    }
-    // Add the dropped object to the zone
-    useDroppedObjectsStore
-      .getState()
-      .addObject(selectedZone.zoneName, newObject);
-    setFloatingWidgets((prevWidgets) => ({
-      ...prevWidgets,
-      [selectedZone.zoneName]: {
-        ...prevWidgets[selectedZone.zoneName],
-        zoneName: selectedZone.zoneName,
-        zoneId: selectedZone.zoneId,
-        objects: [
-          ...(prevWidgets[selectedZone.zoneName]?.objects || []),
-          newObject,
-        ],
-      },
-    }));
+      const canvasRect = canvasElement.getBoundingClientRect();
+      const relativeX = event.clientX - canvasRect.left;
+      const relativeY = event.clientY - canvasRect.top;
+
+      const newObject = {
+        ...droppedData,
+        id: generateUniqueId(),
+        position: determinePosition(canvasRect, relativeX, relativeY),
+      };
+
+      let response = await addingFloatingWidgets(
+        selectedZone.zoneId,
+        organization,
+        newObject
+      );
+
+      // Only set zone if it’s not already in the store (prevents overwriting objects)
+      const existingZone =
+        useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
+      if (!existingZone) {
+        useDroppedObjectsStore
+          .getState()
+          .setZone(selectedZone.zoneName, selectedZone.zoneId);
+      }
+
+      // Add the dropped object to the zone if the API call is successful
+      if (response.message === "FloatWidget created successfully") {
+        useDroppedObjectsStore
+          .getState()
+          .addObject(selectedZone.zoneName, newObject);
+      }
+
+      // Update floating widgets state
+      setFloatingWidgets((prevWidgets) => ({
+        ...prevWidgets,
+        [selectedZone.zoneName]: {
+          ...prevWidgets[selectedZone.zoneName],
+          zoneName: selectedZone.zoneName,
+          zoneId: selectedZone.zoneId,
+          objects: [
+            ...(prevWidgets[selectedZone.zoneName]?.objects || []),
+            newObject,
+          ],
+        },
+      }));
+    } catch (error) {}
   };
 
   return (