Dwinzo-Beta/Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

server api changed for RealTimeVisulization

Browse Source
This commit is contained in:
Gomathi
2025-04-01 15:16:54 +05:30
parent e35d3b3742
commit 900723c14a
29 changed files with 201 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
View File

@@ -25,7 +25,7 @@ interface ProductionCapacityProps {
position: [number, number, number]; position: [number, number, number];
} }
const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ position }) => { const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ position }) => {
// Chart data for a week // Chart data for a week
const chartData = { const chartData = {
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // Days of the week labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // Days of the week
@@ -79,10 +79,10 @@ const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ position }) =>
}; };
return ( return (
<Html position={[position[0], position[1], position[2]]} <Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]} scale={[0.5, 0.5, 0.5]}
transform transform
sprite> sprite>
<div className="productionCapacity-wrapper card"> <div className="productionCapacity-wrapper card">
<div className="headeproductionCapacityr-wrapper"> <div className="headeproductionCapacityr-wrapper">
<div className="header">Production Capacity</div> <div className="header">Production Capacity</div>

87
app/src/components/ui/componets/AddButtons.tsx
View File

@@ -105,11 +105,12 @@ const AddButtons: React.FC<ButtonsProps> = ({
// Function to handle "+" button click // Function to handle "+" button click
const handlePlusButtonClick = async (side: Side) => { const handlePlusButtonClick = async (side: Side) => {
if (selectedZone.activeSides.includes(side)) { if (selectedZone.activeSides.includes(side)) {
// Panel already exists: Remove widgets from that side and update activeSides
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value 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( const cleanedWidgets = selectedZone.widgets.filter(
(widget) => widget.panel !== side (widget) => widget.panel !== side
); );
@@ -122,52 +123,52 @@ const AddButtons: React.FC<ButtonsProps> = ({
panelOrder: newActiveSides, panelOrder: newActiveSides,
}; };
let response = await deletePanelApi(selectedZone.zoneId, side, organization) // API call to delete the panel
try {
if (response.message === 'Panel deleted successfully') { const response = await deletePanelApi(selectedZone.zoneId, side, organization);
console.log('response: ', response);
setSelectedZone(updatedZone); if (response.message === "Panel deleted successfully") {
} setSelectedZone(updatedZone);
} else {
// Delete the selectedZone state console.error("Unexpected response:", response);
} 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) {
} }
}; } 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] ;
updatePanelData(); // Call the async function // 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 ( return (
<> <>
<div> <div>

22
app/src/components/ui/componets/DisplayZone.tsx
View File

@@ -2,7 +2,10 @@ import React, { useEffect, useRef, useState, useCallback } from "react";
import { Widget } from "../../../store/useWidgetStore"; import { Widget } from "../../../store/useWidgetStore";
import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons"; import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons";
import { InfoIcon } from "../../icons/ExportCommonIcons"; 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 { getSelect2dZoneData } from "../../../services/realTimeVisulization/zoneData/getSelect2dZoneData";
import { getFloatingZoneData } from "../../../services/realTimeVisulization/zoneData/getFloatingData"; import { getFloatingZoneData } from "../../../services/realTimeVisulization/zoneData/getFloatingData";
import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData"; import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData";
@@ -66,14 +69,13 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
selectedZone, selectedZone,
setSelectedZone, setSelectedZone,
}) => { }) => {
// Ref for the container element // Ref for the container element
const containerRef = useRef<HTMLDivElement | null>(null); const containerRef = useRef<HTMLDivElement | null>(null);
// State to track overflow visibility // State to track overflow visibility
const [showLeftArrow, setShowLeftArrow] = useState(false); const [showLeftArrow, setShowLeftArrow] = useState(false);
const [showRightArrow, setShowRightArrow] = useState(false); const [showRightArrow, setShowRightArrow] = useState(false);
const { floatingWidget, setFloatingWidget } = useFloatingWidget() const { floatingWidget, setFloatingWidget } = useFloatingWidget();
// Function to calculate overflow state // Function to calculate overflow state
const updateOverflowState = useCallback(() => { const updateOverflowState = useCallback(() => {
@@ -158,10 +160,10 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
// Fetch data from backend // Fetch data from backend
let response = await getSelect2dZoneData(zoneId, organization); let response = await getSelect2dZoneData(zoneId, organization);
console.log('response: ', response);
let res = await getFloatingZoneData(zoneId, organization); let res = await getFloatingZoneData(zoneId, organization);
console.log('res: ', res);
setFloatingWidget(res) setFloatingWidget(res);
// Set the selected zone in the store // Set the selected zone in the store
useDroppedObjectsStore.getState().setZone(zoneName, zoneId); useDroppedObjectsStore.getState().setZone(zoneName, zoneId);
if (Array.isArray(res)) { if (Array.isArray(res)) {
@@ -180,13 +182,9 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
zoneViewPortTarget: response.viewPortCenter || {}, zoneViewPortTarget: response.viewPortCenter || {},
zoneViewPortPosition: response.viewPortposition || {}, zoneViewPortPosition: response.viewPortposition || {},
}); });
} catch (error) { } catch (error) { }
}
} }
return ( return (
<div <div
ref={containerRef} ref={containerRef}
@@ -209,7 +207,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
className={`zone ${selectedZone.zoneName === zoneName ? "active" : "" className={`zone ${selectedZone.zoneName === zoneName ? "active" : ""
}`} }`}
onClick={() => { onClick={() => {
handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName) handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName);
}} }}
> >
{zoneName} {zoneName}

