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

socket added for 2d widget

Browse Source
This commit is contained in:
Gomathi
2025-04-01 19:35:11 +05:30
parent 900723c14a
commit b828cb2437
12 changed files with 245 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -79,9 +79,10 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ position }) =>
};
return (
<Html position={[position[0], position[1], position[2]]}
<Html position={[position[0], position[1], position[2]] }
scale={[0.5, 0.5, 0.5]}
transform
zIndexRange={[1,0]}
sprite>
<div className="productionCapacity-wrapper card">
<div className="headeproductionCapacityr-wrapper">

1
app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
View File

@@ -111,6 +111,7 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ position }) =>
<Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]}
transform
zIndexRange={[1,0]}
sprite>
<div className="returnOfInvestment card">
<div className="header">Return of Investment</div>

1
app/src/components/layout/3D-cards/cards/StateWorking.tsx
View File

@@ -16,6 +16,7 @@ const StateWorking: React.FC<StateWorkingProps> = ({ position }) => {
<Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]}
transform
zIndexRange={[1,0]}
sprite>
<div className="stateWorking-wrapper card">
<div className="header-wrapper">

1
app/src/components/layout/3D-cards/cards/Throughput.tsx
View File

@@ -94,6 +94,7 @@ const Throughput: React.FC<ThroughputProps> = ({ position }) => {
<Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]}
transform
zIndexRange={[1, 0]}
sprite>
<div className="throughput-wrapper">
<div className="header">Throughput</div>

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

