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]; onContextMenu?: (event: React.MouseEvent) => void; } const StateWorking: React.FC = ({ id, type, position, onContextMenu }) => { const { selectedChartId, setSelectedChartId } = useWidgetStore(); const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore(); const [measurements, setmeasurements] = useState({}); const [duration, setDuration] = useState("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; console.log("responceeeeeeeeeee", 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); } } } console.log("dataaaaa", datas); useEffect(() => { fetchSavedInputes(); }, []); useEffect(() => { if (selectedChartId?.id === id) { fetchSavedInputes(); } } , [chartMeasurements, chartDuration, widgetName]) 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;