Merge pull request 'ui' (#59) from ui into main
Reviewed-on: http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev/pulls/59
This commit is contained in:
commit
47ddc098f3
|
|
@ -1,25 +0,0 @@
|
|||
import { Canvas } from "@react-three/fiber";
|
||||
import Throughput from "./cards/Throughput";
|
||||
import ReturnOfInvestment from "./cards/ReturnOfInvestment";
|
||||
import ProductionCapacity from "./cards/ProductionCapacity";
|
||||
import { OrbitControls } from "@react-three/drei";
|
||||
import StateWorking from "./cards/StateWorking";
|
||||
|
||||
const CardsScene = () => {
|
||||
return (
|
||||
<div className="cards-scene" style={{ width: "100%", height: "100%" }}>
|
||||
{/* <Canvas> */}
|
||||
{/* 3d-cards */}
|
||||
|
||||
{/* <ProductionCapacity /> */}
|
||||
{/* <ReturnOfInvestment /> */}
|
||||
{/* <StateWorking /> */}
|
||||
{/* <Throughput /> */}
|
||||
|
||||
{/* <OrbitControls /> */}
|
||||
{/* </Canvas> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CardsScene;
|
||||
|
|
@ -6,7 +6,7 @@ import useToggleStore from "../../../store/useUIToggleStore";
|
|||
import Assets from "./Assets";
|
||||
import useModuleStore from "../../../store/useModuleStore";
|
||||
import Widgets from "./visualization/widgets/Widgets";
|
||||
import Templates from "./visualization/Templates";
|
||||
import Templates from "../../../modules/visualization/template/Templates";
|
||||
import Search from "../../ui/inputs/Search";
|
||||
|
||||
const SideBarLeft: React.FC = () => {
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@ import {
|
|||
GlobeIcon,
|
||||
WalletIcon,
|
||||
} from "../../../../icons/3dChartIcons";
|
||||
import SimpleCard from "../../../../ui/realTimeVis/floating/SimpleCard";
|
||||
import SimpleCard from "../../../../../modules/visualization/widgets/floating/cards/SimpleCard";
|
||||
|
||||
import WarehouseThroughput from "../../../../ui/realTimeVis/floating/WarehouseThroughput";
|
||||
import ProductivityDashboard from "../../../../ui/realTimeVis/floating/ProductivityDashboard";
|
||||
import FleetEfficiency from "../../../../ui/realTimeVis/floating/FleetEfficiency";
|
||||
import WarehouseThroughput from "../../../../../modules/visualization/widgets/floating/cards/WarehouseThroughput";
|
||||
import ProductivityDashboard from "../../../../../modules/visualization/widgets/floating/cards/ProductivityDashboard";
|
||||
import FleetEfficiency from "../../../../../modules/visualization/widgets/floating/cards/FleetEfficiency";
|
||||
|
||||
interface Widget {
|
||||
id: string;
|
||||
|
|
@ -48,24 +48,28 @@ const WidgetsFloating = () => {
|
|||
<SimpleCard
|
||||
header={"Today’s Earnings"}
|
||||
icon={WalletIcon}
|
||||
iconName={"WalletIcon"}
|
||||
value={"$53,000"}
|
||||
per={"+55%"}
|
||||
/>
|
||||
<SimpleCard
|
||||
header={"Today’s Users"}
|
||||
icon={GlobeIcon}
|
||||
iconName={"GlobeIcon"}
|
||||
value={"1,200"}
|
||||
per={"+30%"}
|
||||
/>
|
||||
<SimpleCard
|
||||
header={"New Clients"}
|
||||
icon={DocumentIcon}
|
||||
iconName={"DocumentIcon"}
|
||||
value={"250"}
|
||||
per={"+12%"}
|
||||
/>
|
||||
<SimpleCard
|
||||
header={"Total Sales"}
|
||||
icon={CartIcon}
|
||||
iconName={"CartIcon"}
|
||||
value={"$150,000"}
|
||||
per={"+20%"}
|
||||
/>{" "}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
|||
import ChartComponent from "../../../sidebarLeft/visualization/widgets/ChartComponent";
|
||||
import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
|
||||
import { WalletIcon } from "../../../../icons/3dChartIcons";
|
||||
import SimpleCard from "../../../../ui/realTimeVis/floating/SimpleCard";
|
||||
import SimpleCard from "../../../../../modules/visualization/widgets/floating/cards/SimpleCard";
|
||||
|
||||
interface Widget {
|
||||
id: string;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import {
|
|||
} from "../icons/ExportToolsIcons";
|
||||
import { ArrowIcon, TickIcon } from "../icons/ExportCommonIcons";
|
||||
import useModuleStore, { useThreeDStore } from "../../store/useModuleStore";
|
||||
import { handleSaveTemplate } from "../../modules/visualization/handleSaveTemplate";
|
||||
import { handleSaveTemplate } from "../../modules/visualization/functions/handleSaveTemplate";
|
||||
import { usePlayButtonStore } from "../../store/usePlayButtonStore";
|
||||
import useTemplateStore from "../../store/useTemplateStore";
|
||||
import { useSelectedZoneStore } from "../../store/useZoneStore";
|
||||
|
|
|
|||
|
|
@ -1,41 +0,0 @@
|
|||
import { getActiveProperties } from "./getActiveProperties";
|
||||
|
||||
export const convertAutoToNumeric = (
|
||||
canvasRect: DOMRect,
|
||||
position: {
|
||||
top: number | "auto";
|
||||
left: number | "auto";
|
||||
right: number | "auto";
|
||||
bottom: number | "auto";
|
||||
}
|
||||
): { top: number; left: number; right: number; bottom: number } => {
|
||||
const { width, height } = canvasRect;
|
||||
|
||||
// Determine which properties are active
|
||||
const [activeProp1, activeProp2] = getActiveProperties(position);
|
||||
|
||||
let top = typeof position.top !== "string" ? position.top : 0;
|
||||
let left = typeof position.left !== "string" ? position.left : 0;
|
||||
let right = typeof position.right !== "string" ? position.right : 0;
|
||||
let bottom = typeof position.bottom !== "string" ? position.bottom : 0;
|
||||
|
||||
// Calculate missing properties based on active properties
|
||||
if (activeProp1 === "top") {
|
||||
bottom = height - top;
|
||||
} else if (activeProp1 === "bottom") {
|
||||
top = height - bottom;
|
||||
}
|
||||
|
||||
if (activeProp2 === "left") {
|
||||
right = width - left;
|
||||
} else if (activeProp2 === "right") {
|
||||
left = width - right;
|
||||
}
|
||||
|
||||
return {
|
||||
top,
|
||||
left,
|
||||
right,
|
||||
bottom,
|
||||
};
|
||||
};
|
||||
|
|
@ -1,105 +0,0 @@
|
|||
import { StockIncreseIcon } from "../../../icons/RealTimeVisulationIcons";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import io from "socket.io-client";
|
||||
import useChartStore from "../../../../store/useChartStore";
|
||||
import { useWidgetStore } from "../../../../store/useWidgetStore";
|
||||
import axios from "axios";
|
||||
|
||||
const ProgressCard1 = ({ id,title,}: {
|
||||
id: string,
|
||||
title: string;
|
||||
}) => {
|
||||
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
|
||||
const [measurements, setmeasurements] = useState<any>({});
|
||||
const [duration, setDuration] = useState("1h")
|
||||
const [name, setName] = useState(title)
|
||||
const [value, setValue] = useState<any>('')
|
||||
const { selectedChartId } = useWidgetStore();
|
||||
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const socket = io(`http://${iotApiUrl}`);
|
||||
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
|
||||
|
||||
const inputData = {
|
||||
measurements,
|
||||
duration,
|
||||
interval: 1000,
|
||||
};
|
||||
|
||||
|
||||
const startStream = () => {
|
||||
socket.emit("lastInput", inputData);
|
||||
};
|
||||
|
||||
socket.on("connect", startStream);
|
||||
|
||||
socket.on("lastOutput", (response) => {
|
||||
const responseData = response.input1;
|
||||
setValue(responseData);
|
||||
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.off("lastOutput");
|
||||
socket.emit("stop_stream"); // Stop streaming when component unmounts
|
||||
socket.disconnect();
|
||||
};
|
||||
}, [measurements, duration]);
|
||||
|
||||
const fetchSavedInputes = async() => {
|
||||
|
||||
if (id !== "") {
|
||||
try {
|
||||
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
|
||||
if (response.status === 200) {
|
||||
setmeasurements(response.data.Data.measurements)
|
||||
setDuration(response.data.Data.duration)
|
||||
setName(response.data.widgetName)
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchSavedInputes();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedChartId?.id === id) {
|
||||
fetchSavedInputes();
|
||||
}
|
||||
}
|
||||
,[chartMeasurements, chartDuration, widgetName])
|
||||
|
||||
return(
|
||||
<div className="chart progressBar">
|
||||
<div className="header">{name}</div>
|
||||
<div className="stock">
|
||||
<span className="stock-item">
|
||||
<span className="stockValues">
|
||||
<div className="value">{value}</div>
|
||||
<div className="key">Units</div>
|
||||
|
||||
</span>
|
||||
<div className="stock-description">{
|
||||
measurements ? `${measurements?.input1?.fields}` : 'description'}</div>
|
||||
</span>
|
||||
<div className="icon">
|
||||
<StockIncreseIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
export default ProgressCard1;
|
||||
|
|
@ -1,125 +0,0 @@
|
|||
import { StockIncreseIcon } from "../../../icons/RealTimeVisulationIcons";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import io from "socket.io-client";
|
||||
import useChartStore from "../../../../store/useChartStore";
|
||||
import { useWidgetStore } from "../../../../store/useWidgetStore";
|
||||
import axios from "axios";
|
||||
|
||||
const ProgressCard2 = ({ id,title,}: {
|
||||
id: string,
|
||||
title: string;
|
||||
}) => {
|
||||
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
|
||||
const [measurements, setmeasurements] = useState<any>({});
|
||||
const [duration, setDuration] = useState("1h")
|
||||
const [name, setName] = useState(title)
|
||||
const [value1, setValue1] = useState<any>('')
|
||||
const [value2, setValue2] = useState<any>('')
|
||||
const { selectedChartId } = useWidgetStore();
|
||||
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
|
||||
|
||||
const socket = io(`http://${iotApiUrl}`);
|
||||
|
||||
const inputData = {
|
||||
measurements,
|
||||
duration,
|
||||
interval: 1000,
|
||||
};
|
||||
|
||||
|
||||
const startStream = () => {
|
||||
socket.emit("lastInput", inputData);
|
||||
};
|
||||
|
||||
socket.on("connect", startStream);
|
||||
|
||||
socket.on("lastOutput", (response) => {
|
||||
const responseData1 = response.input1;
|
||||
const responseData2 = response.input2;
|
||||
setValue1(responseData1);
|
||||
setValue2(responseData2);
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.off("lastOutput");
|
||||
socket.emit("stop_stream"); // Stop streaming when component unmounts
|
||||
socket.disconnect();
|
||||
};
|
||||
}, [measurements, duration]);
|
||||
|
||||
const fetchSavedInputes = async() => {
|
||||
|
||||
if (id !== "") {
|
||||
try {
|
||||
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
|
||||
if (response.status === 200) {
|
||||
setmeasurements(response.data.Data.measurements)
|
||||
setDuration(response.data.Data.duration)
|
||||
setName(response.data.widgetName)
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchSavedInputes();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedChartId?.id === id) {
|
||||
fetchSavedInputes();
|
||||
}
|
||||
}
|
||||
,[chartMeasurements, chartDuration, widgetName])
|
||||
|
||||
return(
|
||||
<div className="chart progressBar">
|
||||
<div className="header">{name}</div>
|
||||
|
||||
<div className="stock">
|
||||
<span className="stock-item">
|
||||
<span className="stockValues">
|
||||
<div className="value">{value1}</div>
|
||||
<div className="key">Units</div>
|
||||
|
||||
</span>
|
||||
<div className="stock-description">{
|
||||
measurements ? `${measurements?.input1?.fields}` : 'description'}</div>
|
||||
</span>
|
||||
<div className="icon">
|
||||
<StockIncreseIcon />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="stock">
|
||||
<span className="stock-item">
|
||||
<span className="stockValues">
|
||||
<div className="value">{value2}</div>
|
||||
<div className="key">Units</div>
|
||||
|
||||
</span>
|
||||
<div className="stock-description">{
|
||||
measurements ? `${measurements?.input2?.fields}` : 'description'}</div>
|
||||
</span>
|
||||
<div className="icon">
|
||||
<StockIncreseIcon />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
export default ProgressCard2;
|
||||
|
|
@ -18,8 +18,8 @@ import Simulation from "../simulation/simulation";
|
|||
|
||||
// import Simulation from "./simulationtemp/simulation";
|
||||
import ZoneCentreTarget from "../../components/ui/componets/zoneCameraTarget";
|
||||
import Dropped3dWidgets from "../../components/ui/componets/Dropped3dWidget";
|
||||
import ZoneAssets from "../../components/ui/componets/zoneAssets";
|
||||
import Dropped3dWidgets from "../../modules/visualization/widgets/3d/Dropped3dWidget";
|
||||
import ZoneAssets from "../visualization/zoneAssets";
|
||||
|
||||
export default function Scene() {
|
||||
const map = useMemo(
|
||||
|
|
|
|||
|
|
@ -1,14 +1,18 @@
|
|||
import React, { useEffect, useRef, useState, useCallback } from "react";
|
||||
import { useWidgetStore, Widget } from "../../../store/useWidgetStore";
|
||||
import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons";
|
||||
import { InfoIcon } from "../../icons/ExportCommonIcons";
|
||||
import { useWidgetStore, Widget } from "../../store/useWidgetStore";
|
||||
|
||||
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";
|
||||
} from "../../store/useDroppedObjectsStore";
|
||||
import { getSelect2dZoneData } from "../../services/realTimeVisulization/zoneData/getSelect2dZoneData";
|
||||
import { getFloatingZoneData } from "../../services/realTimeVisulization/zoneData/getFloatingData";
|
||||
import { get3dWidgetZoneData } from "../../services/realTimeVisulization/zoneData/get3dWidgetData";
|
||||
import {
|
||||
MoveArrowLeft,
|
||||
MoveArrowRight,
|
||||
} from "../../components/icons/SimulationIcons";
|
||||
import { InfoIcon } from "../../components/icons/ExportCommonIcons";
|
||||
|
||||
// Define the type for `Side`
|
||||
type Side = "top" | "bottom" | "left" | "right";
|
||||
|
|
@ -83,9 +87,9 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
|
|||
// State to track overflow visibility
|
||||
const [showLeftArrow, setShowLeftArrow] = useState(false);
|
||||
const [showRightArrow, setShowRightArrow] = useState(false);
|
||||
const { floatingWidget, setFloatingWidget } = useFloatingWidget()
|
||||
const { floatingWidget, setFloatingWidget } = useFloatingWidget();
|
||||
|
||||
const { setSelectedChartId } = useWidgetStore()
|
||||
const { setSelectedChartId } = useWidgetStore();
|
||||
|
||||
// Function to calculate overflow state
|
||||
const updateOverflowState = useCallback(() => {
|
||||
|
|
@ -166,9 +170,9 @@ 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);
|
||||
console.log("response: ", response);
|
||||
let res = await getFloatingZoneData(zoneId, organization);
|
||||
console.log('res: ', res);
|
||||
console.log("res: ", res);
|
||||
|
||||
setFloatingWidget(res);
|
||||
// Set the selected zone in the store
|
||||
|
|
@ -190,9 +194,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
|
|||
zoneViewPortTarget: response.viewPortCenter || {},
|
||||
zoneViewPortPosition: response.viewPortposition || {},
|
||||
});
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
} catch (error) {}
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -1,34 +1,39 @@
|
|||
import React, { useEffect, useState, useRef } from "react";
|
||||
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
|
||||
import Panel from "./Panel";
|
||||
import AddButtons from "./AddButtons";
|
||||
import { useSelectedZoneStore } from "../../../store/useZoneStore";
|
||||
import { usePlayButtonStore } from "../../store/usePlayButtonStore";
|
||||
import Panel from "./widgets/panel/Panel";
|
||||
import AddButtons from "./widgets/panel/AddButtons";
|
||||
import { useSelectedZoneStore } from "../../store/useZoneStore";
|
||||
import DisplayZone from "./DisplayZone";
|
||||
import Scene from "../../../modules/scene/scene";
|
||||
import useModuleStore from "../../../store/useModuleStore";
|
||||
import Scene from "../scene/scene";
|
||||
import useModuleStore from "../../store/useModuleStore";
|
||||
|
||||
import { useDroppedObjectsStore, useFloatingWidget } from "../../../store/useDroppedObjectsStore";
|
||||
import {
|
||||
useDroppedObjectsStore,
|
||||
useFloatingWidget,
|
||||
} from "../../store/useDroppedObjectsStore";
|
||||
import {
|
||||
useAsset3dWidget,
|
||||
useSocketStore,
|
||||
useWidgetSubOption,
|
||||
useZones,
|
||||
} from "../../../store/store";
|
||||
import { getZone2dData } from "../../../services/realTimeVisulization/zoneData/getZoneData";
|
||||
import { generateUniqueId } from "../../../functions/generateUniqueId";
|
||||
} from "../../store/store";
|
||||
import { getZone2dData } from "../../services/realTimeVisulization/zoneData/getZoneData";
|
||||
import { generateUniqueId } from "../../functions/generateUniqueId";
|
||||
import { determinePosition } from "./functions/determinePosition";
|
||||
import { addingFloatingWidgets } from "../../../services/realTimeVisulization/zoneData/addFloatingWidgets";
|
||||
import SocketRealTimeViz from "../../../modules/visualization/realTimeVizSocket.dev";
|
||||
import RenderOverlay from "../../templates/Overlay";
|
||||
import ConfirmationPopup from "../../layout/confirmationPopup/ConfirmationPopup";
|
||||
import DroppedObjects from "./DroppedFloatingWidgets";
|
||||
import EditWidgetOption from "../menu/EditWidgetOption";
|
||||
import { addingFloatingWidgets } from "../../services/realTimeVisulization/zoneData/addFloatingWidgets";
|
||||
import SocketRealTimeViz from "./socket/realTimeVizSocket.dev";
|
||||
import RenderOverlay from "../../components/templates/Overlay";
|
||||
import ConfirmationPopup from "../../components/layout/confirmationPopup/ConfirmationPopup";
|
||||
import DroppedObjects from "./widgets/floating/DroppedFloatingWidgets";
|
||||
import EditWidgetOption from "../../components/ui/menu/EditWidgetOption";
|
||||
import {
|
||||
useEditWidgetOptionsStore,
|
||||
useRightClickSelected,
|
||||
useRightSelected,
|
||||
} from "../../../store/useZone3DWidgetStore";
|
||||
import Dropped3dWidgets from "./Dropped3dWidget";
|
||||
} from "../../store/useZone3DWidgetStore";
|
||||
import Dropped3dWidgets from "./widgets/3d/Dropped3dWidget";
|
||||
import OuterClick from "../../utils/outerClick";
|
||||
import { useWidgetStore } from "../../store/useWidgetStore";
|
||||
|
||||
type Side = "top" | "bottom" | "left" | "right";
|
||||
|
||||
|
|
@ -74,10 +79,22 @@ const RealTimeVisulization: React.FC = () => {
|
|||
const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
|
||||
|
||||
// const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({});
|
||||
const { floatingWidget, setFloatingWidget } = useFloatingWidget()
|
||||
const { floatingWidget, setFloatingWidget } = useFloatingWidget();
|
||||
const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
|
||||
const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
|
||||
const { visualizationSocket } = useSocketStore();
|
||||
const { setSelectedChartId } = useWidgetStore();
|
||||
|
||||
OuterClick({
|
||||
contextClassName: [
|
||||
"chart-container",
|
||||
"floating",
|
||||
"sidebar-right-wrapper",
|
||||
"card",
|
||||
"dropdown-menu",
|
||||
],
|
||||
setMenuVisible: () => setSelectedChartId(null),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
async function GetZoneData() {
|
||||
|
|
@ -107,7 +124,7 @@ const RealTimeVisulization: React.FC = () => {
|
|||
{}
|
||||
);
|
||||
setZonesData(formattedData);
|
||||
} catch (error) { }
|
||||
} catch (error) {}
|
||||
}
|
||||
|
||||
GetZoneData();
|
||||
|
|
@ -123,7 +140,7 @@ const RealTimeVisulization: React.FC = () => {
|
|||
activeSides: selectedZone.activeSides || [],
|
||||
panelOrder: selectedZone.panelOrder || [],
|
||||
lockedPanels: selectedZone.lockedPanels || [],
|
||||
points:selectedZone.points||[],
|
||||
points: selectedZone.points || [],
|
||||
zoneId: selectedZone.zoneId || "",
|
||||
zoneViewPortTarget: selectedZone.zoneViewPortTarget || [],
|
||||
zoneViewPortPosition: selectedZone.zoneViewPortPosition || [],
|
||||
|
|
@ -138,12 +155,10 @@ const RealTimeVisulization: React.FC = () => {
|
|||
const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
|
||||
event.preventDefault();
|
||||
try {
|
||||
event.preventDefault();
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
|
||||
const data = event.dataTransfer.getData("text/plain");
|
||||
// if (widgetSelect !== "") return;
|
||||
if (widgetSubOption === "3D") return;
|
||||
if (!data || selectedZone.zoneName === "") return;
|
||||
|
||||
|
|
@ -151,69 +166,88 @@ const RealTimeVisulization: React.FC = () => {
|
|||
const canvasElement = document.getElementById("real-time-vis-canvas");
|
||||
if (!canvasElement) throw new Error("Canvas element not found");
|
||||
|
||||
const canvasRect = canvasElement.getBoundingClientRect();
|
||||
const relativeX = event.clientX - canvasRect.left;
|
||||
const relativeY = event.clientY - canvasRect.top;
|
||||
// Get canvas dimensions and mouse position
|
||||
const rect = canvasElement.getBoundingClientRect();
|
||||
let relativeX = (event.clientX - rect.left) ;
|
||||
let relativeY = event.clientY - rect.top;
|
||||
|
||||
// Widget dimensions (with defaults)
|
||||
const widgetWidth = droppedData.width || 125; // 250/2 as default
|
||||
const widgetHeight = droppedData.height || 100; // 83/2 as default
|
||||
|
||||
// Clamp to ensure widget stays fully inside canvas
|
||||
const clampedX = Math.max(
|
||||
0, // Prevent going beyond left edge
|
||||
Math.min(
|
||||
relativeX,
|
||||
rect.width - widgetWidth // Prevent going beyond right edge
|
||||
)
|
||||
);
|
||||
|
||||
console.log('clampedX: ', clampedX);
|
||||
const clampedY = Math.max(
|
||||
0, // Prevent going beyond top edge
|
||||
Math.min(
|
||||
relativeY,
|
||||
rect.height - widgetHeight // Prevent going beyond bottom edge
|
||||
)
|
||||
);
|
||||
|
||||
// Debug logging (optional)
|
||||
console.log("Drop coordinates:", {
|
||||
rawX: relativeX,
|
||||
rawY: relativeY,
|
||||
clampedX,
|
||||
clampedY,
|
||||
canvasWidth: rect.width,
|
||||
canvasHeight: rect.height,
|
||||
widgetWidth,
|
||||
widgetHeight
|
||||
});
|
||||
|
||||
const finalPosition = determinePosition(rect, clampedX, clampedY);
|
||||
|
||||
const newPosition = determinePosition(canvasRect, relativeX, relativeY);
|
||||
console.log("newPosition: ", newPosition);
|
||||
const newObject = {
|
||||
...droppedData,
|
||||
id: generateUniqueId(),
|
||||
position: determinePosition(canvasRect, relativeX, relativeY),
|
||||
position: finalPosition,
|
||||
};
|
||||
|
||||
// Only set zone if it’s not already in the store (prevents overwriting objects)
|
||||
const existingZone =
|
||||
useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
|
||||
// Zone management
|
||||
const existingZone = useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
|
||||
if (!existingZone) {
|
||||
useDroppedObjectsStore
|
||||
.getState()
|
||||
.setZone(selectedZone.zoneName, selectedZone.zoneId);
|
||||
useDroppedObjectsStore.getState().setZone(selectedZone.zoneName, selectedZone.zoneId);
|
||||
}
|
||||
|
||||
let addFloatingWidget = {
|
||||
organization: organization,
|
||||
// Socket emission
|
||||
const addFloatingWidget = {
|
||||
organization,
|
||||
widget: newObject,
|
||||
zoneId: selectedZone.zoneId,
|
||||
};
|
||||
console.log("newObject: ", newObject);
|
||||
|
||||
if (visualizationSocket) {
|
||||
visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
|
||||
}
|
||||
useDroppedObjectsStore
|
||||
.getState()
|
||||
.addObject(selectedZone.zoneName, newObject);
|
||||
|
||||
//I need to console here objects based on selectedZone.zoneId
|
||||
// Console the objects after adding
|
||||
// Store update
|
||||
useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, newObject);
|
||||
|
||||
// Post-drop verification
|
||||
const droppedObjectsStore = useDroppedObjectsStore.getState();
|
||||
const currentZone = droppedObjectsStore.zones[selectedZone.zoneName];
|
||||
|
||||
if (currentZone && currentZone.zoneId === selectedZone.zoneId) {
|
||||
console.log(
|
||||
`Objects for Zone ID: ${selectedZone.zoneId}`,
|
||||
currentZone.objects
|
||||
);
|
||||
setFloatingWidget(currentZone.objects)
|
||||
console.log(`Objects for Zone ${selectedZone.zoneId}:`, currentZone.objects);
|
||||
setFloatingWidget(currentZone.objects);
|
||||
} else {
|
||||
console.warn("Zone not found or mismatched zoneId");
|
||||
console.warn("Zone not found or zoneId mismatch");
|
||||
}
|
||||
|
||||
// let response = await addingFloatingWidgets(
|
||||
// selectedZone.zoneId,
|
||||
// organization,
|
||||
// newObject
|
||||
// );
|
||||
// Add the dropped object to the zone if the API call is successful
|
||||
// if (response.message === "FloatWidget created successfully") {
|
||||
// }
|
||||
|
||||
// Update floating widgets state
|
||||
|
||||
} catch (error) { }
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error in handleDrop:", error);
|
||||
// Consider adding user feedback here (e.g., toast notification)
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -253,7 +287,7 @@ const RealTimeVisulization: React.FC = () => {
|
|||
<RenderOverlay>
|
||||
<ConfirmationPopup
|
||||
message={"Are you sure want to delete?"}
|
||||
onConfirm={() => console.log("confirm")}
|
||||
onConfirm={() => console.log("Confirmed")}
|
||||
onCancel={() => setOpenConfirmationPopup(false)}
|
||||
/>
|
||||
</RenderOverlay>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Template } from "../../store/useTemplateStore";
|
||||
import { Template } from "../../../store/useTemplateStore";
|
||||
import { captureVisualization } from "./captureVisualization";
|
||||
|
||||
type HandleSaveTemplateProps = {
|
||||
|
|
@ -26,7 +26,6 @@ export const handleSaveTemplate = async ({
|
|||
templates = [],
|
||||
visualizationSocket,
|
||||
}: HandleSaveTemplateProps): Promise<void> => {
|
||||
console.log("floatingWidget: ", floatingWidget);
|
||||
try {
|
||||
// Check if the selected zone has any widgets
|
||||
if (!selectedZone.panelOrder || selectedZone.panelOrder.length === 0) {
|
||||
|
|
@ -49,6 +48,7 @@ export const handleSaveTemplate = async ({
|
|||
// Capture visualization snapshot
|
||||
const snapshot = await captureVisualization();
|
||||
|
||||
|
||||
if (!snapshot) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -1,238 +0,0 @@
|
|||
import { useEffect } from "react";
|
||||
import { useSocketStore } from "../../store/store";
|
||||
import { useSelectedZoneStore } from "../../store/useZoneStore";
|
||||
import { useDroppedObjectsStore } from "../../store/useDroppedObjectsStore";
|
||||
import { useZoneWidgetStore } from "../../store/useZone3DWidgetStore";
|
||||
import useTemplateStore from "../../store/useTemplateStore";
|
||||
|
||||
type WidgetData = {
|
||||
id: string;
|
||||
type: string;
|
||||
position: [number, number, number];
|
||||
rotation?: [number, number, number];
|
||||
tempPosition?: [number, number, number];
|
||||
};
|
||||
|
||||
export default function SocketRealTimeViz() {
|
||||
const { visualizationSocket } = useSocketStore();
|
||||
const { setSelectedZone } = useSelectedZoneStore();
|
||||
const deleteObject = useDroppedObjectsStore((state) => state.deleteObject);
|
||||
const updateObjectPosition = useDroppedObjectsStore((state) => state.updateObjectPosition);
|
||||
const { addWidget } = useZoneWidgetStore()
|
||||
const { removeTemplate } = useTemplateStore();
|
||||
const { setTemplates } = useTemplateStore();
|
||||
const { zoneWidgetData, setZoneWidgetData, updateWidgetPosition, updateWidgetRotation } = useZoneWidgetStore();
|
||||
|
||||
useEffect(() => {
|
||||
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)
|
||||
}
|
||||
})
|
||||
//clear Panel response
|
||||
visualizationSocket.on("viz-panel:response:clear", (clearPanel: any) => {
|
||||
|
||||
if (clearPanel.success && clearPanel.message === "PanelWidgets cleared successfully") {
|
||||
|
||||
let clearPanelData = clearPanel.data.data
|
||||
setSelectedZone(clearPanelData)
|
||||
}
|
||||
})
|
||||
//lock Panel response
|
||||
visualizationSocket.on("viz-panel:response:locked", (lockPanel: any) => {
|
||||
|
||||
if (lockPanel.success && lockPanel.message === "locked panel updated successfully") {
|
||||
|
||||
let lockPanelData = lockPanel.data.data
|
||||
setSelectedZone(lockPanelData)
|
||||
}
|
||||
})
|
||||
// add 2dWidget response
|
||||
visualizationSocket.on("viz-widget:response:updates", (add2dWidget: any) => {
|
||||
|
||||
|
||||
if (add2dWidget.success && add2dWidget.data) {
|
||||
setSelectedZone((prev) => {
|
||||
const isWidgetAlreadyAdded = prev.widgets.some(
|
||||
(widget) => widget.id === add2dWidget.data.widgetData.id
|
||||
);
|
||||
if (isWidgetAlreadyAdded) return prev; // Prevent duplicate addition
|
||||
return {
|
||||
...prev,
|
||||
zoneId: add2dWidget.data.zoneId,
|
||||
zoneName: add2dWidget.data.zoneName,
|
||||
widgets: [...prev.widgets, add2dWidget.data.widgetData], // Append new widget
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
//delete 2D Widget response
|
||||
visualizationSocket.on("viz-widget:response:delete", (deleteWidget: any) => {
|
||||
|
||||
|
||||
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
|
||||
}));
|
||||
}
|
||||
});
|
||||
//add Floating Widget response
|
||||
visualizationSocket.on("viz-float:response:updates", (addFloatingWidget: any) => {
|
||||
|
||||
|
||||
if (addFloatingWidget.success) {
|
||||
if (addFloatingWidget.success && addFloatingWidget.message === "FloatWidget created successfully") {
|
||||
const state = useDroppedObjectsStore.getState();
|
||||
const zone = state.zones[addFloatingWidget.data.zoneName];
|
||||
if (!zone) {
|
||||
state.setZone(addFloatingWidget.data.zoneName, addFloatingWidget.data.zoneId);
|
||||
}
|
||||
const existingObjects = zone ? zone.objects : [];
|
||||
const newWidget = addFloatingWidget.data.widget;
|
||||
// ✅ Check if the widget ID already exists before adding
|
||||
const isAlreadyAdded = existingObjects.some(obj => obj.id === newWidget.id);
|
||||
if (isAlreadyAdded) {
|
||||
|
||||
return; // Don't add the widget if it already exists
|
||||
}
|
||||
// Add widget only if it doesn't exist
|
||||
state.addObject(addFloatingWidget.data.zoneName, newWidget);
|
||||
}
|
||||
if (addFloatingWidget.message === "Widget updated successfully") {
|
||||
updateObjectPosition(addFloatingWidget.data.zoneName, addFloatingWidget.data.index, addFloatingWidget.data.position);
|
||||
}
|
||||
}
|
||||
});
|
||||
//duplicate Floating Widget response
|
||||
visualizationSocket.on("viz-float:response:addDuplicate", (duplicateFloatingWidget: any) => {
|
||||
|
||||
|
||||
if (duplicateFloatingWidget.success && duplicateFloatingWidget.message === "duplicate FloatWidget created successfully") {
|
||||
useDroppedObjectsStore.setState((state) => {
|
||||
const zone = state.zones[duplicateFloatingWidget.data.zoneName];
|
||||
if (!zone) return state; // Zone doesn't exist, return state as is
|
||||
const existingObjects = zone.objects;
|
||||
const newWidget = duplicateFloatingWidget.data.widget;
|
||||
// ✅ Check if the object with the same ID already exists
|
||||
const isAlreadyAdded = existingObjects.some(obj => obj.id === newWidget.id);
|
||||
if (isAlreadyAdded) {
|
||||
|
||||
return state; // Don't update state if it's already there
|
||||
}
|
||||
return {
|
||||
zones: {
|
||||
...state.zones,
|
||||
[duplicateFloatingWidget.data.zoneName]: {
|
||||
...zone,
|
||||
objects: [...existingObjects, newWidget], // Append only if it's not a duplicate
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
//delete Floating Widget response
|
||||
visualizationSocket.on("viz-float:response:delete", (deleteFloatingWidget: any) => {
|
||||
|
||||
|
||||
if (deleteFloatingWidget.success) {
|
||||
deleteObject(deleteFloatingWidget.data.zoneName, deleteFloatingWidget.data.floatWidgetID);
|
||||
}
|
||||
});
|
||||
//add 3D Widget response
|
||||
visualizationSocket.on("viz-widget3D:response:updates", (add3DWidget: any) => {
|
||||
|
||||
|
||||
if (add3DWidget.success) {
|
||||
|
||||
if (add3DWidget.message === "Widget created successfully") {
|
||||
addWidget(add3DWidget.data.zoneId, add3DWidget.data.widget);
|
||||
}
|
||||
}
|
||||
});
|
||||
//delete 3D Widget response
|
||||
visualizationSocket.on("viz-widget3D:response:delete", (delete3DWidget: any) => {
|
||||
|
||||
// "3DWidget delete unsuccessfull"
|
||||
if (delete3DWidget.success && delete3DWidget.message === "3DWidget delete successfull") {
|
||||
const activeZoneWidgets = zoneWidgetData[delete3DWidget.data.zoneId] || [];
|
||||
setZoneWidgetData(
|
||||
delete3DWidget.data.zoneId,
|
||||
activeZoneWidgets.filter((w: WidgetData) => w.id !== delete3DWidget.data.id)
|
||||
);
|
||||
}
|
||||
});
|
||||
//update3D widget response
|
||||
visualizationSocket.on("viz-widget3D:response:modifyPositionRotation", (update3DWidget: any) => {
|
||||
|
||||
|
||||
if (update3DWidget.success && update3DWidget.message === "widget update successfully") {
|
||||
updateWidgetPosition(update3DWidget.data.zoneId, update3DWidget.data.widget.id, update3DWidget.data.widget.position);
|
||||
updateWidgetRotation(update3DWidget.data.zoneId, update3DWidget.data.widget.id, update3DWidget.data.widget.rotation);
|
||||
}
|
||||
});
|
||||
// add Template response
|
||||
visualizationSocket.on("viz-template:response:add", (addingTemplate: any) => {
|
||||
|
||||
|
||||
if (addingTemplate.success) {
|
||||
if (addingTemplate.message === "Template saved successfully") {
|
||||
setTemplates(addingTemplate.data);
|
||||
}
|
||||
}
|
||||
});
|
||||
//load Template response
|
||||
visualizationSocket.on("viz-template:response:addTemplateZone", (loadTemplate: any) => {
|
||||
|
||||
|
||||
if (loadTemplate.success) {
|
||||
if (loadTemplate.message === "Template placed in Zone") {
|
||||
let template = loadTemplate.data.template
|
||||
setSelectedZone({
|
||||
panelOrder: template.panelOrder,
|
||||
activeSides: Array.from(new Set(template.panelOrder)), // No merging with previous `activeSides`
|
||||
widgets: template.widgets,
|
||||
});
|
||||
useDroppedObjectsStore.getState().setZone(template.zoneName, template.zoneId);
|
||||
|
||||
if (Array.isArray(template.floatingWidget)) {
|
||||
template.floatingWidget.forEach((val: any) => {
|
||||
useDroppedObjectsStore.getState().addObject(template.zoneName, val);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
//delete Template response
|
||||
visualizationSocket.on("viz-template:response:delete", (deleteTemplate: any) => {
|
||||
|
||||
|
||||
if (deleteTemplate.success) {
|
||||
if (deleteTemplate.message === 'Template deleted successfully') {
|
||||
removeTemplate(deleteTemplate.data);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [visualizationSocket])
|
||||
|
||||
return (
|
||||
<></>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,296 @@
|
|||
import { useEffect } from "react";
|
||||
import { useSocketStore } from "../../../store/store";
|
||||
import { useSelectedZoneStore } from "../../../store/useZoneStore";
|
||||
import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
|
||||
import { useZoneWidgetStore } from "../../../store/useZone3DWidgetStore";
|
||||
import useTemplateStore from "../../../store/useTemplateStore";
|
||||
|
||||
type WidgetData = {
|
||||
id: string;
|
||||
type: string;
|
||||
position: [number, number, number];
|
||||
rotation?: [number, number, number];
|
||||
tempPosition?: [number, number, number];
|
||||
};
|
||||
|
||||
export default function SocketRealTimeViz() {
|
||||
const { visualizationSocket } = useSocketStore();
|
||||
const { setSelectedZone } = useSelectedZoneStore();
|
||||
const deleteObject = useDroppedObjectsStore((state) => state.deleteObject);
|
||||
const updateObjectPosition = useDroppedObjectsStore(
|
||||
(state) => state.updateObjectPosition
|
||||
);
|
||||
const { addWidget } = useZoneWidgetStore();
|
||||
const { removeTemplate } = useTemplateStore();
|
||||
const { setTemplates } = useTemplateStore();
|
||||
const {
|
||||
zoneWidgetData,
|
||||
setZoneWidgetData,
|
||||
updateWidgetPosition,
|
||||
updateWidgetRotation,
|
||||
} = useZoneWidgetStore();
|
||||
|
||||
useEffect(() => {
|
||||
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);
|
||||
}
|
||||
}
|
||||
);
|
||||
//clear Panel response
|
||||
visualizationSocket.on("viz-panel:response:clear", (clearPanel: any) => {
|
||||
if (
|
||||
clearPanel.success &&
|
||||
clearPanel.message === "PanelWidgets cleared successfully"
|
||||
) {
|
||||
let clearPanelData = clearPanel.data.data;
|
||||
setSelectedZone(clearPanelData);
|
||||
}
|
||||
});
|
||||
//lock Panel response
|
||||
visualizationSocket.on("viz-panel:response:locked", (lockPanel: any) => {
|
||||
if (
|
||||
lockPanel.success &&
|
||||
lockPanel.message === "locked panel updated successfully"
|
||||
) {
|
||||
let lockPanelData = lockPanel.data.data;
|
||||
setSelectedZone(lockPanelData);
|
||||
}
|
||||
});
|
||||
// add 2dWidget response
|
||||
visualizationSocket.on(
|
||||
"viz-widget:response:updates",
|
||||
(add2dWidget: any) => {
|
||||
if (add2dWidget.success && add2dWidget.data) {
|
||||
setSelectedZone((prev) => {
|
||||
const isWidgetAlreadyAdded = prev.widgets.some(
|
||||
(widget) => widget.id === add2dWidget.data.widgetData.id
|
||||
);
|
||||
if (isWidgetAlreadyAdded) return prev; // Prevent duplicate addition
|
||||
return {
|
||||
...prev,
|
||||
zoneId: add2dWidget.data.zoneId,
|
||||
zoneName: add2dWidget.data.zoneName,
|
||||
widgets: [...prev.widgets, add2dWidget.data.widgetData], // Append new widget
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
//delete 2D Widget response
|
||||
visualizationSocket.on(
|
||||
"viz-widget:response:delete",
|
||||
(deleteWidget: any) => {
|
||||
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
|
||||
}));
|
||||
}
|
||||
}
|
||||
);
|
||||
//add Floating Widget response
|
||||
visualizationSocket.on(
|
||||
"viz-float:response:updates",
|
||||
(addFloatingWidget: any) => {
|
||||
if (addFloatingWidget.success) {
|
||||
if (
|
||||
addFloatingWidget.success &&
|
||||
addFloatingWidget.message === "FloatWidget created successfully"
|
||||
) {
|
||||
const state = useDroppedObjectsStore.getState();
|
||||
const zone = state.zones[addFloatingWidget.data.zoneName];
|
||||
if (!zone) {
|
||||
state.setZone(
|
||||
addFloatingWidget.data.zoneName,
|
||||
addFloatingWidget.data.zoneId
|
||||
);
|
||||
}
|
||||
const existingObjects = zone ? zone.objects : [];
|
||||
const newWidget = addFloatingWidget.data.widget;
|
||||
// ✅ Check if the widget ID already exists before adding
|
||||
const isAlreadyAdded = existingObjects.some(
|
||||
(obj) => obj.id === newWidget.id
|
||||
);
|
||||
if (isAlreadyAdded) {
|
||||
return; // Don't add the widget if it already exists
|
||||
}
|
||||
// Add widget only if it doesn't exist
|
||||
state.addObject(addFloatingWidget.data.zoneName, newWidget);
|
||||
}
|
||||
if (addFloatingWidget.message === "Widget updated successfully") {
|
||||
updateObjectPosition(
|
||||
addFloatingWidget.data.zoneName,
|
||||
addFloatingWidget.data.index,
|
||||
addFloatingWidget.data.position
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
//duplicate Floating Widget response
|
||||
visualizationSocket.on(
|
||||
"viz-float:response:addDuplicate",
|
||||
(duplicateFloatingWidget: any) => {
|
||||
if (
|
||||
duplicateFloatingWidget.success &&
|
||||
duplicateFloatingWidget.message ===
|
||||
"duplicate FloatWidget created successfully"
|
||||
) {
|
||||
useDroppedObjectsStore.setState((state) => {
|
||||
const zone = state.zones[duplicateFloatingWidget.data.zoneName];
|
||||
if (!zone) return state; // Zone doesn't exist, return state as is
|
||||
const existingObjects = zone.objects;
|
||||
const newWidget = duplicateFloatingWidget.data.widget;
|
||||
// ✅ Check if the object with the same ID already exists
|
||||
const isAlreadyAdded = existingObjects.some(
|
||||
(obj) => obj.id === newWidget.id
|
||||
);
|
||||
if (isAlreadyAdded) {
|
||||
return state; // Don't update state if it's already there
|
||||
}
|
||||
return {
|
||||
zones: {
|
||||
...state.zones,
|
||||
[duplicateFloatingWidget.data.zoneName]: {
|
||||
...zone,
|
||||
objects: [...existingObjects, newWidget], // Append only if it's not a duplicate
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
//delete Floating Widget response
|
||||
visualizationSocket.on(
|
||||
"viz-float:response:delete",
|
||||
(deleteFloatingWidget: any) => {
|
||||
if (deleteFloatingWidget.success) {
|
||||
deleteObject(
|
||||
deleteFloatingWidget.data.zoneName,
|
||||
deleteFloatingWidget.data.floatWidgetID
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
//add 3D Widget response
|
||||
visualizationSocket.on(
|
||||
"viz-widget3D:response:updates",
|
||||
(add3DWidget: any) => {
|
||||
if (add3DWidget.success) {
|
||||
if (add3DWidget.message === "Widget created successfully") {
|
||||
addWidget(add3DWidget.data.zoneId, add3DWidget.data.widget);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
//delete 3D Widget response
|
||||
visualizationSocket.on(
|
||||
"viz-widget3D:response:delete",
|
||||
(delete3DWidget: any) => {
|
||||
// "3DWidget delete unsuccessfull"
|
||||
if (
|
||||
delete3DWidget.success &&
|
||||
delete3DWidget.message === "3DWidget delete successfull"
|
||||
) {
|
||||
const activeZoneWidgets =
|
||||
zoneWidgetData[delete3DWidget.data.zoneId] || [];
|
||||
setZoneWidgetData(
|
||||
delete3DWidget.data.zoneId,
|
||||
activeZoneWidgets.filter(
|
||||
(w: WidgetData) => w.id !== delete3DWidget.data.id
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
//update3D widget response
|
||||
visualizationSocket.on(
|
||||
"viz-widget3D:response:modifyPositionRotation",
|
||||
(update3DWidget: any) => {
|
||||
if (
|
||||
update3DWidget.success &&
|
||||
update3DWidget.message === "widget update successfully"
|
||||
) {
|
||||
updateWidgetPosition(
|
||||
update3DWidget.data.zoneId,
|
||||
update3DWidget.data.widget.id,
|
||||
update3DWidget.data.widget.position
|
||||
);
|
||||
updateWidgetRotation(
|
||||
update3DWidget.data.zoneId,
|
||||
update3DWidget.data.widget.id,
|
||||
update3DWidget.data.widget.rotation
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
// add Template response
|
||||
visualizationSocket.on(
|
||||
"viz-template:response:add",
|
||||
(addingTemplate: any) => {
|
||||
if (addingTemplate.success) {
|
||||
if (addingTemplate.message === "Template saved successfully") {
|
||||
setTemplates(addingTemplate.data);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
//load Template response
|
||||
visualizationSocket.on(
|
||||
"viz-template:response:addTemplateZone",
|
||||
(loadTemplate: any) => {
|
||||
if (loadTemplate.success) {
|
||||
if (loadTemplate.message === "Template placed in Zone") {
|
||||
let template = loadTemplate.data.template;
|
||||
setSelectedZone({
|
||||
panelOrder: template.panelOrder,
|
||||
activeSides: Array.from(new Set(template.panelOrder)), // No merging with previous `activeSides`
|
||||
widgets: template.widgets,
|
||||
});
|
||||
useDroppedObjectsStore
|
||||
.getState()
|
||||
.setZone(template.zoneName, template.zoneId);
|
||||
|
||||
if (Array.isArray(template.floatingWidget)) {
|
||||
template.floatingWidget.forEach((val: any) => {
|
||||
useDroppedObjectsStore
|
||||
.getState()
|
||||
.addObject(template.zoneName, val);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
//delete Template response
|
||||
visualizationSocket.on(
|
||||
"viz-template:response:delete",
|
||||
(deleteTemplate: any) => {
|
||||
if (deleteTemplate.success) {
|
||||
if (deleteTemplate.message === "Template deleted successfully") {
|
||||
removeTemplate(deleteTemplate.data);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}, [visualizationSocket]);
|
||||
|
||||
return <></>;
|
||||
}
|
||||
|
|
@ -1,10 +1,12 @@
|
|||
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 { useSocketStore } from "../../../../store/store";
|
||||
import RenameInput from "../../../ui/inputs/RenameInput";
|
||||
import useTemplateStore from "../../../store/useTemplateStore";
|
||||
import { useSelectedZoneStore } from "../../../store/useZoneStore";
|
||||
import { useSocketStore } from "../../../store/store";
|
||||
import { getTemplateData } from "../../../services/realTimeVisulization/zoneData/getTemplate";
|
||||
import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
|
||||
import RenameInput from "../../../components/ui/inputs/RenameInput";
|
||||
|
||||
|
||||
|
||||
const Templates = () => {
|
||||
const { templates, removeTemplate, setTemplates } = useTemplateStore();
|
||||
|
|
@ -1,25 +1,25 @@
|
|||
import { useWidgetStore } from "../../../store/useWidgetStore";
|
||||
import ProgressCard from "../realTimeVis/charts/ProgressCard";
|
||||
import useChartStore from "../../../store/useChartStore";
|
||||
import PieGraphComponent from "../realTimeVis/charts/PieGraphComponent";
|
||||
import BarGraphComponent from "../realTimeVis/charts/BarGraphComponent";
|
||||
import LineGraphComponent from "../realTimeVis/charts/LineGraphComponent";
|
||||
import DoughnutGraphComponent from "../realTimeVis/charts/DoughnutGraphComponent";
|
||||
import PolarAreaGraphComponent from "../realTimeVis/charts/PolarAreaGraphComponent";
|
||||
import ProgressCard1 from "../realTimeVis/charts/ProgressCard1";
|
||||
import ProgressCard2 from "../realTimeVis/charts/ProgressCard2";
|
||||
import { useWidgetStore } from "../../../../store/useWidgetStore";
|
||||
import ProgressCard from "../2d/charts/ProgressCard";
|
||||
import PieGraphComponent from "../2d/charts/PieGraphComponent";
|
||||
import BarGraphComponent from "../2d/charts/BarGraphComponent";
|
||||
import LineGraphComponent from "../2d/charts/LineGraphComponent";
|
||||
import DoughnutGraphComponent from "../2d/charts/DoughnutGraphComponent";
|
||||
import PolarAreaGraphComponent from "../2d/charts/PolarAreaGraphComponent";
|
||||
import ProgressCard1 from "../2d/charts/ProgressCard1";
|
||||
import ProgressCard2 from "../2d/charts/ProgressCard2";
|
||||
import {
|
||||
DeleteIcon,
|
||||
DublicateIcon,
|
||||
KebabIcon,
|
||||
} from "../../icons/ExportCommonIcons";
|
||||
} from "../../../../components/icons/ExportCommonIcons";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { duplicateWidgetApi } from "../../../services/realTimeVisulization/zoneData/duplicateWidget";
|
||||
import { deleteWidgetApi } from "../../../services/realTimeVisulization/zoneData/deleteWidgetApi";
|
||||
import { useClickOutside } from "./functions/handleWidgetsOuterClick";
|
||||
import { useSocketStore } from "../../../store/store";
|
||||
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
|
||||
import OuterClick from "../../../utils/outerClick";
|
||||
import { duplicateWidgetApi } from "../../../../services/realTimeVisulization/zoneData/duplicateWidget";
|
||||
import { deleteWidgetApi } from "../../../../services/realTimeVisulization/zoneData/deleteWidgetApi";
|
||||
import { useClickOutside } from "../../functions/handleWidgetsOuterClick";
|
||||
import { useSocketStore } from "../../../../store/store";
|
||||
import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
|
||||
import OuterClick from "../../../../utils/outerClick";
|
||||
import useChartStore from "../../../../store/useChartStore";
|
||||
|
||||
type Side = "top" | "bottom" | "left" | "right";
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ export const DraggableWidget = ({
|
|||
zoneName: string;
|
||||
zoneId: string;
|
||||
activeSides: Side[];
|
||||
points:[];
|
||||
points: [];
|
||||
panelOrder: Side[];
|
||||
lockedPanels: Side[];
|
||||
widgets: Widget[];
|
||||
|
|
@ -55,7 +55,7 @@ export const DraggableWidget = ({
|
|||
zoneName: string;
|
||||
activeSides: Side[];
|
||||
panelOrder: Side[];
|
||||
points:[];
|
||||
points: [];
|
||||
lockedPanels: Side[];
|
||||
zoneId: string;
|
||||
zoneViewPortTarget: number[];
|
||||
|
|
@ -100,19 +100,6 @@ export const DraggableWidget = ({
|
|||
|
||||
const chartWidget = useRef<HTMLDivElement>(null);
|
||||
|
||||
OuterClick({
|
||||
contextClassName: [
|
||||
"chart-container",
|
||||
"floating",
|
||||
"sidebar-right-wrapper",
|
||||
"card",
|
||||
"dropdown-menu",
|
||||
"sidebar-right-content-container",
|
||||
"dropdown-options"
|
||||
],
|
||||
setMenuVisible: () => setSelectedChartId(null),
|
||||
});
|
||||
|
||||
const deleteSelectedChart = async () => {
|
||||
try {
|
||||
const email = localStorage.getItem("email") || "";
|
||||
|
|
@ -198,7 +185,7 @@ export const DraggableWidget = ({
|
|||
},
|
||||
id: `${widget.id}-copy-${Date.now()}`,
|
||||
};
|
||||
console.log('duplicatedWidget: ', duplicatedWidget);
|
||||
console.log("duplicatedWidget: ", duplicatedWidget);
|
||||
|
||||
let duplicateWidget = {
|
||||
organization: organization,
|
||||
|
|
@ -420,5 +407,3 @@ export const DraggableWidget = ({
|
|||
</>
|
||||
);
|
||||
};
|
||||
|
||||
// by using canvasDimensions.height canvasDimensions.width dynamically div value insted of static 6 and 4 calculate according to canvasDimensions.width canvasDimensions.height
|
||||
|
|
@ -188,10 +188,11 @@
|
|||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { Bar } from "react-chartjs-2";
|
||||
import io from "socket.io-client";
|
||||
import { useThemeStore } from "../../../../store/useThemeStore";
|
||||
import useChartStore from "../../../../store/useChartStore";
|
||||
import { useWidgetStore } from "../../../../store/useWidgetStore";
|
||||
|
||||
import axios from "axios";
|
||||
import { useThemeStore } from "../../../../../store/useThemeStore";
|
||||
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
||||
import useChartStore from "../../../../../store/useChartStore";
|
||||
|
||||
interface ChartComponentProps {
|
||||
id: string;
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { Doughnut } from "react-chartjs-2";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import io from "socket.io-client";
|
||||
import { useThemeStore } from "../../../../store/useThemeStore";
|
||||
import useChartStore from "../../../../store/useChartStore";
|
||||
import { useWidgetStore } from "../../../../store/useWidgetStore";
|
||||
|
||||
import axios from "axios";
|
||||
import { useThemeStore } from "../../../../../store/useThemeStore";
|
||||
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
||||
import useChartStore from "../../../../../store/useChartStore";
|
||||
|
||||
interface ChartComponentProps {
|
||||
id: string;
|
||||
|
|
@ -15,7 +16,7 @@ interface ChartComponentProps {
|
|||
fontWeight?: "Light" | "Regular" | "Bold";
|
||||
}
|
||||
|
||||
const DoughnutGraphComponent = ({
|
||||
const LineGraphComponent = ({
|
||||
id,
|
||||
type,
|
||||
title,
|
||||
|
|
@ -96,11 +97,11 @@ const DoughnutGraphComponent = ({
|
|||
},
|
||||
},
|
||||
scales: {
|
||||
// x: {
|
||||
// ticks: {
|
||||
// display: true, // This hides the x-axis labels
|
||||
// },
|
||||
// },
|
||||
x: {
|
||||
ticks: {
|
||||
display: true, // This hides the x-axis labels
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
[title, chartFontStyle, name]
|
||||
|
|
@ -160,6 +161,8 @@ const DoughnutGraphComponent = ({
|
|||
try {
|
||||
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
|
||||
if (response.status === 200) {
|
||||
console.log('line chart res',response);
|
||||
|
||||
setmeasurements(response.data.Data.measurements)
|
||||
setDuration(response.data.Data.duration)
|
||||
setName(response.data.widgetName)
|
||||
|
|
@ -183,7 +186,7 @@ const DoughnutGraphComponent = ({
|
|||
}
|
||||
,[chartMeasurements, chartDuration, widgetName])
|
||||
|
||||
return <Doughnut data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
|
||||
return <Line data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
|
||||
};
|
||||
|
||||
export default DoughnutGraphComponent;
|
||||
export default LineGraphComponent;
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import io from "socket.io-client";
|
||||
import { useThemeStore } from "../../../../store/useThemeStore";
|
||||
import useChartStore from "../../../../store/useChartStore";
|
||||
import { useWidgetStore } from "../../../../store/useWidgetStore";
|
||||
|
||||
import axios from "axios";
|
||||
import { useThemeStore } from "../../../../../store/useThemeStore";
|
||||
import useChartStore from "../../../../../store/useChartStore";
|
||||
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
||||
|
||||
interface ChartComponentProps {
|
||||
id: string;
|
||||
|
|
@ -24,11 +25,18 @@ const LineGraphComponent = ({
|
|||
fontWeight = "Regular",
|
||||
}: ChartComponentProps) => {
|
||||
const { themeColor } = useThemeStore();
|
||||
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
|
||||
const {
|
||||
measurements: chartMeasurements,
|
||||
duration: chartDuration,
|
||||
name: widgetName,
|
||||
} = useChartStore();
|
||||
const [measurements, setmeasurements] = useState<any>({});
|
||||
const [duration, setDuration] = useState("1h")
|
||||
const [name, setName] = useState("Widget")
|
||||
const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
|
||||
const [duration, setDuration] = useState("1h");
|
||||
const [name, setName] = useState("Widget");
|
||||
const [chartData, setChartData] = useState<{
|
||||
labels: string[];
|
||||
datasets: any[];
|
||||
}>({
|
||||
labels: [],
|
||||
datasets: [],
|
||||
});
|
||||
|
|
@ -36,7 +44,7 @@ const LineGraphComponent = ({
|
|||
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
const defaultData = {
|
||||
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
||||
datasets: [
|
||||
|
|
@ -50,13 +58,17 @@ const LineGraphComponent = ({
|
|||
],
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
},[])
|
||||
useEffect(() => {}, []);
|
||||
|
||||
// Memoize Theme Colors
|
||||
const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
|
||||
const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
|
||||
const buttonActionColor = useMemo(
|
||||
() => themeColor[0] || "#5c87df",
|
||||
[themeColor]
|
||||
);
|
||||
const buttonAbortColor = useMemo(
|
||||
() => themeColor[1] || "#ffffff",
|
||||
[themeColor]
|
||||
);
|
||||
|
||||
// Memoize Font Styling
|
||||
const chartFontWeightMap = useMemo(
|
||||
|
|
@ -68,8 +80,14 @@ const LineGraphComponent = ({
|
|||
[]
|
||||
);
|
||||
|
||||
const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]);
|
||||
const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]);
|
||||
const fontSizeValue = useMemo(
|
||||
() => (fontSize ? parseInt(fontSize) : 12),
|
||||
[fontSize]
|
||||
);
|
||||
const fontWeightValue = useMemo(
|
||||
() => chartFontWeightMap[fontWeight],
|
||||
[fontWeight, chartFontWeightMap]
|
||||
);
|
||||
|
||||
const chartFontStyle = useMemo(
|
||||
() => ({
|
||||
|
|
@ -110,7 +128,8 @@ const LineGraphComponent = ({
|
|||
// },[measurements])
|
||||
|
||||
useEffect(() => {
|
||||
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
|
||||
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
|
||||
return;
|
||||
|
||||
const socket = io(`http://${iotApiUrl}`);
|
||||
|
||||
|
|
@ -120,7 +139,6 @@ const LineGraphComponent = ({
|
|||
interval: 1000,
|
||||
};
|
||||
|
||||
|
||||
const startStream = () => {
|
||||
socket.emit("lineInput", inputData);
|
||||
};
|
||||
|
|
@ -154,17 +172,16 @@ const LineGraphComponent = ({
|
|||
};
|
||||
}, [measurements, duration, iotApiUrl]);
|
||||
|
||||
const fetchSavedInputes = async() => {
|
||||
|
||||
const fetchSavedInputes = async () => {
|
||||
if (id !== "") {
|
||||
try {
|
||||
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
|
||||
const response = await axios.get(
|
||||
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`
|
||||
);
|
||||
if (response.status === 200) {
|
||||
console.log('line chart res',response);
|
||||
|
||||
setmeasurements(response.data.Data.measurements)
|
||||
setDuration(response.data.Data.duration)
|
||||
setName(response.data.widgetName)
|
||||
setmeasurements(response.data.Data.measurements);
|
||||
setDuration(response.data.Data.duration);
|
||||
setName(response.data.widgetName);
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
|
|
@ -172,7 +189,7 @@ const LineGraphComponent = ({
|
|||
console.error("There was an error!", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchSavedInputes();
|
||||
|
|
@ -182,10 +199,14 @@ const LineGraphComponent = ({
|
|||
if (selectedChartId?.id === id) {
|
||||
fetchSavedInputes();
|
||||
}
|
||||
}
|
||||
,[chartMeasurements, chartDuration, widgetName])
|
||||
}, [chartMeasurements, chartDuration, widgetName]);
|
||||
|
||||
return <Line data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
|
||||
return (
|
||||
<Line
|
||||
data={Object.keys(measurements).length > 0 ? chartData : defaultData}
|
||||
options={options}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default LineGraphComponent;
|
||||
|
|
@ -183,14 +183,14 @@
|
|||
|
||||
// export default PieChartComponent;
|
||||
|
||||
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { Pie } from "react-chartjs-2";
|
||||
import io from "socket.io-client";
|
||||
import { useThemeStore } from "../../../../store/useThemeStore";
|
||||
import useChartStore from "../../../../store/useChartStore";
|
||||
import { useWidgetStore } from "../../../../store/useWidgetStore";
|
||||
|
||||
import axios from "axios";
|
||||
import { useThemeStore } from "../../../../../store/useThemeStore";
|
||||
import useChartStore from "../../../../../store/useChartStore";
|
||||
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
||||
|
||||
interface ChartComponentProps {
|
||||
id: string;
|
||||
|
|
@ -210,11 +210,18 @@ const PieChartComponent = ({
|
|||
fontWeight = "Regular",
|
||||
}: ChartComponentProps) => {
|
||||
const { themeColor } = useThemeStore();
|
||||
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
|
||||
const {
|
||||
measurements: chartMeasurements,
|
||||
duration: chartDuration,
|
||||
name: widgetName,
|
||||
} = useChartStore();
|
||||
const [measurements, setmeasurements] = useState<any>({});
|
||||
const [duration, setDuration] = useState("1h")
|
||||
const [name, setName] = useState("Widget")
|
||||
const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
|
||||
const [duration, setDuration] = useState("1h");
|
||||
const [name, setName] = useState("Widget");
|
||||
const [chartData, setChartData] = useState<{
|
||||
labels: string[];
|
||||
datasets: any[];
|
||||
}>({
|
||||
labels: [],
|
||||
datasets: [],
|
||||
});
|
||||
|
|
@ -222,7 +229,7 @@ const PieChartComponent = ({
|
|||
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
const defaultData = {
|
||||
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
||||
datasets: [
|
||||
|
|
@ -236,13 +243,17 @@ const PieChartComponent = ({
|
|||
],
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
},[])
|
||||
useEffect(() => {}, []);
|
||||
|
||||
// Memoize Theme Colors
|
||||
const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
|
||||
const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
|
||||
const buttonActionColor = useMemo(
|
||||
() => themeColor[0] || "#5c87df",
|
||||
[themeColor]
|
||||
);
|
||||
const buttonAbortColor = useMemo(
|
||||
() => themeColor[1] || "#ffffff",
|
||||
[themeColor]
|
||||
);
|
||||
|
||||
// Memoize Font Styling
|
||||
const chartFontWeightMap = useMemo(
|
||||
|
|
@ -254,8 +265,14 @@ const PieChartComponent = ({
|
|||
[]
|
||||
);
|
||||
|
||||
const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]);
|
||||
const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]);
|
||||
const fontSizeValue = useMemo(
|
||||
() => (fontSize ? parseInt(fontSize) : 12),
|
||||
[fontSize]
|
||||
);
|
||||
const fontWeightValue = useMemo(
|
||||
() => chartFontWeightMap[fontWeight],
|
||||
[fontWeight, chartFontWeightMap]
|
||||
);
|
||||
|
||||
const chartFontStyle = useMemo(
|
||||
() => ({
|
||||
|
|
@ -296,7 +313,8 @@ const PieChartComponent = ({
|
|||
// },[measurements])
|
||||
|
||||
useEffect(() => {
|
||||
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
|
||||
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
|
||||
return;
|
||||
|
||||
const socket = io(`http://${iotApiUrl}`);
|
||||
|
||||
|
|
@ -306,7 +324,6 @@ const PieChartComponent = ({
|
|||
interval: 1000,
|
||||
};
|
||||
|
||||
|
||||
const startStream = () => {
|
||||
socket.emit("lineInput", inputData);
|
||||
};
|
||||
|
|
@ -340,15 +357,16 @@ const PieChartComponent = ({
|
|||
};
|
||||
}, [measurements, duration, iotApiUrl]);
|
||||
|
||||
const fetchSavedInputes = async() => {
|
||||
|
||||
const fetchSavedInputes = async () => {
|
||||
if (id !== "") {
|
||||
try {
|
||||
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
|
||||
const response = await axios.get(
|
||||
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`
|
||||
);
|
||||
if (response.status === 200) {
|
||||
setmeasurements(response.data.Data.measurements)
|
||||
setDuration(response.data.Data.duration)
|
||||
setName(response.data.widgetName)
|
||||
setmeasurements(response.data.Data.measurements);
|
||||
setDuration(response.data.Data.duration);
|
||||
setName(response.data.widgetName);
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
|
|
@ -356,7 +374,7 @@ const PieChartComponent = ({
|
|||
console.error("There was an error!", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchSavedInputes();
|
||||
|
|
@ -366,10 +384,14 @@ const PieChartComponent = ({
|
|||
if (selectedChartId?.id === id) {
|
||||
fetchSavedInputes();
|
||||
}
|
||||
}
|
||||
,[chartMeasurements, chartDuration, widgetName])
|
||||
}, [chartMeasurements, chartDuration, widgetName]);
|
||||
|
||||
return <Pie data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
|
||||
return (
|
||||
<Pie
|
||||
data={Object.keys(measurements).length > 0 ? chartData : defaultData}
|
||||
options={options}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default PieChartComponent;
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { PolarArea } from "react-chartjs-2";
|
||||
import io from "socket.io-client";
|
||||
import { useThemeStore } from "../../../../store/useThemeStore";
|
||||
import useChartStore from "../../../../store/useChartStore";
|
||||
import { useWidgetStore } from "../../../../store/useWidgetStore";
|
||||
|
||||
import axios from "axios";
|
||||
import { useThemeStore } from "../../../../../store/useThemeStore";
|
||||
import useChartStore from "../../../../../store/useChartStore";
|
||||
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
||||
|
||||
interface ChartComponentProps {
|
||||
id: string;
|
||||
|
|
@ -24,11 +25,18 @@ const PolarAreaGraphComponent = ({
|
|||
fontWeight = "Regular",
|
||||
}: ChartComponentProps) => {
|
||||
const { themeColor } = useThemeStore();
|
||||
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
|
||||
const {
|
||||
measurements: chartMeasurements,
|
||||
duration: chartDuration,
|
||||
name: widgetName,
|
||||
} = useChartStore();
|
||||
const [measurements, setmeasurements] = useState<any>({});
|
||||
const [duration, setDuration] = useState("1h")
|
||||
const [name, setName] = useState("Widget")
|
||||
const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
|
||||
const [duration, setDuration] = useState("1h");
|
||||
const [name, setName] = useState("Widget");
|
||||
const [chartData, setChartData] = useState<{
|
||||
labels: string[];
|
||||
datasets: any[];
|
||||
}>({
|
||||
labels: [],
|
||||
datasets: [],
|
||||
});
|
||||
|
|
@ -36,7 +44,7 @@ const PolarAreaGraphComponent = ({
|
|||
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
const defaultData = {
|
||||
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
||||
datasets: [
|
||||
|
|
@ -50,13 +58,17 @@ const PolarAreaGraphComponent = ({
|
|||
],
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
},[])
|
||||
useEffect(() => {}, []);
|
||||
|
||||
// Memoize Theme Colors
|
||||
const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
|
||||
const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
|
||||
const buttonActionColor = useMemo(
|
||||
() => themeColor[0] || "#5c87df",
|
||||
[themeColor]
|
||||
);
|
||||
const buttonAbortColor = useMemo(
|
||||
() => themeColor[1] || "#ffffff",
|
||||
[themeColor]
|
||||
);
|
||||
|
||||
// Memoize Font Styling
|
||||
const chartFontWeightMap = useMemo(
|
||||
|
|
@ -68,8 +80,14 @@ const PolarAreaGraphComponent = ({
|
|||
[]
|
||||
);
|
||||
|
||||
const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]);
|
||||
const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]);
|
||||
const fontSizeValue = useMemo(
|
||||
() => (fontSize ? parseInt(fontSize) : 12),
|
||||
[fontSize]
|
||||
);
|
||||
const fontWeightValue = useMemo(
|
||||
() => chartFontWeightMap[fontWeight],
|
||||
[fontWeight, chartFontWeightMap]
|
||||
);
|
||||
|
||||
const chartFontStyle = useMemo(
|
||||
() => ({
|
||||
|
|
@ -110,7 +128,8 @@ const PolarAreaGraphComponent = ({
|
|||
// },[measurements])
|
||||
|
||||
useEffect(() => {
|
||||
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
|
||||
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
|
||||
return;
|
||||
|
||||
const socket = io(`http://${iotApiUrl}`);
|
||||
|
||||
|
|
@ -120,7 +139,6 @@ const PolarAreaGraphComponent = ({
|
|||
interval: 1000,
|
||||
};
|
||||
|
||||
|
||||
const startStream = () => {
|
||||
socket.emit("lineInput", inputData);
|
||||
};
|
||||
|
|
@ -154,15 +172,16 @@ const PolarAreaGraphComponent = ({
|
|||
};
|
||||
}, [measurements, duration, iotApiUrl]);
|
||||
|
||||
const fetchSavedInputes = async() => {
|
||||
|
||||
const fetchSavedInputes = async () => {
|
||||
if (id !== "") {
|
||||
try {
|
||||
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
|
||||
const response = await axios.get(
|
||||
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`
|
||||
);
|
||||
if (response.status === 200) {
|
||||
setmeasurements(response.data.Data.measurements)
|
||||
setDuration(response.data.Data.duration)
|
||||
setName(response.data.widgetName)
|
||||
setmeasurements(response.data.Data.measurements);
|
||||
setDuration(response.data.Data.duration);
|
||||
setName(response.data.widgetName);
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
|
|
@ -170,7 +189,7 @@ const PolarAreaGraphComponent = ({
|
|||
console.error("There was an error!", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchSavedInputes();
|
||||
|
|
@ -180,10 +199,14 @@ const PolarAreaGraphComponent = ({
|
|||
if (selectedChartId?.id === id) {
|
||||
fetchSavedInputes();
|
||||
}
|
||||
}
|
||||
,[chartMeasurements, chartDuration, widgetName])
|
||||
}, [chartMeasurements, chartDuration, widgetName]);
|
||||
|
||||
return <PolarArea data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
|
||||
return (
|
||||
<PolarArea
|
||||
data={Object.keys(measurements).length > 0 ? chartData : defaultData}
|
||||
options={options}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default PolarAreaGraphComponent;
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { StockIncreseIcon } from "../../../icons/RealTimeVisulationIcons";
|
||||
import { StockIncreseIcon } from "../../../../../components/icons/RealTimeVisulationIcons";
|
||||
|
||||
const ProgressCard = ({
|
||||
title,
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import io from "socket.io-client";
|
||||
|
||||
import axios from "axios";
|
||||
import useChartStore from "../../../../../store/useChartStore";
|
||||
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
||||
import { StockIncreseIcon } from "../../../../../components/icons/RealTimeVisulationIcons";
|
||||
|
||||
const ProgressCard1 = ({ id, title }: { id: string; title: string }) => {
|
||||
const {
|
||||
measurements: chartMeasurements,
|
||||
duration: chartDuration,
|
||||
name: widgetName,
|
||||
} = useChartStore();
|
||||
const [measurements, setmeasurements] = useState<any>({});
|
||||
const [duration, setDuration] = useState("1h");
|
||||
const [name, setName] = useState(title);
|
||||
const [value, setValue] = useState<any>("");
|
||||
const { selectedChartId } = useWidgetStore();
|
||||
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
|
||||
useEffect(() => {
|
||||
const socket = io(`http://${iotApiUrl}`);
|
||||
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
|
||||
return;
|
||||
|
||||
const inputData = {
|
||||
measurements,
|
||||
duration,
|
||||
interval: 1000,
|
||||
};
|
||||
|
||||
const startStream = () => {
|
||||
socket.emit("lastInput", inputData);
|
||||
};
|
||||
|
||||
socket.on("connect", startStream);
|
||||
|
||||
socket.on("lastOutput", (response) => {
|
||||
const responseData = response.input1;
|
||||
setValue(responseData);
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.off("lastOutput");
|
||||
socket.emit("stop_stream"); // Stop streaming when component unmounts
|
||||
socket.disconnect();
|
||||
};
|
||||
}, [measurements, duration]);
|
||||
|
||||
const fetchSavedInputes = async () => {
|
||||
if (id !== "") {
|
||||
try {
|
||||
const response = await axios.get(
|
||||
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`
|
||||
);
|
||||
if (response.status === 200) {
|
||||
setmeasurements(response.data.Data.measurements);
|
||||
setDuration(response.data.Data.duration);
|
||||
setName(response.data.widgetName);
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchSavedInputes();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedChartId?.id === id) {
|
||||
fetchSavedInputes();
|
||||
}
|
||||
}, [chartMeasurements, chartDuration, widgetName]);
|
||||
|
||||
return (
|
||||
<div className="chart progressBar">
|
||||
<div className="header">{name}</div>
|
||||
<div className="stock">
|
||||
<span className="stock-item">
|
||||
<span className="stockValues">
|
||||
<div className="value">{value}</div>
|
||||
<div className="key">Units</div>
|
||||
</span>
|
||||
<div className="stock-description">
|
||||
{measurements ? `${measurements?.input1?.fields}` : "description"}
|
||||
</div>
|
||||
</span>
|
||||
<div className="icon">
|
||||
<StockIncreseIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProgressCard1;
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import io from "socket.io-client";
|
||||
|
||||
import axios from "axios";
|
||||
import useChartStore from "../../../../../store/useChartStore";
|
||||
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
||||
import { StockIncreseIcon } from "../../../../../components/icons/RealTimeVisulationIcons";
|
||||
|
||||
const ProgressCard2 = ({ id, title }: { id: string; title: string }) => {
|
||||
const {
|
||||
measurements: chartMeasurements,
|
||||
duration: chartDuration,
|
||||
name: widgetName,
|
||||
} = useChartStore();
|
||||
const [measurements, setmeasurements] = useState<any>({});
|
||||
const [duration, setDuration] = useState("1h");
|
||||
const [name, setName] = useState(title);
|
||||
const [value1, setValue1] = useState<any>("");
|
||||
const [value2, setValue2] = useState<any>("");
|
||||
const { selectedChartId } = useWidgetStore();
|
||||
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
|
||||
useEffect(() => {
|
||||
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
|
||||
return;
|
||||
|
||||
const socket = io(`http://${iotApiUrl}`);
|
||||
|
||||
const inputData = {
|
||||
measurements,
|
||||
duration,
|
||||
interval: 1000,
|
||||
};
|
||||
|
||||
const startStream = () => {
|
||||
socket.emit("lastInput", inputData);
|
||||
};
|
||||
|
||||
socket.on("connect", startStream);
|
||||
|
||||
socket.on("lastOutput", (response) => {
|
||||
const responseData1 = response.input1;
|
||||
const responseData2 = response.input2;
|
||||
setValue1(responseData1);
|
||||
setValue2(responseData2);
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.off("lastOutput");
|
||||
socket.emit("stop_stream"); // Stop streaming when component unmounts
|
||||
socket.disconnect();
|
||||
};
|
||||
}, [measurements, duration]);
|
||||
|
||||
const fetchSavedInputes = async () => {
|
||||
if (id !== "") {
|
||||
try {
|
||||
const response = await axios.get(
|
||||
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`
|
||||
);
|
||||
if (response.status === 200) {
|
||||
setmeasurements(response.data.Data.measurements);
|
||||
setDuration(response.data.Data.duration);
|
||||
setName(response.data.widgetName);
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchSavedInputes();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedChartId?.id === id) {
|
||||
fetchSavedInputes();
|
||||
}
|
||||
}, [chartMeasurements, chartDuration, widgetName]);
|
||||
|
||||
return (
|
||||
<div className="chart progressBar">
|
||||
<div className="header">{name}</div>
|
||||
|
||||
<div className="stock">
|
||||
<span className="stock-item">
|
||||
<span className="stockValues">
|
||||
<div className="value">{value1}</div>
|
||||
<div className="key">Units</div>
|
||||
</span>
|
||||
<div className="stock-description">
|
||||
{measurements ? `${measurements?.input1?.fields}` : "description"}
|
||||
</div>
|
||||
</span>
|
||||
<div className="icon">
|
||||
<StockIncreseIcon />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="stock">
|
||||
<span className="stock-item">
|
||||
<span className="stockValues">
|
||||
<div className="value">{value2}</div>
|
||||
<div className="key">Units</div>
|
||||
</span>
|
||||
<div className="stock-description">
|
||||
{measurements ? `${measurements?.input2?.fields}` : "description"}
|
||||
</div>
|
||||
</span>
|
||||
<div className="icon">
|
||||
<StockIncreseIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProgressCard2;
|
||||
|
|
@ -1,37 +1,25 @@
|
|||
import * as THREE from "three";
|
||||
import { useThree } from "@react-three/fiber";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
useAsset3dWidget,
|
||||
useSocketStore,
|
||||
useWidgetSubOption,
|
||||
} from "../../../store/store";
|
||||
import useChartStore from "../../../store/useChartStore";
|
||||
import useModuleStore from "../../../store/useModuleStore";
|
||||
import { ThreeState } from "../../../types/world/worldTypes";
|
||||
import * as THREE from "three";
|
||||
import Throughput from "../../layout/3D-cards/cards/Throughput";
|
||||
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";
|
||||
import {
|
||||
useEditWidgetOptionsStore,
|
||||
useLeftData,
|
||||
useRightClickSelected,
|
||||
useRightSelected,
|
||||
useTopData,
|
||||
useZoneWidgetStore,
|
||||
} from "../../../store/useZone3DWidgetStore";
|
||||
import { delete3dWidgetApi } from "../../../services/realTimeVisulization/zoneData/delete3dWidget";
|
||||
import {
|
||||
update3dWidget,
|
||||
update3dWidgetRotation,
|
||||
} from "../../../services/realTimeVisulization/zoneData/update3dWidget";
|
||||
import { useWidgetStore } from "../../../store/useWidgetStore";
|
||||
import { useAsset3dWidget, useSocketStore, useWidgetSubOption } from "../../../../store/store";
|
||||
import useModuleStore from "../../../../store/useModuleStore";
|
||||
import { ThreeState } from "../../../../types/world/worldTypes";
|
||||
import { useSelectedZoneStore } from "../../../../store/useZoneStore";
|
||||
import { useEditWidgetOptionsStore, useLeftData, useRightClickSelected, useRightSelected, useTopData, useZoneWidgetStore } from "../../../../store/useZone3DWidgetStore";
|
||||
import { use3DWidget } from "../../../../store/useDroppedObjectsStore";
|
||||
import { get3dWidgetZoneData } from "../../../../services/realTimeVisulization/zoneData/get3dWidgetData";
|
||||
import { generateUniqueId } from "../../../../functions/generateUniqueId";
|
||||
import ProductionCapacity from "./cards/ProductionCapacity";
|
||||
import ReturnOfInvestment from "./cards/ReturnOfInvestment";
|
||||
import StateWorking from "./cards/StateWorking";
|
||||
import Throughput from "./cards/Throughput";
|
||||
import { useWidgetStore } from "../../../../store/useWidgetStore";
|
||||
import useChartStore from "../../../../store/useChartStore";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
type WidgetData = {
|
||||
id: string;
|
||||
type: string;
|
||||
|
|
@ -11,11 +11,11 @@ import {
|
|||
Legend,
|
||||
TooltipItem, // Import TooltipItem for typing
|
||||
} from "chart.js";
|
||||
import { ThroughputIcon } from "../../../icons/3dChartIcons";
|
||||
import { useWidgetStore } from "../../../../store/useWidgetStore";
|
||||
import useChartStore from "../../../../store/useChartStore";
|
||||
|
||||
import axios from "axios";
|
||||
import io from "socket.io-client";
|
||||
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
||||
import useChartStore from "../../../../../store/useChartStore";
|
||||
|
||||
// Register ChartJS components
|
||||
ChartJS.register(
|
||||
|
|
@ -229,6 +229,7 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
|
|||
// transform: transformStyle.transform,
|
||||
transformStyle: "preserve-3d",
|
||||
position: "absolute",
|
||||
transform:'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<div className="headeproductionCapacityr-wrapper">
|
||||
|
|
@ -11,11 +11,13 @@ import {
|
|||
ChartData,
|
||||
ChartOptions,
|
||||
} from "chart.js";
|
||||
import { WavyIcon } from "../../../icons/3dChartIcons";
|
||||
import { useWidgetStore } from "../../../../store/useWidgetStore";
|
||||
import useChartStore from "../../../../store/useChartStore";
|
||||
|
||||
|
||||
import axios from "axios";
|
||||
import io from "socket.io-client";
|
||||
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
||||
import useChartStore from "../../../../../store/useChartStore";
|
||||
import { WavyIcon } from "../../../../../components/icons/3dChartIcons";
|
||||
|
||||
// Register Chart.js components
|
||||
ChartJS.register(
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
import { Html } from "@react-three/drei";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { useWidgetStore } from "../../../../store/useWidgetStore";
|
||||
import useChartStore from "../../../../store/useChartStore";
|
||||
|
||||
import axios from "axios";
|
||||
import io from "socket.io-client";
|
||||
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
||||
import useChartStore from "../../../../../store/useChartStore";
|
||||
|
||||
// import image from "../../../../assets/image/temp/image.png";
|
||||
interface StateWorkingProps {
|
||||
|
|
@ -13,11 +13,13 @@ import {
|
|||
ChartData,
|
||||
ChartOptions,
|
||||
} from "chart.js";
|
||||
import { ThroughputIcon } from "../../../icons/3dChartIcons";
|
||||
import { useWidgetStore } from "../../../../store/useWidgetStore";
|
||||
import useChartStore from "../../../../store/useChartStore";
|
||||
|
||||
|
||||
import axios from "axios";
|
||||
import io from "socket.io-client";
|
||||
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
||||
import useChartStore from "../../../../../store/useChartStore";
|
||||
import { ThroughputIcon } from "../../../../../components/icons/3dChartIcons";
|
||||
|
||||
// Register Chart.js components
|
||||
ChartJS.register(
|
||||
|
|
@ -1,29 +1,29 @@
|
|||
import { WalletIcon } from "../../icons/3dChartIcons";
|
||||
import { WalletIcon } from "../../../../components/icons/3dChartIcons";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
useDroppedObjectsStore,
|
||||
Zones,
|
||||
} from "../../../store/useDroppedObjectsStore";
|
||||
import useModuleStore from "../../../store/useModuleStore";
|
||||
import { determinePosition } from "./functions/determinePosition";
|
||||
import { getActiveProperties } from "./functions/getActiveProperties";
|
||||
import { addingFloatingWidgets } from "../../../services/realTimeVisulization/zoneData/addFloatingWidgets";
|
||||
} from "../../../../store/useDroppedObjectsStore";
|
||||
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";
|
||||
} from "../../../../components/icons/ExportCommonIcons";
|
||||
import DistanceLines from "./DistanceLines"; // Import the DistanceLines component
|
||||
import { deleteFloatingWidgetApi } from "../../../services/realTimeVisulization/zoneData/deleteFloatingWidget";
|
||||
import { deleteFloatingWidgetApi } from "../../../../services/realTimeVisulization/zoneData/deleteFloatingWidget";
|
||||
|
||||
import TotalCardComponent from "../realTimeVis/floating/TotalCardComponent";
|
||||
import WarehouseThroughputComponent from "../realTimeVis/floating/WarehouseThroughputComponent";
|
||||
import FleetEfficiencyComponent from "../realTimeVis/floating/FleetEfficiencyComponent";
|
||||
import { useWidgetStore } from "../../../store/useWidgetStore";
|
||||
import { useSocketStore } from "../../../store/store";
|
||||
import { useClickOutside } from "./functions/handleWidgetsOuterClick";
|
||||
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
|
||||
import { useSelectedZoneStore } from "../../../store/useZoneStore";
|
||||
import TotalCardComponent from "./cards/TotalCardComponent";
|
||||
import WarehouseThroughputComponent from "./cards/WarehouseThroughputComponent";
|
||||
import FleetEfficiencyComponent from "./cards/FleetEfficiencyComponent";
|
||||
import { useWidgetStore } from "../../../../store/useWidgetStore";
|
||||
import { useSocketStore } from "../../../../store/store";
|
||||
import { useClickOutside } from "../../functions/handleWidgetsOuterClick";
|
||||
import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
|
||||
import { useSelectedZoneStore } from "../../../../store/useZoneStore";
|
||||
interface DraggingState {
|
||||
zone: string;
|
||||
index: number;
|
||||
|
|
@ -560,7 +560,7 @@ const DroppedObjects: React.FC = () => {
|
|||
key={`${zoneName}-${index}`}
|
||||
className={`${obj.className} ${
|
||||
selectedChartId?.id === obj.id && "activeChart"
|
||||
}`}
|
||||
} `}
|
||||
ref={chartWidget}
|
||||
style={{
|
||||
position: "absolute",
|
||||
|
|
@ -569,7 +569,9 @@ const DroppedObjects: React.FC = () => {
|
|||
right: rightPosition,
|
||||
bottom: bottomPosition,
|
||||
pointerEvents: isPlaying ? "none" : "auto",
|
||||
minHeight: `${obj.className === "warehouseThroughput" && "150px !important"} `
|
||||
minHeight: `${
|
||||
obj.className === "warehouseThroughput" && "150px !important"
|
||||
} `,
|
||||
}}
|
||||
onPointerDown={(event) => {
|
||||
setSelectedChartId(obj);
|
||||
|
|
@ -661,3 +663,4 @@ const DroppedObjects: React.FC = () => {
|
|||
};
|
||||
|
||||
export default DroppedObjects;
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useState, useEffect } from 'react'
|
||||
import { Line } from 'react-chartjs-2'
|
||||
import useChartStore from '../../../../store/useChartStore';
|
||||
import { useWidgetStore } from '../../../../store/useWidgetStore';
|
||||
import useChartStore from '../../../../../store/useChartStore';
|
||||
import { useWidgetStore } from '../../../../../store/useWidgetStore';
|
||||
import axios from 'axios';
|
||||
import io from "socket.io-client";
|
||||
|
||||
|
|
@ -2,7 +2,8 @@ import React from "react";
|
|||
|
||||
interface SimpleCardProps {
|
||||
header: string;
|
||||
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>; // React component for SVG icon
|
||||
icon: React.ElementType; // React component for SVG icon
|
||||
iconName?: string;
|
||||
value: string;
|
||||
per: string; // Percentage change
|
||||
position?: [number, number];
|
||||
|
|
@ -11,23 +12,25 @@ interface SimpleCardProps {
|
|||
const SimpleCard: React.FC<SimpleCardProps> = ({
|
||||
header,
|
||||
icon: Icon,
|
||||
iconName,
|
||||
value,
|
||||
per,
|
||||
position = [0, 0],
|
||||
}) => {
|
||||
const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
|
||||
const rect = event.currentTarget.getBoundingClientRect(); // Get position
|
||||
|
||||
const cardData = JSON.stringify({
|
||||
header,
|
||||
value,
|
||||
per,
|
||||
icon: Icon,
|
||||
|
||||
iconName: iconName || "UnknownIcon", // Use the custom iconName
|
||||
className: event.currentTarget.className,
|
||||
position: [rect.top, rect.left], // ✅ Store position
|
||||
});
|
||||
|
||||
event.dataTransfer.setData("text/plain", cardData);
|
||||
console.log("cardData: ", cardData);
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -1,10 +1,15 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import useChartStore from "../../../../store/useChartStore";
|
||||
import { useWidgetStore } from "../../../../store/useWidgetStore";
|
||||
import useChartStore from "../../../../../store/useChartStore";
|
||||
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
||||
import axios from "axios";
|
||||
import io from "socket.io-client";
|
||||
import { WalletIcon } from "../../../icons/3dChartIcons";
|
||||
import {
|
||||
CartIcon,
|
||||
DocumentIcon,
|
||||
GlobeIcon,
|
||||
WalletIcon,
|
||||
} from "../../../../../components/icons/3dChartIcons";
|
||||
|
||||
const TotalCardComponent = ({ object }: any) => {
|
||||
const [progress, setProgress] = useState<any>(0);
|
||||
|
|
@ -77,6 +82,20 @@ const TotalCardComponent = ({ object }: any) => {
|
|||
}
|
||||
}, [header, flotingDuration, flotingMeasurements]);
|
||||
|
||||
const mapIcon = (iconName: string) => {
|
||||
switch (iconName) {
|
||||
case "WalletIcon":
|
||||
return <WalletIcon />;
|
||||
case "GlobeIcon":
|
||||
return <GlobeIcon />;
|
||||
case "DocumentIcon":
|
||||
return <DocumentIcon />;
|
||||
case "CartIcon":
|
||||
return <CartIcon />;
|
||||
default:
|
||||
return <WalletIcon />;
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className="header-wrapper">
|
||||
|
|
@ -86,9 +105,7 @@ const TotalCardComponent = ({ object }: any) => {
|
|||
<div className="per">{object.per}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="icon">
|
||||
<WalletIcon />
|
||||
</div>
|
||||
<div className="icon">{mapIcon(object.iconName)}</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useState, useEffect } from 'react'
|
||||
import { Line } from 'react-chartjs-2'
|
||||
import useChartStore from '../../../../store/useChartStore';
|
||||
import { useWidgetStore } from '../../../../store/useWidgetStore';
|
||||
import useChartStore from '../../../../../store/useChartStore';
|
||||
import { useWidgetStore } from '../../../../../store/useWidgetStore';
|
||||
import axios from 'axios';
|
||||
import io from "socket.io-client";
|
||||
|
||||
|
|
@ -3,11 +3,11 @@ import {
|
|||
CleanPannel,
|
||||
EyeIcon,
|
||||
LockIcon,
|
||||
} from "../../icons/RealTimeVisulationIcons";
|
||||
import { AddIcon } from "../../icons/ExportCommonIcons";
|
||||
import { useSocketStore } from "../../../store/store";
|
||||
import { clearPanel } from "../../../services/realTimeVisulization/zoneData/clearPanel";
|
||||
import { lockPanel } from "../../../services/realTimeVisulization/zoneData/lockPanel";
|
||||
} from "../../../../components/icons/RealTimeVisulationIcons";
|
||||
import { AddIcon } from "../../../../components/icons/ExportCommonIcons";
|
||||
import { useSocketStore } from "../../../../store/store";
|
||||
import { clearPanel } from "../../../../services/realTimeVisulization/zoneData/clearPanel";
|
||||
import { lockPanel } from "../../../../services/realTimeVisulization/zoneData/lockPanel";
|
||||
|
||||
// Define the type for `Side`
|
||||
type Side = "top" | "bottom" | "left" | "right";
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useWidgetStore } from "../../../store/useWidgetStore";
|
||||
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";
|
||||
import { useAsset3dWidget, useSocketStore } from "../../../../store/store";
|
||||
import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
|
||||
import { useWidgetStore } from "../../../../store/useWidgetStore";
|
||||
import { DraggableWidget } from "../2d/DraggableWidget";
|
||||
|
||||
type Side = "top" | "bottom" | "left" | "right";
|
||||
|
||||
|
|
@ -22,7 +22,7 @@ interface PanelProps {
|
|||
activeSides: Side[];
|
||||
panelOrder: Side[];
|
||||
lockedPanels: Side[];
|
||||
points:[];
|
||||
points: [];
|
||||
zoneId: string;
|
||||
zoneViewPortTarget: number[];
|
||||
zoneViewPortPosition: number[];
|
||||
|
|
@ -34,7 +34,7 @@ interface PanelProps {
|
|||
activeSides: Side[];
|
||||
panelOrder: Side[];
|
||||
lockedPanels: Side[];
|
||||
points:[];
|
||||
points: [];
|
||||
zoneId: string;
|
||||
zoneViewPortTarget: number[];
|
||||
zoneViewPortPosition: number[];
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import React, { useEffect, useRef } from 'react'
|
||||
import { useSelectedFloorItem, useZoneAssetId } from '../../../store/store';
|
||||
import { useSelectedFloorItem, useZoneAssetId } from '../../store/store';
|
||||
import * as THREE from "three";
|
||||
import { useThree } from '@react-three/fiber';
|
||||
import * as Types from "../../../types/world/worldTypes";
|
||||
import * as Types from "../../types/world/worldTypes";
|
||||
export default function ZoneAssets() {
|
||||
const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
|
||||
const { setSelectedFloorItem } = useSelectedFloorItem();
|
||||
|
|
@ -3,7 +3,7 @@ import ModuleToggle from "../components/ui/ModuleToggle";
|
|||
import SideBarLeft from "../components/layout/sidebarLeft/SideBarLeft";
|
||||
import SideBarRight from "../components/layout/sidebarRight/SideBarRight";
|
||||
import useModuleStore, { useThreeDStore } from "../store/useModuleStore";
|
||||
import RealTimeVisulization from "../components/ui/componets/RealTimeVisulization";
|
||||
import RealTimeVisulization from "../modules/visualization/RealTimeVisulization";
|
||||
import Tools from "../components/ui/Tools";
|
||||
// import Scene from "../modules/scene/scene";
|
||||
import {
|
||||
|
|
|
|||
|
|
@ -130,7 +130,6 @@
|
|||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.widget-left-sideBar {
|
||||
.widgets-wrapper {
|
||||
|
||||
min-height: 50vh;
|
||||
|
|
@ -138,6 +137,9 @@
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
.widget-left-sideBar {
|
||||
|
||||
|
||||
.widget2D {
|
||||
overflow: auto;
|
||||
|
||||
|
|
@ -1088,43 +1090,51 @@
|
|||
right: -10px;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
&:nth-child(1), &:nth-child(9) {
|
||||
|
||||
&:nth-child(1),
|
||||
&:nth-child(9) {
|
||||
&::after {
|
||||
@include gradient-by-child(1); // First child uses the first color
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2), &:nth-child(10) {
|
||||
&:nth-child(2),
|
||||
&:nth-child(10) {
|
||||
&::after {
|
||||
@include gradient-by-child(2); // Second child uses the second color
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3), &:nth-child(11) {
|
||||
&:nth-child(3),
|
||||
&:nth-child(11) {
|
||||
&::after {
|
||||
@include gradient-by-child(3); // Third child uses the third color
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(4), &:nth-child(12) {
|
||||
&:nth-child(4),
|
||||
&:nth-child(12) {
|
||||
&::after {
|
||||
@include gradient-by-child(4); // Fourth child uses the fourth color
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(5), &:nth-child(13) {
|
||||
&:nth-child(5),
|
||||
&:nth-child(13) {
|
||||
&::after {
|
||||
@include gradient-by-child(5); // Fifth child uses the fifth color
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(6), &:nth-child(14) {
|
||||
&:nth-child(6),
|
||||
&:nth-child(14) {
|
||||
&::after {
|
||||
@include gradient-by-child(6); // Fifth child uses the fifth color
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(7), &:nth-child(15) {
|
||||
&:nth-child(7),
|
||||
&:nth-child(15) {
|
||||
&::after {
|
||||
@include gradient-by-child(7); // Fifth child uses the fifth color
|
||||
}
|
||||
|
|
@ -1160,6 +1170,7 @@
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
.asset-name {
|
||||
opacity: 1;
|
||||
|
|
@ -1173,21 +1184,24 @@
|
|||
padding: 8px;
|
||||
width: 100%;
|
||||
font-size: var(--font-size-regular);
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
background: color-mix(in srgb,
|
||||
var(--background-color) 40%,
|
||||
transparent
|
||||
);
|
||||
transparent);
|
||||
backdrop-filter: blur(5px);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
/* Added properties for ellipsis */
|
||||
display: -webkit-box; /* Necessary for multiline truncation */
|
||||
-webkit-line-clamp: 2; /* Number of lines to show */
|
||||
-webkit-box-orient: vertical; /* Box orientation for the ellipsis */
|
||||
overflow: hidden; /* Hide overflowing content */
|
||||
text-overflow: ellipsis; /* Add ellipsis for truncated content */
|
||||
display: -webkit-box;
|
||||
/* Necessary for multiline truncation */
|
||||
-webkit-line-clamp: 2;
|
||||
/* Number of lines to show */
|
||||
-webkit-box-orient: vertical;
|
||||
/* Box orientation for the ellipsis */
|
||||
overflow: hidden;
|
||||
/* Hide overflowing content */
|
||||
text-overflow: ellipsis;
|
||||
/* Add ellipsis for truncated content */
|
||||
}
|
||||
|
||||
.asset-image {
|
||||
|
|
|
|||
Loading…
Reference in New Issue