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 image from "../../../../assets/image/temp/image.png"; interface StateWorkingProps { id: string; 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, }) => { const { selectedChartId, setSelectedChartId } = useWidgetStore(); const { measurements: chartMeasurements, duration: chartDuration, name: widgetName, } = useChartStore(); 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; const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0]; // const datas = [ // { key: "Oil Tank:", value: "24/341" }, // { key: "Oil Refin:", value: 36.023 }, // { key: "Transmission:", value: 36.023 }, // { key: "Fuel:", value: 36732 }, // { key: "Power:", value: 1300 }, // { key: "Time:", value: 13 - 9 - 2023 }, // ]; 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 responseData = response; setDatas(responseData); }); return () => { socket.off("lastOutput"); socket.emit("stop_stream"); // Stop streaming when component unmounts socket.disconnect(); }; }, [measurements, duration, iotApiUrl]); const fetchSavedInputes = async () => { if (id !== "") { try { const response = await axios.get( `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${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]); const rotationDegrees = { x: (rotation[0] * 180) / Math.PI, y: (rotation[1] * 180) / Math.PI, z: (rotation[2] * 180) / Math.PI, }; const transformStyle = { transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`, }; return (

setSelectedChartId({ id: id, type: type })} onContextMenu={onContextMenu} >

State {datas?.input1 ? datas.input1 : "input1"} .

{/*

*/}

{/* Data */}

{/* {datas.map((data, index) => (

{data.key}

{data.value}

))} */}

{measurements?.input2?.fields ? measurements.input2.fields : "input2"}

{datas?.input2 ? datas.input2 : "data"}

{measurements?.input3?.fields ? measurements.input3.fields : "input3"}

{datas?.input3 ? datas.input3 : "data"}

{measurements?.input4?.fields ? measurements.input4.fields : "input4"}

{datas?.input4 ? datas.input4 : "data"}

{measurements?.input5?.fields ? measurements.input5.fields : "input5"}

{datas?.input5 ? datas.input5 : "data"}

{measurements?.input6?.fields ? measurements.input6.fields : "input6"}

{datas?.input6 ? datas.input6 : "data"}

{measurements?.input7?.fields ? measurements.input7.fields : "input7"}

{datas?.input7 ? datas.input7 : "data"}

); }; export default StateWorking;