155 lines
5.6 KiB
TypeScript
155 lines
5.6 KiB
TypeScript
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<StateWorkingProps> = ({ id, type, position, onContextMenu }) => {
|
|
const { selectedChartId, setSelectedChartId } = useWidgetStore();
|
|
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
|
|
const [measurements, setmeasurements] = useState<any>({});
|
|
const [duration, setDuration] = useState("1h")
|
|
const [name, setName] = useState("Widget")
|
|
const [datas, setDatas] = useState<any>({});
|
|
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 (
|
|
<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"
|
|
onClick={() => setSelectedChartId({ id: id, type: type })}
|
|
onContextMenu={onContextMenu}
|
|
>
|
|
<div className="header-wrapper">
|
|
<div className="header">
|
|
<span>State</span>
|
|
<span>
|
|
{datas?.input1 ? datas.input1 : 'input1'} <span>.</span>
|
|
</span>
|
|
</div>
|
|
<div className="img">
|
|
{/* <img src={image} alt="" /> */}
|
|
</div>
|
|
</div>
|
|
{/* Data */}
|
|
<div className="data-wrapper">
|
|
{/* {datas.map((data, index) => (
|
|
<div className="data-table" key={index}>
|
|
<div className="data">{data.key}</div>
|
|
<div className="key">{data.value}</div>
|
|
</div>
|
|
))} */}
|
|
<div className="data-table">
|
|
<div className="data">{measurements?.input2?.fields ? measurements.input2.fields : 'input2'}</div>
|
|
<div className="key">{datas?.input2 ? datas.input2 : 'data'}</div>
|
|
</div>
|
|
<div className="data-table">
|
|
<div className="data">{measurements?.input3?.fields ? measurements.input3.fields : 'input3'}</div>
|
|
<div className="key">{datas?.input3 ? datas.input3 : 'data'}</div>
|
|
</div>
|
|
<div className="data-table">
|
|
<div className="data">{measurements?.input4?.fields ? measurements.input4.fields : 'input4'}</div>
|
|
<div className="key">{datas?.input4 ? datas.input4 : 'data'}</div>
|
|
</div>
|
|
<div className="data-table">
|
|
<div className="data">{measurements?.input5?.fields ? measurements.input5.fields : 'input5'}</div>
|
|
<div className="key">{datas?.input5 ? datas.input5 : 'data'}</div>
|
|
</div>
|
|
<div className="data-table">
|
|
<div className="data">{measurements?.input6?.fields ? measurements.input6.fields : 'input6'}</div>
|
|
<div className="key">{datas?.input6 ? datas.input6 : 'data'}</div>
|
|
</div>
|
|
<div className="data-table">
|
|
<div className="data">{measurements?.input7?.fields ? measurements.input7.fields : 'input7'}</div>
|
|
<div className="key">{datas?.input7 ? datas.input7 : 'data'}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Html>
|
|
);
|
|
};
|
|
|
|
export default StateWorking;
|
|
|
|
|