From 695b066c813bb0255ee1d441176a560fe82b8706 Mon Sep 17 00:00:00 2001 From: Gomathi9520 Date: Tue, 1 Apr 2025 11:33:10 +0530 Subject: [PATCH 1/4] deletepanel added --- .../components/ui/componets/AddButtons.tsx | 26 ++++++++++---- .../components/ui/componets/DisplayZone.tsx | 2 +- .../ui/componets/DroppedFloatingWidgets.tsx | 10 ++++-- .../zoneData/add3dWidget.ts | 4 +-- .../zoneData/addFloatingWidgets.ts | 4 +-- .../zoneData/addWidgets.ts | 4 +-- .../zoneData/deleteFloatingWidget.ts | 4 +-- .../zoneData/deletePanel.ts | 34 +++++++++++++++++++ .../zoneData/deleteTemplate.ts | 4 +-- .../zoneData/deleteWidgetApi.ts | 4 +-- .../zoneData/duplicateWidget.ts | 4 +-- .../zoneData/get3dWidgetData.ts | 4 +-- .../zoneData/getFloatingData.ts | 4 +-- .../zoneData/getSelect2dZoneData.ts | 4 +-- .../zoneData/getTemplate.ts | 4 +-- .../zoneData/getZoneData.ts | 4 +-- .../realTimeVisulization/zoneData/getZones.ts | 4 +-- .../zoneData/loadTemplate.ts | 4 +-- .../realTimeVisulization/zoneData/panel.ts | 4 +-- .../zoneData/saveTempleteApi.ts | 4 +-- app/src/store/useDroppedObjectsStore.ts | 7 ++-- 21 files changed, 97 insertions(+), 46 deletions(-) create mode 100644 app/src/services/realTimeVisulization/zoneData/deletePanel.ts diff --git a/app/src/components/ui/componets/AddButtons.tsx b/app/src/components/ui/componets/AddButtons.tsx index e0ca342..18a7628 100644 --- a/app/src/components/ui/componets/AddButtons.tsx +++ b/app/src/components/ui/componets/AddButtons.tsx @@ -6,6 +6,7 @@ import { } from "../../icons/RealTimeVisulationIcons"; import { panelData } from "../../../services/realTimeVisulization/zoneData/panel"; import { AddIcon } from "../../icons/ExportCommonIcons"; +import { deletePanelApi } from "../../../services/realTimeVisulization/zoneData/deletePanel"; // Define the type for `Side` type Side = "top" | "bottom" | "left" | "right"; @@ -34,7 +35,7 @@ interface ButtonsProps { zoneName: string; activeSides: Side[]; panelOrder: Side[]; - + lockedPanels: Side[]; zoneId: string; zoneViewPortTarget: number[]; @@ -103,8 +104,11 @@ const AddButtons: React.FC = ({ }; // Function to handle "+" button click - const handlePlusButtonClick = (side: Side) => { + const handlePlusButtonClick = async (side: Side) => { + if (selectedZone.activeSides.includes(side)) { + const email = localStorage.getItem("email") || ""; + const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value // If the panel is already active, remove all widgets and close the panel const cleanedWidgets = selectedZone.widgets.filter( (widget) => widget.panel !== side @@ -118,8 +122,14 @@ const AddButtons: React.FC = ({ panelOrder: newActiveSides, }; + let response = await deletePanelApi(selectedZone.zoneId, side, organization) + + if (response.message === 'Panel deleted successfully') { + + setSelectedZone(updatedZone); + } + // Delete the selectedZone state - setSelectedZone(updatedZone); } else { const updatePanelData = async () => { try { @@ -140,13 +150,15 @@ const AddButtons: React.FC = ({ // API call const response = await panelData(organization, selectedZone.zoneId, newActiveSides); - + + if (response.message === 'Panels created successfully') { + setSelectedZone(updatedZone); + } // Update state - - setSelectedZone(updatedZone); + } catch (error) { - + } }; diff --git a/app/src/components/ui/componets/DisplayZone.tsx b/app/src/components/ui/componets/DisplayZone.tsx index 3889139..b482a83 100644 --- a/app/src/components/ui/componets/DisplayZone.tsx +++ b/app/src/components/ui/componets/DisplayZone.tsx @@ -152,7 +152,6 @@ const DisplayZone: React.FC = ({ async function handleSelect2dZoneData(zoneId: string, zoneName: string) { try { if (selectedZone?.zoneId === zoneId) { - return; } const email = localStorage.getItem("email") || ""; @@ -161,6 +160,7 @@ const DisplayZone: React.FC = ({ let response = await getSelect2dZoneData(zoneId, organization); console.log('response: ', response); let res = await getFloatingZoneData(zoneId, organization); + console.log('res: ', res); setFloatingWidget(res) // Set the selected zone in the store useDroppedObjectsStore.getState().setZone(zoneName, zoneId); diff --git a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx index d7a6960..7386bbd 100644 --- a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx +++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx @@ -96,7 +96,7 @@ const DroppedObjects: React.FC = () => { console.log('res: ', res); if (res.message === "FloatingWidget deleted successfully") { - deleteObject(zoneName, index); // Call the deleteObject method from the store + deleteObject(zoneName,id, index); // Call the deleteObject method from the store } } catch (error) { console.error("Error deleting floating widget:", error); @@ -255,6 +255,7 @@ const DroppedObjects: React.FC = () => { ...zone.objects[draggingIndex.index], position: boundedPosition, }); + console.log('response: ', response); if (response.message === "Widget updated successfully") { updateObjectPosition(zoneName, draggingIndex.index, boundedPosition); @@ -386,10 +387,13 @@ const DroppedObjects: React.FC = () => { ) : null} - {renderObjectContent(obj)} + {/* {renderObjectContent(obj)} */}
handleKebabClick(obj.id, event)} + onClick={(event) => { + event.stopPropagation(); + handleKebabClick(obj.id, event) + }} >
diff --git a/app/src/services/realTimeVisulization/zoneData/add3dWidget.ts b/app/src/services/realTimeVisulization/zoneData/add3dWidget.ts index 82562b7..6d976b6 100644 --- a/app/src/services/realTimeVisulization/zoneData/add3dWidget.ts +++ b/app/src/services/realTimeVisulization/zoneData/add3dWidget.ts @@ -1,5 +1,5 @@ -let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -// let url_Backend_dwinzo = `http://192.168.0.102:5000`; +// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const adding3dWidgets = async ( zoneId: string, organization: string, diff --git a/app/src/services/realTimeVisulization/zoneData/addFloatingWidgets.ts b/app/src/services/realTimeVisulization/zoneData/addFloatingWidgets.ts index fb644c6..ee84841 100644 --- a/app/src/services/realTimeVisulization/zoneData/addFloatingWidgets.ts +++ b/app/src/services/realTimeVisulization/zoneData/addFloatingWidgets.ts @@ -1,5 +1,5 @@ -let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -// let url_Backend_dwinzo = `http://192.168.0.102:5000`; +// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const addingFloatingWidgets = async ( zoneId: string, diff --git a/app/src/services/realTimeVisulization/zoneData/addWidgets.ts b/app/src/services/realTimeVisulization/zoneData/addWidgets.ts index 8539e54..08969ab 100644 --- a/app/src/services/realTimeVisulization/zoneData/addWidgets.ts +++ b/app/src/services/realTimeVisulization/zoneData/addWidgets.ts @@ -1,5 +1,5 @@ -let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -// let url_Backend_dwinzo = `http://192.168.0.102:5000`; +// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const addingWidgets = async ( zoneId: string, organization: string, diff --git a/app/src/services/realTimeVisulization/zoneData/deleteFloatingWidget.ts b/app/src/services/realTimeVisulization/zoneData/deleteFloatingWidget.ts index 85c96b8..cd46e5d 100644 --- a/app/src/services/realTimeVisulization/zoneData/deleteFloatingWidget.ts +++ b/app/src/services/realTimeVisulization/zoneData/deleteFloatingWidget.ts @@ -1,5 +1,5 @@ -let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -// let url_Backend_dwinzo = `http://192.168.0.102:5000`; +// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const deleteFloatingWidgetApi = async ( floatWidgetID: string, diff --git a/app/src/services/realTimeVisulization/zoneData/deletePanel.ts b/app/src/services/realTimeVisulization/zoneData/deletePanel.ts new file mode 100644 index 0000000..0fc22e4 --- /dev/null +++ b/app/src/services/realTimeVisulization/zoneData/deletePanel.ts @@ -0,0 +1,34 @@ +// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +let url_Backend_dwinzo = `http://192.168.0.102:5000`; + +export const deletePanelApi = async ( + zoneId: string, + panelName: string, + organization: string +) => { + console.log('panelName: ', panelName); + console.log('organization: ', organization); + console.log('zoneId: ', zoneId); + try { + const response = await fetch(`${url_Backend_dwinzo}/api/v2/panel/delete`, { + method: "PATCH", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ organization, zoneId, panelName }), + }); + + if (!response.ok) { + throw new Error("Failed to delete widget in the zone"); + } + + const result = await response.json(); + return result; + } catch (error) { + if (error instanceof Error) { + throw new Error(error.message); + } else { + throw new Error("An unknown error occurred"); + } + } +}; diff --git a/app/src/services/realTimeVisulization/zoneData/deleteTemplate.ts b/app/src/services/realTimeVisulization/zoneData/deleteTemplate.ts index e452f6d..df55b37 100644 --- a/app/src/services/realTimeVisulization/zoneData/deleteTemplate.ts +++ b/app/src/services/realTimeVisulization/zoneData/deleteTemplate.ts @@ -1,5 +1,5 @@ -let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -// let url_Backend_dwinzo = `http://192.168.0.102:5000`; +// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const deleteTemplateApi = async ( templateID: string, diff --git a/app/src/services/realTimeVisulization/zoneData/deleteWidgetApi.ts b/app/src/services/realTimeVisulization/zoneData/deleteWidgetApi.ts index e57e8cb..92836ed 100644 --- a/app/src/services/realTimeVisulization/zoneData/deleteWidgetApi.ts +++ b/app/src/services/realTimeVisulization/zoneData/deleteWidgetApi.ts @@ -1,5 +1,5 @@ -let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -// let url_Backend_dwinzo = `http://192.168.0.102:5000`; +// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const deleteWidgetApi = async ( widgetID: string, diff --git a/app/src/services/realTimeVisulization/zoneData/duplicateWidget.ts b/app/src/services/realTimeVisulization/zoneData/duplicateWidget.ts index f5ec834..80f486d 100644 --- a/app/src/services/realTimeVisulization/zoneData/duplicateWidget.ts +++ b/app/src/services/realTimeVisulization/zoneData/duplicateWidget.ts @@ -1,5 +1,5 @@ -let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -// let url_Backend_dwinzo = `http://192.168.0.102:5000`; +// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const duplicateWidgetApi = async ( zoneId: string, organization: string, diff --git a/app/src/services/realTimeVisulization/zoneData/get3dWidgetData.ts b/app/src/services/realTimeVisulization/zoneData/get3dWidgetData.ts index b5b6200..71a6be7 100644 --- a/app/src/services/realTimeVisulization/zoneData/get3dWidgetData.ts +++ b/app/src/services/realTimeVisulization/zoneData/get3dWidgetData.ts @@ -1,5 +1,5 @@ -let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -// let url_Backend_dwinzo = `http://192.168.0.102:5000`; +// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const get3dWidgetZoneData = async ( ZoneId?: string, organization?: string diff --git a/app/src/services/realTimeVisulization/zoneData/getFloatingData.ts b/app/src/services/realTimeVisulization/zoneData/getFloatingData.ts index 80d2b19..0246175 100644 --- a/app/src/services/realTimeVisulization/zoneData/getFloatingData.ts +++ b/app/src/services/realTimeVisulization/zoneData/getFloatingData.ts @@ -1,5 +1,5 @@ -let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -// let url_Backend_dwinzo = `http://192.168.0.102:5000`; +// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const getFloatingZoneData = async ( ZoneId?: string, organization?: string diff --git a/app/src/services/realTimeVisulization/zoneData/getSelect2dZoneData.ts b/app/src/services/realTimeVisulization/zoneData/getSelect2dZoneData.ts index 00d4dfe..2d85b73 100644 --- a/app/src/services/realTimeVisulization/zoneData/getSelect2dZoneData.ts +++ b/app/src/services/realTimeVisulization/zoneData/getSelect2dZoneData.ts @@ -1,5 +1,5 @@ -let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -// let url_Backend_dwinzo = `http://192.168.0.102:5000`; +// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const getSelect2dZoneData = async ( ZoneId?: string, diff --git a/app/src/services/realTimeVisulization/zoneData/getTemplate.ts b/app/src/services/realTimeVisulization/zoneData/getTemplate.ts index a3aa3a3..3e516d7 100644 --- a/app/src/services/realTimeVisulization/zoneData/getTemplate.ts +++ b/app/src/services/realTimeVisulization/zoneData/getTemplate.ts @@ -1,5 +1,5 @@ -let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -// let url_Backend_dwinzo = `http://192.168.0.102:5000`; +// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const getTemplateData = async (organization?: string) => { try { const response = await fetch( diff --git a/app/src/services/realTimeVisulization/zoneData/getZoneData.ts b/app/src/services/realTimeVisulization/zoneData/getZoneData.ts index efbac3b..f68ef15 100644 --- a/app/src/services/realTimeVisulization/zoneData/getZoneData.ts +++ b/app/src/services/realTimeVisulization/zoneData/getZoneData.ts @@ -1,5 +1,5 @@ -let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -// let url_Backend_dwinzo = `http://192.168.0.102:5000`; +// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const getZone2dData = async (organization?: string) => { try { const response = await fetch( diff --git a/app/src/services/realTimeVisulization/zoneData/getZones.ts b/app/src/services/realTimeVisulization/zoneData/getZones.ts index 8dbf79a..3be5c3c 100644 --- a/app/src/services/realTimeVisulization/zoneData/getZones.ts +++ b/app/src/services/realTimeVisulization/zoneData/getZones.ts @@ -1,5 +1,5 @@ -let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -// let url_Backend_dwinzo = `http://192.168.0.102:5000`; +// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const getZoneData = async (zoneId: string, organization: string) => { console.log("organization: ", organization); diff --git a/app/src/services/realTimeVisulization/zoneData/loadTemplate.ts b/app/src/services/realTimeVisulization/zoneData/loadTemplate.ts index 915160d..1ec0573 100644 --- a/app/src/services/realTimeVisulization/zoneData/loadTemplate.ts +++ b/app/src/services/realTimeVisulization/zoneData/loadTemplate.ts @@ -1,5 +1,5 @@ -let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -// let url_Backend_dwinzo = `http://192.168.0.102:5000`; +// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const loadTempleteApi = async ( templateID: string, zoneId: string, diff --git a/app/src/services/realTimeVisulization/zoneData/panel.ts b/app/src/services/realTimeVisulization/zoneData/panel.ts index 82f1289..6d93d1f 100644 --- a/app/src/services/realTimeVisulization/zoneData/panel.ts +++ b/app/src/services/realTimeVisulization/zoneData/panel.ts @@ -1,5 +1,5 @@ -let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -// let url_Backend_dwinzo = `http://192.168.0.102:5000`; +// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +let url_Backend_dwinzo = `http://192.168.0.102:5000`; type Side = "top" | "bottom" | "left" | "right"; export const panelData = async ( diff --git a/app/src/services/realTimeVisulization/zoneData/saveTempleteApi.ts b/app/src/services/realTimeVisulization/zoneData/saveTempleteApi.ts index 5c18031..aa85b47 100644 --- a/app/src/services/realTimeVisulization/zoneData/saveTempleteApi.ts +++ b/app/src/services/realTimeVisulization/zoneData/saveTempleteApi.ts @@ -1,5 +1,5 @@ -let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -// let url_Backend_dwinzo = `http://192.168.0.102:5000`; +// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const saveTemplateApi = async (organization: string, template: {}) => { console.log('template: ', template); try { diff --git a/app/src/store/useDroppedObjectsStore.ts b/app/src/store/useDroppedObjectsStore.ts index 83f3a8a..45f40e0 100644 --- a/app/src/store/useDroppedObjectsStore.ts +++ b/app/src/store/useDroppedObjectsStore.ts @@ -36,7 +36,7 @@ type DroppedObjectsState = { bottom: number | "auto"; } ) => void; - deleteObject: (zoneName: string, index: number) => void; // Add this line + deleteObject: (zoneName: string, id: string, index: number) => void; // Add this line duplicateObject: (zoneName: string, index: number) => void; // Add this line }; @@ -77,15 +77,16 @@ export const useDroppedObjectsStore = create((set) => ({ }; }), - deleteObject: (zoneName: string, index: number) => + deleteObject: (zoneName: string, id: string, index: number) => set((state) => { const zone = state.zones[zoneName]; + console.log("zone: ", zone); if (!zone) return state; return { zones: { [zoneName]: { ...zone, - objects: zone.objects.filter((_, i) => i !== index), // Remove object at the given index + objects: zone.objects.filter((obj) => obj.id !== id), // Remove object at the given index }, }, }; From e35d3b374223175a3a42820c6b54ba31a6a1efa3 Mon Sep 17 00:00:00 2001 From: Gomathi9520 Date: Tue, 1 Apr 2025 11:43:59 +0530 Subject: [PATCH 2/4] bug solved while delete floating widgets --- .../ui/componets/DroppedFloatingWidgets.tsx | 67 ++----------------- 1 file changed, 5 insertions(+), 62 deletions(-) diff --git a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx index 7386bbd..c3d61e3 100644 --- a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx +++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx @@ -96,7 +96,7 @@ const DroppedObjects: React.FC = () => { console.log('res: ', res); if (res.message === "FloatingWidget deleted successfully") { - deleteObject(zoneName,id, index); // Call the deleteObject method from the store + deleteObject(zoneName, id, index); // Call the deleteObject method from the store } } catch (error) { console.error("Error deleting floating widget:", error); @@ -105,6 +105,9 @@ const DroppedObjects: React.FC = () => { 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 + } const obj = zone.objects[index]; const container = document.getElementById("real-time-vis-canvas"); if (!container) return; @@ -280,66 +283,6 @@ const DroppedObjects: React.FC = () => { setOpenKebabId((prevId) => (prevId === id ? null : id)); }; - const renderObjectContent = (obj: any) => { - switch (obj.className) { - case "floating total-card": - return ( - <> -
-
{obj.header}
-
-
{obj.value}
-
{obj.per}
-
-
-
- -
- - ); - case "warehouseThroughput floating": - return ( - <> -
-

Warehouse Throughput

-

- (+5) more in 2025 -

-
-
- {/* */} -
- - ); - case "fleetEfficiency floating": - return ( - <> -

Fleet Efficiency

-
-
-
-
-
-
-
-
- 0% -
-
{obj.per}%
-
Optimal
-
- 100% -
- - ); - default: - return null; - } - }; - return (
{ ) : null} - {/* {renderObjectContent(obj)} */} +
{ From 900723c14a1c74ec40041aa9aaed68f663a49485 Mon Sep 17 00:00:00 2001 From: Gomathi9520 Date: Tue, 1 Apr 2025 15:16:54 +0530 Subject: [PATCH 3/4] server api changed for RealTimeVisulization --- .../3D-cards/cards/ProductionCapacity.tsx | 10 +- .../components/ui/componets/AddButtons.tsx | 93 ++++++++++--------- .../components/ui/componets/DisplayZone.tsx | 22 ++--- .../components/ui/componets/DistanceLines.tsx | 26 +++++- .../ui/componets/Dropped3dWidget.tsx | 35 ++----- .../ui/componets/DroppedFloatingWidgets.tsx | 60 +++++++++--- app/src/components/ui/componets/Panel.tsx | 6 +- .../ui/componets/RealTimeVisulization.tsx | 2 + .../componets/functions/determinePosition.ts | 84 ++--------------- .../zoneData/add3dWidget.ts | 4 +- .../zoneData/addFloatingWidgets.ts | 4 +- .../zoneData/addWidgets.ts | 4 +- .../zoneData/deleteFloatingWidget.ts | 4 +- .../zoneData/deletePanel.ts | 4 +- .../zoneData/deleteTemplate.ts | 4 +- .../zoneData/deleteWidgetApi.ts | 4 +- .../zoneData/duplicateWidget.ts | 4 +- .../zoneData/get3dWidgetData.ts | 4 +- .../zoneData/getFloatingData.ts | 4 +- .../zoneData/getSelect2dZoneData.ts | 4 +- .../zoneData/getTemplate.ts | 4 +- .../zoneData/getZoneData.ts | 4 +- .../realTimeVisulization/zoneData/getZones.ts | 4 +- .../zoneData/loadTemplate.ts | 4 +- .../realTimeVisulization/zoneData/panel.ts | 4 +- .../zoneData/saveTempleteApi.ts | 4 +- .../zoneData/useFloatingDataStore.ts | 8 -- app/src/store/store.ts | 10 +- app/src/styles/pages/realTimeViz.scss | 2 - 29 files changed, 201 insertions(+), 225 deletions(-) delete mode 100644 app/src/services/realTimeVisulization/zoneData/useFloatingDataStore.ts diff --git a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx index 4da32bc..785f20d 100644 --- a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx +++ b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx @@ -25,7 +25,7 @@ interface ProductionCapacityProps { position: [number, number, number]; } -const ProductionCapacity : React.FC = ({ position }) => { +const ProductionCapacity: React.FC = ({ position }) => { // Chart data for a week const chartData = { labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // Days of the week @@ -79,10 +79,10 @@ const ProductionCapacity : React.FC = ({ position }) => }; return ( - +
Production Capacity
diff --git a/app/src/components/ui/componets/AddButtons.tsx b/app/src/components/ui/componets/AddButtons.tsx index 18a7628..d06be19 100644 --- a/app/src/components/ui/componets/AddButtons.tsx +++ b/app/src/components/ui/componets/AddButtons.tsx @@ -105,68 +105,69 @@ const AddButtons: React.FC = ({ // Function to handle "+" button click const handlePlusButtonClick = async (side: Side) => { - if (selectedZone.activeSides.includes(side)) { + // Panel already exists: Remove widgets from that side and update activeSides const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value - // If the panel is already active, remove all widgets and close the panel + + // Remove all widgets associated with the side and update active sides const cleanedWidgets = selectedZone.widgets.filter( (widget) => widget.panel !== side ); const newActiveSides = selectedZone.activeSides.filter((s) => s !== side); - + const updatedZone = { ...selectedZone, widgets: cleanedWidgets, activeSides: newActiveSides, panelOrder: newActiveSides, }; - - let response = await deletePanelApi(selectedZone.zoneId, side, organization) - - if (response.message === 'Panel deleted successfully') { - - setSelectedZone(updatedZone); - } - - // Delete the selectedZone state - } else { - const updatePanelData = async () => { - try { - // Get email and organization safely - const email = localStorage.getItem("email") || ""; - const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg"; // Fallback value - - // Prevent duplicate side entries - const newActiveSides = selectedZone.activeSides.includes(side) - ? [...selectedZone.activeSides] - : [...selectedZone.activeSides, side]; - - const updatedZone = { - ...selectedZone, - activeSides: newActiveSides, - panelOrder: newActiveSides, - }; - - // API call - const response = await panelData(organization, selectedZone.zoneId, newActiveSides); - - if (response.message === 'Panels created successfully') { - setSelectedZone(updatedZone); - } - - // Update state - - } catch (error) { - + + // API call to delete the panel + try { + const response = await deletePanelApi(selectedZone.zoneId, side, organization); + console.log('response: ', response); + if (response.message === "Panel deleted successfully") { + setSelectedZone(updatedZone); + } else { + console.error("Unexpected response:", response); } - }; - - updatePanelData(); // Call the async function + } catch (error) { + console.error("Error deleting panel:", error); + } + } else { + // Panel does not exist: Create panel + try { + // Get email and organization safely with a default fallback + const email = localStorage.getItem("email") || ""; + const organization = email?.split("@")[1]?.split(".")[0] ; + + // Prevent duplicate side entries + const newActiveSides = selectedZone.activeSides.includes(side) + ? [...selectedZone.activeSides] + : [...selectedZone.activeSides, side]; + + const updatedZone = { + ...selectedZone, + activeSides: newActiveSides, + panelOrder: newActiveSides, + }; + + // API call to create panels + const response = await panelData(organization, selectedZone.zoneId, newActiveSides); + console.log('response: ', response); + + if (response.message === "Panels created successfully") { + setSelectedZone(updatedZone); + } else { + console.error("Unexpected response:", response); + } + } catch (error) { + console.error("Error creating panels:", error); + } } - - }; + return ( <> diff --git a/app/src/components/ui/componets/DisplayZone.tsx b/app/src/components/ui/componets/DisplayZone.tsx index b482a83..ddc7903 100644 --- a/app/src/components/ui/componets/DisplayZone.tsx +++ b/app/src/components/ui/componets/DisplayZone.tsx @@ -2,7 +2,10 @@ import React, { useEffect, useRef, useState, useCallback } from "react"; import { Widget } from "../../../store/useWidgetStore"; import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons"; import { InfoIcon } from "../../icons/ExportCommonIcons"; -import { useDroppedObjectsStore, useFloatingWidget } from "../../../store/useDroppedObjectsStore"; +import { + useDroppedObjectsStore, + useFloatingWidget, +} from "../../../store/useDroppedObjectsStore"; import { getSelect2dZoneData } from "../../../services/realTimeVisulization/zoneData/getSelect2dZoneData"; import { getFloatingZoneData } from "../../../services/realTimeVisulization/zoneData/getFloatingData"; import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData"; @@ -66,14 +69,13 @@ const DisplayZone: React.FC = ({ selectedZone, setSelectedZone, }) => { - // Ref for the container element const containerRef = useRef(null); // State to track overflow visibility const [showLeftArrow, setShowLeftArrow] = useState(false); const [showRightArrow, setShowRightArrow] = useState(false); - const { floatingWidget, setFloatingWidget } = useFloatingWidget() + const { floatingWidget, setFloatingWidget } = useFloatingWidget(); // Function to calculate overflow state const updateOverflowState = useCallback(() => { @@ -158,10 +160,10 @@ const DisplayZone: React.FC = ({ const organization = email?.split("@")[1]?.split(".")[0]; // Fetch data from backend let response = await getSelect2dZoneData(zoneId, organization); - console.log('response: ', response); + let res = await getFloatingZoneData(zoneId, organization); - console.log('res: ', res); - setFloatingWidget(res) + + setFloatingWidget(res); // Set the selected zone in the store useDroppedObjectsStore.getState().setZone(zoneName, zoneId); if (Array.isArray(res)) { @@ -180,13 +182,9 @@ const DisplayZone: React.FC = ({ zoneViewPortTarget: response.viewPortCenter || {}, zoneViewPortPosition: response.viewPortposition || {}, }); - } catch (error) { - - - } + } catch (error) { } } - return (
= ({ className={`zone ${selectedZone.zoneName === zoneName ? "active" : "" }`} onClick={() => { - handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName) + handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName); }} > {zoneName} diff --git a/app/src/components/ui/componets/DistanceLines.tsx b/app/src/components/ui/componets/DistanceLines.tsx index 07cf202..e2ccbc1 100644 --- a/app/src/components/ui/componets/DistanceLines.tsx +++ b/app/src/components/ui/componets/DistanceLines.tsx @@ -32,7 +32,12 @@ const DistanceLines: React.FC = ({ obj, activeEdges }) => { height: `${obj.position.top}px`, }} > - {obj.position.top}px + {obj.position.top}px
)} @@ -49,7 +54,12 @@ const DistanceLines: React.FC = ({ obj, activeEdges }) => { height: `${obj.position.bottom}px`, }} > - {obj.position.bottom}px + {obj.position.bottom}px
)} @@ -66,7 +76,11 @@ const DistanceLines: React.FC = ({ obj, activeEdges }) => { width: `${obj.position.left}px`, }} > - {obj.position.left}px + {obj.position.left}px
)} @@ -83,7 +97,11 @@ const DistanceLines: React.FC = ({ obj, activeEdges }) => { width: `${obj.position.right}px`, }} > - {obj.position.right}px + {obj.position.right}px
)} diff --git a/app/src/components/ui/componets/Dropped3dWidget.tsx b/app/src/components/ui/componets/Dropped3dWidget.tsx index 94c5e45..b970872 100644 --- a/app/src/components/ui/componets/Dropped3dWidget.tsx +++ b/app/src/components/ui/componets/Dropped3dWidget.tsx @@ -51,29 +51,12 @@ export default function Dropped3dWidgets() { get3dWidgetData(); - }, [selectedZone.zoneId,activeModule]); - // useEffect(() => { - // // ✅ Set data only for the selected zone, keeping existing state structure - // setZoneWidgetData((prev) => ({ - // ...prev, - // [selectedZone.zoneId]: [ - // { - // "id": "1743322674626-50mucpb1c", - // "type": "ui-Widget 1", - // "position": [120.94655021768133, 4.142360029666558, 124.39283546121099] - // }, - // { - // "id": "1743322682086-je2h9x33v", - // "type": "ui-Widget 2", - // "position": [131.28751045879255, 0.009999999999970264, 133.92059801984362] - // } - // ] - // })); - // }, [selectedZone.zoneId]); // ✅ Only update when the zone changes + }, [selectedZone.zoneId, activeModule]); useEffect(() => { if (activeModule !== "visualization") return; if (widgetSubOption === "Floating") return; + if (widgetSubOption === "2D") return; if (selectedZone.zoneName === "") return const canvasElement = gl.domElement; const onDrop = async (event: DragEvent) => { @@ -103,13 +86,15 @@ export default function Dropped3dWidgets() { let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget) + console.log('response: ', response); - - // ✅ Store widgets uniquely for each zone - setZoneWidgetData((prev) => ({ - ...prev, - [selectedZone.zoneId]: [...(prev[selectedZone.zoneId] || []), newWidget], - })); + if (response.message === "Widget created successfully") { + // ✅ Store widgets uniquely for each zone + setZoneWidgetData((prev) => ({ + ...prev, + [selectedZone.zoneId]: [...(prev[selectedZone.zoneId] || []), newWidget], + })); + } } }; diff --git a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx index c3d61e3..cc9883d 100644 --- a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx +++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx @@ -68,6 +68,8 @@ const DroppedObjects: React.FC = () => { } | null>(null); // State to track the current position during drag const animationRef = useRef(null); const { activeModule } = useModuleStore(); + const kebabRef = useRef(null); + // Clean up animation frame on unmount useEffect(() => { @@ -77,6 +79,21 @@ const DroppedObjects: React.FC = () => { } }; }, []); + // useEffect(() => { + // const handleClickOutside = (event: MouseEvent) => { + // if (kebabRef.current && !kebabRef.current.contains(event.target as Node)) { + // setOpenKebabId(null); + // } + // }; + + // // Add event listener when component mounts + // document.addEventListener("mousedown", handleClickOutside); + + // // Clean up event listener when component unmounts + // return () => { + // document.removeEventListener("mousedown", handleClickOutside); + // }; + // }, []); const zoneEntries = Object.entries(zones); if (zoneEntries.length === 0) return null; @@ -109,6 +126,8 @@ const DroppedObjects: React.FC = () => { return; // Prevent dragging when clicking on the kebab menu or its options } const obj = zone.objects[index]; + const element = event.currentTarget as HTMLElement; + element.setPointerCapture(event.pointerId); const container = document.getElementById("real-time-vis-canvas"); if (!container) return; @@ -201,13 +220,15 @@ const DroppedObjects: React.FC = () => { // Update the current position state for DistanceLines setCurrentPosition(newPosition); + // Update position immediately without animation frame + updateObjectPosition(zoneName, draggingIndex.index, newPosition); - if (!animationRef.current) { - animationRef.current = requestAnimationFrame(() => { - updateObjectPosition(zoneName, draggingIndex.index, newPosition); - animationRef.current = null; - }); - } + // if (!animationRef.current) { + // animationRef.current = requestAnimationFrame(() => { + // updateObjectPosition(zoneName, draggingIndex.index, newPosition); + // animationRef.current = null; + // }); + // } }; const handlePointerUp = async (event: React.PointerEvent) => { @@ -249,6 +270,9 @@ const DroppedObjects: React.FC = () => { ...finalPosition, [activeProp1]: finalY, [activeProp2]: finalX, + // Clear opposite properties + [activeProp1 === "top" ? "bottom" : "top"]: "auto", + [activeProp2 === "left" ? "right" : "left"]: "auto", }; // Save to backend @@ -264,17 +288,29 @@ const DroppedObjects: React.FC = () => { updateObjectPosition(zoneName, draggingIndex.index, boundedPosition); } - // Clean up + // // Clean up + // setDraggingIndex(null); + // setOffset(null); + // setActiveEdges(null); // Clear active edges + // setCurrentPosition(null); // Reset current position + // if (animationRef.current) { + // cancelAnimationFrame(animationRef.current); + // animationRef.current = null; + // } + } catch (error) { + console.error("Error in handlePointerUp:", error); + } finally { + // Clean up regardless of success or failure setDraggingIndex(null); setOffset(null); - setActiveEdges(null); // Clear active edges - setCurrentPosition(null); // Reset current position + setActiveEdges(null); + setCurrentPosition(null); + + // Cancel any pending animation frame if (animationRef.current) { cancelAnimationFrame(animationRef.current); animationRef.current = null; } - } catch (error) { - console.error("Error in handlePointerUp:", error); } }; @@ -333,6 +369,7 @@ const DroppedObjects: React.FC = () => {
{ event.stopPropagation(); handleKebabClick(obj.id, event) @@ -362,6 +399,7 @@ const DroppedObjects: React.FC = () => {
)} + ))} diff --git a/app/src/components/ui/componets/Panel.tsx b/app/src/components/ui/componets/Panel.tsx index 6500119..61956b9 100644 --- a/app/src/components/ui/componets/Panel.tsx +++ b/app/src/components/ui/componets/Panel.tsx @@ -4,6 +4,7 @@ import { usePlayButtonStore } from "../../../store/usePlayButtonStore"; import { DraggableWidget } from "./DraggableWidget"; import { arrayMove } from "@dnd-kit/sortable"; import { addingWidgets } from "../../../services/realTimeVisulization/zoneData/addWidgets"; +import { useAsset3dWidget } from "../../../store/store"; type Side = "top" | "bottom" | "left" | "right"; @@ -53,6 +54,7 @@ const Panel: React.FC = ({ hiddenPanels, setZonesData, }) => { + const { widgetSelect, setWidgetSelect } = useAsset3dWidget(); const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({}); const [panelDimensions, setPanelDimensions] = useState<{ [side in Side]?: { width: number; height: number }; @@ -101,7 +103,9 @@ const Panel: React.FC = ({ const handleDrop = (e: React.DragEvent, panel: Side) => { + e.preventDefault(); + setWidgetSelect("") const { draggedAsset } = useWidgetStore.getState(); if (!draggedAsset) return; if (isPanelLocked(panel)) return; @@ -149,7 +153,7 @@ const Panel: React.FC = ({ }; try { let response = await addingWidgets(selectedZone.zoneId, organization, newWidget); - + if (response.message === "Widget created successfully") { setSelectedZone((prev) => ({ ...prev, diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx index f6a041a..387729d 100644 --- a/app/src/components/ui/componets/RealTimeVisulization.tsx +++ b/app/src/components/ui/componets/RealTimeVisulization.tsx @@ -132,6 +132,8 @@ const RealTimeVisulization: React.FC = () => { const relativeX = event.clientX - canvasRect.left; const relativeY = event.clientY - canvasRect.top; + const newPosition = determinePosition(canvasRect, relativeX, relativeY) + console.log('newPosition: ', newPosition); const newObject = { ...droppedData, id: generateUniqueId(), diff --git a/app/src/components/ui/componets/functions/determinePosition.ts b/app/src/components/ui/componets/functions/determinePosition.ts index 000e3a1..af9991b 100644 --- a/app/src/components/ui/componets/functions/determinePosition.ts +++ b/app/src/components/ui/componets/functions/determinePosition.ts @@ -1,69 +1,3 @@ -// export function determinePosition( -// canvasRect: DOMRect, -// relativeX: number, -// relativeY: number -// ): { -// top: number | "auto"; -// left: number | "auto"; -// right: number | "auto"; -// bottom: number | "auto"; -// } { -// // Calculate the midpoints of the canvas -// const centerX = canvasRect.width / 2; -// const centerY = canvasRect.height / 2; - -// // Initialize position with default values -// let position: { -// top: number | "auto"; -// left: number | "auto"; -// right: number | "auto"; -// bottom: number | "auto"; -// }; - -// if (relativeY < centerY) { -// // Top half -// if (relativeX < centerX) { -// // Left side -// position = { -// top: relativeY, -// left: relativeX, -// right: "auto", -// bottom: "auto", -// }; -// } else { -// // Right side -// position = { -// top: relativeY, -// right: canvasRect.width - relativeX, -// left: "auto", -// bottom: "auto", -// }; -// } -// } else { -// // Bottom half -// if (relativeX < centerX) { -// // Left side -// position = { -// bottom: canvasRect.height - relativeY, -// left: relativeX, -// right: "auto", -// top: "auto", -// }; -// } else { -// // Right side -// position = { -// bottom: canvasRect.height - relativeY, -// right: canvasRect.width - relativeX, -// left: "auto", -// top: "auto", -// }; -// } -// } - -// return position; -// } - - export function determinePosition( canvasRect: DOMRect, @@ -89,16 +23,16 @@ export function determinePosition( if (relativeX < centerX) { console.log("Top-left"); position = { - top: relativeY, - left: relativeX, + top: relativeY - 41.5, + left: relativeX - 125, right: "auto", bottom: "auto", }; } else { console.log("Top-right"); position = { - top: relativeY, - right: canvasRect.width - relativeX, + top: relativeY - 41.5, + right: canvasRect.width - relativeX - 125, left: "auto", bottom: "auto", }; @@ -107,16 +41,16 @@ export function determinePosition( if (relativeX < centerX) { console.log("Bottom-left"); position = { - bottom: canvasRect.height - relativeY, - left: relativeX, + bottom: canvasRect.height - relativeY - 41.5, + left: relativeX - 125, right: "auto", top: "auto", }; } else { console.log("Bottom-right"); position = { - bottom: canvasRect.height - relativeY, - right: canvasRect.width - relativeX, + bottom: canvasRect.height - relativeY - 41.5, + right: canvasRect.width - relativeX - 125, left: "auto", top: "auto", }; @@ -124,4 +58,4 @@ export function determinePosition( } return position; -} \ No newline at end of file +} diff --git a/app/src/services/realTimeVisulization/zoneData/add3dWidget.ts b/app/src/services/realTimeVisulization/zoneData/add3dWidget.ts index 6d976b6..82562b7 100644 --- a/app/src/services/realTimeVisulization/zoneData/add3dWidget.ts +++ b/app/src/services/realTimeVisulization/zoneData/add3dWidget.ts @@ -1,5 +1,5 @@ -// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -let url_Backend_dwinzo = `http://192.168.0.102:5000`; +let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +// let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const adding3dWidgets = async ( zoneId: string, organization: string, diff --git a/app/src/services/realTimeVisulization/zoneData/addFloatingWidgets.ts b/app/src/services/realTimeVisulization/zoneData/addFloatingWidgets.ts index ee84841..fb644c6 100644 --- a/app/src/services/realTimeVisulization/zoneData/addFloatingWidgets.ts +++ b/app/src/services/realTimeVisulization/zoneData/addFloatingWidgets.ts @@ -1,5 +1,5 @@ -// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -let url_Backend_dwinzo = `http://192.168.0.102:5000`; +let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +// let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const addingFloatingWidgets = async ( zoneId: string, diff --git a/app/src/services/realTimeVisulization/zoneData/addWidgets.ts b/app/src/services/realTimeVisulization/zoneData/addWidgets.ts index 08969ab..8539e54 100644 --- a/app/src/services/realTimeVisulization/zoneData/addWidgets.ts +++ b/app/src/services/realTimeVisulization/zoneData/addWidgets.ts @@ -1,5 +1,5 @@ -// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -let url_Backend_dwinzo = `http://192.168.0.102:5000`; +let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +// let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const addingWidgets = async ( zoneId: string, organization: string, diff --git a/app/src/services/realTimeVisulization/zoneData/deleteFloatingWidget.ts b/app/src/services/realTimeVisulization/zoneData/deleteFloatingWidget.ts index cd46e5d..85c96b8 100644 --- a/app/src/services/realTimeVisulization/zoneData/deleteFloatingWidget.ts +++ b/app/src/services/realTimeVisulization/zoneData/deleteFloatingWidget.ts @@ -1,5 +1,5 @@ -// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -let url_Backend_dwinzo = `http://192.168.0.102:5000`; +let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +// let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const deleteFloatingWidgetApi = async ( floatWidgetID: string, diff --git a/app/src/services/realTimeVisulization/zoneData/deletePanel.ts b/app/src/services/realTimeVisulization/zoneData/deletePanel.ts index 0fc22e4..21f4846 100644 --- a/app/src/services/realTimeVisulization/zoneData/deletePanel.ts +++ b/app/src/services/realTimeVisulization/zoneData/deletePanel.ts @@ -1,5 +1,5 @@ -// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -let url_Backend_dwinzo = `http://192.168.0.102:5000`; +let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +// let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const deletePanelApi = async ( zoneId: string, diff --git a/app/src/services/realTimeVisulization/zoneData/deleteTemplate.ts b/app/src/services/realTimeVisulization/zoneData/deleteTemplate.ts index df55b37..e452f6d 100644 --- a/app/src/services/realTimeVisulization/zoneData/deleteTemplate.ts +++ b/app/src/services/realTimeVisulization/zoneData/deleteTemplate.ts @@ -1,5 +1,5 @@ -// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -let url_Backend_dwinzo = `http://192.168.0.102:5000`; +let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +// let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const deleteTemplateApi = async ( templateID: string, diff --git a/app/src/services/realTimeVisulization/zoneData/deleteWidgetApi.ts b/app/src/services/realTimeVisulization/zoneData/deleteWidgetApi.ts index 92836ed..e57e8cb 100644 --- a/app/src/services/realTimeVisulization/zoneData/deleteWidgetApi.ts +++ b/app/src/services/realTimeVisulization/zoneData/deleteWidgetApi.ts @@ -1,5 +1,5 @@ -// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -let url_Backend_dwinzo = `http://192.168.0.102:5000`; +let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +// let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const deleteWidgetApi = async ( widgetID: string, diff --git a/app/src/services/realTimeVisulization/zoneData/duplicateWidget.ts b/app/src/services/realTimeVisulization/zoneData/duplicateWidget.ts index 80f486d..f5ec834 100644 --- a/app/src/services/realTimeVisulization/zoneData/duplicateWidget.ts +++ b/app/src/services/realTimeVisulization/zoneData/duplicateWidget.ts @@ -1,5 +1,5 @@ -// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -let url_Backend_dwinzo = `http://192.168.0.102:5000`; +let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +// let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const duplicateWidgetApi = async ( zoneId: string, organization: string, diff --git a/app/src/services/realTimeVisulization/zoneData/get3dWidgetData.ts b/app/src/services/realTimeVisulization/zoneData/get3dWidgetData.ts index 71a6be7..b5b6200 100644 --- a/app/src/services/realTimeVisulization/zoneData/get3dWidgetData.ts +++ b/app/src/services/realTimeVisulization/zoneData/get3dWidgetData.ts @@ -1,5 +1,5 @@ -// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -let url_Backend_dwinzo = `http://192.168.0.102:5000`; +let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +// let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const get3dWidgetZoneData = async ( ZoneId?: string, organization?: string diff --git a/app/src/services/realTimeVisulization/zoneData/getFloatingData.ts b/app/src/services/realTimeVisulization/zoneData/getFloatingData.ts index 0246175..80d2b19 100644 --- a/app/src/services/realTimeVisulization/zoneData/getFloatingData.ts +++ b/app/src/services/realTimeVisulization/zoneData/getFloatingData.ts @@ -1,5 +1,5 @@ -// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -let url_Backend_dwinzo = `http://192.168.0.102:5000`; +let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +// let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const getFloatingZoneData = async ( ZoneId?: string, organization?: string diff --git a/app/src/services/realTimeVisulization/zoneData/getSelect2dZoneData.ts b/app/src/services/realTimeVisulization/zoneData/getSelect2dZoneData.ts index 2d85b73..00d4dfe 100644 --- a/app/src/services/realTimeVisulization/zoneData/getSelect2dZoneData.ts +++ b/app/src/services/realTimeVisulization/zoneData/getSelect2dZoneData.ts @@ -1,5 +1,5 @@ -// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -let url_Backend_dwinzo = `http://192.168.0.102:5000`; +let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +// let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const getSelect2dZoneData = async ( ZoneId?: string, diff --git a/app/src/services/realTimeVisulization/zoneData/getTemplate.ts b/app/src/services/realTimeVisulization/zoneData/getTemplate.ts index 3e516d7..a3aa3a3 100644 --- a/app/src/services/realTimeVisulization/zoneData/getTemplate.ts +++ b/app/src/services/realTimeVisulization/zoneData/getTemplate.ts @@ -1,5 +1,5 @@ -// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -let url_Backend_dwinzo = `http://192.168.0.102:5000`; +let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +// let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const getTemplateData = async (organization?: string) => { try { const response = await fetch( diff --git a/app/src/services/realTimeVisulization/zoneData/getZoneData.ts b/app/src/services/realTimeVisulization/zoneData/getZoneData.ts index f68ef15..efbac3b 100644 --- a/app/src/services/realTimeVisulization/zoneData/getZoneData.ts +++ b/app/src/services/realTimeVisulization/zoneData/getZoneData.ts @@ -1,5 +1,5 @@ -// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -let url_Backend_dwinzo = `http://192.168.0.102:5000`; +let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +// let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const getZone2dData = async (organization?: string) => { try { const response = await fetch( diff --git a/app/src/services/realTimeVisulization/zoneData/getZones.ts b/app/src/services/realTimeVisulization/zoneData/getZones.ts index 3be5c3c..8dbf79a 100644 --- a/app/src/services/realTimeVisulization/zoneData/getZones.ts +++ b/app/src/services/realTimeVisulization/zoneData/getZones.ts @@ -1,5 +1,5 @@ -// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -let url_Backend_dwinzo = `http://192.168.0.102:5000`; +let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +// let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const getZoneData = async (zoneId: string, organization: string) => { console.log("organization: ", organization); diff --git a/app/src/services/realTimeVisulization/zoneData/loadTemplate.ts b/app/src/services/realTimeVisulization/zoneData/loadTemplate.ts index 1ec0573..915160d 100644 --- a/app/src/services/realTimeVisulization/zoneData/loadTemplate.ts +++ b/app/src/services/realTimeVisulization/zoneData/loadTemplate.ts @@ -1,5 +1,5 @@ -// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -let url_Backend_dwinzo = `http://192.168.0.102:5000`; +let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +// let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const loadTempleteApi = async ( templateID: string, zoneId: string, diff --git a/app/src/services/realTimeVisulization/zoneData/panel.ts b/app/src/services/realTimeVisulization/zoneData/panel.ts index 6d93d1f..82f1289 100644 --- a/app/src/services/realTimeVisulization/zoneData/panel.ts +++ b/app/src/services/realTimeVisulization/zoneData/panel.ts @@ -1,5 +1,5 @@ -// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -let url_Backend_dwinzo = `http://192.168.0.102:5000`; +let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +// let url_Backend_dwinzo = `http://192.168.0.102:5000`; type Side = "top" | "bottom" | "left" | "right"; export const panelData = async ( diff --git a/app/src/services/realTimeVisulization/zoneData/saveTempleteApi.ts b/app/src/services/realTimeVisulization/zoneData/saveTempleteApi.ts index aa85b47..5c18031 100644 --- a/app/src/services/realTimeVisulization/zoneData/saveTempleteApi.ts +++ b/app/src/services/realTimeVisulization/zoneData/saveTempleteApi.ts @@ -1,5 +1,5 @@ -// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -let url_Backend_dwinzo = `http://192.168.0.102:5000`; +let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; +// let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const saveTemplateApi = async (organization: string, template: {}) => { console.log('template: ', template); try { diff --git a/app/src/services/realTimeVisulization/zoneData/useFloatingDataStore.ts b/app/src/services/realTimeVisulization/zoneData/useFloatingDataStore.ts deleted file mode 100644 index 39a542a..0000000 --- a/app/src/services/realTimeVisulization/zoneData/useFloatingDataStore.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { create } from "zustand"; - -const useFloatingDataStore = create((set) => ({ - floatingdata: [], // Initial state - setfloatingadata: (newData: []) => set({ floatingdata: newData }), // Setter function -})); - -export default useFloatingDataStore; diff --git a/app/src/store/store.ts b/app/src/store/store.ts index 6affa99..16064e1 100644 --- a/app/src/store/store.ts +++ b/app/src/store/store.ts @@ -11,16 +11,22 @@ export const useSocketStore = create((set: any, get: any) => ({ return; } - const socket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`, { + const socket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}`, { reconnection: false, auth: { email, organization }, }); - set({ socket }); + const VisualizationSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization`, { + reconnection: false, + auth: { email, organization }, + }); + + set({ socket, VisualizationSocket }); }, disconnectSocket: () => { set((state: any) => { state.socket?.disconnect(); + state.VisualizationSocket?.disconnect(); return { socket: null }; }); }, diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index d58f12d..4c18feb 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -616,8 +616,6 @@ - - .distance-line { position: absolute; border-style: dashed; From b828cb24372d542cc4a1a45094b350e3ecf851bc Mon Sep 17 00:00:00 2001 From: Gomathi9520 Date: Tue, 1 Apr 2025 19:35:11 +0530 Subject: [PATCH 4/4] socket added for 2d widget --- .../3D-cards/cards/ProductionCapacity.tsx | 3 +- .../3D-cards/cards/ReturnOfInvestment.tsx | 1 + .../layout/3D-cards/cards/StateWorking.tsx | 1 + .../layout/3D-cards/cards/Throughput.tsx | 1 + .../components/ui/componets/AddButtons.tsx | 79 ++++++++++------- .../ui/componets/DraggableWidget.tsx | 88 ++++++++++++------- .../ui/componets/Dropped3dWidget.tsx | 2 + .../ui/componets/DroppedFloatingWidgets.tsx | 32 +++---- app/src/components/ui/componets/Panel.tsx | 44 ++++++---- .../ui/componets/RealTimeVisulization.tsx | 4 + .../visualization/realTimeVizSocket.dev.tsx | 65 ++++++++++++++ app/src/store/store.ts | 35 +++++--- 12 files changed, 245 insertions(+), 110 deletions(-) create mode 100644 app/src/modules/visualization/realTimeVizSocket.dev.tsx diff --git a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx index 785f20d..b932417 100644 --- a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx +++ b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx @@ -79,9 +79,10 @@ const ProductionCapacity: React.FC = ({ position }) => }; return ( -
diff --git a/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx b/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx index 8e8c444..740c7be 100644 --- a/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx +++ b/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx @@ -111,6 +111,7 @@ const ReturnOfInvestment: React.FC = ({ position }) =>
Return of Investment
diff --git a/app/src/components/layout/3D-cards/cards/StateWorking.tsx b/app/src/components/layout/3D-cards/cards/StateWorking.tsx index 25ee39b..1c3ac4e 100644 --- a/app/src/components/layout/3D-cards/cards/StateWorking.tsx +++ b/app/src/components/layout/3D-cards/cards/StateWorking.tsx @@ -16,6 +16,7 @@ const StateWorking: React.FC = ({ position }) => {
diff --git a/app/src/components/layout/3D-cards/cards/Throughput.tsx b/app/src/components/layout/3D-cards/cards/Throughput.tsx index 220c2a2..543d5f1 100644 --- a/app/src/components/layout/3D-cards/cards/Throughput.tsx +++ b/app/src/components/layout/3D-cards/cards/Throughput.tsx @@ -94,6 +94,7 @@ const Throughput: React.FC = ({ position }) => {
Throughput
diff --git a/app/src/components/ui/componets/AddButtons.tsx b/app/src/components/ui/componets/AddButtons.tsx index d06be19..d5bfb29 100644 --- a/app/src/components/ui/componets/AddButtons.tsx +++ b/app/src/components/ui/componets/AddButtons.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect } from "react"; import { CleanPannel, EyeIcon, @@ -7,6 +7,7 @@ import { import { panelData } from "../../../services/realTimeVisulization/zoneData/panel"; import { AddIcon } from "../../icons/ExportCommonIcons"; import { deletePanelApi } from "../../../services/realTimeVisulization/zoneData/deletePanel"; +import { useSocketStore } from "../../../store/store"; // Define the type for `Side` type Side = "top" | "bottom" | "left" | "right"; @@ -17,7 +18,6 @@ interface ButtonsProps { zoneName: string; activeSides: Side[]; panelOrder: Side[]; - lockedPanels: Side[]; zoneId: string; zoneViewPortTarget: number[]; @@ -59,6 +59,9 @@ const AddButtons: React.FC = ({ setHiddenPanels, hiddenPanels, }) => { + + const { visualizationSocket } = useSocketStore(); + // Local state to track hidden panels // Function to toggle lock/unlock a panel @@ -109,65 +112,81 @@ const AddButtons: React.FC = ({ // Panel already exists: Remove widgets from that side and update activeSides const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value - + // Remove all widgets associated with the side and update active sides const cleanedWidgets = selectedZone.widgets.filter( (widget) => widget.panel !== side ); const newActiveSides = selectedZone.activeSides.filter((s) => s !== side); - + const updatedZone = { ...selectedZone, widgets: cleanedWidgets, activeSides: newActiveSides, panelOrder: newActiveSides, }; - - // API call to delete the panel - try { - const response = await deletePanelApi(selectedZone.zoneId, side, organization); - console.log('response: ', response); - if (response.message === "Panel deleted successfully") { - setSelectedZone(updatedZone); - } else { - console.error("Unexpected response:", response); - } - } catch (error) { - console.error("Error deleting panel:", error); + + let deletePanel = { + organization: organization, + panelName: side, + zoneId: selectedZone.zoneId } + if (visualizationSocket) { + visualizationSocket.emit("v2:viz-panel:delete", deletePanel) + } + setSelectedZone(updatedZone); + + // API call to delete the panel + // try { + // const response = await deletePanelApi(selectedZone.zoneId, side, organization); + // + // if (response.message === "Panel deleted successfully") { + // } else { + // + // } + // } catch (error) { + // + // } } else { // Panel does not exist: Create panel try { // Get email and organization safely with a default fallback const email = localStorage.getItem("email") || ""; - const organization = email?.split("@")[1]?.split(".")[0] ; - + const organization = email?.split("@")[1]?.split(".")[0]; + // Prevent duplicate side entries const newActiveSides = selectedZone.activeSides.includes(side) ? [...selectedZone.activeSides] : [...selectedZone.activeSides, side]; - + const updatedZone = { ...selectedZone, activeSides: newActiveSides, panelOrder: newActiveSides, }; - - // API call to create panels - const response = await panelData(organization, selectedZone.zoneId, newActiveSides); - console.log('response: ', response); - - if (response.message === "Panels created successfully") { - setSelectedZone(updatedZone); - } else { - console.error("Unexpected response:", response); + let addPanel = { + organization: organization, + zoneId: selectedZone.zoneId, + panelOrder: newActiveSides } + if (visualizationSocket) { + visualizationSocket.emit("v2:viz-panel:add", addPanel) + } + setSelectedZone(updatedZone); + // API call to create panels + // const response = await panelData(organization, selectedZone.zoneId, newActiveSides); + // + + // if (response.message === "Panels created successfully") { + // } else { + // + // } } catch (error) { - console.error("Error creating panels:", error); + } } }; - + return ( <> diff --git a/app/src/components/ui/componets/DraggableWidget.tsx b/app/src/components/ui/componets/DraggableWidget.tsx index db8c408..096779e 100644 --- a/app/src/components/ui/componets/DraggableWidget.tsx +++ b/app/src/components/ui/componets/DraggableWidget.tsx @@ -13,6 +13,7 @@ import { import { useEffect, useRef, useState } from "react"; import { duplicateWidgetApi } from "../../../services/realTimeVisulization/zoneData/duplicateWidget"; import { deleteWidgetApi } from "../../../services/realTimeVisulization/zoneData/deleteWidgetApi"; +import { useSocketStore } from "../../../store/store"; type Side = "top" | "bottom" | "left" | "right"; @@ -69,6 +70,7 @@ export const DraggableWidget = ({ openKebabId: string | null; setOpenKebabId: (id: string | null) => void; }) => { + const { visualizationSocket } = useSocketStore(); const { selectedChartId, setSelectedChartId } = useWidgetStore(); const [panelDimensions, setPanelDimensions] = useState<{ [side in Side]?: { width: number; height: number }; @@ -85,16 +87,34 @@ export const DraggableWidget = ({ try { const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0]; - const response = await deleteWidgetApi(widget.id, organization); - if (response?.message === "Widget deleted successfully") { - const updatedWidgets = selectedZone.widgets.filter( - (w: Widget) => w.id !== widget.id - ); - setSelectedZone((prevZone: any) => ({ - ...prevZone, - widgets: updatedWidgets, - })); + let deleteWidget = { + zoneId: selectedZone.zoneId, + widgetID: widget.id, + organization: organization } + if (visualizationSocket) { + visualizationSocket.emit("v2:viz-widget:delete", deleteWidget) + } + const updatedWidgets = selectedZone.widgets.filter( + (w: Widget) => w.id !== widget.id + ); + console.log('updatedWidgets: ', updatedWidgets); + setSelectedZone((prevZone: any) => ({ + ...prevZone, + widgets: updatedWidgets, + })); + setOpenKebabId(null); + + // const response = await deleteWidgetApi(widget.id, organization); + // if (response?.message === "Widget deleted successfully") { + // const updatedWidgets = selectedZone.widgets.filter( + // (w: Widget) => w.id !== widget.id + // ); + // setSelectedZone((prevZone: any) => ({ + // ...prevZone, + // widgets: updatedWidgets, + // })); + // } } catch (error) { } finally { @@ -249,7 +269,7 @@ export const DraggableWidget = ({ )} {/* Render charts based on widget type */} - + {widget.type === "progress" && ( )} @@ -260,14 +280,14 @@ export const DraggableWidget = ({ title={widget.title} fontSize={widget.fontSize} fontWeight={widget.fontWeight} - // data={{ - // measurements: [ - // { name: "testDevice", fields: "powerConsumption" }, - // { name: "furnace", fields: "powerConsumption" }, - // ], - // interval: 1000, - // duration: "1h", - // }} + // data={{ + // measurements: [ + // { name: "testDevice", fields: "powerConsumption" }, + // { name: "furnace", fields: "powerConsumption" }, + // ], + // interval: 1000, + // duration: "1h", + // }} /> )} {widget.type === "bar" && ( @@ -277,14 +297,14 @@ export const DraggableWidget = ({ title={widget.title} fontSize={widget.fontSize} fontWeight={widget.fontWeight} - // data={{ - // measurements: [ - // { name: "testDevice", fields: "powerConsumption" }, - // { name: "furnace", fields: "powerConsumption" }, - // ], - // interval: 1000, - // duration: "1h", - // }} + // data={{ + // measurements: [ + // { name: "testDevice", fields: "powerConsumption" }, + // { name: "furnace", fields: "powerConsumption" }, + // ], + // interval: 1000, + // duration: "1h", + // }} /> )} {widget.type === "pie" && ( @@ -294,14 +314,14 @@ export const DraggableWidget = ({ title={widget.title} fontSize={widget.fontSize} fontWeight={widget.fontWeight} - // data={{ - // measurements: [ - // { name: "testDevice", fields: "powerConsumption" }, - // { name: "furnace", fields: "powerConsumption" }, - // ], - // interval: 1000, - // duration: "1h", - // }} + // data={{ + // measurements: [ + // { name: "testDevice", fields: "powerConsumption" }, + // { name: "furnace", fields: "powerConsumption" }, + // ], + // interval: 1000, + // duration: "1h", + // }} /> )} {widget.type === "doughnut" && ( diff --git a/app/src/components/ui/componets/Dropped3dWidget.tsx b/app/src/components/ui/componets/Dropped3dWidget.tsx index b970872..7ce1617 100644 --- a/app/src/components/ui/componets/Dropped3dWidget.tsx +++ b/app/src/components/ui/componets/Dropped3dWidget.tsx @@ -35,6 +35,7 @@ export default function Dropped3dWidgets() { async function get3dWidgetData() { let result = await get3dWidgetZoneData(selectedZone.zoneId, organization); + console.log('result: ', result); setWidgets3D(result) // Ensure the extracted data has id, type, and position correctly mapped const formattedWidgets = result.map((widget: any) => ({ @@ -107,6 +108,7 @@ export default function Dropped3dWidgets() { // Get widgets for the currently active zone const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || []; + console.log('activeZoneWidgets: ', activeZoneWidgets); return ( <> diff --git a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx index cc9883d..9c3f4c4 100644 --- a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx +++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx @@ -79,21 +79,21 @@ const DroppedObjects: React.FC = () => { } }; }, []); - // useEffect(() => { - // const handleClickOutside = (event: MouseEvent) => { - // if (kebabRef.current && !kebabRef.current.contains(event.target as Node)) { - // setOpenKebabId(null); - // } - // }; - - // // Add event listener when component mounts - // document.addEventListener("mousedown", handleClickOutside); - - // // Clean up event listener when component unmounts - // return () => { - // document.removeEventListener("mousedown", handleClickOutside); - // }; - // }, []); + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (kebabRef.current && !kebabRef.current.contains(event.target as Node)) { + setOpenKebabId(null); + } + }; + + // Add event listener when component mounts + document.addEventListener("mousedown", handleClickOutside); + + // Clean up event listener when component unmounts + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); const zoneEntries = Object.entries(zones); if (zoneEntries.length === 0) return null; @@ -378,7 +378,7 @@ const DroppedObjects: React.FC = () => {
{openKebabId === obj.id && ( -
+
{ event.stopPropagation(); handleDuplicate(zoneName, index); // Call the duplicate handler diff --git a/app/src/components/ui/componets/Panel.tsx b/app/src/components/ui/componets/Panel.tsx index 61956b9..56cdc06 100644 --- a/app/src/components/ui/componets/Panel.tsx +++ b/app/src/components/ui/componets/Panel.tsx @@ -4,7 +4,7 @@ import { usePlayButtonStore } from "../../../store/usePlayButtonStore"; import { DraggableWidget } from "./DraggableWidget"; import { arrayMove } from "@dnd-kit/sortable"; import { addingWidgets } from "../../../services/realTimeVisulization/zoneData/addWidgets"; -import { useAsset3dWidget } from "../../../store/store"; +import { useAsset3dWidget, useSocketStore } from "../../../store/store"; type Side = "top" | "bottom" | "left" | "right"; @@ -62,6 +62,7 @@ const Panel: React.FC = ({ const [openKebabId, setOpenKebabId] = useState(null); const { isPlaying } = usePlayButtonStore(); + const { visualizationSocket } = useSocketStore(); const getPanelStyle = useMemo( () => (side: Side) => { @@ -102,10 +103,7 @@ const Panel: React.FC = ({ ); const handleDrop = (e: React.DragEvent, panel: Side) => { - - e.preventDefault(); - setWidgetSelect("") const { draggedAsset } = useWidgetStore.getState(); if (!draggedAsset) return; if (isPanelLocked(panel)) return; @@ -114,7 +112,6 @@ const Panel: React.FC = ({ const maxCapacity = calculatePanelCapacity(panel); if (currentWidgetsCount >= maxCapacity) return; - addWidgetToPanel(draggedAsset, panel); }; @@ -151,18 +148,33 @@ const Panel: React.FC = ({ id: generateUniqueId(), panel, }; - try { - let response = await addingWidgets(selectedZone.zoneId, organization, newWidget); - - if (response.message === "Widget created successfully") { - setSelectedZone((prev) => ({ - ...prev, - widgets: [...prev.widgets, newWidget], - })); - } - } catch (error) { - console.error("Error adding widget:", error); + let addWidget = { + organization: organization, + zoneId: selectedZone.zoneId, + widget: newWidget } + console.log('newWidget: ', newWidget); + console.log('addWidget: ', addWidget); + if (visualizationSocket) { + visualizationSocket.emit("v2:viz-widget:add", addWidget) + } + setSelectedZone((prev) => ({ + ...prev, + widgets: [...prev.widgets, newWidget], + })); + + // try { + // let response = await addingWidgets(selectedZone.zoneId, organization, newWidget); + + // if (response.message === "Widget created successfully") { + // setSelectedZone((prev) => ({ + // ...prev, + // widgets: [...prev.widgets, newWidget], + // })); + // } + // } catch (error) { + // console.error("Error adding widget:", error); + // } }; diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx index 387729d..4a40270 100644 --- a/app/src/components/ui/componets/RealTimeVisulization.tsx +++ b/app/src/components/ui/componets/RealTimeVisulization.tsx @@ -11,6 +11,7 @@ import DroppedObjects from "./DroppedFloatingWidgets"; import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore"; import { useAsset3dWidget, + useSocketStore, useWidgetSubOption, useZones, } from "../../../store/store"; @@ -18,6 +19,7 @@ import { getZone2dData } from "../../../services/realTimeVisulization/zoneData/g import { generateUniqueId } from "../../../functions/generateUniqueId"; import { determinePosition } from "./functions/determinePosition"; import { addingFloatingWidgets } from "../../../services/realTimeVisulization/zoneData/addFloatingWidgets"; +import SocketRealTimeViz from "../../../modules/visualization/realTimeVizSocket.dev"; type Side = "top" | "bottom" | "left" | "right"; @@ -56,6 +58,7 @@ const RealTimeVisulization: React.FC = () => { >({}); const { widgetSelect, setWidgetSelect } = useAsset3dWidget(); const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption(); + const { visualizationSocket } = useSocketStore(); useEffect(() => { async function GetZoneData() { @@ -204,6 +207,7 @@ const RealTimeVisulization: React.FC = () => {
{activeModule === "visualization" && selectedZone.zoneName !== "" && } + {activeModule === "visualization" && } {/* */} {activeModule === "visualization" && ( <> diff --git a/app/src/modules/visualization/realTimeVizSocket.dev.tsx b/app/src/modules/visualization/realTimeVizSocket.dev.tsx new file mode 100644 index 0000000..4210d01 --- /dev/null +++ b/app/src/modules/visualization/realTimeVizSocket.dev.tsx @@ -0,0 +1,65 @@ +import { useEffect } from "react"; +import { useSocketStore } from "../../store/store"; +import { useSelectedZoneStore } from "../../store/useZoneStore"; + +export default function SocketRealTimeViz() { + const { visualizationSocket } = useSocketStore(); + const { selectedZone, setSelectedZone } = useSelectedZoneStore(); + 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) => { + if (addPanel.success) { + let addPanelData = addPanel.data.data + setSelectedZone(addPanelData) + } + }) + //delete panel response + visualizationSocket.on("viz-panel:response:delete", (deletePanel: any) => { + 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) { + setSelectedZone((prev) => { + const isWidgetAlreadyAdded = prev.widgets.some( + (widget) => widget.id === response.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 + }; + }); + } + }); + //delete 2D Widget + visualizationSocket.on("viz-widget:response:delete", (deleteWidget: any) => { + console.log('deleteWidget: ', deleteWidget); + if (deleteWidget?.success && deleteWidget.data) { + setSelectedZone((prevZone: any) => ({ + ...prevZone, + zoneId: deleteWidget.data.zoneId, + zoneName: deleteWidget.data.zoneName, + widgets: deleteWidget.data.widgetDeleteDatas, // Replace with new widget list + })); + } + }); + } + }, []) + + useEffect(() => { + + }, [selectedZone]) + return ( + <> + ) +} \ No newline at end of file diff --git a/app/src/store/store.ts b/app/src/store/store.ts index 16064e1..152fa9d 100644 --- a/app/src/store/store.ts +++ b/app/src/store/store.ts @@ -11,22 +11,28 @@ export const useSocketStore = create((set: any, get: any) => ({ return; } - const socket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}`, { - reconnection: false, - auth: { email, organization }, - }); + const socket = io( + `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}`, + { + reconnection: false, + auth: { email, organization }, + } + ); - const VisualizationSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization`, { - reconnection: false, - auth: { email, organization }, - }); + const visualizationSocket = io( + `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization`, + { + reconnection: false, + auth: { email, organization }, + } + ); - set({ socket, VisualizationSocket }); + set({ socket, visualizationSocket }); }, disconnectSocket: () => { set((state: any) => { state.socket?.disconnect(); - state.VisualizationSocket?.disconnect(); + state.visualizationSocket?.disconnect(); return { socket: null }; }); }, @@ -211,7 +217,9 @@ export const useActiveLayer = create((set: any) => ({ interface RefTextUpdateState { refTextupdate: number; - setRefTextUpdate: (callback: (currentValue: number) => number | number) => void; + setRefTextUpdate: ( + callback: (currentValue: number) => number | number + ) => void; } export const useRefTextUpdate = create((set) => ({ @@ -219,7 +227,9 @@ export const useRefTextUpdate = create((set) => ({ setRefTextUpdate: (callback) => set((state) => ({ refTextupdate: - typeof callback === "function" ? callback(state.refTextupdate) : callback, + typeof callback === "function" + ? callback(state.refTextupdate) + : callback, })), })); @@ -399,4 +409,3 @@ export const useWidgetSubOption = create((set: any) => ({ widgetSubOption: "2D", setWidgetSubOption: (x: any) => set({ widgetSubOption: x }), })); -