From 9611ad69cf7e45ed1d7f7a08e85b201fd833cb8b Mon Sep 17 00:00:00 2001 From: Nalvazhuthi Date: Mon, 31 Mar 2025 18:22:40 +0530 Subject: [PATCH 1/4] updated distanceLine and fix drag bug --- .../components/ui/componets/DistanceLines.tsx | 93 +++++ .../ui/componets/DroppedFloatingWidgets.tsx | 391 ++++++++++++------ .../componets/functions/determinePosition.ts | 14 +- .../functions/getActiveProperties.ts | 26 +- .../zoneData/useFloatingDataStore.ts | 8 + app/src/store/useDroppedObjectsStore.ts | 2 + app/src/styles/pages/realTimeViz.scss | 152 +++++++ 7 files changed, 535 insertions(+), 151 deletions(-) create mode 100644 app/src/components/ui/componets/DistanceLines.tsx create mode 100644 app/src/services/realTimeVisulization/zoneData/useFloatingDataStore.ts diff --git a/app/src/components/ui/componets/DistanceLines.tsx b/app/src/components/ui/componets/DistanceLines.tsx new file mode 100644 index 0000000..07cf202 --- /dev/null +++ b/app/src/components/ui/componets/DistanceLines.tsx @@ -0,0 +1,93 @@ +import React from "react"; + +interface DistanceLinesProps { + obj: { + position: { + top?: number | "auto"; + left?: number | "auto"; + right?: number | "auto"; + bottom?: number | "auto"; + }; + }; + activeEdges: { + vertical: "top" | "bottom"; + horizontal: "left" | "right"; + } | null; +} + +const DistanceLines: React.FC = ({ obj, activeEdges }) => { + if (!activeEdges) return null; + + return ( + <> + {activeEdges.vertical === "top" && typeof obj.position.top === "number" && ( +
+ {obj.position.top}px +
+ )} + + {activeEdges.vertical === "bottom" && + typeof obj.position.bottom === "number" && ( +
+ {obj.position.bottom}px +
+ )} + + {activeEdges.horizontal === "left" && + typeof obj.position.left === "number" && ( +
+ {obj.position.left}px +
+ )} + + {activeEdges.horizontal === "right" && + typeof obj.position.right === "number" && ( +
+ {obj.position.right}px +
+ )} + + ); +}; + +export default DistanceLines; \ No newline at end of file diff --git a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx index bf19bb9..272051c 100644 --- a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx +++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx @@ -1,6 +1,5 @@ import { WalletIcon } from "../../icons/3dChartIcons"; import { useEffect, useRef, useState } from "react"; -import { Line } from "react-chartjs-2"; import { useDroppedObjectsStore, Zones, @@ -9,29 +8,61 @@ import useModuleStore from "../../../store/useModuleStore"; import { determinePosition } from "./functions/determinePosition"; import { getActiveProperties } from "./functions/getActiveProperties"; import { addingFloatingWidgets } from "../../../services/realTimeVisulization/zoneData/addFloatingWidgets"; +import { + DublicateIcon, + KebabIcon, + DeleteIcon, +} from "../../icons/ExportCommonIcons"; +import DistanceLines from "./DistanceLines"; // Import the DistanceLines component + +interface DraggingState { + zone: string; + index: number; + initialPosition: { + top: number | "auto"; + left: number | "auto"; + right: number | "auto"; + bottom: number | "auto"; + }; +} const DroppedObjects: React.FC = () => { const zones = useDroppedObjectsStore((state) => state.zones); - + const [openKebabId, setOpenKebabId] = useState(null); const updateObjectPosition = useDroppedObjectsStore( (state) => state.updateObjectPosition ); - const [draggingIndex, setDraggingIndex] = useState<{ - zone: string; - index: number; - } | null>(null); + const [draggingIndex, setDraggingIndex] = useState( + null + ); const [offset, setOffset] = useState<[number, number] | null>(null); - const positionRef = useRef<[number, number] | null>(null); + const [activeEdges, setActiveEdges] = useState<{ + vertical: "top" | "bottom"; + horizontal: "left" | "right"; + } | null>(null); // State to track active edges for distance lines + const [currentPosition, setCurrentPosition] = useState<{ + top: number | "auto"; + left: number | "auto"; + right: number | "auto"; + bottom: number | "auto"; + } | null>(null); // State to track the current position during drag const animationRef = useRef(null); const { activeModule } = useModuleStore(); - // Get the first zone and its objects - const zoneEntries = Object.entries(zones); - if (zoneEntries.length === 0) return null; // No zone, nothing to render - const [zoneName, zone] = zoneEntries[0]; // Only render the first zone + // Clean up animation frame on unmount + useEffect(() => { + return () => { + if (animationRef.current) { + cancelAnimationFrame(animationRef.current); + } + }; + }, []); - // Handle pointer down event - function handlePointerDown(event: React.PointerEvent, index: number) { + const zoneEntries = Object.entries(zones); + if (zoneEntries.length === 0) return null; + const [zoneName, zone] = zoneEntries[0]; + + const handlePointerDown = (event: React.PointerEvent, index: number) => { const obj = zone.objects[index]; const container = document.getElementById("real-time-vis-canvas"); if (!container) return; @@ -40,41 +71,41 @@ const DroppedObjects: React.FC = () => { const relativeX = event.clientX - rect.left; const relativeY = event.clientY - rect.top; - // Determine which properties are active for this object + // Determine active properties for the initial position const [activeProp1, activeProp2] = getActiveProperties(obj.position); - // Calculate the offset based on the active properties + // Set active edges for distance lines + const vertical = activeProp1 === "top" ? "top" : "bottom"; + const horizontal = activeProp2 === "left" ? "left" : "right"; + setActiveEdges({ vertical, horizontal }); + + // Store the initial position strategy and active edges + setDraggingIndex({ + zone: zoneName, + index, + initialPosition: { ...obj.position }, + }); + + // Calculate offset from mouse to object edges let offsetX = 0; let offsetY = 0; if (activeProp1 === "top") { - offsetY = - relativeY - - (typeof obj.position.top === "number" ? obj.position.top : 0); - } else if (activeProp1 === "bottom") { - offsetY = - rect.height - - relativeY - - (typeof obj.position.bottom === "number" ? obj.position.bottom : 0); + offsetY = relativeY - (obj.position.top as number); + } else { + offsetY = rect.height - relativeY - (obj.position.bottom as number); } if (activeProp2 === "left") { - offsetX = - relativeX - - (typeof obj.position.left === "number" ? obj.position.left : 0); - } else if (activeProp2 === "right") { - offsetX = - rect.width - - relativeX - - (typeof obj.position.right === "number" ? obj.position.right : 0); + offsetX = relativeX - (obj.position.left as number); + } else { + offsetX = rect.width - relativeX - (obj.position.right as number); } - setDraggingIndex({ zone: zoneName, index }); setOffset([offsetY, offsetX]); - } + }; - // Handle pointer move event - function handlePointerMove(event: React.PointerEvent) { + const handlePointerMove = (event: React.PointerEvent) => { if (!draggingIndex || !offset) return; const container = document.getElementById("real-time-vis-canvas"); @@ -84,91 +115,194 @@ const DroppedObjects: React.FC = () => { const relativeX = event.clientX - rect.left; const relativeY = event.clientY - rect.top; - // Determine which properties are active for the dragged object - const obj = zone.objects[draggingIndex.index]; - const [activeProp1, activeProp2] = getActiveProperties(obj.position); + // Dynamically determine the current position strategy + const newPositionStrategy = determinePosition(rect, relativeX, relativeY); + const [activeProp1, activeProp2] = getActiveProperties(newPositionStrategy); - // Calculate the new position based on the active properties - let newX = 0; + // Update active edges for distance lines + const vertical = activeProp1 === "top" ? "top" : "bottom"; + const horizontal = activeProp2 === "left" ? "left" : "right"; + setActiveEdges({ vertical, horizontal }); + + // Calculate new position based on the active properties let newY = 0; - - if (activeProp2 === "left") { - newX = relativeX - offset[1]; - } else if (activeProp2 === "right") { - newX = rect.width - (relativeX + offset[1]); - } + let newX = 0; if (activeProp1 === "top") { newY = relativeY - offset[0]; - } else if (activeProp1 === "bottom") { + } else { newY = rect.height - (relativeY + offset[0]); } - // Ensure the object stays within the canvas boundaries + if (activeProp2 === "left") { + newX = relativeX - offset[1]; + } else { + newX = rect.width - (relativeX + offset[1]); + } + + // Apply boundaries newX = Math.max(0, Math.min(rect.width - 50, newX)); newY = Math.max(0, Math.min(rect.height - 50, newY)); - // Update the position reference - positionRef.current = [newY, newX]; + // Create new position object + const newPosition = { + ...newPositionStrategy, + [activeProp1]: newY, + [activeProp2]: newX, + // Clear opposite properties + [activeProp1 === "top" ? "bottom" : "top"]: "auto", + [activeProp2 === "left" ? "right" : "left"]: "auto", + }; + + // Update the current position state for DistanceLines + setCurrentPosition(newPosition); - // Update the object's position using requestAnimationFrame for smoother animations if (!animationRef.current) { animationRef.current = requestAnimationFrame(() => { - if (positionRef.current) { - updateObjectPosition(zoneName, draggingIndex.index, { - ...obj.position, - [activeProp1]: positionRef.current[0], - [activeProp2]: positionRef.current[1], - }); - } + updateObjectPosition(zoneName, draggingIndex.index, newPosition); animationRef.current = null; }); } - } + }; - // Handle pointer up event - async function handlePointerUp(event: React.MouseEvent) { + const handlePointerUp = async (event: React.PointerEvent) => { try { if (!draggingIndex || !offset) return; - const email = localStorage.getItem("email") || ""; - const organization = email?.split("@")[1]?.split(".")[0]; const container = document.getElementById("real-time-vis-canvas"); - if (!container) throw new Error("Canvas container not found"); + if (!container) return; const rect = container.getBoundingClientRect(); const relativeX = event.clientX - rect.left; const relativeY = event.clientY - rect.top; - // Recalculate the position using determinePosition - const newPosition = determinePosition(rect, relativeX, relativeY); + // Only now determine the final position strategy + const finalPosition = determinePosition(rect, relativeX, relativeY); + const [activeProp1, activeProp2] = getActiveProperties(finalPosition); - // Validate the dragging index and get the object - if (!zone.objects[draggingIndex.index]) { - throw new Error("Dragged object not found in the zone"); + // Calculate final position using the new strategy + let finalY = 0; + let finalX = 0; + + if (activeProp1 === "top") { + finalY = relativeY - offset[0]; + } else { + finalY = rect.height - (relativeY + offset[0]); } - const obj = { ...zone.objects[draggingIndex.index], position: newPosition }; - let response = await addingFloatingWidgets(zone.zoneId, organization, obj); + + if (activeProp2 === "left") { + finalX = relativeX - offset[1]; + } else { + finalX = rect.width - (relativeX + offset[1]); + } + + // Apply boundaries + finalX = Math.max(0, Math.min(rect.width - 50, finalX)); + finalY = Math.max(0, Math.min(rect.height - 50, finalY)); + + const boundedPosition = { + ...finalPosition, + [activeProp1]: finalY, + [activeProp2]: finalX, + }; + + // Save to backend + const email = localStorage.getItem("email") || ""; + const organization = email?.split("@")[1]?.split(".")[0]; + const response = await addingFloatingWidgets(zone.zoneId, organization, { + ...zone.objects[draggingIndex.index], + position: boundedPosition, + }); + if (response.message === "Widget updated successfully") { - updateObjectPosition(zoneName, draggingIndex.index, newPosition); + updateObjectPosition(zoneName, draggingIndex.index, boundedPosition); } - // Reset states + // 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); } - } + }; + const handleKebabClick = (id: string, event: React.MouseEvent) => { + event.stopPropagation(); + 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 ( -
+
{zone.objects.map((obj, index) => (
{ style={{ position: "absolute", top: - typeof obj.position.top !== "string" + typeof obj.position.top === "number" ? `${obj.position.top}px` : "auto", left: - typeof obj.position.left !== "string" + typeof obj.position.left === "number" ? `${obj.position.left}px` : "auto", right: - typeof obj.position.right !== "string" + typeof obj.position.right === "number" ? `${obj.position.right}px` : "auto", bottom: - typeof obj.position.bottom !== "string" + typeof obj.position.bottom === "number" ? `${obj.position.bottom}px` : "auto", - // transition: draggingIndex?.index === index ? "none" : "transform 0.1s ease-out", }} onPointerDown={(event) => handlePointerDown(event, index)} > - {obj.className === "floating total-card" ? ( - <> -
-
{obj.header}
-
-
{obj.value}
-
{obj.per}
+ {renderObjectContent(obj)} +
handleKebabClick(obj.id, event)} + > + +
+ {openKebabId === obj.id && ( +
+
+
+
+
Duplicate
-
- -
- - ) : obj.className === "warehouseThroughput floating" ? ( - <> -
-

Warehouse Throughput

-

- (+5) more in 2025 -

-
-
- {/* */} -
- - ) : obj.className === "fleetEfficiency floating" ? ( - <> -

Fleet Efficiency

-
-
-
-
-
+
+
+
+
Delete
-
- 0% -
-
{obj.per}%
-
Optimal
-
- 100% -
- - ) : null} +
+ )}
))} + + {/* Render DistanceLines component during drag */} + {draggingIndex !== null && + activeEdges !== null && + currentPosition !== null && ( + + )}
); }; export default DroppedObjects; + +// in pointer move even when i goes to top right the value not changes to top right same problem in bottom left diff --git a/app/src/components/ui/componets/functions/determinePosition.ts b/app/src/components/ui/componets/functions/determinePosition.ts index 0fcd727..82f2303 100644 --- a/app/src/components/ui/componets/functions/determinePosition.ts +++ b/app/src/components/ui/componets/functions/determinePosition.ts @@ -8,11 +8,9 @@ export function determinePosition( 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"; @@ -21,9 +19,8 @@ export function determinePosition( }; if (relativeY < centerY) { - // Top half if (relativeX < centerX) { - // Left side + console.log("Top-left"); position = { top: relativeY, left: relativeX, @@ -31,7 +28,7 @@ export function determinePosition( bottom: "auto", }; } else { - // Right side + console.log("Top-right"); position = { top: relativeY, right: canvasRect.width - relativeX, @@ -40,9 +37,8 @@ export function determinePosition( }; } } else { - // Bottom half if (relativeX < centerX) { - // Left side + console.log("Bottom-left"); position = { bottom: canvasRect.height - relativeY, left: relativeX, @@ -50,7 +46,7 @@ export function determinePosition( top: "auto", }; } else { - // Right side + console.log("Bottom-right"); position = { bottom: canvasRect.height - relativeY, right: canvasRect.width - relativeX, @@ -61,4 +57,4 @@ export function determinePosition( } return position; -} +} \ No newline at end of file diff --git a/app/src/components/ui/componets/functions/getActiveProperties.ts b/app/src/components/ui/componets/functions/getActiveProperties.ts index 2cb0b1b..1a05d34 100644 --- a/app/src/components/ui/componets/functions/getActiveProperties.ts +++ b/app/src/components/ui/componets/functions/getActiveProperties.ts @@ -1,17 +1,11 @@ -export const getActiveProperties = (position: { - top: number | "auto"; - left: number | "auto"; - right: number | "auto"; - bottom: number | "auto"; -}) => { - let activeProps: ["top", "left"] | ["bottom", "right"] = ["top", "left"]; // Default to top-left - - if ( - typeof position.bottom !== "string" && - typeof position.right !== "string" - ) { - activeProps = ["bottom", "right"]; +export function getActiveProperties(position: any): [string, string] { + if (position.top !== "auto" && position.left !== "auto") { + return ["top", "left"]; // Top-left + } else if (position.top !== "auto" && position.right !== "auto") { + return ["top", "right"]; // Top-right + } else if (position.bottom !== "auto" && position.left !== "auto") { + return ["bottom", "left"]; // Bottom-left + } else { + return ["bottom", "right"]; // Bottom-right } - - return activeProps; -}; +} \ No newline at end of file diff --git a/app/src/services/realTimeVisulization/zoneData/useFloatingDataStore.ts b/app/src/services/realTimeVisulization/zoneData/useFloatingDataStore.ts new file mode 100644 index 0000000..39a542a --- /dev/null +++ b/app/src/services/realTimeVisulization/zoneData/useFloatingDataStore.ts @@ -0,0 +1,8 @@ +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/useDroppedObjectsStore.ts b/app/src/store/useDroppedObjectsStore.ts index dc648a9..5ded701 100644 --- a/app/src/store/useDroppedObjectsStore.ts +++ b/app/src/store/useDroppedObjectsStore.ts @@ -90,3 +90,5 @@ export interface Zones { zoneId: string; objects: DroppedObject[]; } + + diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index 69df460..b080840 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -541,4 +541,156 @@ .zone.active { background-color: #007bff; color: white; +} + + + +.floating-wrapper { + .icon { + width: 25px !important; + height: 25px !important; + background-color: transparent; + } + + .kebab { + width: 30px; + height: 30px; + position: absolute !important; + top: 0px; + right: 0px; + z-index: 10; + cursor: pointer; + @include flex-center; + } + + .kebab-options { + position: absolute; + top: 18px; + right: 5px; + transform: translate(0px, 0); + background-color: var(--background-color); + z-index: 10; + + display: flex; + flex-direction: column; + gap: 6px; + border-radius: 4px; + + box-shadow: var(--box-shadow-medium); + + .btn { + display: flex; + gap: 6px; + align-items: center; + padding: 5px 10px; + color: var(--text-color); + cursor: pointer; + + &:hover { + .label { + color: var(--accent-color); + } + } + + &:hover { + background-color: var(--highlight-accent-color); + width: 100%; + + svg { + &:first-child { + fill: var(--accent-color); + } + + &:last-child { + fill: auto; + stroke: var(--accent-color); + } + } + } + } + + .dublicate { + cursor: not-allowed; + } + + + + } +} + + + + + + + + + + +/* General styles for all distance lines */ +.distance-line { + position: absolute; + border-style: dashed; + border-color: var(--accent-color); /* Green color for visibility */ + border-width: 1px; + pointer-events: none; /* Ensure lins don't interfere with dragging */ + z-index: 10000; +} + +/* Label styles for displaying distance values */ +.distance-label { + position: absolute; + background-color: var(--accent-color); + color: white; + font-size: 12px; + padding: 2px 6px; + border-radius: 3px; + white-space: nowrap; + transform: translate(-50%, -50%); /* Center the label */ +} + +/* Specific styles for each type of line */ + +/* Top distance line */ +.distance-line.top { + border-bottom: none; /* Remove bottom border for a single line */ + width: 2px; /* Thin vertical line */ +} + +.distance-line.top .distance-label { + top: -10px; /* Position label above the line */ + left: 50%; /* Center horizontally */ +} + +/* Bottom distance line */ +.distance-line.bottom { + border-top: none; /* Remove top border for a single line */ + width: 2px; /* Thin vertical line */ +} + +.distance-line.bottom .distance-label { + bottom: -10px; /* Position label below the line */ + left: 50%; /* Center horizontally */ +} + +/* Left distance line */ +.distance-line.left { + border-right: none; /* Remove right border for a single line */ + height: 2px; /* Thin horizontal line */ +} + +.distance-line.left .distance-label { + left: -10px; /* Position label to the left of the line */ + top: 50%; /* Center vertically */ +} + +/* Right distance line */ +.distance-line.right { + border-left: none; /* Remove left border for a single line */ + height: 2px; /* Thin horizontal line */ +} + +.distance-line.right .distance-label { + right: -10px; /* Position label to the right of the line */ + top: 50%; /* Center vertically */ } \ No newline at end of file From 6b8ccc02c740f9b1c857b5b867a81c5096fd8dfa Mon Sep 17 00:00:00 2001 From: Gomathi9520 Date: Mon, 31 Mar 2025 19:20:03 +0530 Subject: [PATCH 2/4] 3d widget api added and template frontend and backend completed --- .../sidebarLeft/visualization/Templates.tsx | 78 ++++++-- .../properties/ZoneProperties.tsx | 7 +- app/src/components/ui/Tools.tsx | 9 +- .../components/ui/componets/AddButtons.tsx | 1 - .../components/ui/componets/DisplayZone.tsx | 17 +- .../components/ui/componets/DistanceLine.tsx | 93 ++++++++++ .../ui/componets/Dropped3dWidget.tsx | 170 ++++++++++++------ .../ui/componets/DroppedFloatingWidgets.tsx | 52 +++++- .../ui/componets/RealTimeVisulization.tsx | 11 +- .../componets/functions/determinePosition.ts | 67 +++++++ .../ui/componets/handleDropTemplate .tsx | 29 +++ app/src/modules/simulation/simulation.tsx | 1 - .../visualization/handleSaveTemplate.ts | 61 ++++--- .../zoneData/add3dWidget.ts | 36 ++++ .../zoneData/addFloatingWidgets.ts | 1 + .../zoneData/deleteFloatingWidget.ts | 35 ++++ .../zoneData/deleteTemplate.ts | 32 ++++ .../zoneData/get3dWidgetData.ts | 25 +++ .../zoneData/getSelect2dZoneData.ts | 1 + .../zoneData/getTemplate.ts | 23 +++ .../realTimeVisulization/zoneData/getZones.ts | 2 +- .../zoneData/loadTemplate.ts | 33 ++++ .../zoneData/saveTempleteApi.ts | 28 +++ app/src/store/store.ts | 1 + app/src/store/useDroppedObjectsStore.ts | 77 ++++++++ app/src/store/useTemplateStore.ts | 18 +- app/src/styles/pages/realTimeViz.scss | 11 -- 27 files changed, 790 insertions(+), 129 deletions(-) create mode 100644 app/src/components/ui/componets/DistanceLine.tsx create mode 100644 app/src/components/ui/componets/handleDropTemplate .tsx create mode 100644 app/src/services/realTimeVisulization/zoneData/add3dWidget.ts create mode 100644 app/src/services/realTimeVisulization/zoneData/deleteFloatingWidget.ts create mode 100644 app/src/services/realTimeVisulization/zoneData/deleteTemplate.ts create mode 100644 app/src/services/realTimeVisulization/zoneData/get3dWidgetData.ts create mode 100644 app/src/services/realTimeVisulization/zoneData/getTemplate.ts create mode 100644 app/src/services/realTimeVisulization/zoneData/loadTemplate.ts create mode 100644 app/src/services/realTimeVisulization/zoneData/saveTempleteApi.ts diff --git a/app/src/components/layout/sidebarLeft/visualization/Templates.tsx b/app/src/components/layout/sidebarLeft/visualization/Templates.tsx index ef710f7..4b13429 100644 --- a/app/src/components/layout/sidebarLeft/visualization/Templates.tsx +++ b/app/src/components/layout/sidebarLeft/visualization/Templates.tsx @@ -1,25 +1,76 @@ +import { useEffect } from "react"; +import { useDroppedObjectsStore } from "../../../../store/useDroppedObjectsStore"; import useTemplateStore from "../../../../store/useTemplateStore"; 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"; const Templates = () => { const { templates, removeTemplate } = useTemplateStore(); - const { setSelectedZone } = useSelectedZoneStore(); + const { setTemplates } = useTemplateStore(); + const { setSelectedZone, selectedZone } = useSelectedZoneStore(); - const handleDeleteTemplate = (id: string) => { - removeTemplate(id); + useEffect(() => { + async function templateData() { + try { + const email = localStorage.getItem("email") || ""; + const organization = email?.split("@")[1]?.split(".")[0]; + let response = await getTemplateData(organization); + setTemplates(response); + } catch (error) { + console.error("Error fetching template data:", error); + } + } + + templateData(); + }, []); + + const handleDeleteTemplate = async (id: string) => { + 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); + } + } catch (error) { + console.error("Error deleting template:", error); + } }; - const handleLoadTemplate = (template: any) => { - setSelectedZone((prev) => ({ - ...prev, - panelOrder: template.panelOrder, - activeSides: Array.from( - new Set([...prev.activeSides, ...template.panelOrder]) - ), - widgets: template.widgets, - })); + const handleLoadTemplate = async (template: any) => { + try { + if (selectedZone.zoneName === "") return; + + const email = localStorage.getItem("email") || ""; + const organization = email?.split("@")[1]?.split(".")[0]; + + 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` + widgets: template.widgets, + }); + + useDroppedObjectsStore.getState().setZone(selectedZone.zoneName, selectedZone.zoneId); + + if (Array.isArray(template.floatingWidget)) { + template.floatingWidget.forEach((val: any) => { + useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, val); + }); + } + } + } catch (error) { + console.error("Error loading template:", error); + } }; + return (
{ transition: "box-shadow 0.3s ease", }} > - {template.snapshot && ( + {template?.snapshot && (
{" "} {/* 16:9 aspect ratio */} @@ -122,3 +173,4 @@ const Templates = () => { }; export default Templates; + diff --git a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx index 9234cc5..9e8b37e 100644 --- a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx @@ -20,17 +20,16 @@ const ZoneProperties: React.FC = () => { try { const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0]; - + let zonesdata = { zoneId: selectedZone.zoneId, viewPortposition: zonePosition, viewPortCenter: zoneTarget }; - + let response = await zoneCameraUpdate(zonesdata, organization); console.log('response: ', response); - - + setEdit(false); } catch (error) { console.error("Error in handleSetView:", error); diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx index c86164c..ba1f6e8 100644 --- a/app/src/components/ui/Tools.tsx +++ b/app/src/components/ui/Tools.tsx @@ -32,6 +32,7 @@ import { useTransformMode, } from "../../store/store"; import useToggleStore from "../../store/useUIToggleStore"; +import { use3DWidget, useFloatingWidget } from "../../store/useDroppedObjectsStore"; const Tools: React.FC = () => { const { templates } = useTemplateStore(); @@ -46,6 +47,8 @@ const Tools: React.FC = () => { const { isPlaying, setIsPlaying } = usePlayButtonStore(); const { addTemplate } = useTemplateStore(); const { selectedZone } = useSelectedZoneStore(); + const { floatingWidget } = useFloatingWidget() + const { widgets3D } = use3DWidget() // wall options const { toggleView, setToggleView } = useToggleView(); @@ -378,13 +381,17 @@ const Tools: React.FC = () => {
+ onClick={() => { + handleSaveTemplate({ addTemplate, + floatingWidget, + widgets3D, selectedZone, templates, }) } + } >
diff --git a/app/src/components/ui/componets/AddButtons.tsx b/app/src/components/ui/componets/AddButtons.tsx index 4f3f9b7..e0ca342 100644 --- a/app/src/components/ui/componets/AddButtons.tsx +++ b/app/src/components/ui/componets/AddButtons.tsx @@ -119,7 +119,6 @@ const AddButtons: React.FC = ({ }; // Delete the selectedZone state - setSelectedZone(updatedZone); } else { const updatePanelData = async () => { diff --git a/app/src/components/ui/componets/DisplayZone.tsx b/app/src/components/ui/componets/DisplayZone.tsx index 7689e51..3889139 100644 --- a/app/src/components/ui/componets/DisplayZone.tsx +++ b/app/src/components/ui/componets/DisplayZone.tsx @@ -2,9 +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 } 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"; // Define the type for `Side` type Side = "top" | "bottom" | "left" | "right"; @@ -72,6 +73,7 @@ const DisplayZone: React.FC = ({ // State to track overflow visibility const [showLeftArrow, setShowLeftArrow] = useState(false); const [showRightArrow, setShowRightArrow] = useState(false); + const { floatingWidget, setFloatingWidget } = useFloatingWidget() // Function to calculate overflow state const updateOverflowState = useCallback(() => { @@ -150,14 +152,16 @@ const DisplayZone: React.FC = ({ async function handleSelect2dZoneData(zoneId: string, zoneName: string) { try { if (selectedZone?.zoneId === zoneId) { - console.log("Zone is already selected:", zoneName); + return; } const email = localStorage.getItem("email") || ""; 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); + setFloatingWidget(res) // Set the selected zone in the store useDroppedObjectsStore.getState().setZone(zoneName, zoneId); if (Array.isArray(res)) { @@ -177,8 +181,8 @@ const DisplayZone: React.FC = ({ zoneViewPortPosition: response.viewPortposition || {}, }); } catch (error) { - console.log('error: ', error); - + + } } @@ -186,9 +190,8 @@ const DisplayZone: React.FC = ({ return (
{/* Left Arrow */} {showLeftArrow && ( diff --git a/app/src/components/ui/componets/DistanceLine.tsx b/app/src/components/ui/componets/DistanceLine.tsx new file mode 100644 index 0000000..8dec7b1 --- /dev/null +++ b/app/src/components/ui/componets/DistanceLine.tsx @@ -0,0 +1,93 @@ +import React from "react"; + +interface DistanceLinesProps { + obj: { + position: { + top?: number | "auto"; + left?: number | "auto"; + right?: number | "auto"; + bottom?: number | "auto"; + }; + }; + activeEdges: { + vertical: "top" | "bottom"; + horizontal: "left" | "right"; + } | null; +} + +const DistanceLines: React.FC = ({ obj, activeEdges }) => { + if (!activeEdges) return null; + + return ( + <> + {activeEdges.vertical === "top" && typeof obj.position.top === "number" && ( +
+ {obj.position.top.toFixed()}px +
+ )} + + {activeEdges.vertical === "bottom" && + typeof obj.position.bottom === "number" && ( +
+ {obj.position.bottom.toFixed()}px +
+ )} + + {activeEdges.horizontal === "left" && + typeof obj.position.left === "number" && ( +
+ {obj.position.left.toFixed()}px +
+ )} + + {activeEdges.horizontal === "right" && + typeof obj.position.right === "number" && ( +
+ {obj.position.right.toFixed()}px +
+ )} + + ); +}; + +export default DistanceLines; \ No newline at end of file diff --git a/app/src/components/ui/componets/Dropped3dWidget.tsx b/app/src/components/ui/componets/Dropped3dWidget.tsx index 10dd343..c627af4 100644 --- a/app/src/components/ui/componets/Dropped3dWidget.tsx +++ b/app/src/components/ui/componets/Dropped3dWidget.tsx @@ -10,79 +10,139 @@ import ProductionCapacity from "../../layout/3D-cards/cards/ProductionCapacity"; import ReturnOfInvestment from "../../layout/3D-cards/cards/ReturnOfInvestment"; import StateWorking from "../../layout/3D-cards/cards/StateWorking"; import { useSelectedZoneStore } from "../../../store/useZoneStore"; +import { generateUniqueId } from "../../../functions/generateUniqueId"; +import { adding3dWidgets } from "../../../services/realTimeVisulization/zoneData/add3dWidget"; +import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData"; +import { use3DWidget } from "../../../store/useDroppedObjectsStore"; export default function Dropped3dWidgets() { - const { widgetSelect, setWidgetSelect } = useAsset3dWidget(); + const { widgetSelect } = useAsset3dWidget(); const { activeModule } = useModuleStore(); const { raycaster, gl, scene }: ThreeState = useThree(); - const { selectedZone } = useSelectedZoneStore(); // Get currently selected zone - const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption() - // 🔥 Store widget positions per zone - const [zoneWidgets, setZoneWidgets] = useState // Widget type -> Positions array - >>({}); - + const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption(); + const { selectedZone } = useSelectedZoneStore(); // Get the currently active zone + // 🔥 Store widget data (id, type, position) based on the selected zone + const [zoneWidgetData, setZoneWidgetData] = useState< + Record + >({}); + const { setWidgets3D } = use3DWidget() useEffect(() => { - if (widgetSubOption === "Floating") return - // if (activeModule !== "visualization") return; - const canvasElement = gl.domElement; - const onDrop = (event: DragEvent) => { - event.preventDefault(); // Prevent default browser behavior - if (widgetSubOption === "3D") { - if (selectedZone.zoneName === "") return - if (!widgetSelect?.startsWith("ui")) return; - const group1 = scene.getObjectByName("itemsGroup"); - if (!group1) return; - const Assets = group1.children - .map((val) => scene.getObjectByProperty("uuid", val.uuid)) - .filter(Boolean) as THREE.Object3D[]; - const intersects = raycaster.intersectObjects(scene.children, true).filter( - (intersect) => - !intersect.object.name.includes("Roof") && - !intersect.object.name.includes("agv-collider") && - !intersect.object.name.includes("MeasurementReference") && - !intersect.object.userData.isPathObject && - !(intersect.object.type === "GridHelper") - ); - if (intersects.length > 0) { - const { x, y, z } = intersects[0].point; + if (activeModule !== "visualization") return + if (selectedZone.zoneName === "") return; - setZoneWidgets((prev) => ({ - ...prev, - [selectedZone.zoneId]: { - ...(prev[selectedZone.zoneId] || {}), - [widgetSelect]: [...(prev[selectedZone.zoneId]?.[widgetSelect] || []), [x, y, z]], - }, - })); - } + const email = localStorage.getItem("email") || ""; + const organization = email?.split("@")[1]?.split(".")[0]; + + async function get3dWidgetData() { + let result = await get3dWidgetZoneData(selectedZone.zoneId, organization); + setWidgets3D(result) + // Ensure the extracted data has id, type, and position correctly mapped + const formattedWidgets = result.map((widget: any) => ({ + id: widget.id, + type: widget.type, + position: widget.position, + })); + + setZoneWidgetData((prev) => ({ + ...prev, + [selectedZone.zoneId]: formattedWidgets, + })); + } + + 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 + + useEffect(() => { + if (activeModule !== "visualization") return; + if (widgetSubOption === "Floating") return; + if (selectedZone.zoneName === "") return + const canvasElement = gl.domElement; + const onDrop = async (event: DragEvent) => { + event.preventDefault(); // Prevent default browser behavior + const email = localStorage.getItem("email") || ""; + const organization = email?.split("@")[1]?.split(".")[0]; + if (!widgetSelect.startsWith("ui")) return; + const group1 = scene.getObjectByName("itemsGroup"); + if (!group1) return; + const intersects = raycaster.intersectObjects(scene.children, true).filter( + (intersect) => + !intersect.object.name.includes("Roof") && + !intersect.object.name.includes("agv-collider") && + !intersect.object.name.includes("MeasurementReference") && + !intersect.object.userData.isPathObject && + !(intersect.object.type === "GridHelper") + ); + if (intersects.length > 0) { + const { x, y, z } = intersects[0].point; + + // ✅ Explicitly define position as a tuple + const newWidget: { id: string; type: string; position: [number, number, number] } = { + id: generateUniqueId(), + type: widgetSelect, + position: [x, y, z], // Ensures TypeScript recognizes it as a tuple + }; + + + let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget) + + + // ✅ Store widgets uniquely for each zone + setZoneWidgetData((prev) => ({ + ...prev, + [selectedZone.zoneId]: [...(prev[selectedZone.zoneId] || []), newWidget], + })); } }; + canvasElement.addEventListener("drop", onDrop); return () => { - canvasElement.removeEventListener("drop", onDrop) - // setWidgetSelect() + canvasElement.removeEventListener("drop", onDrop); }; - }, [widgetSelect, activeModule, widgetSubOption]); + }, [widgetSelect, activeModule, selectedZone.zoneId, widgetSubOption]); + + // Get widgets for the currently active zone + const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || []; return ( <> - {zoneWidgets[selectedZone.zoneId]?.["ui-Widget 1"]?.map((pos, index) => ( - - ))} - {zoneWidgets[selectedZone.zoneId]?.["ui-Widget 2"]?.map((pos, index) => ( - - ))} - {zoneWidgets[selectedZone.zoneId]?.["ui-Widget 3"]?.map((pos, index) => ( - - ))} - {zoneWidgets[selectedZone.zoneId]?.["ui-Widget 4"]?.map((pos, index) => ( - - ))} + {activeZoneWidgets.map(({ id, type, position }) => { + switch (type) { + case "ui-Widget 1": + return ; + case "ui-Widget 2": + return ; + case "ui-Widget 3": + return ; + case "ui-Widget 4": + return ; + default: + return null; + } + })} ); } + diff --git a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx index 272051c..5526902 100644 --- a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx +++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx @@ -1,3 +1,4 @@ + import { WalletIcon } from "../../icons/3dChartIcons"; import { useEffect, useRef, useState } from "react"; import { @@ -14,6 +15,7 @@ import { DeleteIcon, } from "../../icons/ExportCommonIcons"; import DistanceLines from "./DistanceLines"; // Import the DistanceLines component +import { deleteFloatingWidgetApi } from "../../../services/realTimeVisulization/zoneData/deleteFloatingWidget"; interface DraggingState { zone: string; @@ -26,12 +28,25 @@ interface DraggingState { }; } +interface DraggingState { + zone: string; + index: number; + initialPosition: { + top: number | "auto"; + left: number | "auto"; + right: number | "auto"; + bottom: number | "auto"; + }; +} const DroppedObjects: React.FC = () => { const zones = useDroppedObjectsStore((state) => state.zones); const [openKebabId, setOpenKebabId] = useState(null); const updateObjectPosition = useDroppedObjectsStore( (state) => state.updateObjectPosition ); + const deleteObject = useDroppedObjectsStore((state) => state.deleteObject); + + const duplicateObject = useDroppedObjectsStore((state) => state.duplicateObject); const [draggingIndex, setDraggingIndex] = useState( null ); @@ -62,6 +77,28 @@ const DroppedObjects: React.FC = () => { if (zoneEntries.length === 0) return null; const [zoneName, zone] = zoneEntries[0]; + function handleDuplicate(zoneName: string, index: number) { + setOpenKebabId(null) + duplicateObject(zoneName, index); // Call the duplicateObject method from the store + } + + async function handleDelete(zoneName: string, id: string, index: number) { + try { + const email = localStorage.getItem("email") || ""; + const organization = email?.split("@")[1]?.split(".")[0]; + + let res = await deleteFloatingWidgetApi(id, organization); + console.log('res: ', res); + + if (res.message === "FloatingWidget deleted successfully") { + deleteObject(zoneName, index); // Call the deleteObject method from the store + } + } catch (error) { + console.error("Error deleting floating widget:", error); + } + } + + const handlePointerDown = (event: React.PointerEvent, index: number) => { const obj = zone.objects[index]; const container = document.getElementById("real-time-vis-canvas"); @@ -228,11 +265,12 @@ const DroppedObjects: React.FC = () => { animationRef.current = null; } } catch (error) { - console.error("Error in handlePointerUp:", error); + } }; const handleKebabClick = (id: string, event: React.MouseEvent) => { + event.stopPropagation(); setOpenKebabId((prevId) => (prevId === id ? null : id)); }; @@ -337,13 +375,19 @@ const DroppedObjects: React.FC = () => {
{openKebabId === obj.id && (
-
+
{ + event.stopPropagation(); + handleDuplicate(zoneName, index); // Call the duplicate handler + }}>
Duplicate
-
+
{ + event.stopPropagation(); + handleDelete(zoneName, obj.id, index); // Call the delete handler + }}>
@@ -388,4 +432,4 @@ const DroppedObjects: React.FC = () => { export default DroppedObjects; -// in pointer move even when i goes to top right the value not changes to top right same problem in bottom left + diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx index 45db987..3f81518 100644 --- a/app/src/components/ui/componets/RealTimeVisulization.tsx +++ b/app/src/components/ui/componets/RealTimeVisulization.tsx @@ -63,6 +63,7 @@ const RealTimeVisulization: React.FC = () => { const organization = email?.split("@")[1]?.split(".")[0]; try { const response = await getZone2dData(organization); + if (!Array.isArray(response)) { return; } @@ -83,7 +84,7 @@ const RealTimeVisulization: React.FC = () => { ); setZonesData(formattedData); } catch (error) { - console.log("error: ", error); + } } @@ -109,7 +110,7 @@ const RealTimeVisulization: React.FC = () => { }); }, [selectedZone]); - useEffect(() => {}, [floatingWidgets]); + // useEffect(() => {}, [floatingWidgets]); const handleDrop = async (event: React.DragEvent) => { try { @@ -135,6 +136,7 @@ const RealTimeVisulization: React.FC = () => { id: generateUniqueId(), position: determinePosition(canvasRect, relativeX, relativeY), }; + console.log('newObject: ', newObject); let response = await addingFloatingWidgets( selectedZone.zoneId, @@ -150,7 +152,6 @@ const RealTimeVisulization: React.FC = () => { .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 @@ -171,7 +172,7 @@ const RealTimeVisulization: React.FC = () => { ], }, })); - } catch (error) {} + } catch (error) { } }; return ( @@ -198,7 +199,7 @@ const RealTimeVisulization: React.FC = () => { >
- + {activeModule === "visualization" && selectedZone.zoneName !== "" && } {activeModule === "visualization" && ( <> { +// const { getTemplate } = useTemplateStore.getState(); +// const { setSelectedZone } = useSelectedZoneStore.getState(); + +// // Find the template by ID +// const template: Template | undefined = getTemplate(templateId); + +// if (!template) { +// console.error("Template not found!"); +// return; +// } + +// // Update the selected zone with the template data +// setSelectedZone((prev) => ({ +// ...prev, +// panelOrder: template.panelOrder, +// activeSides: Array.from(new Set([...prev.activeSides, ...template.panelOrder])), +// widgets: template.widgets, // Keep widget structure the same +// })); + +// console.log("Dropped template applied:", template); +// }; diff --git a/app/src/modules/simulation/simulation.tsx b/app/src/modules/simulation/simulation.tsx index 10934fb..0682f62 100644 --- a/app/src/modules/simulation/simulation.tsx +++ b/app/src/modules/simulation/simulation.tsx @@ -14,7 +14,6 @@ function Simulation() { const [processes, setProcesses] = useState([]); useEffect(() => { - console.log('simulationPaths: ', simulationPaths); }, [simulationPaths]); // useEffect(() => { diff --git a/app/src/modules/visualization/handleSaveTemplate.ts b/app/src/modules/visualization/handleSaveTemplate.ts index c489688..a71e654 100644 --- a/app/src/modules/visualization/handleSaveTemplate.ts +++ b/app/src/modules/visualization/handleSaveTemplate.ts @@ -1,74 +1,89 @@ +import { saveTemplateApi } from "../../services/realTimeVisulization/zoneData/saveTempleteApi"; import { Template } from "../../store/useTemplateStore"; import { captureVisualization } from "./captureVisualization"; type HandleSaveTemplateProps = { addTemplate: (template: Template) => void; + floatingWidget: []; // Updated type from `[]` to `any[]` for clarity + widgets3D: []; // Updated type from `[]` to `any[]` for clarity selectedZone: { - panelOrder: string[]; // Adjust the type based on actual data structure - widgets: any[]; // Replace `any` with the actual widget type + panelOrder: string[]; + widgets: any[]; }; templates?: Template[]; }; -// Generate a unique ID (placeholder function) +// Generate a unique ID const generateUniqueId = (): string => { return `${Date.now()}-${Math.random().toString(36).substring(2, 15)}`; }; -// Refactored function export const handleSaveTemplate = async ({ addTemplate, + floatingWidget, + widgets3D, selectedZone, templates = [], }: HandleSaveTemplateProps): Promise => { try { // Check if the selected zone has any widgets if (!selectedZone.widgets || selectedZone.widgets.length === 0) { - console.warn("Cannot save an empty template."); + console.warn("No widgets found in the selected zone."); return; } // Check if the template already exists - const isDuplicate = templates.some((template) => { - const isSamePanelOrder = + const isDuplicate = templates.some( + (template) => JSON.stringify(template.panelOrder) === - JSON.stringify(selectedZone.panelOrder); - const isSameWidgets = + JSON.stringify(selectedZone.panelOrder) && JSON.stringify(template.widgets) === - JSON.stringify(selectedZone.widgets); - return isSamePanelOrder && isSameWidgets; - }); + JSON.stringify(selectedZone.widgets) + ); if (isDuplicate) { - console.warn("This template already exists."); return; } // Capture visualization snapshot const snapshot = await captureVisualization(); - if (!snapshot) { - console.error("Failed to capture visualization snapshot."); - return; - } - + console.log("snapshot: ", snapshot); + // if (!snapshot) { + // return; + // } // Create a new template const newTemplate: Template = { id: generateUniqueId(), - name: `Template ${Date.now()}`, + name: `Template ${new Date().toISOString()}`, // Better name formatting panelOrder: selectedZone.panelOrder, widgets: selectedZone.widgets, snapshot, + floatingWidget, + widgets3D, }; - console.log("Saving template:", newTemplate); + // Extract organization from email + const email = localStorage.getItem("email") || ""; + const organization = email.includes("@") + ? email.split("@")[1]?.split(".")[0] + : ""; + + if (!organization) { + console.error("Organization could not be determined from email."); + return; + } // Save the template try { + const response = await saveTemplateApi(organization, newTemplate); + console.log("Save API Response:", response); + + // Add template only if API call succeeds addTemplate(newTemplate); - } catch (error) { - console.error("Failed to add template:", error); + } catch (apiError) { + console.error("Error saving template to API:", apiError); } } catch (error) { - console.error("Failed to save template:", error); + console.error("Error in handleSaveTemplate:", error); } }; diff --git a/app/src/services/realTimeVisulization/zoneData/add3dWidget.ts b/app/src/services/realTimeVisulization/zoneData/add3dWidget.ts new file mode 100644 index 0000000..82562b7 --- /dev/null +++ b/app/src/services/realTimeVisulization/zoneData/add3dWidget.ts @@ -0,0 +1,36 @@ +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, + widget: {} +) => { + console.log('widget: ', widget); + console.log('organization: ', organization); + console.log('zoneId: ', zoneId); + try { + const response = await fetch( + `${url_Backend_dwinzo}/api/v2/3dwidget/save`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ organization, zoneId, widget }), + } + ); + + if (!response.ok) { + throw new Error("Failed to add 3dwidget 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/addFloatingWidgets.ts b/app/src/services/realTimeVisulization/zoneData/addFloatingWidgets.ts index 338f26b..d73ec0d 100644 --- a/app/src/services/realTimeVisulization/zoneData/addFloatingWidgets.ts +++ b/app/src/services/realTimeVisulization/zoneData/addFloatingWidgets.ts @@ -1,5 +1,6 @@ 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, organization: string, diff --git a/app/src/services/realTimeVisulization/zoneData/deleteFloatingWidget.ts b/app/src/services/realTimeVisulization/zoneData/deleteFloatingWidget.ts new file mode 100644 index 0000000..85c96b8 --- /dev/null +++ b/app/src/services/realTimeVisulization/zoneData/deleteFloatingWidget.ts @@ -0,0 +1,35 @@ +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, + organization: string +) => { + console.log('organization: ', organization); + console.log('floatWidgetID: ', floatWidgetID); + try { + const response = await fetch( + `${url_Backend_dwinzo}/api/v2/floatwidget/delete`, + { + method: "PATCH", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ organization, floatWidgetID }), + } + ); + + if (!response.ok) { + throw new Error("Failed to delete floating 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 new file mode 100644 index 0000000..e452f6d --- /dev/null +++ b/app/src/services/realTimeVisulization/zoneData/deleteTemplate.ts @@ -0,0 +1,32 @@ +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, + organization?: string +) => { + try { + const response = await fetch( + `${url_Backend_dwinzo}/api/v2/TemplateDelete/${templateID}/${organization}`, + { + method: "PATCH", + headers: { + "Content-Type": "application/json", + }, + } + ); + + if (!response.ok) { + throw new Error("Failed to delete template "); + } + + 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/get3dWidgetData.ts b/app/src/services/realTimeVisulization/zoneData/get3dWidgetData.ts new file mode 100644 index 0000000..b5b6200 --- /dev/null +++ b/app/src/services/realTimeVisulization/zoneData/get3dWidgetData.ts @@ -0,0 +1,25 @@ +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 +) => { + try { + const response = await fetch( + `${url_Backend_dwinzo}/api/v2/3dwidgetData/${ZoneId}/${organization}`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + } + ); + if (!response.ok) { + throw new Error("Failed to fetch Zone3dWidgetData"); + } + + return await response.json(); + } catch (error: any) { + throw new Error(error.message); + } +}; diff --git a/app/src/services/realTimeVisulization/zoneData/getSelect2dZoneData.ts b/app/src/services/realTimeVisulization/zoneData/getSelect2dZoneData.ts index 26a88c5..00d4dfe 100644 --- a/app/src/services/realTimeVisulization/zoneData/getSelect2dZoneData.ts +++ b/app/src/services/realTimeVisulization/zoneData/getSelect2dZoneData.ts @@ -1,4 +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`; export const getSelect2dZoneData = async ( ZoneId?: string, diff --git a/app/src/services/realTimeVisulization/zoneData/getTemplate.ts b/app/src/services/realTimeVisulization/zoneData/getTemplate.ts new file mode 100644 index 0000000..a3aa3a3 --- /dev/null +++ b/app/src/services/realTimeVisulization/zoneData/getTemplate.ts @@ -0,0 +1,23 @@ +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( + `${url_Backend_dwinzo}/api/v2/templateData/${organization}`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + } + ); + + if (!response.ok) { + throw new Error("Failed to fetch ZoneFloatingData"); + } + + return await response.json(); + } catch (error: any) { + throw new Error(error.message); + } +}; diff --git a/app/src/services/realTimeVisulization/zoneData/getZones.ts b/app/src/services/realTimeVisulization/zoneData/getZones.ts index a760959..8dbf79a 100644 --- a/app/src/services/realTimeVisulization/zoneData/getZones.ts +++ b/app/src/services/realTimeVisulization/zoneData/getZones.ts @@ -1,4 +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`; export const getZoneData = async (zoneId: string, organization: string) => { console.log("organization: ", organization); @@ -14,7 +15,6 @@ export const getZoneData = async (zoneId: string, organization: string) => { } ); - if (!response.ok) { throw new Error("Failed to fetch zoneData"); } diff --git a/app/src/services/realTimeVisulization/zoneData/loadTemplate.ts b/app/src/services/realTimeVisulization/zoneData/loadTemplate.ts new file mode 100644 index 0000000..915160d --- /dev/null +++ b/app/src/services/realTimeVisulization/zoneData/loadTemplate.ts @@ -0,0 +1,33 @@ +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, + organization: string +) => { + try { + const response = await fetch( + `${url_Backend_dwinzo}/api/v2/TemplatetoZone`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ organization, zoneId, templateID }), + } + ); + + if (!response.ok) { + throw new Error("Failed to add 3dwidget 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/saveTempleteApi.ts b/app/src/services/realTimeVisulization/zoneData/saveTempleteApi.ts new file mode 100644 index 0000000..5c18031 --- /dev/null +++ b/app/src/services/realTimeVisulization/zoneData/saveTempleteApi.ts @@ -0,0 +1,28 @@ +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 { + const response = await fetch(`${url_Backend_dwinzo}/api/v2/template/save`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ organization, template }), + }); + + if (!response.ok) { + throw new Error("Failed to save template zone"); + } + + const result = await response.json(); + console.log('result: ', result); + 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/store/store.ts b/app/src/store/store.ts index a64f417..f24da0c 100644 --- a/app/src/store/store.ts +++ b/app/src/store/store.ts @@ -375,3 +375,4 @@ export const useWidgetSubOption = create((set: any) => ({ widgetSubOption: "2D", setWidgetSubOption: (x: any) => set({ widgetSubOption: x }), })); + diff --git a/app/src/store/useDroppedObjectsStore.ts b/app/src/store/useDroppedObjectsStore.ts index 5ded701..83f3a8a 100644 --- a/app/src/store/useDroppedObjectsStore.ts +++ b/app/src/store/useDroppedObjectsStore.ts @@ -1,4 +1,5 @@ import { create } from "zustand"; +import { addingFloatingWidgets } from "../services/realTimeVisulization/zoneData/addFloatingWidgets"; type DroppedObject = { className: string; @@ -35,6 +36,8 @@ type DroppedObjectsState = { bottom: number | "auto"; } ) => void; + deleteObject: (zoneName: string, index: number) => void; // Add this line + duplicateObject: (zoneName: string, index: number) => void; // Add this line }; export const useDroppedObjectsStore = create((set) => ({ @@ -73,6 +76,72 @@ export const useDroppedObjectsStore = create((set) => ({ }, }; }), + + deleteObject: (zoneName: string, index: number) => + set((state) => { + const zone = state.zones[zoneName]; + if (!zone) return state; + return { + zones: { + [zoneName]: { + ...zone, + objects: zone.objects.filter((_, i) => i !== index), // Remove object at the given index + }, + }, + }; + }), + duplicateObject: async (zoneName: string, index: number) => { + const state = useDroppedObjectsStore.getState(); // Get the current state + const zone = state.zones[zoneName]; + + if (!zone) return; + + const originalObject = zone.objects[index]; + if (!originalObject) return; + + const email = localStorage.getItem("email") || ""; + const organization = email?.split("@")[1]?.split(".")[0]; + + // Create a shallow copy of the object with a unique ID and slightly adjusted position + const duplicatedObject: DroppedObject = { + ...originalObject, + id: `${originalObject.id}-copy-${Date.now()}`, // Unique ID + position: { + ...originalObject.position, + top: + typeof originalObject.position.top === "number" + ? originalObject.position.top + 20 // Offset vertically + : originalObject.position.top, + left: + typeof originalObject.position.left === "number" + ? originalObject.position.left + 20 // Offset horizontally + : originalObject.position.left, + }, + }; + + console.log("zone: ", zone.zoneId); + console.log("duplicatedObject: ", duplicatedObject); + + // Make async API call outside of Zustand set function + // let response = await addingFloatingWidgets( + // zone.zoneId, + // organization, + // duplicatedObject + // ); + + // if (response.message === "FloatWidget created successfully") { + // Update the state inside `set` + useDroppedObjectsStore.setState((state) => ({ + zones: { + ...state.zones, + [zoneName]: { + ...state.zones[zoneName], + objects: [...state.zones[zoneName].objects, duplicatedObject], // Append duplicated object + }, + }, + })); + // } + }, })); export interface DroppedObjects { @@ -91,4 +160,12 @@ export interface Zones { objects: DroppedObject[]; } +export const use3DWidget = create((set: any) => ({ + widgets3D: [], + setWidgets3D: (x: any) => set({ widgets3D: x }), +})); +export const useFloatingWidget = create((set: any) => ({ + floatingWidget: [], + setFloatingWidget: (x: any) => set({ floatingWidget: x }), +})); diff --git a/app/src/store/useTemplateStore.ts b/app/src/store/useTemplateStore.ts index 2adcd2f..d416154 100644 --- a/app/src/store/useTemplateStore.ts +++ b/app/src/store/useTemplateStore.ts @@ -1,7 +1,5 @@ import { create } from "zustand"; -// type Side = "top" | "bottom" | "left" | "right"; - export interface Widget { id: string; type: string; @@ -15,21 +13,34 @@ export interface Template { name: string; panelOrder: string[]; widgets: Widget[]; - snapshot?: string | null; // Add an optional image property (base64) + floatingWidget: any[]; // Fixed empty array type + widgets3D: any[]; // Fixed empty array type + snapshot?: string | null; } interface TemplateStore { templates: Template[]; addTemplate: (template: Template) => void; + setTemplates: (templates: Template[]) => void; // Changed from `setTemplate` removeTemplate: (id: string) => void; } export const useTemplateStore = create((set) => ({ templates: [], + + // Add a new template to the list addTemplate: (template) => set((state) => ({ templates: [...state.templates, template], })), + + // Set (replace) the templates list with a new array + setTemplates: (templates) => + set(() => ({ + templates, // Ensures no duplication + })), + + // Remove a template by ID removeTemplate: (id) => set((state) => ({ templates: state.templates.filter((t) => t.id !== id), @@ -37,3 +48,4 @@ export const useTemplateStore = create((set) => ({ })); export default useTemplateStore; + diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index b080840..5df1bf7 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -543,8 +543,6 @@ color: white; } - - .floating-wrapper { .icon { width: 25px !important; @@ -612,9 +610,6 @@ .dublicate { cursor: not-allowed; } - - - } } @@ -622,12 +617,6 @@ - - - - - -/* General styles for all distance lines */ .distance-line { position: absolute; border-style: dashed; From d4e4952de4608012f441ab93727d7d47de128e57 Mon Sep 17 00:00:00 2001 From: Gomathi9520 Date: Mon, 31 Mar 2025 19:25:44 +0530 Subject: [PATCH 3/4] conflicts resolved --- app/src/components/ui/componets/DroppedFloatingWidgets.tsx | 3 +-- app/src/pages/Project.tsx | 2 +- .../realTimeVisulization/zoneData/addFloatingWidgets.ts | 3 +++ app/src/services/realTimeVisulization/zoneData/addWidgets.ts | 4 ++-- .../services/realTimeVisulization/zoneData/getFloatingData.ts | 4 ++-- app/src/services/realTimeVisulization/zoneData/getZoneData.ts | 4 ++-- app/src/services/realTimeVisulization/zoneData/panel.ts | 4 ++-- 7 files changed, 13 insertions(+), 11 deletions(-) diff --git a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx index 5526902..e099452 100644 --- a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx +++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx @@ -265,12 +265,11 @@ const DroppedObjects: React.FC = () => { animationRef.current = null; } } catch (error) { - + console.error("Error in handlePointerUp:", error); } }; const handleKebabClick = (id: string, event: React.MouseEvent) => { - event.stopPropagation(); setOpenKebabId((prevId) => (prevId === id ? null : id)); }; diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx index a7800e1..8e426aa 100644 --- a/app/src/pages/Project.tsx +++ b/app/src/pages/Project.tsx @@ -52,7 +52,7 @@ const Project: React.FC = () => { return (
- {loadingProgress && } + {/* {loadingProgress && } */} {!isPlaying && ( <> diff --git a/app/src/services/realTimeVisulization/zoneData/addFloatingWidgets.ts b/app/src/services/realTimeVisulization/zoneData/addFloatingWidgets.ts index d73ec0d..fb644c6 100644 --- a/app/src/services/realTimeVisulization/zoneData/addFloatingWidgets.ts +++ b/app/src/services/realTimeVisulization/zoneData/addFloatingWidgets.ts @@ -6,6 +6,9 @@ export const addingFloatingWidgets = async ( organization: string, widget: {} ) => { + console.log('organization: ', organization); + console.log('widget: ', widget); + console.log('zoneId: ', zoneId); try { const response = await fetch( `${url_Backend_dwinzo}/api/v2/floatwidget/save`, 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/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/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/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 ( From f78b7ce6c5785fcd0b48e02506fe4fb5c98c558d Mon Sep 17 00:00:00 2001 From: Gomathi9520 Date: Mon, 31 Mar 2025 19:39:09 +0530 Subject: [PATCH 4/4] conflicts resolved in api file --- app/src/components/ui/componets/Dropped3dWidget.tsx | 1 - app/src/components/ui/componets/RealTimeVisulization.tsx | 3 +++ app/src/pages/Project.tsx | 2 +- app/src/services/realTimeVisulization/zoneData/addWidgets.ts | 4 ++-- .../services/realTimeVisulization/zoneData/getFloatingData.ts | 4 ++-- app/src/services/realTimeVisulization/zoneData/getZoneData.ts | 4 ++-- app/src/services/realTimeVisulization/zoneData/panel.ts | 4 ++-- 7 files changed, 12 insertions(+), 10 deletions(-) diff --git a/app/src/components/ui/componets/Dropped3dWidget.tsx b/app/src/components/ui/componets/Dropped3dWidget.tsx index c627af4..94c5e45 100644 --- a/app/src/components/ui/componets/Dropped3dWidget.tsx +++ b/app/src/components/ui/componets/Dropped3dWidget.tsx @@ -26,7 +26,6 @@ export default function Dropped3dWidgets() { Record >({}); const { setWidgets3D } = use3DWidget() - useEffect(() => { if (activeModule !== "visualization") return if (selectedZone.zoneName === "") return; diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx index 3f81518..f6a041a 100644 --- a/app/src/components/ui/componets/RealTimeVisulization.tsx +++ b/app/src/components/ui/componets/RealTimeVisulization.tsx @@ -63,6 +63,7 @@ const RealTimeVisulization: React.FC = () => { const organization = email?.split("@")[1]?.split(".")[0]; try { const response = await getZone2dData(organization); + console.log('response: ', response); if (!Array.isArray(response)) { return; @@ -152,6 +153,7 @@ const RealTimeVisulization: React.FC = () => { .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 @@ -200,6 +202,7 @@ const RealTimeVisulization: React.FC = () => {
{activeModule === "visualization" && selectedZone.zoneName !== "" && } + {/* */} {activeModule === "visualization" && ( <> { return (
- {/* {loadingProgress && } */} + {loadingProgress && } {!isPlaying && ( <> 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/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/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/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 (