socket added for 3d and floating Widget
This commit is contained in:
@@ -1,16 +1,27 @@
|
||||
import { useEffect } from "react";
|
||||
import { useSocketStore } from "../../store/store";
|
||||
import { useSelectedZoneStore } from "../../store/useZoneStore";
|
||||
import { useDroppedObjectsStore } from "../../store/useDroppedObjectsStore";
|
||||
import { useZoneWidgetStore } from "../../store/useZone3DWidgetStore";
|
||||
import useTemplateStore from "../../store/useTemplateStore";
|
||||
|
||||
export default function SocketRealTimeViz() {
|
||||
const { visualizationSocket } = useSocketStore();
|
||||
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
||||
const deleteObject = useDroppedObjectsStore((state) => state.deleteObject);
|
||||
const duplicateObject = useDroppedObjectsStore((state) => state.duplicateObject);
|
||||
const updateObjectPosition = useDroppedObjectsStore((state) => state.updateObjectPosition);
|
||||
const { addWidget } = useZoneWidgetStore()
|
||||
const { templates, removeTemplate } = useTemplateStore();
|
||||
const { setTemplates } = useTemplateStore();
|
||||
|
||||
useEffect(() => {
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
if (visualizationSocket) {
|
||||
//add panel response
|
||||
visualizationSocket.on("viz-panel:response:updates", (addPanel: any) => {
|
||||
console.log('addPanel: ', addPanel);
|
||||
if (addPanel.success) {
|
||||
let addPanelData = addPanel.data.data
|
||||
setSelectedZone(addPanelData)
|
||||
@@ -18,32 +29,35 @@ export default function SocketRealTimeViz() {
|
||||
})
|
||||
//delete panel response
|
||||
visualizationSocket.on("viz-panel:response:delete", (deletePanel: any) => {
|
||||
console.log('deletePanel: ', deletePanel);
|
||||
if (deletePanel.success) {
|
||||
let deletePanelData = deletePanel.data.data
|
||||
setSelectedZone(deletePanelData)
|
||||
}
|
||||
})
|
||||
// add 2dWidget
|
||||
visualizationSocket.on("viz-widget:response:updates", (response: any) => {
|
||||
console.log('response: ', response);
|
||||
if (response.success && response.data) {
|
||||
// add 2dWidget response
|
||||
visualizationSocket.on("viz-widget:response:updates", (add2dWidget: any) => {
|
||||
console.log('add2dWidget: ', add2dWidget);
|
||||
|
||||
if (add2dWidget.success && add2dWidget.data) {
|
||||
setSelectedZone((prev) => {
|
||||
const isWidgetAlreadyAdded = prev.widgets.some(
|
||||
(widget) => widget.id === response.data.widgetData.id
|
||||
(widget) => widget.id === add2dWidget.data.widgetData.id
|
||||
);
|
||||
if (isWidgetAlreadyAdded) return prev; // Prevent duplicate addition
|
||||
return {
|
||||
...prev,
|
||||
zoneId: response.data.zoneId,
|
||||
zoneName: response.data.zoneName,
|
||||
widgets: [...prev.widgets, response.data.widgetData], // Append new widget
|
||||
zoneId: add2dWidget.data.zoneId,
|
||||
zoneName: add2dWidget.data.zoneName,
|
||||
widgets: [...prev.widgets, add2dWidget.data.widgetData], // Append new widget
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
//delete 2D Widget
|
||||
//delete 2D Widget response
|
||||
visualizationSocket.on("viz-widget:response:delete", (deleteWidget: any) => {
|
||||
console.log('deleteWidget: ', deleteWidget);
|
||||
|
||||
if (deleteWidget?.success && deleteWidget.data) {
|
||||
setSelectedZone((prevZone: any) => ({
|
||||
...prevZone,
|
||||
@@ -53,12 +67,127 @@ export default function SocketRealTimeViz() {
|
||||
}));
|
||||
}
|
||||
});
|
||||
//add Floating Widget response
|
||||
visualizationSocket.on("viz-float:response:updates", (addFloatingWidget: any) => {
|
||||
console.log('addFloatingWidget: ', addFloatingWidget);
|
||||
|
||||
if (addFloatingWidget.success) {
|
||||
if (addFloatingWidget.success && addFloatingWidget.message === "FloatWidget created successfully") {
|
||||
const state = useDroppedObjectsStore.getState();
|
||||
const zone = state.zones[addFloatingWidget.data.zoneName];
|
||||
if (!zone) {
|
||||
state.setZone(addFloatingWidget.data.zoneName, addFloatingWidget.data.zoneId);
|
||||
}
|
||||
const existingObjects = zone ? zone.objects : [];
|
||||
const newWidget = addFloatingWidget.data.widget;
|
||||
// ✅ Check if the widget ID already exists before adding
|
||||
const isAlreadyAdded = existingObjects.some(obj => obj.id === newWidget.id);
|
||||
if (isAlreadyAdded) {
|
||||
|
||||
return; // Don't add the widget if it already exists
|
||||
}
|
||||
// Add widget only if it doesn't exist
|
||||
state.addObject(addFloatingWidget.data.zoneName, newWidget);
|
||||
}
|
||||
if (addFloatingWidget.message === "Widget updated successfully") {
|
||||
updateObjectPosition(addFloatingWidget.data.zoneName, addFloatingWidget.data.index, addFloatingWidget.data.position);
|
||||
}
|
||||
}
|
||||
});
|
||||
//duplicate Floating Widget response
|
||||
visualizationSocket.on("viz-float:response:addDuplicate", (duplicateFloatingWidget: any) => {
|
||||
console.log('duplicateFloatingWidget: ', duplicateFloatingWidget);
|
||||
|
||||
if (duplicateFloatingWidget.success && duplicateFloatingWidget.message === "duplicate FloatWidget created successfully") {
|
||||
useDroppedObjectsStore.setState((state) => {
|
||||
const zone = state.zones[duplicateFloatingWidget.data.zoneName];
|
||||
if (!zone) return state; // Zone doesn't exist, return state as is
|
||||
const existingObjects = zone.objects;
|
||||
const newWidget = duplicateFloatingWidget.data.widget;
|
||||
// ✅ Check if the object with the same ID already exists
|
||||
const isAlreadyAdded = existingObjects.some(obj => obj.id === newWidget.id);
|
||||
if (isAlreadyAdded) {
|
||||
|
||||
return state; // Don't update state if it's already there
|
||||
}
|
||||
return {
|
||||
zones: {
|
||||
...state.zones,
|
||||
[duplicateFloatingWidget.data.zoneName]: {
|
||||
...zone,
|
||||
objects: [...existingObjects, newWidget], // Append only if it's not a duplicate
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
//delete Floating Widget response
|
||||
visualizationSocket.on("viz-float:response:delete", (deleteFloatingWidget: any) => {
|
||||
console.log('deleteFloatingWidget: ', deleteFloatingWidget);
|
||||
|
||||
if (deleteFloatingWidget.success) {
|
||||
deleteObject(deleteFloatingWidget.data.zoneName, deleteFloatingWidget.data.floatWidgetID);
|
||||
}
|
||||
});
|
||||
//add 3D Widget response
|
||||
visualizationSocket.on("viz-widget3D:response:updates", (add3DWidget: any) => {
|
||||
console.log('add3DWidget: ', add3DWidget);
|
||||
|
||||
if (add3DWidget.success) {
|
||||
if (add3DWidget.message === "Widget created successfully") {
|
||||
addWidget(add3DWidget.data.zoneId, add3DWidget.data.widget);
|
||||
}
|
||||
}
|
||||
});
|
||||
// add Template response
|
||||
visualizationSocket.on("viz-template:response:add", (addingTemplate: any) => {
|
||||
console.log('addingTemplate: ', addingTemplate);
|
||||
|
||||
if (addingTemplate.success) {
|
||||
if (addingTemplate.message === "Template saved successfully") {
|
||||
setTemplates(addingTemplate.data);
|
||||
}
|
||||
}
|
||||
});
|
||||
//load Template response
|
||||
visualizationSocket.on("viz-template:response:addTemplateZone", (loadTemplate: any) => {
|
||||
console.log('loadTemplate: ', loadTemplate);
|
||||
|
||||
if (loadTemplate.success) {
|
||||
if (loadTemplate.message === "Template placed in Zone") {
|
||||
let template = loadTemplate.data.template
|
||||
setSelectedZone({
|
||||
panelOrder: template.panelOrder,
|
||||
activeSides: Array.from(new Set(template.panelOrder)), // No merging with previous `activeSides`
|
||||
widgets: template.widgets,
|
||||
});
|
||||
useDroppedObjectsStore.getState().setZone(template.zoneName, template.zoneId);
|
||||
|
||||
if (Array.isArray(template.floatingWidget)) {
|
||||
template.floatingWidget.forEach((val: any) => {
|
||||
useDroppedObjectsStore.getState().addObject(template.zoneName, val);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
//delete Template response
|
||||
visualizationSocket.on("viz-template:response:delete", (deleteTemplate: any) => {
|
||||
console.log('deleteTemplate: ', deleteTemplate);
|
||||
|
||||
if (deleteTemplate.success) {
|
||||
if (deleteTemplate.message === 'Template deleted successfully') {
|
||||
removeTemplate(deleteTemplate.data);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [])
|
||||
}, [visualizationSocket])
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
}, [selectedZone])
|
||||
return (
|
||||
<></>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user