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

fixed floting and 3d widget buges

This commit is contained in:
gabriel 2025-04-11 18:01:27 +05:30
parent 1cf7703f07
commit 8f5837ec9f
12 changed files with 56 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/.env
View File

@ -2,10 +2,10 @@
PORT=8200
# Base URL for the server socket API, used for real-time communication (e.g., WebSockets).
REACT_APP_SERVER_SOCKET_API_BASE_URL=192.168.0.111:8000
REACT_APP_SERVER_SOCKET_API_BASE_URL=185.100.212.76:8000
# Base URL for the server REST API, used for HTTP requests to the backend server.
REACT_APP_SERVER_REST_API_BASE_URL=192.168.0.111:5000
REACT_APP_SERVER_REST_API_BASE_URL=185.100.212.76:5000
# Base URL for the server marketplace, used for market place model blob.
REACT_APP_SERVER_MARKETPLACE_URL=185.100.212.76:50011

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

@ -31,6 +31,7 @@ interface ProductionCapacityProps {
type: string;
position: [number, number, number];
rotation: [number, number, number];
Data?: any,
onContextMenu?: (event: React.MouseEvent) => void;
// onPointerDown:any
}
@ -38,6 +39,7 @@ interface ProductionCapacityProps {
const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
id,
type,
Data,
position,
rotation,
onContextMenu,
@ -48,8 +50,8 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
duration: chartDuration,
name: widgetName,
} = useChartStore();
const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h");
const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
const [name, setName] = useState("Widget");
const [chartData, setChartData] = useState<{
labels: string[];

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

@ -44,11 +44,13 @@ interface ReturnOfInvestmentProps {
type: string;
position: [number, number, number];
rotation: [number, number, number];
Data?: any;
onContextMenu?: (event: React.MouseEvent) => void;
}
const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
id,
type,
Data,
position,
rotation,
onContextMenu,
@ -59,8 +61,8 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
duration: chartDuration,
name: widgetName,
} = useChartStore();
const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h");
const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
const [name, setName] = useState("Widget");
const [chartData, setChartData] = useState<{
labels: string[];

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

@ -11,11 +11,13 @@ interface StateWorkingProps {
type: string;
position: [number, number, number];
rotation: [number, number, number];
Data?:any;
onContextMenu?: (event: React.MouseEvent) => void;
}
const StateWorking: React.FC<StateWorkingProps> = ({
id,
type,
Data,
position,
rotation,
onContextMenu,
@ -26,8 +28,8 @@ const StateWorking: React.FC<StateWorkingProps> = ({
duration: chartDuration,
name: widgetName,
} = useChartStore();
const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h");
const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
const [name, setName] = useState("Widget");
const [datas, setDatas] = useState<any>({});
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;

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

@ -46,12 +46,14 @@ interface ThroughputProps {
type: string;
position: [number, number, number];
rotation: [number, number, number];
Data?:any;
onContextMenu?: (event: React.MouseEvent) => void;
}
const Throughput: React.FC<ThroughputProps> = ({
id,
type,
Data,
position,
rotation,
onContextMenu,
@ -62,8 +64,8 @@ const Throughput: React.FC<ThroughputProps> = ({
duration: chartDuration,
name: widgetName,
} = useChartStore();
const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h");
const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
const [name, setName] = useState("Widget");
const [chartData, setChartData] = useState<{
labels: string[];

5
app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx
View File

@ -45,7 +45,10 @@ const ChartWidget: React.FC<WidgetProps> = ({ type, index, title }) => {
),
title,
panel: "top",
data: sampleData,
Data: {
measurements:{},
duration:'1h'
},
});
}}
onDragEnd={() => setDraggedAsset(null)}

9
app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx
View File

@ -61,20 +61,11 @@ const BarChartInput = (props: Props) => {
}, [selectedChartId.id]);
useEffect(() => {
setMeasurements(selections);
updateDuration(duration);
updateName(widgetName);
console.log('Initial set state');
}, []);
// Sync Zustand state when component mounts
useEffect(() => {
setMeasurements(selections);
updateDuration(duration);
updateName(widgetName);
console.log('change set state');
}, [selections, duration, widgetName]);

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

@ -5,6 +5,7 @@ import {
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";
@ -30,6 +31,7 @@ import {
update3dWidget,
update3dWidgetRotation,
} from "../../../services/realTimeVisulization/zoneData/update3dWidget";
import { useWidgetStore } from "../../../store/useWidgetStore";
type WidgetData = {
id: string;
type: string;
@ -57,6 +59,8 @@ export default function Dropped3dWidgets() {
const planeIntersect = useRef(new THREE.Vector3());
const rotationStartRef = useRef<[number, number, number]>([0, 0, 0]);
const mouseStartRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
const { setSelectedChartId } = useWidgetStore();
const { measurements, duration} = useChartStore();
const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];
useEffect(() => {
@ -240,8 +244,10 @@ export default function Dropped3dWidgets() {
const widgetToDuplicate = activeZoneWidgets.find(
(w: WidgetData) => w.id === rightClickSelected
);
console.log("3d widget to duplecate", widgetToDuplicate);
if (!widgetToDuplicate) return;
const newWidget: WidgetData = {
const newWidget: any = {
id: generateUniqueId(),
type: widgetToDuplicate.type,
position: [
@ -250,6 +256,10 @@ export default function Dropped3dWidgets() {
widgetToDuplicate.position[2] + 0.5,
],
rotation: widgetToDuplicate.rotation || [0, 0, 0],
Data:{
measurements: measurements,
duration: duration
},
};
const adding3dWidget = {
organization: organization,
@ -497,8 +507,9 @@ export default function Dropped3dWidgets() {
return (
<>
{activeZoneWidgets.map(
({ id, type, position, rotation = [0, 0, 0] }: WidgetData) => {
({ id, type, position, Data, rotation = [0, 0, 0] }: any) => {
const handleRightClick = (event: React.MouseEvent, id: string) => {
setSelectedChartId({ id: id, type: type })
event.preventDefault();
const canvasElement = document.getElementById(
"real-time-vis-canvas"
@ -522,6 +533,7 @@ export default function Dropped3dWidgets() {
type={type}
position={position}
rotation={rotation}
Data={Data}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);
@ -533,6 +545,7 @@ export default function Dropped3dWidgets() {
type={type}
position={position}
rotation={rotation}
Data={Data}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);
@ -544,6 +557,7 @@ export default function Dropped3dWidgets() {
type={type}
position={position}
rotation={rotation}
Data={Data}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);
@ -555,6 +569,7 @@ export default function Dropped3dWidgets() {
type={type}
position={position}
rotation={rotation}
Data={Data}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);

2
app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx
View File

@ -160,6 +160,8 @@ const LineGraphComponent = ({
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)

4
app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx
View File

@ -12,7 +12,7 @@ const TotalCardComponent = ({
}: any) => {
const [ progress, setProgress ] = useState<any>(0)
const [measurements, setmeasurements] = useState<any>({});
const [measurements, setmeasurements] = useState<any>(object?.Data?.measurements ? object.Data.measurements : {});
const [duration, setDuration] = useState("1h")
const [name, setName] = useState(object.header ? object.header : '')
const email = localStorage.getItem("email") || "";
@ -61,6 +61,8 @@ const TotalCardComponent = ({
try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${object?.id}/${organization}`);
if (response.status === 200) {
console.log(response);
setmeasurements(response.data.Data.measurements)
setDuration(response.data.Data.duration)
setName(response.data.header)

11
app/src/store/useDroppedObjectsStore.ts
View File

@ -1,6 +1,7 @@
import { create } from "zustand";
import { addingFloatingWidgets } from "../services/realTimeVisulization/zoneData/addFloatingWidgets";
import { useSocketStore } from "./store";
import useChartStore from "./useChartStore";
type DroppedObject = {
className: string;
@ -96,7 +97,10 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
const state = useDroppedObjectsStore.getState(); // Get the current state
const zone = state.zones[zoneName];
let socketState = useSocketStore.getState();
let iotData = useChartStore.getState();
let visualizationSocket = socketState.visualizationSocket;
let iotMeasurements = iotData.flotingMeasurements;
let iotDuration = iotData.flotingDuration;
if (!zone) return;
@ -109,6 +113,10 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
// Create a shallow copy of the object with a unique ID and slightly adjusted position
const duplicatedObject: DroppedObject = {
...originalObject,
Data:{
measurements: iotMeasurements,
duration: iotDuration,
},
id: `${originalObject.id}-copy-${Date.now()}`, // Unique ID
position: {
...originalObject.position,
@ -122,7 +130,8 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
: originalObject.position.left,
},
};
console.log("duplicated object",duplicatedObject);
let duplicateFloatingWidget = {
organization: organization,
widget: duplicatedObject,

18
app/src/store/useWidgetStore.ts
View File

@ -8,22 +8,8 @@ export interface Widget {
fontFamily?: string;
fontSize?: string;
fontWeight?: string;
data: {
// Chart data
labels?: string[];
datasets?: Array<{
data: number[];
backgroundColor: string;
borderColor: string;
borderWidth: number;
}>;
// Progress card data
stocks?: Array<{
key: string;
value: number;
description: string;
}>;
};
data?: any;
Data?:any;
}
interface WidgetStore {