26
app/src/components/ui/componets/DistanceLines.tsx
View File

@@ -32,7 +32,12 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
height: `${obj.position.top}px`, height: `${obj.position.top}px`,
}} }}
> >
<span className="distance-label">{obj.position.top}px</span> <span className="distance-label"
style={{
position: 'absolute',
top: "50%"
}}
>{obj.position.top}px</span>
</div> </div>
)} )}
@@ -49,7 +54,12 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
height: `${obj.position.bottom}px`, height: `${obj.position.bottom}px`,
}} }}
> >
<span className="distance-label">{obj.position.bottom}px</span> <span className="distance-label"
style={{
position: 'absolute',
bottom: "50%"
}}
>{obj.position.bottom}px</span>
</div> </div>
)} )}
@@ -66,7 +76,11 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
width: `${obj.position.left}px`, width: `${obj.position.left}px`,
}} }}
> >
<span className="distance-label">{obj.position.left}px</span> <span className="distance-label" style={{
position: 'absolute',
left: "50%"
}}
>{obj.position.left}px</span>
</div> </div>
)} )}
@@ -83,7 +97,11 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
width: `${obj.position.right}px`, width: `${obj.position.right}px`,
}} }}
> >
<span className="distance-label">{obj.position.right}px</span> <span className="distance-label" style={{
position: 'absolute',
right: "50%"
}}
>{obj.position.right}px</span>
</div> </div>
)} )}
</> </>

35
app/src/components/ui/componets/Dropped3dWidget.tsx
View File