@@ -1,4 +1,4 @@
import React from "react";
import React, { useEffect } from "react";
import {
CleanPannel,
EyeIcon,
@@ -7,6 +7,7 @@ import {
import { panelData } from "../../../services/realTimeVisulization/zoneData/panel";
import { AddIcon } from "../../icons/ExportCommonIcons";
import { deletePanelApi } from "../../../services/realTimeVisulization/zoneData/deletePanel";
import { useSocketStore } from "../../../store/store";
// Define the type for `Side`
type Side = "top" | "bottom" | "left" | "right";
@@ -17,7 +18,6 @@ interface ButtonsProps {
zoneName: string;
activeSides: Side[];
panelOrder: Side[];
lockedPanels: Side[];
zoneId: string;
zoneViewPortTarget: number[];
@@ -59,6 +59,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
setHiddenPanels,
hiddenPanels,
}) => {
const { visualizationSocket } = useSocketStore();
// Local state to track hidden panels
// Function to toggle lock/unlock a panel
@@ -109,65 +112,81 @@ const AddButtons: React.FC<ButtonsProps> = ({
// Panel already exists: Remove widgets from that side and update activeSides
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
// Remove all widgets associated with the side and update active sides
const cleanedWidgets = selectedZone.widgets.filter(
(widget) => widget.panel !== side
);
const newActiveSides = selectedZone.activeSides.filter((s) => s !== side);
const updatedZone = {
...selectedZone,
widgets: cleanedWidgets,
activeSides: newActiveSides,
panelOrder: newActiveSides,
};
// API call to delete the panel
try {
const response = await deletePanelApi(selectedZone.zoneId, side, organization);
console.log('response: ', response);
if (response.message === "Panel deleted successfully") {
setSelectedZone(updatedZone);
} else {
console.error("Unexpected response:", response);
}
} catch (error) {
console.error("Error deleting panel:", error);
let deletePanel = {
organization: organization,
panelName: side,
zoneId: selectedZone.zoneId
}
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-panel:delete", deletePanel)
}
setSelectedZone(updatedZone);
// API call to delete the panel
// try {
// const response = await deletePanelApi(selectedZone.zoneId, side, organization);
//
// if (response.message === "Panel deleted successfully") {
// } else {
//
// }
// } catch (error) {
//
// }
} else {
// Panel does not exist: Create panel
try {
// Get email and organization safely with a default fallback
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0] ;
const organization = email?.split("@")[1]?.split(".")[0];
// Prevent duplicate side entries
const newActiveSides = selectedZone.activeSides.includes(side)
? [...selectedZone.activeSides]
: [...selectedZone.activeSides, side];
const updatedZone = {
...selectedZone,
activeSides: newActiveSides,
panelOrder: newActiveSides,
};
// API call to create panels
const response = await panelData(organization, selectedZone.zoneId, newActiveSides);
console.log('response: ', response);
if (response.message === "Panels created successfully") {
setSelectedZone(updatedZone);
} else {
console.error("Unexpected response:", response);
let addPanel = {
organization: organization,
zoneId: selectedZone.zoneId,
panelOrder: newActiveSides
}
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-panel:add", addPanel)
}
setSelectedZone(updatedZone);
// API call to create panels
// const response = await panelData(organization, selectedZone.zoneId, newActiveSides);
//
// if (response.message === "Panels created successfully") {
// } else {
//
// }
} catch (error) {
console.error("Error creating panels:", error);
}
}
};
return (
<>

88
app/src/components/ui/componets/DraggableWidget.tsx
View File

@@ -13,6 +13,7 @@ import {
import { useEffect, useRef, useState } from "react";
import { duplicateWidgetApi } from "../../../services/realTimeVisulization/zoneData/duplicateWidget";
import { deleteWidgetApi } from "../../../services/realTimeVisulization/zoneData/deleteWidgetApi";
import { useSocketStore } from "../../../store/store";
type Side = "top" | "bottom" | "left" | "right";
@@ -69,6 +70,7 @@ export const DraggableWidget = ({
openKebabId: string | null;
setOpenKebabId: (id: string | null) => void;
}) => {
const { visualizationSocket } = useSocketStore();
const { selectedChartId, setSelectedChartId } = useWidgetStore();
const [panelDimensions, setPanelDimensions] = useState<{
[side in Side]?: { width: number; height: number };
@@ -85,16 +87,34 @@ export const DraggableWidget = ({
try {
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const response = await deleteWidgetApi(widget.id, organization);
if (response?.message === "Widget deleted successfully") {
const updatedWidgets = selectedZone.widgets.filter(
(w: Widget) => w.id !== widget.id
);
setSelectedZone((prevZone: any) => ({
...prevZone,
widgets: updatedWidgets,
}));
let deleteWidget = {
zoneId: selectedZone.zoneId,
widgetID: widget.id,
organization: organization
}
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-widget:delete", deleteWidget)
}
const updatedWidgets = selectedZone.widgets.filter(
(w: Widget) => w.id !== widget.id
);
console.log('updatedWidgets: ', updatedWidgets);
setSelectedZone((prevZone: any) => ({
...prevZone,
widgets: updatedWidgets,
}));
setOpenKebabId(null);
// const response = await deleteWidgetApi(widget.id, organization);
// if (response?.message === "Widget deleted successfully") {
// const updatedWidgets = selectedZone.widgets.filter(
// (w: Widget) => w.id !== widget.id
// );
// setSelectedZone((prevZone: any) => ({
// ...prevZone,
// widgets: updatedWidgets,
// }));
// }
} catch (error) {
} finally {
@@ -249,7 +269,7 @@ export const DraggableWidget = ({
)}
{/* Render charts based on widget type */}
{widget.type === "progress" && (
<ProgressCard title={widget.title} data={widget.data} />
)}
@@ -260,14 +280,14 @@ export const DraggableWidget = ({
title={widget.title}
fontSize={widget.fontSize}
fontWeight={widget.fontWeight}
// data={{
// measurements: [
// { name: "testDevice", fields: "powerConsumption" },
// { name: "furnace", fields: "powerConsumption" },
// ],
// interval: 1000,
// duration: "1h",
// }}
// data={{
// measurements: [
// { name: "testDevice", fields: "powerConsumption" },
// { name: "furnace", fields: "powerConsumption" },
// ],
// interval: 1000,
// duration: "1h",
// }}
/>
)}
{widget.type === "bar" && (
@@ -277,14 +297,14 @@ export const DraggableWidget = ({
title={widget.title}
fontSize={widget.fontSize}
fontWeight={widget.fontWeight}
// data={{
// measurements: [
// { name: "testDevice", fields: "powerConsumption" },
// { name: "furnace", fields: "powerConsumption" },
// ],
// interval: 1000,
// duration: "1h",
// }}
// data={{
// measurements: [
// { name: "testDevice", fields: "powerConsumption" },
// { name: "furnace", fields: "powerConsumption" },
// ],
// interval: 1000,
// duration: "1h",
// }}
/>
)}
{widget.type === "pie" && (
@@ -294,14 +314,14 @@ export const DraggableWidget = ({
title={widget.title}
fontSize={widget.fontSize}
fontWeight={widget.fontWeight}
// data={{
// measurements: [
// { name: "testDevice", fields: "powerConsumption" },
// { name: "furnace", fields: "powerConsumption" },
// ],
// interval: 1000,
// duration: "1h",
// }}
// data={{
// measurements: [
// { name: "testDevice", fields: "powerConsumption" },
// { name: "furnace", fields: "powerConsumption" },
// ],
// interval: 1000,
// duration: "1h",
// }}
/>
)}
{widget.type === "doughnut" && (

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

@@ -35,6 +35,7 @@ export default function Dropped3dWidgets() {
async function get3dWidgetData() {
let result = await get3dWidgetZoneData(selectedZone.zoneId, organization);
console.log('result: ', result);
setWidgets3D(result)
// Ensure the extracted data has id, type, and position correctly mapped
const formattedWidgets = result.map((widget: any) => ({
@@ -107,6 +108,7 @@ export default function Dropped3dWidgets() {
// Get widgets for the currently active zone
const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];
console.log('activeZoneWidgets: ', activeZoneWidgets);
return (
<>

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

@@ -79,21 +79,21 @@ const DroppedObjects: React.FC = () => {
}
};
}, []);
// useEffect(() => {
// const handleClickOutside = (event: MouseEvent) => {
// if (kebabRef.current && !kebabRef.current.contains(event.target as Node)) {
// setOpenKebabId(null);
// }
// };
// // Add event listener when component mounts
// document.addEventListener("mousedown", handleClickOutside);
// // Clean up event listener when component unmounts
// return () => {
// document.removeEventListener("mousedown", handleClickOutside);
// };
// }, []);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (kebabRef.current && !kebabRef.current.contains(event.target as Node)) {
setOpenKebabId(null);
}
};
// Add event listener when component mounts
document.addEventListener("mousedown", handleClickOutside);
// Clean up event listener when component unmounts
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
const zoneEntries = Object.entries(zones);
if (zoneEntries.length === 0) return null;
@@ -378,7 +378,7 @@ const DroppedObjects: React.FC = () => {
<KebabIcon />
</div>
{openKebabId === obj.id && (
<div className="kebab-options">
<div className="kebab-options" ref={kebabRef}>
<div className="dublicate btn" onClick={(event) => {
event.stopPropagation();
handleDuplicate(zoneName, index); // Call the duplicate handler

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

@@ -4,7 +4,7 @@ import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import { DraggableWidget } from "./DraggableWidget";
import { arrayMove } from "@dnd-kit/sortable";
import { addingWidgets } from "../../../services/realTimeVisulization/zoneData/addWidgets";
import { useAsset3dWidget } from "../../../store/store";
import { useAsset3dWidget, useSocketStore } from "../../../store/store";
type Side = "top" | "bottom" | "left" | "right";
@@ -62,6 +62,7 @@ const Panel: React.FC<PanelProps> = ({
const [openKebabId, setOpenKebabId] = useState<string | null>(null);
const { isPlaying } = usePlayButtonStore();
const { visualizationSocket } = useSocketStore();
const getPanelStyle = useMemo(
() => (side: Side) => {
@@ -102,10 +103,7 @@ const Panel: React.FC<PanelProps> = ({
);
const handleDrop = (e: React.DragEvent, panel: Side) => {
e.preventDefault();
setWidgetSelect("")
const { draggedAsset } = useWidgetStore.getState();
if (!draggedAsset) return;
if (isPanelLocked(panel)) return;
@@ -114,7 +112,6 @@ const Panel: React.FC<PanelProps> = ({
const maxCapacity = calculatePanelCapacity(panel);
if (currentWidgetsCount >= maxCapacity) return;
addWidgetToPanel(draggedAsset, panel);
};
@@ -151,18 +148,33 @@ const Panel: React.FC<PanelProps> = ({
id: generateUniqueId(),
panel,
};
try {
let response = await addingWidgets(selectedZone.zoneId, organization, newWidget);
if (response.message === "Widget created successfully") {
setSelectedZone((prev) => ({
...prev,
widgets: [...prev.widgets, newWidget],
}));
}
} catch (error) {
console.error("Error adding widget:", error);
let addWidget = {
organization: organization,
zoneId: selectedZone.zoneId,
widget: newWidget
}
console.log('newWidget: ', newWidget);
console.log('addWidget: ', addWidget);
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-widget:add", addWidget)
}
setSelectedZone((prev) => ({
...prev,
widgets: [...prev.widgets, newWidget],
}));
// try {
// let response = await addingWidgets(selectedZone.zoneId, organization, newWidget);
// if (response.message === "Widget created successfully") {
// setSelectedZone((prev) => ({
// ...prev,
// widgets: [...prev.widgets, newWidget],
// }));
// }
// } catch (error) {
// console.error("Error adding widget:", error);
// }
};

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

@@ -11,6 +11,7 @@ import DroppedObjects from "./DroppedFloatingWidgets";
import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
import {
useAsset3dWidget,
useSocketStore,
useWidgetSubOption,
useZones,
} from "../../../store/store";
@@ -18,6 +19,7 @@ import { getZone2dData } from "../../../services/realTimeVisulization/zoneData/g
import { generateUniqueId } from "../../../functions/generateUniqueId";
import { determinePosition } from "./functions/determinePosition";
import { addingFloatingWidgets } from "../../../services/realTimeVisulization/zoneData/addFloatingWidgets";
import SocketRealTimeViz from "../../../modules/visualization/realTimeVizSocket.dev";
type Side = "top" | "bottom" | "left" | "right";
@@ -56,6 +58,7 @@ const RealTimeVisulization: React.FC = () => {
>({});
const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
const { visualizationSocket } = useSocketStore();
useEffect(() => {
async function GetZoneData() {
@@ -204,6 +207,7 @@ const RealTimeVisulization: React.FC = () => {
<Scene />
</div>
{activeModule === "visualization" && selectedZone.zoneName !== "" && <DroppedObjects />}
{activeModule === "visualization" && <SocketRealTimeViz />}
{/* <DroppedObjects /> */}
{activeModule === "visualization" && (
<>