socket added for 3d and floating Widget

app/src/components/layout/sidebarLeft/visualization/Templates.tsx

@@ -5,11 +5,13 @@ 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 { setSelectedZone, selectedZone } = useSelectedZoneStore();
+  const { visualizationSocket } = useSocketStore();
 
   useEffect(() => {
     async function templateData() {
@@ -30,12 +32,18 @@ const Templates = () => {
     try {
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
-
-      let response = await deleteTemplateApi(id, organization);
-
-      if (response.message === "Template deleted successfully") {
-        removeTemplate(id);
+      let deleteTemplate = {
+        organization: organization,
+        templateID: id,
       }
+      if (visualizationSocket) {
+        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);
     }
@@ -48,9 +56,20 @@ const Templates = () => {
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
 
-      let response = await loadTempleteApi(template.id, selectedZone.zoneId, organization);
+      let loadingTemplate = {
+        organization: organization,
+        zoneId: selectedZone.zoneId,
+        templateID: template.id,
+      }
+      console.log('template: ', template);
+      console.log('loadingTemplate: ', loadingTemplate);
 
-      if (response.message === "Template placed in Zone") {
+      if (visualizationSocket) {
+        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`
@@ -64,7 +83,7 @@ const Templates = () => {
             useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, val);
           });
         }
-      }
+      // }
     } catch (error) {
       console.error("Error loading template:", error);
     }