diff --git a/app/.env b/app/.env index 47176f6..c50d174 100644 --- a/app/.env +++ b/app/.env @@ -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 diff --git a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx index a6343ed..b56350a 100644 --- a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx +++ b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx @@ -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 = ({ id, type, + Data, position, rotation, onContextMenu, @@ -48,8 +50,8 @@ const ProductionCapacity: React.FC = ({ duration: chartDuration, name: widgetName, } = useChartStore(); - const [measurements, setmeasurements] = useState({}); - const [duration, setDuration] = useState("1h"); + const [measurements, setmeasurements] = useState(Data?.measurements ? Data.measurements : {}); + const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h"); const [name, setName] = useState("Widget"); const [chartData, setChartData] = useState<{ labels: string[]; diff --git a/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx b/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx index 3d5d291..86734f7 100644 --- a/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx +++ b/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx @@ -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 = ({ id, type, + Data, position, rotation, onContextMenu, @@ -59,8 +61,8 @@ const ReturnOfInvestment: React.FC = ({ duration: chartDuration, name: widgetName, } = useChartStore(); - const [measurements, setmeasurements] = useState({}); - const [duration, setDuration] = useState("1h"); + const [measurements, setmeasurements] = useState(Data?.measurements ? Data.measurements : {}); + const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h"); const [name, setName] = useState("Widget"); const [chartData, setChartData] = useState<{ labels: string[]; diff --git a/app/src/components/layout/3D-cards/cards/StateWorking.tsx b/app/src/components/layout/3D-cards/cards/StateWorking.tsx index 829d7bf..d6520ff 100644 --- a/app/src/components/layout/3D-cards/cards/StateWorking.tsx +++ b/app/src/components/layout/3D-cards/cards/StateWorking.tsx @@ -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 = ({ id, type, + Data, position, rotation, onContextMenu, @@ -26,8 +28,8 @@ const StateWorking: React.FC = ({ duration: chartDuration, name: widgetName, } = useChartStore(); - const [measurements, setmeasurements] = useState({}); - const [duration, setDuration] = useState("1h"); + const [measurements, setmeasurements] = useState(Data?.measurements ? Data.measurements : {}); + const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h"); const [name, setName] = useState("Widget"); const [datas, setDatas] = useState({}); const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; diff --git a/app/src/components/layout/3D-cards/cards/Throughput.tsx b/app/src/components/layout/3D-cards/cards/Throughput.tsx index a99d171..28437bf 100644 --- a/app/src/components/layout/3D-cards/cards/Throughput.tsx +++ b/app/src/components/layout/3D-cards/cards/Throughput.tsx @@ -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 = ({ id, type, + Data, position, rotation, onContextMenu, @@ -62,8 +64,8 @@ const Throughput: React.FC = ({ duration: chartDuration, name: widgetName, } = useChartStore(); - const [measurements, setmeasurements] = useState({}); - const [duration, setDuration] = useState("1h"); + const [measurements, setmeasurements] = useState(Data?.measurements ? Data.measurements : {}); + const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h"); const [name, setName] = useState("Widget"); const [chartData, setChartData] = useState<{ labels: string[]; diff --git a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx index c411ffd..9e6e65e 100644 --- a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx +++ b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx @@ -45,7 +45,10 @@ const ChartWidget: React.FC = ({ type, index, title }) => { ), title, panel: "top", - data: sampleData, + Data: { + measurements:{}, + duration:'1h' + }, }); }} onDragEnd={() => setDraggedAsset(null)} diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx index 7d55396..e5debde 100644 --- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx +++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx @@ -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]); diff --git a/app/src/components/ui/componets/Dropped3dWidget.tsx b/app/src/components/ui/componets/Dropped3dWidget.tsx index 5dbdb5b..bba3013 100644 --- a/app/src/components/ui/componets/Dropped3dWidget.tsx +++ b/app/src/components/ui/componets/Dropped3dWidget.tsx @@ -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)} /> ); diff --git a/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx b/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx index c7f7252..8d4d4e9 100644 --- a/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx +++ b/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx @@ -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) diff --git a/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx b/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx index da03fce..56f70f4 100644 --- a/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx +++ b/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx @@ -12,7 +12,7 @@ const TotalCardComponent = ({ }: any) => { const [ progress, setProgress ] = useState(0) - const [measurements, setmeasurements] = useState({}); + const [measurements, setmeasurements] = useState(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) diff --git a/app/src/store/useDroppedObjectsStore.ts b/app/src/store/useDroppedObjectsStore.ts index 8f0067e..ca39d9f 100644 --- a/app/src/store/useDroppedObjectsStore.ts +++ b/app/src/store/useDroppedObjectsStore.ts @@ -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((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((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((set) => ({ : originalObject.position.left, }, }; - + console.log("duplicated object",duplicatedObject); + let duplicateFloatingWidget = { organization: organization, widget: duplicatedObject, diff --git a/app/src/store/useWidgetStore.ts b/app/src/store/useWidgetStore.ts index 047b57b..2d73c77 100644 --- a/app/src/store/useWidgetStore.ts +++ b/app/src/store/useWidgetStore.ts @@ -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 {