@@ -51,29 +51,12 @@ export default function Dropped3dWidgets() {
get3dWidgetData(); get3dWidgetData();
}, [selectedZone.zoneId,activeModule]); }, [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(() => { useEffect(() => {
if (activeModule !== "visualization") return; if (activeModule !== "visualization") return;
if (widgetSubOption === "Floating") return; if (widgetSubOption === "Floating") return;
if (widgetSubOption === "2D") return;
if (selectedZone.zoneName === "") return if (selectedZone.zoneName === "") return
const canvasElement = gl.domElement; const canvasElement = gl.domElement;
const onDrop = async (event: DragEvent) => { const onDrop = async (event: DragEvent) => {
@@ -103,13 +86,15 @@ export default function Dropped3dWidgets() {
let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget) let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget)
console.log('response: ', response);
if (response.message === "Widget created successfully") {
// ✅ Store widgets uniquely for each zone // ✅ Store widgets uniquely for each zone
setZoneWidgetData((prev) => ({ setZoneWidgetData((prev) => ({
...prev, ...prev,
[selectedZone.zoneId]: [...(prev[selectedZone.zoneId] || []), newWidget], [selectedZone.zoneId]: [...(prev[selectedZone.zoneId] || []), newWidget],
})); }));
}
} }
}; };

60
app/src/components/ui/componets/DroppedFloatingWidgets.tsx
View File

@@ -68,6 +68,8 @@ const DroppedObjects: React.FC = () => {
} | null>(null); // State to track the current position during drag } | null>(null); // State to track the current position during drag
const animationRef = useRef<number | null>(null); const animationRef = useRef<number | null>(null);
const { activeModule } = useModuleStore(); const { activeModule } = useModuleStore();
const kebabRef = useRef<HTMLDivElement>(null);
// Clean up animation frame on unmount // Clean up animation frame on unmount
useEffect(() => { 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); const zoneEntries = Object.entries(zones);
if (zoneEntries.length === 0) return null; 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 return; // Prevent dragging when clicking on the kebab menu or its options
} }
const obj = zone.objects[index]; const obj = zone.objects[index];
const element = event.currentTarget as HTMLElement;
element.setPointerCapture(event.pointerId);
const container = document.getElementById("real-time-vis-canvas"); const container = document.getElementById("real-time-vis-canvas");
if (!container) return; if (!container) return;
@@ -201,13 +220,15 @@ const DroppedObjects: React.FC = () => {
// Update the current position state for DistanceLines // Update the current position state for DistanceLines
setCurrentPosition(newPosition); setCurrentPosition(newPosition);
// Update position immediately without animation frame
updateObjectPosition(zoneName, draggingIndex.index, newPosition);
if (!animationRef.current) { // if (!animationRef.current) {
animationRef.current = requestAnimationFrame(() => { // animationRef.current = requestAnimationFrame(() => {
updateObjectPosition(zoneName, draggingIndex.index, newPosition); // updateObjectPosition(zoneName, draggingIndex.index, newPosition);
animationRef.current = null; // animationRef.current = null;
}); // });
} // }
}; };
const handlePointerUp = async (event: React.PointerEvent<HTMLDivElement>) => { const handlePointerUp = async (event: React.PointerEvent<HTMLDivElement>) => {
@@ -249,6 +270,9 @@ const DroppedObjects: React.FC = () => {
...finalPosition, ...finalPosition,
[activeProp1]: finalY, [activeProp1]: finalY,
[activeProp2]: finalX, [activeProp2]: finalX,
// Clear opposite properties
[activeProp1 === "top" ? "bottom" : "top"]: "auto",
[activeProp2 === "left" ? "right" : "left"]: "auto",
}; };
// Save to backend // Save to backend
@@ -264,17 +288,29 @@ const DroppedObjects: React.FC = () => {
updateObjectPosition(zoneName, draggingIndex.index, boundedPosition); 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); setDraggingIndex(null);
setOffset(null); setOffset(null);
setActiveEdges(null); // Clear active edges setActiveEdges(null);
setCurrentPosition(null); // Reset current position setCurrentPosition(null);
// Cancel any pending animation frame
if (animationRef.current) { if (animationRef.current) {
cancelAnimationFrame(animationRef.current); cancelAnimationFrame(animationRef.current);
animationRef.current = null; animationRef.current = null;
} }
} catch (error) {
console.error("Error in handlePointerUp:", error);
} }
}; };
@@ -333,6 +369,7 @@ const DroppedObjects: React.FC = () => {
<div <div
className="icon kebab" className="icon kebab"
ref={kebabRef}
onClick={(event) => { onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
handleKebabClick(obj.id, event) handleKebabClick(obj.id, event)
@@ -362,6 +399,7 @@ const DroppedObjects: React.FC = () => {
</div> </div>
</div> </div>
)} )}
</div> </div>
))} ))}

4
app/src/components/ui/componets/Panel.tsx
View File

