rtViz #31
|
|
@ -25,7 +25,7 @@ interface ProductionCapacityProps {
|
|||
position: [number, number, number];
|
||||
}
|
||||
|
||||
const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ position }) => {
|
||||
const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ position }) => {
|
||||
// Chart data for a week
|
||||
const chartData = {
|
||||
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // Days of the week
|
||||
|
|
@ -79,10 +79,11 @@ const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ position }) =>
|
|||
};
|
||||
|
||||
return (
|
||||
<Html position={[position[0], position[1], position[2]]}
|
||||
scale={[0.5, 0.5, 0.5]}
|
||||
transform
|
||||
sprite>
|
||||
<Html position={[position[0], position[1], position[2]] }
|
||||
scale={[0.5, 0.5, 0.5]}
|
||||
transform
|
||||
zIndexRange={[1,0]}
|
||||
sprite>
|
||||
<div className="productionCapacity-wrapper card">
|
||||
<div className="headeproductionCapacityr-wrapper">
|
||||
<div className="header">Production Capacity</div>
|
||||
|
|
|
|||
|
|
@ -111,6 +111,7 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ position }) =>
|
|||
<Html position={[position[0], position[1], position[2]]}
|
||||
scale={[0.5, 0.5, 0.5]}
|
||||
transform
|
||||
zIndexRange={[1,0]}
|
||||
sprite>
|
||||
<div className="returnOfInvestment card">
|
||||
<div className="header">Return of Investment</div>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ const StateWorking: React.FC<StateWorkingProps> = ({ position }) => {
|
|||
<Html position={[position[0], position[1], position[2]]}
|
||||
scale={[0.5, 0.5, 0.5]}
|
||||
transform
|
||||
zIndexRange={[1,0]}
|
||||
sprite>
|
||||
<div className="stateWorking-wrapper card">
|
||||
<div className="header-wrapper">
|
||||
|
|
|
|||
|
|
@ -94,6 +94,7 @@ const Throughput: React.FC<ThroughputProps> = ({ position }) => {
|
|||
<Html position={[position[0], position[1], position[2]]}
|
||||
scale={[0.5, 0.5, 0.5]}
|
||||
transform
|
||||
zIndexRange={[1, 0]}
|
||||
sprite>
|
||||
<div className="throughput-wrapper">
|
||||
<div className="header">Throughput</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React, { useEffect } from "react";
|
||||
import {
|
||||
CleanPannel,
|
||||
EyeIcon,
|
||||
|
|
@ -6,6 +6,8 @@ import {
|
|||
} from "../../icons/RealTimeVisulationIcons";
|
||||
import { panelData } from "../../../services/realTimeVisulization/zoneData/panel";
|
||||
import { AddIcon } from "../../icons/ExportCommonIcons";
|
||||
import { deletePanelApi } from "../../../services/realTimeVisulization/zoneData/deletePanel";
|
||||
import { useSocketStore } from "../../../store/store";
|
||||
|
||||
// Define the type for `Side`
|
||||
type Side = "top" | "bottom" | "left" | "right";
|
||||
|
|
@ -16,7 +18,6 @@ interface ButtonsProps {
|
|||
zoneName: string;
|
||||
activeSides: Side[];
|
||||
panelOrder: Side[];
|
||||
|
||||
lockedPanels: Side[];
|
||||
zoneId: string;
|
||||
zoneViewPortTarget: number[];
|
||||
|
|
@ -34,7 +35,7 @@ interface ButtonsProps {
|
|||
zoneName: string;
|
||||
activeSides: Side[];
|
||||
panelOrder: Side[];
|
||||
|
||||
|
||||
lockedPanels: Side[];
|
||||
zoneId: string;
|
||||
zoneViewPortTarget: number[];
|
||||
|
|
@ -58,6 +59,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
|
|||
setHiddenPanels,
|
||||
hiddenPanels,
|
||||
}) => {
|
||||
|
||||
const { visualizationSocket } = useSocketStore();
|
||||
|
||||
// Local state to track hidden panels
|
||||
|
||||
// Function to toggle lock/unlock a panel
|
||||
|
|
@ -103,9 +107,13 @@ const AddButtons: React.FC<ButtonsProps> = ({
|
|||
};
|
||||
|
||||
// Function to handle "+" button click
|
||||
const handlePlusButtonClick = (side: Side) => {
|
||||
const handlePlusButtonClick = async (side: Side) => {
|
||||
if (selectedZone.activeSides.includes(side)) {
|
||||
// If the panel is already active, remove all widgets and close the panel
|
||||
// Panel already exists: Remove widgets from that side and update activeSides
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
|
||||
|
||||
// Remove all widgets associated with the side and update active sides
|
||||
const cleanedWidgets = selectedZone.widgets.filter(
|
||||
(widget) => widget.panel !== side
|
||||
);
|
||||
|
|
@ -118,44 +126,68 @@ const AddButtons: React.FC<ButtonsProps> = ({
|
|||
panelOrder: newActiveSides,
|
||||
};
|
||||
|
||||
// Delete the selectedZone state
|
||||
let deletePanel = {
|
||||
organization: organization,
|
||||
panelName: side,
|
||||
zoneId: selectedZone.zoneId
|
||||
}
|
||||
if (visualizationSocket) {
|
||||
visualizationSocket.emit("v2:viz-panel:delete", deletePanel)
|
||||
}
|
||||
setSelectedZone(updatedZone);
|
||||
|
||||
// API call to delete the panel
|
||||
// try {
|
||||
// const response = await deletePanelApi(selectedZone.zoneId, side, organization);
|
||||
//
|
||||
// if (response.message === "Panel deleted successfully") {
|
||||
// } else {
|
||||
//
|
||||
// }
|
||||
// } catch (error) {
|
||||
//
|
||||
// }
|
||||
} else {
|
||||
const updatePanelData = async () => {
|
||||
try {
|
||||
// Get email and organization safely
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg"; // Fallback value
|
||||
// Panel does not exist: Create panel
|
||||
try {
|
||||
// Get email and organization safely with a default fallback
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
|
||||
// Prevent duplicate side entries
|
||||
const newActiveSides = selectedZone.activeSides.includes(side)
|
||||
? [...selectedZone.activeSides]
|
||||
: [...selectedZone.activeSides, side];
|
||||
// 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);
|
||||
|
||||
|
||||
// Update state
|
||||
|
||||
setSelectedZone(updatedZone);
|
||||
} catch (error) {
|
||||
|
||||
const updatedZone = {
|
||||
...selectedZone,
|
||||
activeSides: newActiveSides,
|
||||
panelOrder: newActiveSides,
|
||||
};
|
||||
let addPanel = {
|
||||
organization: organization,
|
||||
zoneId: selectedZone.zoneId,
|
||||
panelOrder: newActiveSides
|
||||
}
|
||||
};
|
||||
if (visualizationSocket) {
|
||||
visualizationSocket.emit("v2:viz-panel:add", addPanel)
|
||||
}
|
||||
setSelectedZone(updatedZone);
|
||||
// API call to create panels
|
||||
// const response = await panelData(organization, selectedZone.zoneId, newActiveSides);
|
||||
//
|
||||
|
||||
updatePanelData(); // Call the async function
|
||||
// if (response.message === "Panels created successfully") {
|
||||
// } else {
|
||||
//
|
||||
// }
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,10 @@ import React, { useEffect, useRef, useState, useCallback } from "react";
|
|||
import { Widget } from "../../../store/useWidgetStore";
|
||||
import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons";
|
||||
import { InfoIcon } from "../../icons/ExportCommonIcons";
|
||||
import { useDroppedObjectsStore, useFloatingWidget } from "../../../store/useDroppedObjectsStore";
|
||||
import {
|
||||
useDroppedObjectsStore,
|
||||
useFloatingWidget,
|
||||
} from "../../../store/useDroppedObjectsStore";
|
||||
import { getSelect2dZoneData } from "../../../services/realTimeVisulization/zoneData/getSelect2dZoneData";
|
||||
import { getFloatingZoneData } from "../../../services/realTimeVisulization/zoneData/getFloatingData";
|
||||
import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData";
|
||||
|
|
@ -63,7 +66,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
|
|||
selectedZone,
|
||||
setSelectedZone,
|
||||
}) => {
|
||||
// Refs
|
||||
// Ref for the container element
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const scrollContainerRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
|
|
@ -150,10 +153,11 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
|
|||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
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)) {
|
||||
res.forEach((val) => {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import {
|
|||
import { useEffect, useRef, useState } from "react";
|
||||
import { duplicateWidgetApi } from "../../../services/realTimeVisulization/zoneData/duplicateWidget";
|
||||
import { deleteWidgetApi } from "../../../services/realTimeVisulization/zoneData/deleteWidgetApi";
|
||||
import { useSocketStore } from "../../../store/store";
|
||||
|
||||
type Side = "top" | "bottom" | "left" | "right";
|
||||
|
||||
|
|
@ -69,6 +70,7 @@ export const DraggableWidget = ({
|
|||
openKebabId: string | null;
|
||||
setOpenKebabId: (id: string | null) => void;
|
||||
}) => {
|
||||
const { visualizationSocket } = useSocketStore();
|
||||
const { selectedChartId, setSelectedChartId } = useWidgetStore();
|
||||
const [panelDimensions, setPanelDimensions] = useState<{
|
||||
[side in Side]?: { width: number; height: number };
|
||||
|
|
@ -85,16 +87,34 @@ export const DraggableWidget = ({
|
|||
try {
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
const response = await deleteWidgetApi(widget.id, organization);
|
||||
if (response?.message === "Widget deleted successfully") {
|
||||
const updatedWidgets = selectedZone.widgets.filter(
|
||||
(w: Widget) => w.id !== widget.id
|
||||
);
|
||||
setSelectedZone((prevZone: any) => ({
|
||||
...prevZone,
|
||||
widgets: updatedWidgets,
|
||||
}));
|
||||
let deleteWidget = {
|
||||
zoneId: selectedZone.zoneId,
|
||||
widgetID: widget.id,
|
||||
organization: organization
|
||||
}
|
||||
if (visualizationSocket) {
|
||||
visualizationSocket.emit("v2:viz-widget:delete", deleteWidget)
|
||||
}
|
||||
const updatedWidgets = selectedZone.widgets.filter(
|
||||
(w: Widget) => w.id !== widget.id
|
||||
);
|
||||
console.log('updatedWidgets: ', updatedWidgets);
|
||||
setSelectedZone((prevZone: any) => ({
|
||||
...prevZone,
|
||||
widgets: updatedWidgets,
|
||||
}));
|
||||
setOpenKebabId(null);
|
||||
|
||||
// const response = await deleteWidgetApi(widget.id, organization);
|
||||
// if (response?.message === "Widget deleted successfully") {
|
||||
// const updatedWidgets = selectedZone.widgets.filter(
|
||||
// (w: Widget) => w.id !== widget.id
|
||||
// );
|
||||
// setSelectedZone((prevZone: any) => ({
|
||||
// ...prevZone,
|
||||
// widgets: updatedWidgets,
|
||||
// }));
|
||||
// }
|
||||
} catch (error) {
|
||||
|
||||
} finally {
|
||||
|
|
@ -249,7 +269,7 @@ export const DraggableWidget = ({
|
|||
)}
|
||||
|
||||
{/* Render charts based on widget type */}
|
||||
|
||||
|
||||
{widget.type === "progress" && (
|
||||
<ProgressCard title={widget.title} data={widget.data} />
|
||||
)}
|
||||
|
|
@ -260,14 +280,14 @@ export const DraggableWidget = ({
|
|||
title={widget.title}
|
||||
fontSize={widget.fontSize}
|
||||
fontWeight={widget.fontWeight}
|
||||
// data={{
|
||||
// measurements: [
|
||||
// { name: "testDevice", fields: "powerConsumption" },
|
||||
// { name: "furnace", fields: "powerConsumption" },
|
||||
// ],
|
||||
// interval: 1000,
|
||||
// duration: "1h",
|
||||
// }}
|
||||
// data={{
|
||||
// measurements: [
|
||||
// { name: "testDevice", fields: "powerConsumption" },
|
||||
// { name: "furnace", fields: "powerConsumption" },
|
||||
// ],
|
||||
// interval: 1000,
|
||||
// duration: "1h",
|
||||
// }}
|
||||
/>
|
||||
)}
|
||||
{widget.type === "bar" && (
|
||||
|
|
@ -277,14 +297,14 @@ export const DraggableWidget = ({
|
|||
title={widget.title}
|
||||
fontSize={widget.fontSize}
|
||||
fontWeight={widget.fontWeight}
|
||||
// data={{
|
||||
// measurements: [
|
||||
// { name: "testDevice", fields: "powerConsumption" },
|
||||
// { name: "furnace", fields: "powerConsumption" },
|
||||
// ],
|
||||
// interval: 1000,
|
||||
// duration: "1h",
|
||||
// }}
|
||||
// data={{
|
||||
// measurements: [
|
||||
// { name: "testDevice", fields: "powerConsumption" },
|
||||
// { name: "furnace", fields: "powerConsumption" },
|
||||
// ],
|
||||
// interval: 1000,
|
||||
// duration: "1h",
|
||||
// }}
|
||||
/>
|
||||
)}
|
||||
{widget.type === "pie" && (
|
||||
|
|
@ -294,14 +314,14 @@ export const DraggableWidget = ({
|
|||
title={widget.title}
|
||||
fontSize={widget.fontSize}
|
||||
fontWeight={widget.fontWeight}
|
||||
// data={{
|
||||
// measurements: [
|
||||
// { name: "testDevice", fields: "powerConsumption" },
|
||||
// { name: "furnace", fields: "powerConsumption" },
|
||||
// ],
|
||||
// interval: 1000,
|
||||
// duration: "1h",
|
||||
// }}
|
||||
// data={{
|
||||
// measurements: [
|
||||
// { name: "testDevice", fields: "powerConsumption" },
|
||||
// { name: "furnace", fields: "powerConsumption" },
|
||||
// ],
|
||||
// interval: 1000,
|
||||
// duration: "1h",
|
||||
// }}
|
||||
/>
|
||||
)}
|
||||
{widget.type === "doughnut" && (
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ export default function Dropped3dWidgets() {
|
|||
|
||||
async function get3dWidgetData() {
|
||||
let result = await get3dWidgetZoneData(selectedZone.zoneId, organization);
|
||||
console.log('result: ', result);
|
||||
setWidgets3D(result)
|
||||
// Ensure the extracted data has id, type, and position correctly mapped
|
||||
const formattedWidgets = result.map((widget: any) => ({
|
||||
|
|
@ -51,29 +52,12 @@ export default function Dropped3dWidgets() {
|
|||
|
||||
get3dWidgetData();
|
||||
|
||||
}, [selectedZone.zoneId,activeModule]);
|
||||
// useEffect(() => {
|
||||
// // ✅ Set data only for the selected zone, keeping existing state structure
|
||||
// setZoneWidgetData((prev) => ({
|
||||
// ...prev,
|
||||
// [selectedZone.zoneId]: [
|
||||
// {
|
||||
// "id": "1743322674626-50mucpb1c",
|
||||
// "type": "ui-Widget 1",
|
||||
// "position": [120.94655021768133, 4.142360029666558, 124.39283546121099]
|
||||
// },
|
||||
// {
|
||||
// "id": "1743322682086-je2h9x33v",
|
||||
// "type": "ui-Widget 2",
|
||||
// "position": [131.28751045879255, 0.009999999999970264, 133.92059801984362]
|
||||
// }
|
||||
// ]
|
||||
// }));
|
||||
// }, [selectedZone.zoneId]); // ✅ Only update when the zone changes
|
||||
}, [selectedZone.zoneId, activeModule]);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeModule !== "visualization") return;
|
||||
if (widgetSubOption === "Floating") return;
|
||||
if (widgetSubOption === "2D") return;
|
||||
if (selectedZone.zoneName === "") return
|
||||
const canvasElement = gl.domElement;
|
||||
const onDrop = async (event: DragEvent) => {
|
||||
|
|
@ -103,13 +87,15 @@ export default function Dropped3dWidgets() {
|
|||
|
||||
|
||||
let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget)
|
||||
console.log('response: ', response);
|
||||
|
||||
|
||||
// ✅ Store widgets uniquely for each zone
|
||||
setZoneWidgetData((prev) => ({
|
||||
...prev,
|
||||
[selectedZone.zoneId]: [...(prev[selectedZone.zoneId] || []), newWidget],
|
||||
}));
|
||||
if (response.message === "Widget created successfully") {
|
||||
// ✅ Store widgets uniquely for each zone
|
||||
setZoneWidgetData((prev) => ({
|
||||
...prev,
|
||||
[selectedZone.zoneId]: [...(prev[selectedZone.zoneId] || []), newWidget],
|
||||
}));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -122,6 +108,7 @@ export default function Dropped3dWidgets() {
|
|||
|
||||
// Get widgets for the currently active zone
|
||||
const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];
|
||||
console.log('activeZoneWidgets: ', activeZoneWidgets);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -68,6 +68,8 @@ const DroppedObjects: React.FC = () => {
|
|||
} | null>(null); // State to track the current position during drag
|
||||
const animationRef = useRef<number | null>(null);
|
||||
const { activeModule } = useModuleStore();
|
||||
const kebabRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
|
||||
// Clean up animation frame on unmount
|
||||
useEffect(() => {
|
||||
|
|
@ -77,6 +79,21 @@ const DroppedObjects: React.FC = () => {
|
|||
}
|
||||
};
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (kebabRef.current && !kebabRef.current.contains(event.target as Node)) {
|
||||
setOpenKebabId(null);
|
||||
}
|
||||
};
|
||||
|
||||
// Add event listener when component mounts
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
|
||||
// Clean up event listener when component unmounts
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const zoneEntries = Object.entries(zones);
|
||||
if (zoneEntries.length === 0) return null;
|
||||
|
|
@ -96,7 +113,7 @@ const DroppedObjects: React.FC = () => {
|
|||
console.log('res: ', res);
|
||||
|
||||
if (res.message === "FloatingWidget deleted successfully") {
|
||||
deleteObject(zoneName, index); // Call the deleteObject method from the store
|
||||
deleteObject(zoneName, id, index); // Call the deleteObject method from the store
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error deleting floating widget:", error);
|
||||
|
|
@ -105,7 +122,12 @@ const DroppedObjects: React.FC = () => {
|
|||
|
||||
|
||||
const handlePointerDown = (event: React.PointerEvent, index: number) => {
|
||||
if ((event.target as HTMLElement).closest(".kebab-options") || (event.target as HTMLElement).closest(".kebab")) {
|
||||
return; // Prevent dragging when clicking on the kebab menu or its options
|
||||
}
|
||||
const obj = zone.objects[index];
|
||||
const element = event.currentTarget as HTMLElement;
|
||||
element.setPointerCapture(event.pointerId);
|
||||
const container = document.getElementById("real-time-vis-canvas");
|
||||
if (!container) return;
|
||||
|
||||
|
|
@ -198,13 +220,15 @@ const DroppedObjects: React.FC = () => {
|
|||
|
||||
// Update the current position state for DistanceLines
|
||||
setCurrentPosition(newPosition);
|
||||
// Update position immediately without animation frame
|
||||
updateObjectPosition(zoneName, draggingIndex.index, newPosition);
|
||||
|
||||
if (!animationRef.current) {
|
||||
animationRef.current = requestAnimationFrame(() => {
|
||||
updateObjectPosition(zoneName, draggingIndex.index, newPosition);
|
||||
animationRef.current = null;
|
||||
});
|
||||
}
|
||||
// if (!animationRef.current) {
|
||||
// animationRef.current = requestAnimationFrame(() => {
|
||||
// updateObjectPosition(zoneName, draggingIndex.index, newPosition);
|
||||
// animationRef.current = null;
|
||||
// });
|
||||
// }
|
||||
};
|
||||
|
||||
const handlePointerUp = async (event: React.PointerEvent<HTMLDivElement>) => {
|
||||
|
|
@ -246,6 +270,9 @@ const DroppedObjects: React.FC = () => {
|
|||
...finalPosition,
|
||||
[activeProp1]: finalY,
|
||||
[activeProp2]: finalX,
|
||||
// Clear opposite properties
|
||||
[activeProp1 === "top" ? "bottom" : "top"]: "auto",
|
||||
[activeProp2 === "left" ? "right" : "left"]: "auto",
|
||||
};
|
||||
|
||||
// Save to backend
|
||||
|
|
@ -255,22 +282,35 @@ const DroppedObjects: React.FC = () => {
|
|||
...zone.objects[draggingIndex.index],
|
||||
position: boundedPosition,
|
||||
});
|
||||
console.log('response: ', response);
|
||||
|
||||
if (response.message === "Widget updated successfully") {
|
||||
updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
|
||||
}
|
||||
|
||||
// Clean up
|
||||
// // Clean up
|
||||
// setDraggingIndex(null);
|
||||
// setOffset(null);
|
||||
// setActiveEdges(null); // Clear active edges
|
||||
// setCurrentPosition(null); // Reset current position
|
||||
// if (animationRef.current) {
|
||||
// cancelAnimationFrame(animationRef.current);
|
||||
// animationRef.current = null;
|
||||
// }
|
||||
} catch (error) {
|
||||
console.error("Error in handlePointerUp:", error);
|
||||
} finally {
|
||||
// Clean up regardless of success or failure
|
||||
setDraggingIndex(null);
|
||||
setOffset(null);
|
||||
setActiveEdges(null); // Clear active edges
|
||||
setCurrentPosition(null); // Reset current position
|
||||
setActiveEdges(null);
|
||||
setCurrentPosition(null);
|
||||
|
||||
// Cancel any pending animation frame
|
||||
if (animationRef.current) {
|
||||
cancelAnimationFrame(animationRef.current);
|
||||
animationRef.current = null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error in handlePointerUp:", error);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -279,66 +319,6 @@ const DroppedObjects: React.FC = () => {
|
|||
setOpenKebabId((prevId) => (prevId === id ? null : id));
|
||||
};
|
||||
|
||||
const renderObjectContent = (obj: any) => {
|
||||
switch (obj.className) {
|
||||
case "floating total-card":
|
||||
return (
|
||||
<>
|
||||
<div className="header-wrapper">
|
||||
<div className="header">{obj.header}</div>
|
||||
<div className="data-values">
|
||||
<div className="value">{obj.value}</div>
|
||||
<div className="per">{obj.per}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="icon">
|
||||
<WalletIcon />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
case "warehouseThroughput floating":
|
||||
return (
|
||||
<>
|
||||
<div className="header">
|
||||
<h2>Warehouse Throughput</h2>
|
||||
<p>
|
||||
<span>(+5) more</span> in 2025
|
||||
</p>
|
||||
</div>
|
||||
<div className="lineGraph" style={{ height: "100%" }}>
|
||||
{/* <Line data={lineGraphData} options={lineGraphOptions} /> */}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
case "fleetEfficiency floating":
|
||||
return (
|
||||
<>
|
||||
<h2 className="header">Fleet Efficiency</h2>
|
||||
<div className="progressContainer">
|
||||
<div className="progress">
|
||||
<div className="barOverflow">
|
||||
<div
|
||||
className="bar"
|
||||
style={{ transform: `rotate(${obj.value}deg)` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="scaleLabels">
|
||||
<span>0%</span>
|
||||
<div className="centerText">
|
||||
<div className="percentage">{obj.per}%</div>
|
||||
<div className="status">Optimal</div>
|
||||
</div>
|
||||
<span>100%</span>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
onPointerMove={handlePointerMove}
|
||||
|
|
@ -388,12 +368,16 @@ const DroppedObjects: React.FC = () => {
|
|||
) : null}
|
||||
<div
|
||||
className="icon kebab"
|
||||
onClick={(event) => handleKebabClick(obj.id, event)}
|
||||
ref={kebabRef}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
handleKebabClick(obj.id, event)
|
||||
}}
|
||||
>
|
||||
<KebabIcon />
|
||||
</div>
|
||||
{openKebabId === obj.id && (
|
||||
<div className="kebab-options">
|
||||
<div className="kebab-options" ref={kebabRef}>
|
||||
<div className="dublicate btn" onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
handleDuplicate(zoneName, index); // Call the duplicate handler
|
||||
|
|
@ -414,6 +398,7 @@ const DroppedObjects: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
))}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
|
|||
import { DraggableWidget } from "./DraggableWidget";
|
||||
import { arrayMove } from "@dnd-kit/sortable";
|
||||
import { addingWidgets } from "../../../services/realTimeVisulization/zoneData/addWidgets";
|
||||
import { useAsset3dWidget, useSocketStore } from "../../../store/store";
|
||||
|
||||
type Side = "top" | "bottom" | "left" | "right";
|
||||
|
||||
|
|
@ -53,6 +54,7 @@ const Panel: React.FC<PanelProps> = ({
|
|||
hiddenPanels,
|
||||
setZonesData,
|
||||
}) => {
|
||||
const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
|
||||
const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({});
|
||||
const [panelDimensions, setPanelDimensions] = useState<{
|
||||
[side in Side]?: { width: number; height: number };
|
||||
|
|
@ -60,6 +62,7 @@ const Panel: React.FC<PanelProps> = ({
|
|||
const [openKebabId, setOpenKebabId] = useState<string | null>(null);
|
||||
|
||||
const { isPlaying } = usePlayButtonStore();
|
||||
const { visualizationSocket } = useSocketStore();
|
||||
|
||||
const getPanelStyle = useMemo(
|
||||
() => (side: Side) => {
|
||||
|
|
@ -100,7 +103,6 @@ const Panel: React.FC<PanelProps> = ({
|
|||
);
|
||||
|
||||
const handleDrop = (e: React.DragEvent, panel: Side) => {
|
||||
|
||||
e.preventDefault();
|
||||
const { draggedAsset } = useWidgetStore.getState();
|
||||
if (!draggedAsset) return;
|
||||
|
|
@ -110,7 +112,6 @@ const Panel: React.FC<PanelProps> = ({
|
|||
const maxCapacity = calculatePanelCapacity(panel);
|
||||
|
||||
if (currentWidgetsCount >= maxCapacity) return;
|
||||
|
||||
addWidgetToPanel(draggedAsset, panel);
|
||||
};
|
||||
|
||||
|
|
@ -147,18 +148,33 @@ const Panel: React.FC<PanelProps> = ({
|
|||
id: generateUniqueId(),
|
||||
panel,
|
||||
};
|
||||
try {
|
||||
let response = await addingWidgets(selectedZone.zoneId, organization, newWidget);
|
||||
|
||||
if (response.message === "Widget created successfully") {
|
||||
setSelectedZone((prev) => ({
|
||||
...prev,
|
||||
widgets: [...prev.widgets, newWidget],
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error adding widget:", error);
|
||||
let addWidget = {
|
||||
organization: organization,
|
||||
zoneId: selectedZone.zoneId,
|
||||
widget: newWidget
|
||||
}
|
||||
console.log('newWidget: ', newWidget);
|
||||
console.log('addWidget: ', addWidget);
|
||||
if (visualizationSocket) {
|
||||
visualizationSocket.emit("v2:viz-widget:add", addWidget)
|
||||
}
|
||||
setSelectedZone((prev) => ({
|
||||
...prev,
|
||||
widgets: [...prev.widgets, newWidget],
|
||||
}));
|
||||
|
||||
// try {
|
||||
// let response = await addingWidgets(selectedZone.zoneId, organization, newWidget);
|
||||
|
||||
// if (response.message === "Widget created successfully") {
|
||||
// setSelectedZone((prev) => ({
|
||||
// ...prev,
|
||||
// widgets: [...prev.widgets, newWidget],
|
||||
// }));
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error("Error adding widget:", error);
|
||||
// }
|
||||
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import DroppedObjects from "./DroppedFloatingWidgets";
|
|||
import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
|
||||
import {
|
||||
useAsset3dWidget,
|
||||
useSocketStore,
|
||||
useWidgetSubOption,
|
||||
useZones,
|
||||
} from "../../../store/store";
|
||||
|
|
@ -18,6 +19,7 @@ import { getZone2dData } from "../../../services/realTimeVisulization/zoneData/g
|
|||
import { generateUniqueId } from "../../../functions/generateUniqueId";
|
||||
import { determinePosition } from "./functions/determinePosition";
|
||||
import { addingFloatingWidgets } from "../../../services/realTimeVisulization/zoneData/addFloatingWidgets";
|
||||
import SocketRealTimeViz from "../../../modules/visualization/realTimeVizSocket.dev";
|
||||
|
||||
type Side = "top" | "bottom" | "left" | "right";
|
||||
|
||||
|
|
@ -56,6 +58,7 @@ const RealTimeVisulization: React.FC = () => {
|
|||
>({});
|
||||
const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
|
||||
const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
|
||||
const { visualizationSocket } = useSocketStore();
|
||||
|
||||
useEffect(() => {
|
||||
async function GetZoneData() {
|
||||
|
|
@ -132,6 +135,8 @@ const RealTimeVisulization: React.FC = () => {
|
|||
const relativeX = event.clientX - canvasRect.left;
|
||||
const relativeY = event.clientY - canvasRect.top;
|
||||
|
||||
const newPosition = determinePosition(canvasRect, relativeX, relativeY)
|
||||
console.log('newPosition: ', newPosition);
|
||||
const newObject = {
|
||||
...droppedData,
|
||||
id: generateUniqueId(),
|
||||
|
|
@ -202,6 +207,7 @@ const RealTimeVisulization: React.FC = () => {
|
|||
<Scene />
|
||||
</div>
|
||||
{activeModule === "visualization" && selectedZone.zoneName !== "" && <DroppedObjects />}
|
||||
{activeModule === "visualization" && <SocketRealTimeViz />}
|
||||
{/* <DroppedObjects /> */}
|
||||
{activeModule === "visualization" && (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -1,69 +1,3 @@
|
|||
// export function determinePosition(
|
||||
// canvasRect: DOMRect,
|
||||
// relativeX: number,
|
||||
// relativeY: number
|
||||
// ): {
|
||||
// top: number | "auto";
|
||||
// left: number | "auto";
|
||||
// right: number | "auto";
|
||||
// bottom: number | "auto";
|
||||
// } {
|
||||
// // Calculate the midpoints of the canvas
|
||||
// const centerX = canvasRect.width / 2;
|
||||
// const centerY = canvasRect.height / 2;
|
||||
|
||||
// // Initialize position with default values
|
||||
// let position: {
|
||||
// top: number | "auto";
|
||||
// left: number | "auto";
|
||||
// right: number | "auto";
|
||||
// bottom: number | "auto";
|
||||
// };
|
||||
|
||||
// if (relativeY < centerY) {
|
||||
// // Top half
|
||||
// if (relativeX < centerX) {
|
||||
// // Left side
|
||||
// position = {
|
||||
// top: relativeY,
|
||||
// left: relativeX,
|
||||
// right: "auto",
|
||||
// bottom: "auto",
|
||||
// };
|
||||
// } else {
|
||||
// // Right side
|
||||
// position = {
|
||||
// top: relativeY,
|
||||
// right: canvasRect.width - relativeX,
|
||||
// left: "auto",
|
||||
// bottom: "auto",
|
||||
// };
|
||||
// }
|
||||
// } else {
|
||||
// // Bottom half
|
||||
// if (relativeX < centerX) {
|
||||
// // Left side
|
||||
// position = {
|
||||
// bottom: canvasRect.height - relativeY,
|
||||
// left: relativeX,
|
||||
// right: "auto",
|
||||
// top: "auto",
|
||||
// };
|
||||
// } else {
|
||||
// // Right side
|
||||
// position = {
|
||||
// bottom: canvasRect.height - relativeY,
|
||||
// right: canvasRect.width - relativeX,
|
||||
// left: "auto",
|
||||
// top: "auto",
|
||||
// };
|
||||
// }
|
||||
// }
|
||||
|
||||
// return position;
|
||||
// }
|
||||
|
||||
|
||||
|
||||
export function determinePosition(
|
||||
canvasRect: DOMRect,
|
||||
|
|
@ -89,16 +23,16 @@ export function determinePosition(
|
|||
if (relativeX < centerX) {
|
||||
console.log("Top-left");
|
||||
position = {
|
||||
top: relativeY,
|
||||
left: relativeX,
|
||||
top: relativeY - 41.5,
|
||||
left: relativeX - 125,
|
||||
right: "auto",
|
||||
bottom: "auto",
|
||||
};
|
||||
} else {
|
||||
console.log("Top-right");
|
||||
position = {
|
||||
top: relativeY,
|
||||
right: canvasRect.width - relativeX,
|
||||
top: relativeY - 41.5,
|
||||
right: canvasRect.width - relativeX - 125,
|
||||
left: "auto",
|
||||
bottom: "auto",
|
||||
};
|
||||
|
|
@ -107,16 +41,16 @@ export function determinePosition(
|
|||
if (relativeX < centerX) {
|
||||
console.log("Bottom-left");
|
||||
position = {
|
||||
bottom: canvasRect.height - relativeY,
|
||||
left: relativeX,
|
||||
bottom: canvasRect.height - relativeY - 41.5,
|
||||
left: relativeX - 125,
|
||||
right: "auto",
|
||||
top: "auto",
|
||||
};
|
||||
} else {
|
||||
console.log("Bottom-right");
|
||||
position = {
|
||||
bottom: canvasRect.height - relativeY,
|
||||
right: canvasRect.width - relativeX,
|
||||
bottom: canvasRect.height - relativeY - 41.5,
|
||||
right: canvasRect.width - relativeX - 125,
|
||||
left: "auto",
|
||||
top: "auto",
|
||||
};
|
||||
|
|
@ -124,4 +58,4 @@ export function determinePosition(
|
|||
}
|
||||
|
||||
return position;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
import { useEffect } from "react";
|
||||
import { useSocketStore } from "../../store/store";
|
||||
import { useSelectedZoneStore } from "../../store/useZoneStore";
|
||||
|
||||
export default function SocketRealTimeViz() {
|
||||
const { visualizationSocket } = useSocketStore();
|
||||
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
||||
useEffect(() => {
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
if (visualizationSocket) {
|
||||
//add panel response
|
||||
visualizationSocket.on("viz-panel:response:updates", (addPanel: any) => {
|
||||
if (addPanel.success) {
|
||||
let addPanelData = addPanel.data.data
|
||||
setSelectedZone(addPanelData)
|
||||
}
|
||||
})
|
||||
//delete panel response
|
||||
visualizationSocket.on("viz-panel:response:delete", (deletePanel: any) => {
|
||||
if (deletePanel.success) {
|
||||
let deletePanelData = deletePanel.data.data
|
||||
setSelectedZone(deletePanelData)
|
||||
}
|
||||
})
|
||||
// add 2dWidget
|
||||
visualizationSocket.on("viz-widget:response:updates", (response: any) => {
|
||||
console.log('response: ', response);
|
||||
if (response.success && response.data) {
|
||||
setSelectedZone((prev) => {
|
||||
const isWidgetAlreadyAdded = prev.widgets.some(
|
||||
(widget) => widget.id === response.data.widgetData.id
|
||||
);
|
||||
if (isWidgetAlreadyAdded) return prev; // Prevent duplicate addition
|
||||
return {
|
||||
...prev,
|
||||
zoneId: response.data.zoneId,
|
||||
zoneName: response.data.zoneName,
|
||||
widgets: [...prev.widgets, response.data.widgetData], // Append new widget
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
//delete 2D Widget
|
||||
visualizationSocket.on("viz-widget:response:delete", (deleteWidget: any) => {
|
||||
console.log('deleteWidget: ', deleteWidget);
|
||||
if (deleteWidget?.success && deleteWidget.data) {
|
||||
setSelectedZone((prevZone: any) => ({
|
||||
...prevZone,
|
||||
zoneId: deleteWidget.data.zoneId,
|
||||
zoneName: deleteWidget.data.zoneName,
|
||||
widgets: deleteWidget.data.widgetDeleteDatas, // Replace with new widget list
|
||||
}));
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
}, [selectedZone])
|
||||
return (
|
||||
<></>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
|
||||
// let url_Backend_dwinzo = `http://192.168.0.102:5000`;
|
||||
|
||||
export const deletePanelApi = async (
|
||||
zoneId: string,
|
||||
panelName: string,
|
||||
organization: string
|
||||
) => {
|
||||
console.log('panelName: ', panelName);
|
||||
console.log('organization: ', organization);
|
||||
console.log('zoneId: ', zoneId);
|
||||
try {
|
||||
const response = await fetch(`${url_Backend_dwinzo}/api/v2/panel/delete`, {
|
||||
method: "PATCH",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ organization, zoneId, panelName }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to delete widget in the zone");
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
return result;
|
||||
} catch (error) {
|
||||
if (error instanceof Error) {
|
||||
throw new Error(error.message);
|
||||
} else {
|
||||
throw new Error("An unknown error occurred");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -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;
|
||||
|
|
@ -11,16 +11,28 @@ export const useSocketStore = create<any>((set: any, get: any) => ({
|
|||
return;
|
||||
}
|
||||
|
||||
const socket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`, {
|
||||
reconnection: false,
|
||||
auth: { email, organization },
|
||||
});
|
||||
const socket = io(
|
||||
`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}`,
|
||||
{
|
||||
reconnection: false,
|
||||
auth: { email, organization },
|
||||
}
|
||||
);
|
||||
|
||||
set({ socket });
|
||||
const visualizationSocket = io(
|
||||
`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization`,
|
||||
{
|
||||
reconnection: false,
|
||||
auth: { email, organization },
|
||||
}
|
||||
);
|
||||
|
||||
set({ socket, visualizationSocket });
|
||||
},
|
||||
disconnectSocket: () => {
|
||||
set((state: any) => {
|
||||
state.socket?.disconnect();
|
||||
state.visualizationSocket?.disconnect();
|
||||
return { socket: null };
|
||||
});
|
||||
},
|
||||
|
|
@ -205,7 +217,9 @@ export const useActiveLayer = create<any>((set: any) => ({
|
|||
|
||||
interface RefTextUpdateState {
|
||||
refTextupdate: number;
|
||||
setRefTextUpdate: (callback: (currentValue: number) => number | number) => void;
|
||||
setRefTextUpdate: (
|
||||
callback: (currentValue: number) => number | number
|
||||
) => void;
|
||||
}
|
||||
|
||||
export const useRefTextUpdate = create<RefTextUpdateState>((set) => ({
|
||||
|
|
@ -213,7 +227,9 @@ export const useRefTextUpdate = create<RefTextUpdateState>((set) => ({
|
|||
setRefTextUpdate: (callback) =>
|
||||
set((state) => ({
|
||||
refTextupdate:
|
||||
typeof callback === "function" ? callback(state.refTextupdate) : callback,
|
||||
typeof callback === "function"
|
||||
? callback(state.refTextupdate)
|
||||
: callback,
|
||||
})),
|
||||
}));
|
||||
|
||||
|
|
@ -393,4 +409,3 @@ export const useWidgetSubOption = create<any>((set: any) => ({
|
|||
widgetSubOption: "2D",
|
||||
setWidgetSubOption: (x: any) => set({ widgetSubOption: x }),
|
||||
}));
|
||||
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ type DroppedObjectsState = {
|
|||
bottom: number | "auto";
|
||||
}
|
||||
) => void;
|
||||
deleteObject: (zoneName: string, index: number) => void; // Add this line
|
||||
deleteObject: (zoneName: string, id: string, index: number) => void; // Add this line
|
||||
duplicateObject: (zoneName: string, index: number) => void; // Add this line
|
||||
};
|
||||
|
||||
|
|
@ -77,15 +77,16 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
|
|||
};
|
||||
}),
|
||||
|
||||
deleteObject: (zoneName: string, index: number) =>
|
||||
deleteObject: (zoneName: string, id: string, index: number) =>
|
||||
set((state) => {
|
||||
const zone = state.zones[zoneName];
|
||||
console.log("zone: ", zone);
|
||||
if (!zone) return state;
|
||||
return {
|
||||
zones: {
|
||||
[zoneName]: {
|
||||
...zone,
|
||||
objects: zone.objects.filter((_, i) => i !== index), // Remove object at the given index
|
||||
objects: zone.objects.filter((obj) => obj.id !== id), // Remove object at the given index
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue