203 lines
6.6 KiB
TypeScript
203 lines
6.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];
|
|
rotation: [number, number, number];
|
|
Data?:any;
|
|
onContextMenu?: (event: React.MouseEvent) => void;
|
|
}
|
|
const StateWorking: React.FC<StateWorkingProps> = ({
|
|
id,
|
|
type,
|
|
Data,
|
|
position,
|
|
rotation,
|
|
onContextMenu,
|
|
}) => {
|
|
const { selectedChartId, setSelectedChartId } = useWidgetStore();
|
|
const {
|
|
measurements: chartMeasurements,
|
|
duration: chartDuration,
|
|
name: widgetName,
|
|
} = useChartStore();
|
|
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;
|
|
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 (
|
|
<Html
|
|
position={[position[0], position[1], position[2]]}
|
|
scale={[0.5, 0.5, 0.5]}
|
|
transform
|
|
zIndexRange={[1, 0]}
|
|
sprite
|
|
style={{
|
|
transform: transformStyle.transform,
|
|
transformStyle: "preserve-3d",
|
|
transition: "transform 0.1s ease-out",
|
|
}}
|
|
>
|
|
<div
|
|
className={`stateWorking-wrapper card ${
|
|
selectedChartId?.id === id ? "activeChart" : ""
|
|
}`}
|
|
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;
|