@@ -4,6 +4,7 @@ import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import { DraggableWidget } from "./DraggableWidget"; import { DraggableWidget } from "./DraggableWidget";
import { arrayMove } from "@dnd-kit/sortable"; import { arrayMove } from "@dnd-kit/sortable";
import { addingWidgets } from "../../../services/realTimeVisulization/zoneData/addWidgets"; import { addingWidgets } from "../../../services/realTimeVisulization/zoneData/addWidgets";
import { useAsset3dWidget } from "../../../store/store";
type Side = "top" | "bottom" | "left" | "right"; type Side = "top" | "bottom" | "left" | "right";
@@ -53,6 +54,7 @@ const Panel: React.FC<PanelProps> = ({
hiddenPanels, hiddenPanels,
setZonesData, setZonesData,
}) => { }) => {
const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({}); const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({});
const [panelDimensions, setPanelDimensions] = useState<{ const [panelDimensions, setPanelDimensions] = useState<{
[side in Side]?: { width: number; height: number }; [side in Side]?: { width: number; height: number };
@@ -101,7 +103,9 @@ const Panel: React.FC<PanelProps> = ({
const handleDrop = (e: React.DragEvent, panel: Side) => { const handleDrop = (e: React.DragEvent, panel: Side) => {
e.preventDefault(); e.preventDefault();
setWidgetSelect("")
const { draggedAsset } = useWidgetStore.getState(); const { draggedAsset } = useWidgetStore.getState();
if (!draggedAsset) return; if (!draggedAsset) return;
if (isPanelLocked(panel)) return; if (isPanelLocked(panel)) return;

2
app/src/components/ui/componets/RealTimeVisulization.tsx
View File

@@ -132,6 +132,8 @@ const RealTimeVisulization: React.FC = () => {
const relativeX = event.clientX - canvasRect.left; const relativeX = event.clientX - canvasRect.left;
const relativeY = event.clientY - canvasRect.top; const relativeY = event.clientY - canvasRect.top;
const newPosition = determinePosition(canvasRect, relativeX, relativeY)
console.log('newPosition: ', newPosition);
const newObject = { const newObject = {
...droppedData, ...droppedData,
id: generateUniqueId(), id: generateUniqueId(),

82
app/src/components/ui/componets/functions/determinePosition.ts
View File

@@ -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( export function determinePosition(
canvasRect: DOMRect, canvasRect: DOMRect,
@@ -89,16 +23,16 @@ export function determinePosition(
if (relativeX < centerX) { if (relativeX < centerX) {
console.log("Top-left"); console.log("Top-left");
position = { position = {
top: relativeY, top: relativeY - 41.5,
left: relativeX, left: relativeX - 125,
right: "auto", right: "auto",
bottom: "auto", bottom: "auto",
}; };
} else { } else {
console.log("Top-right"); console.log("Top-right");
position = { position = {
top: relativeY, top: relativeY - 41.5,
right: canvasRect.width - relativeX, right: canvasRect.width - relativeX - 125,
left: "auto", left: "auto",
bottom: "auto", bottom: "auto",
}; };
@@ -107,16 +41,16 @@ export function determinePosition(
if (relativeX < centerX) { if (relativeX < centerX) {
console.log("Bottom-left"); console.log("Bottom-left");
position = { position = {
bottom: canvasRect.height - relativeY, bottom: canvasRect.height - relativeY - 41.5,
left: relativeX, left: relativeX - 125,
right: "auto", right: "auto",
top: "auto", top: "auto",
}; };
} else { } else {
console.log("Bottom-right"); console.log("Bottom-right");
position = { position = {
bottom: canvasRect.height - relativeY, bottom: canvasRect.height - relativeY - 41.5,
right: canvasRect.width - relativeX, right: canvasRect.width - relativeX - 125,
left: "auto", left: "auto",
top: "auto", top: "auto",
}; };

4
app/src/services/realTimeVisulization/zoneData/add3dWidget.ts
View File

@@ -1,5 +1,5 @@
// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; 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://192.168.0.102:5000`;
export const adding3dWidgets = async ( export const adding3dWidgets = async (
zoneId: string, zoneId: string,
organization: string, organization: string,

4
app/src/services/realTimeVisulization/zoneData/addFloatingWidgets.ts
View File

@@ -1,5 +1,5 @@
// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; 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://192.168.0.102:5000`;
export const addingFloatingWidgets = async ( export const addingFloatingWidgets = async (
zoneId: string, zoneId: string,

4
app/src/services/realTimeVisulization/zoneData/addWidgets.ts
View File

@@ -1,5 +1,5 @@
// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; 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://192.168.0.102:5000`;
export const addingWidgets = async ( export const addingWidgets = async (
zoneId: string, zoneId: string,
organization: string, organization: string,

4
app/src/services/realTimeVisulization/zoneData/deleteFloatingWidget.ts
View File

@@ -1,5 +1,5 @@
// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; 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://192.168.0.102:5000`;
export const deleteFloatingWidgetApi = async ( export const deleteFloatingWidgetApi = async (
floatWidgetID: string, floatWidgetID: string,

4
app/src/services/realTimeVisulization/zoneData/deletePanel.ts
View File

@@ -1,5 +1,5 @@
// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; 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://192.168.0.102:5000`;
export const deletePanelApi = async ( export const deletePanelApi = async (
zoneId: string, zoneId: string,

4
app/src/services/realTimeVisulization/zoneData/deleteTemplate.ts
View File

@@ -1,5 +1,5 @@
// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; 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://192.168.0.102:5000`;
export const deleteTemplateApi = async ( export const deleteTemplateApi = async (
templateID: string, templateID: string,

4
app/src/services/realTimeVisulization/zoneData/deleteWidgetApi.ts
View File

@@ -1,5 +1,5 @@
// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; 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://192.168.0.102:5000`;
export const deleteWidgetApi = async ( export const deleteWidgetApi = async (
widgetID: string, widgetID: string,

4
app/src/services/realTimeVisulization/zoneData/duplicateWidget.ts
View File

@@ -1,5 +1,5 @@
// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; 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://192.168.0.102:5000`;
export const duplicateWidgetApi = async ( export const duplicateWidgetApi = async (
zoneId: string, zoneId: string,
organization: string, organization: string,

4
app/src/services/realTimeVisulization/zoneData/get3dWidgetData.ts
View File

@@ -1,5 +1,5 @@
// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; 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://192.168.0.102:5000`;
export const get3dWidgetZoneData = async ( export const get3dWidgetZoneData = async (
ZoneId?: string, ZoneId?: string,
organization?: string organization?: string

4
app/src/services/realTimeVisulization/zoneData/getFloatingData.ts
View File

@@ -1,5 +1,5 @@
// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; 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://192.168.0.102:5000`;
export const getFloatingZoneData = async ( export const getFloatingZoneData = async (
ZoneId?: string, ZoneId?: string,
organization?: string organization?: string

4
app/src/services/realTimeVisulization/zoneData/getSelect2dZoneData.ts
View File

@@ -1,5 +1,5 @@
// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; 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://192.168.0.102:5000`;
export const getSelect2dZoneData = async ( export const getSelect2dZoneData = async (
ZoneId?: string, ZoneId?: string,

4
app/src/services/realTimeVisulization/zoneData/getTemplate.ts
View File

@@ -1,5 +1,5 @@
// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; 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://192.168.0.102:5000`;
export const getTemplateData = async (organization?: string) => { export const getTemplateData = async (organization?: string) => {
try { try {
const response = await fetch( const response = await fetch(

4
app/src/services/realTimeVisulization/zoneData/getZoneData.ts
View File

@@ -1,5 +1,5 @@
// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; 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://192.168.0.102:5000`;
export const getZone2dData = async (organization?: string) => { export const getZone2dData = async (organization?: string) => {
try { try {
const response = await fetch( const response = await fetch(

4
app/src/services/realTimeVisulization/zoneData/getZones.ts
View File

@@ -1,5 +1,5 @@
// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; 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://192.168.0.102:5000`;
export const getZoneData = async (zoneId: string, organization: string) => { export const getZoneData = async (zoneId: string, organization: string) => {
console.log("organization: ", organization); console.log("organization: ", organization);

4
app/src/services/realTimeVisulization/zoneData/loadTemplate.ts
View File

@@ -1,5 +1,5 @@
// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; 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://192.168.0.102:5000`;
export const loadTempleteApi = async ( export const loadTempleteApi = async (
templateID: string, templateID: string,
zoneId: string, zoneId: string,

4
app/src/services/realTimeVisulization/zoneData/panel.ts
View File

@@ -1,5 +1,5 @@
// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; 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://192.168.0.102:5000`;
type Side = "top" | "bottom" | "left" | "right"; type Side = "top" | "bottom" | "left" | "right";
export const panelData = async ( export const panelData = async (

4
app/src/services/realTimeVisulization/zoneData/saveTempleteApi.ts
View File

@@ -1,5 +1,5 @@
// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; 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://192.168.0.102:5000`;
export const saveTemplateApi = async (organization: string, template: {}) => { export const saveTemplateApi = async (organization: string, template: {}) => {
console.log('template: ', template); console.log('template: ', template);
try { try {

8
app/src/services/realTimeVisulization/zoneData/useFloatingDataStore.ts
View File

@@ -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;

10
app/src/store/store.ts
View File

@@ -11,16 +11,22 @@ export const useSocketStore = create<any>((set: any, get: any) => ({
return; 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, reconnection: false,
auth: { email, organization }, 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: () => { disconnectSocket: () => {
set((state: any) => { set((state: any) => {
state.socket?.disconnect(); state.socket?.disconnect();
state.VisualizationSocket?.disconnect();
return { socket: null }; return { socket: null };
}); });
}, },

2
app/src/styles/pages/realTimeViz.scss
View File

@@ -616,8 +616,6 @@
.distance-line { .distance-line {
position: absolute; position: absolute;
border-style: dashed; border-style: dashed;