Merge remote-tracking branch 'origin/main' into ui
This commit is contained in:
commit
70aeee068f
|
|
@ -1,5 +1,5 @@
|
|||
import { Html } from "@react-three/drei";
|
||||
import React from "react";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { Bar } from "react-chartjs-2";
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
|
|
@ -11,6 +11,11 @@ import {
|
|||
Legend,
|
||||
TooltipItem, // Import TooltipItem for typing
|
||||
} from "chart.js";
|
||||
import { ThroughputIcon } from "../../../icons/3dChartIcons";
|
||||
import { useWidgetStore } from "../../../../store/useWidgetStore";
|
||||
import useChartStore from "../../../../store/useChartStore";
|
||||
import axios from "axios";
|
||||
import io from "socket.io-client";
|
||||
|
||||
// Register ChartJS components
|
||||
ChartJS.register(
|
||||
|
|
@ -22,12 +27,28 @@ ChartJS.register(
|
|||
Legend
|
||||
);
|
||||
interface ProductionCapacityProps {
|
||||
id: string;
|
||||
type: string;
|
||||
position: [number, number, number];
|
||||
}
|
||||
|
||||
const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ position }) => {
|
||||
const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ id, type, position }) => {
|
||||
|
||||
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 [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
|
||||
labels: [],
|
||||
datasets: [],
|
||||
});
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
// Chart data for a week
|
||||
const chartData = {
|
||||
const defaultChartData = {
|
||||
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // Days of the week
|
||||
datasets: [
|
||||
{
|
||||
|
|
@ -78,13 +99,94 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ position }) =>
|
|||
},
|
||||
};
|
||||
|
||||
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("lineInput", inputData);
|
||||
};
|
||||
|
||||
socket.on("connect", startStream);
|
||||
|
||||
socket.on("lineOutput", (response) => {
|
||||
const responseData = response.data;
|
||||
|
||||
// Extract timestamps and values
|
||||
const labels = responseData.time;
|
||||
const datasets = Object.keys(measurements).map((key) => {
|
||||
const measurement = measurements[key];
|
||||
const datasetKey = `${measurement.name}.${measurement.fields}`;
|
||||
return {
|
||||
label: datasetKey,
|
||||
data: responseData[datasetKey]?.values ?? [],
|
||||
backgroundColor: "#6f42c1", // Theme color
|
||||
borderColor: "#6f42c1",
|
||||
borderWidth: 1,
|
||||
borderRadius: 8, // Rounded corners for the bars
|
||||
borderSkipped: false, // Ensure all corners are rounded
|
||||
};
|
||||
});
|
||||
|
||||
setChartData({ labels, datasets });
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.off("lineOutput");
|
||||
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])
|
||||
|
||||
return (
|
||||
<Html position={[position[0], position[1], position[2]]}
|
||||
scale={[0.5, 0.5, 0.5]}
|
||||
transform
|
||||
zIndexRange={[1,0]}
|
||||
sprite>
|
||||
<div className="productionCapacity-wrapper card">
|
||||
<div className="productionCapacity-wrapper card"
|
||||
onClick={
|
||||
() => setSelectedChartId({
|
||||
id: id,
|
||||
type: type
|
||||
})
|
||||
}>
|
||||
<div className="headeproductionCapacityr-wrapper">
|
||||
<div className="header">Production Capacity</div>
|
||||
<div className="production-capacity">
|
||||
|
|
@ -105,7 +207,7 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ position }) =>
|
|||
</div>{" "}
|
||||
<div className="bar-chart charts">
|
||||
{/* Bar Chart */}
|
||||
<Bar data={chartData} options={chartOptions} />
|
||||
<Bar data={Object.keys(measurements).length > 0 ? chartData : defaultChartData } options={chartOptions} />
|
||||
</div>
|
||||
</div>
|
||||
</Html>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Html } from "@react-three/drei";
|
||||
import React from "react";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
|
|
@ -12,6 +12,10 @@ import {
|
|||
ChartOptions,
|
||||
} from "chart.js";
|
||||
import { WavyIcon } from "../../../icons/3dChartIcons";
|
||||
import { useWidgetStore } from "../../../../store/useWidgetStore";
|
||||
import useChartStore from "../../../../store/useChartStore";
|
||||
import axios from "axios";
|
||||
import io from "socket.io-client";
|
||||
|
||||
// Register Chart.js components
|
||||
ChartJS.register(
|
||||
|
|
@ -36,9 +40,24 @@ const SmoothLineGraphComponent: React.FC<SmoothLineGraphProps> = ({
|
|||
return <Line data={data} options={options} />;
|
||||
};
|
||||
interface ReturnOfInvestmentProps {
|
||||
id: string;
|
||||
type: string;
|
||||
position: [number, number, number];
|
||||
}
|
||||
const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ position }) => {
|
||||
const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, position }) => {
|
||||
|
||||
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 [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
|
||||
labels: [],
|
||||
datasets: [],
|
||||
});
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
// Improved sample data for the smooth curve graph (single day)
|
||||
const graphData: ChartData<"line"> = {
|
||||
labels: [
|
||||
|
|
@ -107,17 +126,100 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ position }) =>
|
|||
},
|
||||
};
|
||||
|
||||
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("lineInput", inputData);
|
||||
};
|
||||
|
||||
socket.on("connect", startStream);
|
||||
|
||||
socket.on("lineOutput", (response) => {
|
||||
const responseData = response.data;
|
||||
|
||||
// Extract timestamps and values
|
||||
const labels = responseData.time;
|
||||
const datasets = Object.keys(measurements).map((key, index) => {
|
||||
const measurement = measurements[key];
|
||||
const datasetKey = `${measurement.name}.${measurement.fields}`;
|
||||
return {
|
||||
label: datasetKey,
|
||||
data: responseData[datasetKey]?.values ?? [],
|
||||
borderColor: index === 0 ? "rgba(75, 192, 192, 1)": "rgba(255, 99, 132, 1)", // Light blue color
|
||||
backgroundColor: index === 0 ? "rgba(75, 192, 192, 0.2)": "rgba(255, 99, 132, 0.2)",
|
||||
fill: true,
|
||||
tension: 0.4, // Smooth curve effect
|
||||
pointRadius: 0, // Hide dots
|
||||
pointHoverRadius: 0, // Hide hover dots
|
||||
};
|
||||
});
|
||||
|
||||
setChartData({ labels, datasets });
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.off("lineOutput");
|
||||
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])
|
||||
|
||||
return (
|
||||
<Html position={[position[0], position[1], position[2]]}
|
||||
scale={[0.5, 0.5, 0.5]}
|
||||
transform
|
||||
zIndexRange={[1,0]}
|
||||
sprite>
|
||||
<div className="returnOfInvestment card">
|
||||
<div className="returnOfInvestment card"
|
||||
onClick={
|
||||
() => setSelectedChartId({
|
||||
id: id,
|
||||
type: type
|
||||
})
|
||||
}>
|
||||
<div className="header">Return of Investment</div>
|
||||
<div className="lineGraph charts">
|
||||
{/* Smooth curve graph with two datasets */}
|
||||
<SmoothLineGraphComponent data={graphData} options={graphOptions} />
|
||||
<SmoothLineGraphComponent data={Object.keys(measurements).length > 0 ? chartData : graphData} options={graphOptions} />
|
||||
</div>
|
||||
<div className="returns-wrapper">
|
||||
<div className="icon">
|
||||
|
|
|
|||
|
|
@ -1,29 +1,112 @@
|
|||
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];
|
||||
}
|
||||
const StateWorking: React.FC<StateWorkingProps> = ({ position }) => {
|
||||
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 },
|
||||
];
|
||||
const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position }) => {
|
||||
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">
|
||||
<div className="stateWorking-wrapper card"
|
||||
onClick={
|
||||
() => setSelectedChartId({
|
||||
id: id,
|
||||
type: type
|
||||
})
|
||||
}>
|
||||
<div className="header-wrapper">
|
||||
<div className="header">
|
||||
<span>State</span>
|
||||
<span>
|
||||
Working <span>.</span>
|
||||
{datas?.input1 ? datas.input1 : 'input1'} <span>.</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="img">
|
||||
|
|
@ -32,12 +115,36 @@ const StateWorking: React.FC<StateWorkingProps> = ({ position }) => {
|
|||
</div>
|
||||
{/* Data */}
|
||||
<div className="data-wrapper">
|
||||
{datas.map((data, index) => (
|
||||
{/* {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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Html } from "@react-three/drei";
|
||||
import React from "react";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
|
|
@ -14,6 +14,10 @@ import {
|
|||
ChartOptions,
|
||||
} from "chart.js";
|
||||
import { ThroughputIcon } from "../../../icons/3dChartIcons";
|
||||
import { useWidgetStore } from "../../../../store/useWidgetStore";
|
||||
import useChartStore from "../../../../store/useChartStore";
|
||||
import axios from "axios";
|
||||
import io from "socket.io-client";
|
||||
|
||||
// Register Chart.js components
|
||||
ChartJS.register(
|
||||
|
|
@ -38,10 +42,25 @@ const LineGraphComponent: React.FC<LineGraphProps> = ({ data, options }) => {
|
|||
};
|
||||
|
||||
interface ThroughputProps {
|
||||
id: string;
|
||||
type: string;
|
||||
position: [number, number, number];
|
||||
}
|
||||
|
||||
const Throughput: React.FC<ThroughputProps> = ({ position }) => {
|
||||
const Throughput: React.FC<ThroughputProps> = ({ id, type, position }) => {
|
||||
|
||||
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 [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
|
||||
labels: [],
|
||||
datasets: [],
|
||||
});
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
|
||||
// Sample data for the line graph
|
||||
const graphData: ChartData<"line"> = {
|
||||
|
|
@ -90,14 +109,94 @@ const Throughput: React.FC<ThroughputProps> = ({ position }) => {
|
|||
},
|
||||
};
|
||||
|
||||
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("lineInput", inputData);
|
||||
};
|
||||
|
||||
socket.on("connect", startStream);
|
||||
|
||||
socket.on("lineOutput", (response) => {
|
||||
const responseData = response.data;
|
||||
|
||||
// Extract timestamps and values
|
||||
const labels = responseData.time;
|
||||
const datasets = Object.keys(measurements).map((key) => {
|
||||
const measurement = measurements[key];
|
||||
const datasetKey = `${measurement.name}.${measurement.fields}`;
|
||||
return {
|
||||
label: datasetKey,
|
||||
data: responseData[datasetKey]?.values ?? [],
|
||||
borderColor: "rgba(75, 192, 192, 1)",
|
||||
backgroundColor: "rgba(75, 192, 192, 0.2)",
|
||||
fill: true,
|
||||
};
|
||||
});
|
||||
|
||||
setChartData({ labels, datasets });
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.off("lineOutput");
|
||||
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])
|
||||
|
||||
return (
|
||||
<Html position={[position[0], position[1], position[2]]}
|
||||
scale={[0.5, 0.5, 0.5]}
|
||||
transform
|
||||
zIndexRange={[1, 0]}
|
||||
sprite>
|
||||
<div className="throughput-wrapper">
|
||||
<div className="header">Throughput</div>
|
||||
<div className="throughput-wrapper"
|
||||
onClick={
|
||||
() => setSelectedChartId({
|
||||
id: id,
|
||||
type: type
|
||||
})
|
||||
}>
|
||||
<div className="header">{name}</div>
|
||||
<div className="display-value">
|
||||
<div className="left">
|
||||
<div className="icon">
|
||||
|
|
@ -120,7 +219,7 @@ const Throughput: React.FC<ThroughputProps> = ({ position }) => {
|
|||
</div>
|
||||
<div className="line-graph">
|
||||
{/* Line graph using react-chartjs-2 */}
|
||||
<LineGraphComponent data={graphData} options={graphOptions} />
|
||||
<LineGraphComponent data={Object.keys(measurements).length > 0 ? chartData : graphData} options={graphOptions} />
|
||||
</div>
|
||||
<div className="footer">
|
||||
You made an extra <span className="value">$1256.13</span> this month
|
||||
|
|
|
|||
|
|
@ -9,13 +9,14 @@ import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets
|
|||
import arch from "../../../assets/gltf-glb/arch.glb";
|
||||
import door from "../../../assets/gltf-glb/door.glb";
|
||||
import window from "../../../assets/gltf-glb/window.glb";
|
||||
import { fetchAssets } from "../../../services/marketplace/fetchAssets";
|
||||
import { useSelectedItem } from "../../../store/store";
|
||||
interface AssetProp {
|
||||
filename: string;
|
||||
thumbnail?: string;
|
||||
category: string;
|
||||
description?: string;
|
||||
tags?: string;
|
||||
tags: string;
|
||||
url?: String;
|
||||
uploadDate?: number;
|
||||
isArchieve?: boolean;
|
||||
|
|
@ -23,19 +24,58 @@ interface AssetProp {
|
|||
price?: number;
|
||||
CreatedBy?: String;
|
||||
}
|
||||
interface CategoryListProp {
|
||||
assetImage?: string;
|
||||
assetName?: string;
|
||||
categoryImage: string;
|
||||
category: string;
|
||||
}
|
||||
const Assets: React.FC = () => {
|
||||
const { setSelectedItem } = useSelectedItem();
|
||||
const [searchValue, setSearchValue] = useState<string>("");
|
||||
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
||||
const [filteredAsset, setFilteredAsset] = useState<AssetProp[]>([]);
|
||||
const [categoryAssets, setCategoryAssets] = useState<AssetProp[]>([]);
|
||||
const [filtereredAssets, setFiltereredAssets] = useState<AssetProp[]>([]);
|
||||
const [categoryList, setCategoryList] = useState<CategoryListProp[]>([]);
|
||||
|
||||
const handleSearchChange = (value: string) => {
|
||||
const searchTerm = value.toLowerCase();
|
||||
setSearchValue(value);
|
||||
setSelectedCategory(null); // Reset selected category when search changes
|
||||
};
|
||||
if (searchTerm.trim() === "" && !selectedCategory) {
|
||||
setCategoryAssets([]);
|
||||
return;
|
||||
}
|
||||
const filteredModels = filtereredAssets?.filter((model) => {
|
||||
if (!model?.tags || !model?.filename || !model?.category) return false;
|
||||
if (searchTerm.startsWith(":") && searchTerm.length > 1) {
|
||||
const tagSearchTerm = searchTerm.slice(1);
|
||||
return model.tags.toLowerCase().includes(tagSearchTerm);
|
||||
} else if (selectedCategory) {
|
||||
return (
|
||||
model.category
|
||||
.toLowerCase()
|
||||
.includes(selectedCategory.toLowerCase()) &&
|
||||
model.filename.toLowerCase().includes(searchTerm)
|
||||
);
|
||||
} else {
|
||||
return model.filename.toLowerCase().includes(searchTerm);
|
||||
}
|
||||
});
|
||||
|
||||
const categoryList = useMemo(
|
||||
() => [
|
||||
setCategoryAssets(filteredModels);
|
||||
};
|
||||
useEffect(() => {
|
||||
const filteredAssets = async () => {
|
||||
try {
|
||||
const filt = await fetchAssets();
|
||||
setFiltereredAssets(filt);
|
||||
} catch {}
|
||||
};
|
||||
filteredAssets();
|
||||
}, [categoryAssets]);
|
||||
|
||||
useEffect(() => {
|
||||
setCategoryList([
|
||||
{
|
||||
assetName: "Doors",
|
||||
assetImage: "",
|
||||
|
|
@ -58,10 +98,8 @@ const Assets: React.FC = () => {
|
|||
{ category: "Workstation", categoryImage: workStation },
|
||||
{ category: "Machines", categoryImage: machines },
|
||||
{ category: "Workers", categoryImage: worker },
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
]);
|
||||
}, []);
|
||||
const fetchCategoryAssets = async (asset: any) => {
|
||||
setSelectedCategory(asset);
|
||||
if (asset === "Feneration") {
|
||||
|
|
@ -70,60 +108,93 @@ const Assets: React.FC = () => {
|
|||
filename: "arch",
|
||||
category: "Feneration",
|
||||
url: arch,
|
||||
tags: "arch",
|
||||
},
|
||||
{
|
||||
filename: "door",
|
||||
category: "Feneration",
|
||||
url: door,
|
||||
thumbnail: feneration,
|
||||
tags: "door",
|
||||
},
|
||||
{
|
||||
filename: "window",
|
||||
category: "Feneration",
|
||||
url: window,
|
||||
tags: "window",
|
||||
},
|
||||
];
|
||||
setFilteredAsset(localAssets);
|
||||
setCategoryAssets(localAssets);
|
||||
setFiltereredAssets(localAssets);
|
||||
} else {
|
||||
try {
|
||||
const res = await getCategoryAsset(asset);
|
||||
setFilteredAsset(res || []); // Ensure it's always an array
|
||||
setCategoryAssets(res);
|
||||
setFiltereredAssets(res);
|
||||
} catch (error) {}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => { }, [filteredAsset]);
|
||||
return (
|
||||
<div className="assets-container">
|
||||
<Search onChange={handleSearchChange} />
|
||||
{searchValue ? (
|
||||
<div className="assets-result">
|
||||
<div className="assets-wrapper">
|
||||
<div className="searched-content">
|
||||
<p>Results for "{searchValue}"</p>
|
||||
<p>Results for {searchValue}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="assets-container">
|
||||
{categoryAssets &&
|
||||
categoryAssets?.map((asset: any, index: number) => (
|
||||
<div key={index} className="assets">
|
||||
<img
|
||||
src={asset?.thumbnail}
|
||||
alt={asset.filename}
|
||||
className="asset-image"
|
||||
/>
|
||||
|
||||
<div className="asset-name">
|
||||
{asset.filename
|
||||
.split("_")
|
||||
.map(
|
||||
(word: any) =>
|
||||
word.charAt(0).toUpperCase() + word.slice(1)
|
||||
)
|
||||
.join(" ")}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : selectedCategory ? (
|
||||
<div className="assets-wrapper">
|
||||
{/* Back Button */}
|
||||
<div
|
||||
className="back-button"
|
||||
onClick={() => {
|
||||
setSelectedCategory(null);
|
||||
setFilteredAsset([]);
|
||||
setCategoryAssets([]);
|
||||
}}
|
||||
>
|
||||
← Back
|
||||
</div>
|
||||
<h2>{selectedCategory}</h2>
|
||||
<div className="assets-container">
|
||||
{filteredAsset &&
|
||||
filteredAsset?.map((asset: any, index: number) => (
|
||||
{categoryAssets &&
|
||||
categoryAssets?.map((asset: any, index: number) => (
|
||||
<div key={index} className="assets">
|
||||
{asset?.thumbnail && (
|
||||
<img
|
||||
src={asset?.thumbnail}
|
||||
alt={asset.filename}
|
||||
className="asset-image"
|
||||
onPointerDown={() => setSelectedItem({ name: asset.filename, id: asset.modelfileID })}
|
||||
onPointerDown={() =>
|
||||
setSelectedItem({
|
||||
name: asset.filename,
|
||||
id: asset.modelfileID,
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="asset-name">
|
||||
{asset.filename
|
||||
.split("_")
|
||||
|
|
|
|||
|
|
@ -59,9 +59,11 @@ const ProgressBarWidget = ({
|
|||
id,
|
||||
title,
|
||||
data,
|
||||
type
|
||||
}: {
|
||||
id: string;
|
||||
title: string;
|
||||
type: string;
|
||||
data: any;
|
||||
}) => {
|
||||
const { setDraggedAsset } = useWidgetStore((state) => state);
|
||||
|
|
@ -72,7 +74,7 @@ const ProgressBarWidget = ({
|
|||
draggable
|
||||
onDragStart={() => {
|
||||
setDraggedAsset({
|
||||
type: "progress",
|
||||
type: type,
|
||||
id,
|
||||
title,
|
||||
panel: "top",
|
||||
|
|
@ -99,6 +101,7 @@ const ProgressBarWidget = ({
|
|||
</div>
|
||||
);
|
||||
};
|
||||
console.log(chartTypes, "chartTypes");
|
||||
|
||||
const Widgets2D = () => {
|
||||
return (
|
||||
|
|
@ -123,6 +126,7 @@ const Widgets2D = () => {
|
|||
{ key: "units", value: 1000, description: "Initial stock" },
|
||||
],
|
||||
}}
|
||||
type={"progress 1"}
|
||||
/>
|
||||
<ProgressBarWidget
|
||||
id="widget-8"
|
||||
|
|
@ -133,6 +137,7 @@ const Widgets2D = () => {
|
|||
{ key: "units", value: 500, description: "Additional stock" },
|
||||
],
|
||||
}}
|
||||
type={"progress 2"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ const RenderAnalysisInputs: React.FC<InputRendererProps> = ({
|
|||
label={preset.inputs.label}
|
||||
min={0}
|
||||
max={0}
|
||||
value={5}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import InputRange from "../../../ui/inputs/InputRange";
|
||||
import InputToggle from "../../../ui/inputs/InputToggle";
|
||||
import { AI_Icon } from "../../../icons/ExportCommonIcons";
|
||||
|
|
@ -6,17 +6,20 @@ import LabeledButton from "../../../ui/inputs/LabledButton";
|
|||
import {
|
||||
useAzimuth,
|
||||
useElevation,
|
||||
useLimitDistance,
|
||||
useRenderDistance,
|
||||
useResetCamera,
|
||||
useRoofVisibility,
|
||||
useSelectedWallItem,
|
||||
useShadows,
|
||||
useSocketStore,
|
||||
useTileDistance,
|
||||
useToggleView,
|
||||
useWallVisibility,
|
||||
} from "../../../../store/store";
|
||||
import { setEnvironment } from "../../../../services/factoryBuilder/environment/setEnvironment";
|
||||
import * as CONSTANTS from "../../../../types/world/worldConstants";
|
||||
import { validateBBox } from "@turf/helpers";
|
||||
const GlobalProperties: React.FC = () => {
|
||||
const { toggleView, setToggleView } = useToggleView();
|
||||
const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
|
||||
|
|
@ -27,26 +30,95 @@ const GlobalProperties: React.FC = () => {
|
|||
const { elevation, setElevation } = useElevation();
|
||||
const { azimuth, setAzimuth } = useAzimuth();
|
||||
const { renderDistance, setRenderDistance } = useRenderDistance();
|
||||
const { setPlaneValue, setGridValue, planeValue, gridValue } =
|
||||
useTileDistance();
|
||||
useEffect(() => {
|
||||
console.log(gridValue, planeValue, "values");
|
||||
}, [gridValue, planeValue]);
|
||||
const { socket } = useSocketStore();
|
||||
const [limitDistance, setLimitDistance] = useState(false);
|
||||
const [distance, setDistance] = useState<number>(30);
|
||||
const { limitDistance, setLimitDistance } = useLimitDistance();
|
||||
const [distance, setDistance] = useState<number>(40);
|
||||
useEffect(() => {}, [limitDistance]);
|
||||
|
||||
const [limitGridDistance, setLimitGridDistance] = useState(false);
|
||||
const [gridDistance, setGridDistance] = useState<number>(5);
|
||||
const [gridDistance, setGridDistance] = useState<number>(3);
|
||||
|
||||
function optimizeScene() {
|
||||
const optimizeScene = async (value: any) => {
|
||||
const email = localStorage.getItem("email");
|
||||
const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg";
|
||||
|
||||
const data = await setEnvironment(
|
||||
organization,
|
||||
localStorage.getItem("userId")!,
|
||||
wallVisibility,
|
||||
roofVisibility,
|
||||
shadows,
|
||||
30,
|
||||
true
|
||||
);
|
||||
setRenderDistance(30);
|
||||
setLimitDistance(true);
|
||||
setDistance(30);
|
||||
};
|
||||
const limitRenderDistance = async () => {
|
||||
const email = localStorage.getItem("email");
|
||||
const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg";
|
||||
|
||||
if (limitDistance) {
|
||||
let data = await setEnvironment(
|
||||
organization,
|
||||
localStorage.getItem("userId")!,
|
||||
wallVisibility,
|
||||
roofVisibility,
|
||||
shadows,
|
||||
75,
|
||||
!limitDistance
|
||||
);
|
||||
setRenderDistance(75);
|
||||
} else {
|
||||
let data = await setEnvironment(
|
||||
organization,
|
||||
localStorage.getItem("userId")!,
|
||||
wallVisibility,
|
||||
roofVisibility,
|
||||
shadows,
|
||||
renderDistance,
|
||||
!limitDistance
|
||||
);
|
||||
}
|
||||
setLimitDistance(!limitDistance);
|
||||
};
|
||||
|
||||
function updateDistance(value: number) {
|
||||
setDistance(value);
|
||||
setRenderDistance(value);
|
||||
}
|
||||
|
||||
function updateGridDistance(value: number) {
|
||||
setGridDistance(value);
|
||||
// setGridValue({ size: value * 100, divisions: (value * 100) / 4 });
|
||||
// setPlaneValue({ height: value * 100, width: value * 100 });
|
||||
}
|
||||
function updatedGrid(value: number) {
|
||||
console.log(" (value * 100) / 4 : ", (value * 100) / 4);
|
||||
setGridValue({ size: value * 100, divisions: (value * 100) / 4 });
|
||||
setPlaneValue({ height: value * 100, width: value * 100 });
|
||||
}
|
||||
|
||||
const updatedDist = async (value: number) => {
|
||||
const email = localStorage.getItem("email");
|
||||
const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg";
|
||||
setRenderDistance(value);
|
||||
// setDistance(value);
|
||||
const data = await setEnvironment(
|
||||
organization,
|
||||
localStorage.getItem("userId")!,
|
||||
wallVisibility,
|
||||
roofVisibility,
|
||||
shadows,
|
||||
value,
|
||||
limitDistance
|
||||
);
|
||||
};
|
||||
|
||||
// Function to toggle roof visibility
|
||||
const changeRoofVisibility = async () => {
|
||||
const email = localStorage.getItem("email");
|
||||
|
|
@ -58,7 +130,9 @@ const GlobalProperties: React.FC = () => {
|
|||
localStorage.getItem("userId")!,
|
||||
wallVisibility,
|
||||
!roofVisibility,
|
||||
shadows
|
||||
shadows,
|
||||
renderDistance,
|
||||
limitDistance
|
||||
);
|
||||
//
|
||||
|
||||
|
|
@ -85,7 +159,9 @@ const GlobalProperties: React.FC = () => {
|
|||
localStorage.getItem("userId")!,
|
||||
!wallVisibility,
|
||||
roofVisibility,
|
||||
shadows
|
||||
shadows,
|
||||
renderDistance,
|
||||
limitDistance
|
||||
);
|
||||
//
|
||||
|
||||
|
|
@ -112,7 +188,9 @@ const GlobalProperties: React.FC = () => {
|
|||
localStorage.getItem("userId")!,
|
||||
wallVisibility,
|
||||
roofVisibility,
|
||||
!shadows
|
||||
!shadows,
|
||||
renderDistance,
|
||||
limitDistance
|
||||
);
|
||||
//
|
||||
|
||||
|
|
@ -184,18 +262,24 @@ const GlobalProperties: React.FC = () => {
|
|||
inputKey="4"
|
||||
label="Limit Render Distance"
|
||||
value={limitDistance}
|
||||
onClick={() => {
|
||||
setLimitDistance(!limitDistance);
|
||||
// onClick={() => {
|
||||
// setLimitDistance(!limitDistance);
|
||||
// // setDistance(75);
|
||||
// // setRenderDistance(75);
|
||||
// }}
|
||||
onClick={async () => {
|
||||
await limitRenderDistance(); // Call the function here
|
||||
}}
|
||||
/>
|
||||
<InputRange
|
||||
label="Distance"
|
||||
disabled={!limitDistance}
|
||||
value={distance}
|
||||
key={"5"}
|
||||
value={renderDistance}
|
||||
min={CONSTANTS.distanceConfig.minDistance}
|
||||
max={CONSTANTS.distanceConfig.maxDistance}
|
||||
onChange={(value: number) => updateDistance(value)}
|
||||
onPointerUp={updatedDist}
|
||||
key={"6"}
|
||||
/>
|
||||
|
||||
<div className="split"></div>
|
||||
|
|
@ -213,7 +297,10 @@ const GlobalProperties: React.FC = () => {
|
|||
disabled={!limitGridDistance}
|
||||
value={gridDistance}
|
||||
key={"7"}
|
||||
min={1}
|
||||
max={5}
|
||||
onChange={(value: number) => updateGridDistance(value)}
|
||||
onPointerUp={updatedGrid}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,177 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import MultiLevelDropdown from "../../../../ui/inputs/MultiLevelDropDown";
|
||||
import { AddIcon } from "../../../../icons/ExportCommonIcons";
|
||||
import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
|
||||
import useChartStore from "../../../../../store/useChartStore";
|
||||
import { useSelectedZoneStore } from "../../../../../store/useZoneStore";
|
||||
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
||||
import axios from "axios";
|
||||
import RenameInput from "../../../../ui/inputs/RenameInput";
|
||||
|
||||
type Props = {};
|
||||
|
||||
const BarChartInput = (props: Props) => {
|
||||
const [widgetName, setWidgetName] = useState('Widget');
|
||||
const { setMeasurements, updateDuration, updateName } = useChartStore();
|
||||
const [duration, setDuration] = useState('1h')
|
||||
const [dropDowndata, setDropDownData] = useState({});
|
||||
const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>({});
|
||||
const { selectedZone } = useSelectedZoneStore();
|
||||
const { selectedChartId } = useWidgetStore();
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
const response = await axios.get(`http://${iotApiUrl}/getinput`);
|
||||
if (response.status === 200) {
|
||||
// console.log("dropdown data:", response.data);
|
||||
setDropDownData(response.data);
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
};
|
||||
fetchZoneData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSavedInputes = async () => {
|
||||
if (selectedChartId.id !== "") {
|
||||
try {
|
||||
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${selectedChartId.id}/${organization}`);
|
||||
if (response.status === 200) {
|
||||
setSelections(response.data.Data.measurements)
|
||||
setDuration(response.data.Data.duration)
|
||||
setWidgetName(response.data.widgetName)
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fetchSavedInputes();
|
||||
|
||||
}, [selectedChartId.id]);
|
||||
|
||||
// Sync Zustand state when component mounts
|
||||
useEffect(() => {
|
||||
setMeasurements(selections);
|
||||
updateDuration(duration);
|
||||
updateName(widgetName);
|
||||
}, [selections, duration, widgetName]);
|
||||
|
||||
|
||||
const sendInputes = async (inputMeasurement: any, inputDuration: any, inputName: any) => {
|
||||
try {
|
||||
const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget/save`, {
|
||||
organization: organization,
|
||||
zoneId: selectedZone.zoneId,
|
||||
widget: {
|
||||
id: selectedChartId.id,
|
||||
panel: selectedChartId.panel,
|
||||
widgetName: inputName,
|
||||
Data: {
|
||||
measurements: inputMeasurement,
|
||||
duration: inputDuration
|
||||
}
|
||||
}
|
||||
} as any);
|
||||
if (response.status === 200) {
|
||||
return true
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
return false
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSelect = async (inputKey: string, selectedData: { name: string; fields: string } | null) => {
|
||||
|
||||
// async() => {
|
||||
const newSelections = { ...selections };
|
||||
if (selectedData === null) {
|
||||
delete newSelections[inputKey];
|
||||
} else {
|
||||
newSelections[inputKey] = selectedData;
|
||||
}
|
||||
// setMeasurements(newSelections); // Update Zustand store
|
||||
console.log(newSelections);
|
||||
if (await sendInputes(newSelections, duration, widgetName)) {
|
||||
setSelections(newSelections);
|
||||
}
|
||||
// sendInputes(newSelections, duration); // Send data to server
|
||||
// return newSelections;
|
||||
// };
|
||||
};
|
||||
|
||||
const handleSelectDuration = async (option: string) => {
|
||||
if (await sendInputes(selections, option, widgetName)) {
|
||||
setDuration(option);
|
||||
}
|
||||
// setDuration(option);
|
||||
};
|
||||
|
||||
const handleNameChange = async (name:any) => {
|
||||
console.log('name change requested',name);
|
||||
|
||||
if (await sendInputes(selections, duration, name)) {
|
||||
setWidgetName(name);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="inputs-wrapper">
|
||||
<div className="datas">
|
||||
<div className="datas__label">Title</div>
|
||||
<RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
|
||||
</div>
|
||||
{[...Array(3)].map((_, index) => {
|
||||
const inputKey = `input${index + 1}`;
|
||||
return (
|
||||
<div key={index} className="datas">
|
||||
<div className="datas__label">Input {index + 1}</div>
|
||||
<div className="datas__class">
|
||||
<MultiLevelDropdown
|
||||
data={dropDowndata}
|
||||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]} // Load from Zustand
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div>
|
||||
<div className="datas">
|
||||
<div className="datas__label">Duration</div>
|
||||
<div className="datas__class">
|
||||
<RegularDropDown
|
||||
header={duration}
|
||||
options={["1h", "2h", "12h"]}
|
||||
onSelect={handleSelectDuration}
|
||||
search={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BarChartInput;
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import MultiLevelDropdown from "../../../../ui/inputs/MultiLevelDropDown";
|
||||
import { AddIcon } from "../../../../icons/ExportCommonIcons";
|
||||
import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
|
||||
import useChartStore from "../../../../../store/useChartStore";
|
||||
import { useSelectedZoneStore } from "../../../../../store/useZoneStore";
|
||||
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
||||
import axios from "axios";
|
||||
import RenameInput from "../../../../ui/inputs/RenameInput";
|
||||
|
||||
type Props = {};
|
||||
|
||||
const FleetEfficiencyInputComponent = (props: Props) => {
|
||||
const [widgetName, setWidgetName] = useState('Widget');
|
||||
const { setFlotingMeasurements, updateFlotingDuration, updateHeader } = useChartStore();
|
||||
const [duration, setDuration] = useState('1h')
|
||||
const [dropDowndata, setDropDownData] = useState({});
|
||||
const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>({});
|
||||
const { selectedZone } = useSelectedZoneStore();
|
||||
const { selectedChartId } = useWidgetStore();
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
const response = await axios.get(`http://${iotApiUrl}/getinput`);
|
||||
if (response.status === 200) {
|
||||
// console.log("dropdown data:", response.data);
|
||||
setDropDownData(response.data);
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
};
|
||||
fetchZoneData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSavedInputes = async () => {
|
||||
if (selectedChartId.id !== "") {
|
||||
try {
|
||||
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`);
|
||||
if (response.status === 200) {
|
||||
console.log(response.data);
|
||||
|
||||
setSelections(response.data.Data.measurements)
|
||||
setDuration(response.data.Data.duration)
|
||||
setWidgetName(response.data.header)
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fetchSavedInputes();
|
||||
|
||||
}, [selectedChartId.id]);
|
||||
|
||||
// Sync Zustand state when component mounts
|
||||
useEffect(() => {
|
||||
setFlotingMeasurements(selections);
|
||||
updateFlotingDuration(duration);
|
||||
updateHeader(widgetName);
|
||||
}, [selections, duration, widgetName]);
|
||||
|
||||
|
||||
const sendInputes = async (inputMeasurement: any, inputDuration: any, inputName: any) => {
|
||||
try {
|
||||
const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/floatwidget/save`, {
|
||||
organization: organization,
|
||||
zoneId: selectedZone.zoneId,
|
||||
widget: {
|
||||
id: selectedChartId.id,
|
||||
header: inputName,
|
||||
Data: {
|
||||
measurements: inputMeasurement,
|
||||
duration: inputDuration
|
||||
}
|
||||
}
|
||||
} as any);
|
||||
if (response.status === 200) {
|
||||
return true
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
return false
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSelect = async (inputKey: string, selectedData: { name: string; fields: string } | null) => {
|
||||
|
||||
// async() => {
|
||||
const newSelections = { ...selections };
|
||||
if (selectedData === null) {
|
||||
delete newSelections[inputKey];
|
||||
} else {
|
||||
newSelections[inputKey] = selectedData;
|
||||
}
|
||||
// setMeasurements(newSelections); // Update Zustand store
|
||||
console.log(newSelections);
|
||||
if (await sendInputes(newSelections, duration, widgetName)) {
|
||||
setSelections(newSelections);
|
||||
}
|
||||
// sendInputes(newSelections, duration); // Send data to server
|
||||
// return newSelections;
|
||||
// };
|
||||
};
|
||||
|
||||
const handleSelectDuration = async (option: string) => {
|
||||
if (await sendInputes(selections, option, widgetName)) {
|
||||
setDuration(option);
|
||||
}
|
||||
// setDuration(option);
|
||||
};
|
||||
|
||||
const handleNameChange = async (name:any) => {
|
||||
console.log('name change requested',name);
|
||||
|
||||
if (await sendInputes(selections, duration, name)) {
|
||||
setWidgetName(name);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="inputs-wrapper">
|
||||
<div className="datas">
|
||||
<div className="datas__label">Title</div>
|
||||
<RenameInput value={selectedChartId?.header || "untited"} onRename={handleNameChange}/>
|
||||
</div>
|
||||
{[...Array(1)].map((_, index) => {
|
||||
const inputKey = `input${index + 1}`;
|
||||
return (
|
||||
<div key={index} className="datas">
|
||||
<div className="datas__label">Input {index + 1}</div>
|
||||
<div className="datas__class">
|
||||
<MultiLevelDropdown
|
||||
data={dropDowndata}
|
||||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]} // Load from Zustand
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div>
|
||||
{/* <div className="datas">
|
||||
<div className="datas__label">Duration</div>
|
||||
<div className="datas__class">
|
||||
<RegularDropDown
|
||||
header={duration}
|
||||
options={["1h", "2h", "12h"]}
|
||||
onSelect={handleSelectDuration}
|
||||
search={false}
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FleetEfficiencyInputComponent;
|
||||
|
|
@ -12,7 +12,7 @@ type Props = {};
|
|||
|
||||
const FlotingWidgetInput = (props: Props) => {
|
||||
const [widgetName, setWidgetName] = useState('Widget');
|
||||
const { setMeasurements, updateDuration, updateName } = useChartStore();
|
||||
const { setFlotingMeasurements, updateFlotingDuration, updateHeader } = useChartStore();
|
||||
const [duration, setDuration] = useState('1h')
|
||||
const [dropDowndata, setDropDownData] = useState({});
|
||||
const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>({});
|
||||
|
|
@ -43,11 +43,13 @@ const FlotingWidgetInput = (props: Props) => {
|
|||
const fetchSavedInputes = async () => {
|
||||
if (selectedChartId.id !== "") {
|
||||
try {
|
||||
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${selectedChartId.id}/${organization}`);
|
||||
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`);
|
||||
if (response.status === 200) {
|
||||
console.log(response.data);
|
||||
|
||||
setSelections(response.data.Data.measurements)
|
||||
setDuration(response.data.Data.duration)
|
||||
setWidgetName(response.data.widgetName)
|
||||
setWidgetName(response.data.header)
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
|
|
@ -63,9 +65,9 @@ const FlotingWidgetInput = (props: Props) => {
|
|||
|
||||
// Sync Zustand state when component mounts
|
||||
useEffect(() => {
|
||||
setMeasurements(selections);
|
||||
updateDuration(duration);
|
||||
updateName(widgetName);
|
||||
setFlotingMeasurements(selections);
|
||||
updateFlotingDuration(duration);
|
||||
updateHeader(widgetName);
|
||||
}, [selections, duration, widgetName]);
|
||||
|
||||
|
||||
|
|
@ -76,8 +78,7 @@ const FlotingWidgetInput = (props: Props) => {
|
|||
zoneId: selectedZone.zoneId,
|
||||
widget: {
|
||||
id: selectedChartId.id,
|
||||
panel: selectedChartId.panel,
|
||||
widgetName: inputName,
|
||||
header: inputName,
|
||||
Data: {
|
||||
measurements: inputMeasurement,
|
||||
duration: inputDuration
|
||||
|
|
@ -135,7 +136,7 @@ const FlotingWidgetInput = (props: Props) => {
|
|||
<div className="inputs-wrapper">
|
||||
<div className="datas">
|
||||
<div className="datas__label">Title</div>
|
||||
<RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
|
||||
<RenameInput value={selectedChartId?.header || "untited"} onRename={handleNameChange}/>
|
||||
</div>
|
||||
{[...Array(6)].map((_, index) => {
|
||||
const inputKey = `input${index + 1}`;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,153 @@
|
|||
import React from 'react'
|
||||
import LineGrapInput from './LineGrapInput'
|
||||
import BarChartInput from './BarChartInput'
|
||||
import PieChartInput from './PieChartInput'
|
||||
import FlotingWidgetInput from './FlotingWidgetInput'
|
||||
import FleetEfficiencyInputComponent from './FleetEfficiencyInputComponent'
|
||||
import Progress1Input from './Progress1Input'
|
||||
import Progress2Input from './Progress2Input'
|
||||
import Widget2InputCard3D from './Widget2InputCard3D'
|
||||
import Widget3InputCard3D from './Widget3InputCard3D'
|
||||
import Widget4InputCard3D from './Widget4InputCard3D'
|
||||
import WarehouseThroughputInputComponent from './WarehouseThroughputInputComponent'
|
||||
import { useWidgetStore } from '../../../../../store/useWidgetStore'
|
||||
|
||||
const InputSelecterComponent = () => {
|
||||
const { selectedChartId } = useWidgetStore();
|
||||
console.log('selectedChartId:',selectedChartId);
|
||||
|
||||
|
||||
if (selectedChartId && selectedChartId.type && selectedChartId.type === 'bar' ) {
|
||||
return (
|
||||
<>
|
||||
<div className="sideBarHeader">2D Widget Input</div>
|
||||
<BarChartInput />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'line' ) {
|
||||
return (
|
||||
<>
|
||||
<div className="sideBarHeader">2D Widget Input</div>
|
||||
<LineGrapInput />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'pie' ) {
|
||||
return (
|
||||
<>
|
||||
<div className="sideBarHeader">2D Widget Input</div>
|
||||
<PieChartInput />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'doughnut' ) {
|
||||
return (
|
||||
<>
|
||||
<div className="sideBarHeader">2D Widget Input</div>
|
||||
<PieChartInput />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'polarArea' ) {
|
||||
return (
|
||||
<>
|
||||
<div className="sideBarHeader">2D Widget Input</div>
|
||||
<PieChartInput />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'progress 1' ) {
|
||||
return (
|
||||
<>
|
||||
<div className="sideBarHeader">2D Widget Input</div>
|
||||
<Progress1Input />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'progress 2' ) {
|
||||
return (
|
||||
<>
|
||||
<div className="sideBarHeader">2D Widget Input</div>
|
||||
<Progress2Input />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'warehouseThroughput floating' ) {
|
||||
return (
|
||||
<>
|
||||
<div className="sideBarHeader">Floting Widget Input</div>
|
||||
<WarehouseThroughputInputComponent />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'fleetEfficiency floating' ) {
|
||||
return (
|
||||
<>
|
||||
<div className="sideBarHeader">Floting Widget Input</div>
|
||||
<FleetEfficiencyInputComponent />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'floating total-card' ) {
|
||||
return (
|
||||
<>
|
||||
<div className="sideBarHeader">Floting Widget Input</div>
|
||||
<FleetEfficiencyInputComponent />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 1' ) {
|
||||
return (
|
||||
<>
|
||||
<div className="sideBarHeader">3D Widget Input</div>
|
||||
<Widget4InputCard3D />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 2' ) {
|
||||
return (
|
||||
<>
|
||||
<div className="sideBarHeader">3D Widget Input</div>
|
||||
<Widget2InputCard3D />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 3' ) {
|
||||
return (
|
||||
<>
|
||||
<div className="sideBarHeader">3D Widget Input</div>
|
||||
<Widget3InputCard3D />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 4' ) {
|
||||
return (
|
||||
<>
|
||||
<div className="sideBarHeader">3D Widget Input</div>
|
||||
<Widget4InputCard3D />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
else {
|
||||
return (
|
||||
<div>No chart selected</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default InputSelecterComponent
|
||||
|
|
@ -256,7 +256,7 @@ const LineGrapInput = (props: Props) => {
|
|||
<div className="datas__label">Title</div>
|
||||
<RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
|
||||
</div>
|
||||
{[...Array(6)].map((_, index) => {
|
||||
{[...Array(4)].map((_, index) => {
|
||||
const inputKey = `input${index + 1}`;
|
||||
return (
|
||||
<div key={index} className="datas">
|
||||
|
|
|
|||
|
|
@ -1,54 +1,143 @@
|
|||
import React, { useEffect, useState } from 'react'
|
||||
import MultiLevelDropdown from '../../../../ui/inputs/MultiLevelDropDown'
|
||||
import { AddIcon } from '../../../../icons/ExportCommonIcons'
|
||||
import axios from 'axios'
|
||||
import React, { useEffect, useState } from "react";
|
||||
import MultiLevelDropdown from "../../../../ui/inputs/MultiLevelDropDown";
|
||||
import { AddIcon } from "../../../../icons/ExportCommonIcons";
|
||||
import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
|
||||
import useChartStore from "../../../../../store/useChartStore";
|
||||
import { useSelectedZoneStore } from "../../../../../store/useZoneStore";
|
||||
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
||||
import axios from "axios";
|
||||
import RenameInput from "../../../../ui/inputs/RenameInput";
|
||||
|
||||
type Props = {}
|
||||
type Props = {};
|
||||
|
||||
const PieChartInput = (props: Props) => {
|
||||
const [dropDowndata, setDropDownData] = useState({})
|
||||
const [selections, setSelections] = useState<Record<string, {name: string, fields: string}>>({})
|
||||
const [widgetName, setWidgetName] = useState('Widget');
|
||||
const { setMeasurements, updateDuration, updateName } = useChartStore();
|
||||
const [duration, setDuration] = useState('1h')
|
||||
const [dropDowndata, setDropDownData] = useState({});
|
||||
const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>({});
|
||||
const { selectedZone } = useSelectedZoneStore();
|
||||
const { selectedChartId } = useWidgetStore();
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
const response = await axios.get(`http://${iotApiUrl}/getinput`);
|
||||
if (response.status === 200) {
|
||||
console.log('dropdown data:', response.data);
|
||||
setDropDownData(response.data)
|
||||
// console.log("dropdown data:", response.data);
|
||||
setDropDownData(response.data);
|
||||
} else {
|
||||
console.log('Unexpected response:', response);
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('There was an error!', error);
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
};
|
||||
fetchZoneData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {console.log(selections);
|
||||
},[selections])
|
||||
|
||||
const handleSelect = (inputKey: string, selectedData: {name: string, fields: string} | null) => {
|
||||
setSelections(prev => {
|
||||
if (selectedData === null) {
|
||||
const newSelections = {...prev};
|
||||
delete newSelections[inputKey];
|
||||
return newSelections;
|
||||
useEffect(() => {
|
||||
const fetchSavedInputes = async () => {
|
||||
if (selectedChartId.id !== "") {
|
||||
try {
|
||||
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${selectedChartId.id}/${organization}`);
|
||||
if (response.status === 200) {
|
||||
setSelections(response.data.Data.measurements)
|
||||
setDuration(response.data.Data.duration)
|
||||
setWidgetName(response.data.widgetName)
|
||||
} else {
|
||||
return {
|
||||
...prev,
|
||||
[inputKey]: selectedData
|
||||
};
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fetchSavedInputes();
|
||||
|
||||
}, [selectedChartId.id]);
|
||||
|
||||
// Sync Zustand state when component mounts
|
||||
useEffect(() => {
|
||||
setMeasurements(selections);
|
||||
updateDuration(duration);
|
||||
updateName(widgetName);
|
||||
}, [selections, duration, widgetName]);
|
||||
|
||||
|
||||
const sendInputes = async (inputMeasurement: any, inputDuration: any, inputName: any) => {
|
||||
try {
|
||||
const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget/save`, {
|
||||
organization: organization,
|
||||
zoneId: selectedZone.zoneId,
|
||||
widget: {
|
||||
id: selectedChartId.id,
|
||||
panel: selectedChartId.panel,
|
||||
widgetName: inputName,
|
||||
Data: {
|
||||
measurements: inputMeasurement,
|
||||
duration: inputDuration
|
||||
}
|
||||
}
|
||||
} as any);
|
||||
if (response.status === 200) {
|
||||
return true
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
return false
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSelect = async (inputKey: string, selectedData: { name: string; fields: string } | null) => {
|
||||
|
||||
// async() => {
|
||||
const newSelections = { ...selections };
|
||||
if (selectedData === null) {
|
||||
delete newSelections[inputKey];
|
||||
} else {
|
||||
newSelections[inputKey] = selectedData;
|
||||
}
|
||||
// setMeasurements(newSelections); // Update Zustand store
|
||||
console.log(newSelections);
|
||||
if (await sendInputes(newSelections, duration, widgetName)) {
|
||||
setSelections(newSelections);
|
||||
}
|
||||
// sendInputes(newSelections, duration); // Send data to server
|
||||
// return newSelections;
|
||||
// };
|
||||
};
|
||||
|
||||
const handleSelectDuration = async (option: string) => {
|
||||
if (await sendInputes(selections, option, widgetName)) {
|
||||
setDuration(option);
|
||||
}
|
||||
// setDuration(option);
|
||||
};
|
||||
|
||||
const handleNameChange = async (name:any) => {
|
||||
console.log('name change requested',name);
|
||||
|
||||
if (await sendInputes(selections, duration, name)) {
|
||||
setWidgetName(name);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="inputs-wrapper">
|
||||
{[...Array(3)].map((_, index) => {
|
||||
<div className="datas">
|
||||
<div className="datas__label">Title</div>
|
||||
<RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
|
||||
</div>
|
||||
{[...Array(2)].map((_, index) => {
|
||||
const inputKey = `input${index + 1}`;
|
||||
return (
|
||||
<div key={index} className="datas">
|
||||
|
|
@ -58,7 +147,7 @@ const PieChartInput = (props: Props) => {
|
|||
data={dropDowndata}
|
||||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]}
|
||||
selectedValue={selections[inputKey]} // Load from Zustand
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
|
|
@ -69,10 +158,20 @@ const PieChartInput = (props: Props) => {
|
|||
})}
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<div className="datas">
|
||||
<div className="datas__label">Duration</div>
|
||||
<div className="datas__class">
|
||||
<RegularDropDown
|
||||
header={duration}
|
||||
options={["1h", "2h", "12h"]}
|
||||
onSelect={handleSelectDuration}
|
||||
search={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default PieChartInput
|
||||
export default PieChartInput;
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import MultiLevelDropdown from "../../../../ui/inputs/MultiLevelDropDown";
|
||||
import { AddIcon } from "../../../../icons/ExportCommonIcons";
|
||||
import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
|
||||
import useChartStore from "../../../../../store/useChartStore";
|
||||
import { useSelectedZoneStore } from "../../../../../store/useZoneStore";
|
||||
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
||||
import axios from "axios";
|
||||
import RenameInput from "../../../../ui/inputs/RenameInput";
|
||||
|
||||
type Props = {};
|
||||
|
||||
const Progress1Input = (props: Props) => {
|
||||
const [widgetName, setWidgetName] = useState('Widget');
|
||||
const { setMeasurements, updateDuration, updateName } = useChartStore();
|
||||
const [duration, setDuration] = useState('1h')
|
||||
const [dropDowndata, setDropDownData] = useState({});
|
||||
const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>({});
|
||||
const { selectedZone } = useSelectedZoneStore();
|
||||
const { selectedChartId } = useWidgetStore();
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
const response = await axios.get(`http://${iotApiUrl}/getinput`);
|
||||
if (response.status === 200) {
|
||||
// console.log("dropdown data:", response.data);
|
||||
setDropDownData(response.data);
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
};
|
||||
fetchZoneData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSavedInputes = async () => {
|
||||
if (selectedChartId.id !== "") {
|
||||
try {
|
||||
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${selectedChartId.id}/${organization}`);
|
||||
if (response.status === 200) {
|
||||
setSelections(response.data.Data.measurements)
|
||||
setDuration(response.data.Data.duration)
|
||||
setWidgetName(response.data.widgetName)
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fetchSavedInputes();
|
||||
|
||||
}, [selectedChartId.id]);
|
||||
|
||||
// Sync Zustand state when component mounts
|
||||
useEffect(() => {
|
||||
setMeasurements(selections);
|
||||
updateDuration(duration);
|
||||
updateName(widgetName);
|
||||
}, [selections, duration, widgetName]);
|
||||
|
||||
|
||||
const sendInputes = async (inputMeasurement: any, inputDuration: any, inputName: any) => {
|
||||
try {
|
||||
const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget/save`, {
|
||||
organization: organization,
|
||||
zoneId: selectedZone.zoneId,
|
||||
widget: {
|
||||
id: selectedChartId.id,
|
||||
panel: selectedChartId.panel,
|
||||
widgetName: inputName,
|
||||
Data: {
|
||||
measurements: inputMeasurement,
|
||||
duration: inputDuration
|
||||
}
|
||||
}
|
||||
} as any);
|
||||
if (response.status === 200) {
|
||||
return true
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
return false
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSelect = async (inputKey: string, selectedData: { name: string; fields: string } | null) => {
|
||||
|
||||
// async() => {
|
||||
const newSelections = { ...selections };
|
||||
if (selectedData === null) {
|
||||
delete newSelections[inputKey];
|
||||
} else {
|
||||
newSelections[inputKey] = selectedData;
|
||||
}
|
||||
// setMeasurements(newSelections); // Update Zustand store
|
||||
console.log(newSelections);
|
||||
if (await sendInputes(newSelections, duration, widgetName)) {
|
||||
setSelections(newSelections);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectDuration = async (option: string) => {
|
||||
if (await sendInputes(selections, option, widgetName)) {
|
||||
setDuration(option);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNameChange = async (name:any) => {
|
||||
if (await sendInputes(selections, duration, name)) {
|
||||
setWidgetName(name);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="inputs-wrapper">
|
||||
<div className="datas">
|
||||
<div className="datas__label">Title</div>
|
||||
<RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
|
||||
</div>
|
||||
{[...Array(1)].map((_, index) => {
|
||||
const inputKey = `input${index + 1}`;
|
||||
return (
|
||||
<div key={index} className="datas">
|
||||
<div className="datas__label">Input {index + 1}</div>
|
||||
<div className="datas__class">
|
||||
<MultiLevelDropdown
|
||||
data={dropDowndata}
|
||||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]} // Load from Zustand
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{/* <div>
|
||||
<div className="datas">
|
||||
<div className="datas__label">Duration</div>
|
||||
<div className="datas__class">
|
||||
<RegularDropDown
|
||||
header={duration}
|
||||
options={["1h", "2h", "12h"]}
|
||||
onSelect={handleSelectDuration}
|
||||
search={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Progress1Input;
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import MultiLevelDropdown from "../../../../ui/inputs/MultiLevelDropDown";
|
||||
import { AddIcon } from "../../../../icons/ExportCommonIcons";
|
||||
import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
|
||||
import useChartStore from "../../../../../store/useChartStore";
|
||||
import { useSelectedZoneStore } from "../../../../../store/useZoneStore";
|
||||
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
||||
import axios from "axios";
|
||||
import RenameInput from "../../../../ui/inputs/RenameInput";
|
||||
|
||||
type Props = {};
|
||||
|
||||
const Progress2Input = (props: Props) => {
|
||||
const [widgetName, setWidgetName] = useState('Widget');
|
||||
const { setMeasurements, updateDuration, updateName } = useChartStore();
|
||||
const [duration, setDuration] = useState('1h')
|
||||
const [dropDowndata, setDropDownData] = useState({});
|
||||
const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>({});
|
||||
const { selectedZone } = useSelectedZoneStore();
|
||||
const { selectedChartId } = useWidgetStore();
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
const response = await axios.get(`http://${iotApiUrl}/getinput`);
|
||||
if (response.status === 200) {
|
||||
// console.log("dropdown data:", response.data);
|
||||
setDropDownData(response.data);
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
};
|
||||
fetchZoneData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSavedInputes = async () => {
|
||||
if (selectedChartId.id !== "") {
|
||||
try {
|
||||
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${selectedChartId.id}/${organization}`);
|
||||
if (response.status === 200) {
|
||||
setSelections(response.data.Data.measurements)
|
||||
setDuration(response.data.Data.duration)
|
||||
setWidgetName(response.data.widgetName)
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fetchSavedInputes();
|
||||
|
||||
}, [selectedChartId.id]);
|
||||
|
||||
// Sync Zustand state when component mounts
|
||||
useEffect(() => {
|
||||
setMeasurements(selections);
|
||||
updateDuration(duration);
|
||||
updateName(widgetName);
|
||||
}, [selections, duration, widgetName]);
|
||||
|
||||
|
||||
const sendInputes = async (inputMeasurement: any, inputDuration: any, inputName: any) => {
|
||||
try {
|
||||
const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget/save`, {
|
||||
organization: organization,
|
||||
zoneId: selectedZone.zoneId,
|
||||
widget: {
|
||||
id: selectedChartId.id,
|
||||
panel: selectedChartId.panel,
|
||||
widgetName: inputName,
|
||||
Data: {
|
||||
measurements: inputMeasurement,
|
||||
duration: inputDuration
|
||||
}
|
||||
}
|
||||
} as any);
|
||||
if (response.status === 200) {
|
||||
return true
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
return false
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSelect = async (inputKey: string, selectedData: { name: string; fields: string } | null) => {
|
||||
|
||||
// async() => {
|
||||
const newSelections = { ...selections };
|
||||
if (selectedData === null) {
|
||||
delete newSelections[inputKey];
|
||||
} else {
|
||||
newSelections[inputKey] = selectedData;
|
||||
}
|
||||
// setMeasurements(newSelections); // Update Zustand store
|
||||
console.log(newSelections);
|
||||
if (await sendInputes(newSelections, duration, widgetName)) {
|
||||
setSelections(newSelections);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectDuration = async (option: string) => {
|
||||
if (await sendInputes(selections, option, widgetName)) {
|
||||
setDuration(option);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNameChange = async (name:any) => {
|
||||
if (await sendInputes(selections, duration, name)) {
|
||||
setWidgetName(name);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="inputs-wrapper">
|
||||
<div className="datas">
|
||||
<div className="datas__label">Title</div>
|
||||
<RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
|
||||
</div>
|
||||
{[...Array(2)].map((_, index) => {
|
||||
const inputKey = `input${index + 1}`;
|
||||
return (
|
||||
<div key={index} className="datas">
|
||||
<div className="datas__label">Input {index + 1}</div>
|
||||
<div className="datas__class">
|
||||
<MultiLevelDropdown
|
||||
data={dropDowndata}
|
||||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]} // Load from Zustand
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{/* <div>
|
||||
<div className="datas">
|
||||
<div className="datas__label">Duration</div>
|
||||
<div className="datas__class">
|
||||
<RegularDropDown
|
||||
header={duration}
|
||||
options={["1h", "2h", "12h"]}
|
||||
onSelect={handleSelectDuration}
|
||||
search={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Progress2Input;
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import MultiLevelDropdown from "../../../../ui/inputs/MultiLevelDropDown";
|
||||
import { AddIcon } from "../../../../icons/ExportCommonIcons";
|
||||
import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
|
||||
import useChartStore from "../../../../../store/useChartStore";
|
||||
import { useSelectedZoneStore } from "../../../../../store/useZoneStore";
|
||||
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
||||
import axios from "axios";
|
||||
import RenameInput from "../../../../ui/inputs/RenameInput";
|
||||
|
||||
type Props = {};
|
||||
|
||||
const WarehouseThroughputInputComponent = (props: Props) => {
|
||||
const [widgetName, setWidgetName] = useState('Widget');
|
||||
const { setFlotingMeasurements, updateFlotingDuration, updateHeader } = useChartStore();
|
||||
const [duration, setDuration] = useState('1h')
|
||||
const [dropDowndata, setDropDownData] = useState({});
|
||||
const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>({});
|
||||
const { selectedZone } = useSelectedZoneStore();
|
||||
const { selectedChartId } = useWidgetStore();
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
const response = await axios.get(`http://${iotApiUrl}/getinput`);
|
||||
if (response.status === 200) {
|
||||
// console.log("dropdown data:", response.data);
|
||||
setDropDownData(response.data);
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
};
|
||||
fetchZoneData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSavedInputes = async () => {
|
||||
if (selectedChartId.id !== "") {
|
||||
try {
|
||||
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`);
|
||||
if (response.status === 200) {
|
||||
console.log(response.data);
|
||||
|
||||
setSelections(response.data.Data.measurements)
|
||||
setDuration(response.data.Data.duration)
|
||||
setWidgetName(response.data.header)
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fetchSavedInputes();
|
||||
|
||||
}, [selectedChartId.id]);
|
||||
|
||||
// Sync Zustand state when component mounts
|
||||
useEffect(() => {
|
||||
setFlotingMeasurements(selections);
|
||||
updateFlotingDuration(duration);
|
||||
updateHeader(widgetName);
|
||||
}, [selections, duration, widgetName]);
|
||||
|
||||
|
||||
const sendInputes = async (inputMeasurement: any, inputDuration: any, inputName: any) => {
|
||||
try {
|
||||
const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/floatwidget/save`, {
|
||||
organization: organization,
|
||||
zoneId: selectedZone.zoneId,
|
||||
widget: {
|
||||
id: selectedChartId.id,
|
||||
header: inputName,
|
||||
Data: {
|
||||
measurements: inputMeasurement,
|
||||
duration: inputDuration
|
||||
}
|
||||
}
|
||||
} as any);
|
||||
if (response.status === 200) {
|
||||
return true
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
return false
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSelect = async (inputKey: string, selectedData: { name: string; fields: string } | null) => {
|
||||
|
||||
// async() => {
|
||||
const newSelections = { ...selections };
|
||||
if (selectedData === null) {
|
||||
delete newSelections[inputKey];
|
||||
} else {
|
||||
newSelections[inputKey] = selectedData;
|
||||
}
|
||||
// setMeasurements(newSelections); // Update Zustand store
|
||||
console.log(newSelections);
|
||||
if (await sendInputes(newSelections, duration, widgetName)) {
|
||||
setSelections(newSelections);
|
||||
}
|
||||
// sendInputes(newSelections, duration); // Send data to server
|
||||
// return newSelections;
|
||||
// };
|
||||
};
|
||||
|
||||
const handleSelectDuration = async (option: string) => {
|
||||
if (await sendInputes(selections, option, widgetName)) {
|
||||
setDuration(option);
|
||||
}
|
||||
// setDuration(option);
|
||||
};
|
||||
|
||||
const handleNameChange = async (name:any) => {
|
||||
console.log('name change requested',name);
|
||||
|
||||
if (await sendInputes(selections, duration, name)) {
|
||||
setWidgetName(name);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="inputs-wrapper">
|
||||
<div className="datas">
|
||||
<div className="datas__label">Title</div>
|
||||
<RenameInput value={selectedChartId?.header || "untited"} onRename={handleNameChange}/>
|
||||
</div>
|
||||
{[...Array(1)].map((_, index) => {
|
||||
const inputKey = `input${index + 1}`;
|
||||
return (
|
||||
<div key={index} className="datas">
|
||||
<div className="datas__label">Input {index + 1}</div>
|
||||
<div className="datas__class">
|
||||
<MultiLevelDropdown
|
||||
data={dropDowndata}
|
||||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]} // Load from Zustand
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div>
|
||||
<div className="datas">
|
||||
<div className="datas__label">Duration</div>
|
||||
<div className="datas__class">
|
||||
<RegularDropDown
|
||||
header={duration}
|
||||
options={["1h", "2h", "12h"]}
|
||||
onSelect={handleSelectDuration}
|
||||
search={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WarehouseThroughputInputComponent;
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import MultiLevelDropdown from "../../../../ui/inputs/MultiLevelDropDown";
|
||||
import { AddIcon } from "../../../../icons/ExportCommonIcons";
|
||||
import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
|
||||
import useChartStore from "../../../../../store/useChartStore";
|
||||
import { useSelectedZoneStore } from "../../../../../store/useZoneStore";
|
||||
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
||||
import axios from "axios";
|
||||
import RenameInput from "../../../../ui/inputs/RenameInput";
|
||||
|
||||
type Props = {};
|
||||
|
||||
const Widget2InputCard3D = (props: Props) => {
|
||||
const { selectedChartId } = useWidgetStore();
|
||||
const [widgetName, setWidgetName] = useState("untited");
|
||||
const { setMeasurements, updateDuration, updateName } = useChartStore();
|
||||
const [duration, setDuration] = useState('1h')
|
||||
const [dropDowndata, setDropDownData] = useState({});
|
||||
const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>({});
|
||||
const { selectedZone } = useSelectedZoneStore();
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
console.log(selectedChartId);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
const response = await axios.get(`http://${iotApiUrl}/getinput`);
|
||||
if (response.status === 200) {
|
||||
// console.log("dropdown data:", response.data);
|
||||
setDropDownData(response.data);
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
};
|
||||
fetchZoneData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSavedInputes = async () => {
|
||||
if (selectedChartId.id !== "") {
|
||||
try {
|
||||
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${selectedChartId.id}/${organization}`);
|
||||
if (response.status === 200) {
|
||||
setSelections(response.data.Data.measurements)
|
||||
setDuration(response.data.Data.duration)
|
||||
setWidgetName(response.data.widgetName)
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fetchSavedInputes();
|
||||
|
||||
}, [selectedChartId.id]);
|
||||
|
||||
// Sync Zustand state when component mounts
|
||||
useEffect(() => {
|
||||
setMeasurements(selections);
|
||||
updateDuration(duration);
|
||||
updateName(widgetName);
|
||||
}, [selections, duration, widgetName]);
|
||||
|
||||
|
||||
const sendInputes = async (inputMeasurement: any, inputDuration: any, inputName: any) => {
|
||||
try {
|
||||
const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/3dwidget/save`, {
|
||||
organization: organization,
|
||||
zoneId: selectedZone.zoneId,
|
||||
widget: {
|
||||
id: selectedChartId.id,
|
||||
widgetName: inputName,
|
||||
Data: {
|
||||
measurements: inputMeasurement,
|
||||
duration: inputDuration
|
||||
}
|
||||
}
|
||||
} as any);
|
||||
if (response.status === 200) {
|
||||
return true
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
return false
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSelect = async (inputKey: string, selectedData: { name: string; fields: string } | null) => {
|
||||
|
||||
// async() => {
|
||||
const newSelections = { ...selections };
|
||||
if (selectedData === null) {
|
||||
delete newSelections[inputKey];
|
||||
} else {
|
||||
newSelections[inputKey] = selectedData;
|
||||
}
|
||||
// setMeasurements(newSelections); // Update Zustand store
|
||||
console.log(newSelections);
|
||||
if (await sendInputes(newSelections, duration, widgetName)) {
|
||||
setSelections(newSelections);
|
||||
}
|
||||
// sendInputes(newSelections, duration); // Send data to server
|
||||
// return newSelections;
|
||||
// };
|
||||
};
|
||||
|
||||
const handleSelectDuration = async (option: string) => {
|
||||
if (await sendInputes(selections, option, widgetName)) {
|
||||
setDuration(option);
|
||||
}
|
||||
// setDuration(option);
|
||||
};
|
||||
|
||||
const handleNameChange = async (name:any) => {
|
||||
console.log('name change requested',name);
|
||||
|
||||
if (await sendInputes(selections, duration, name)) {
|
||||
setWidgetName(name);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="inputs-wrapper">
|
||||
<div className="datas">
|
||||
<div className="datas__label">Title</div>
|
||||
<RenameInput value={widgetName} onRename={handleNameChange}/>
|
||||
</div>
|
||||
{[...Array(2)].map((_, index) => {
|
||||
const inputKey = `input${index + 1}`;
|
||||
return (
|
||||
<div key={index} className="datas">
|
||||
<div className="datas__label">Input {index + 1}</div>
|
||||
<div className="datas__class">
|
||||
<MultiLevelDropdown
|
||||
data={dropDowndata}
|
||||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]} // Load from Zustand
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Widget2InputCard3D;
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import MultiLevelDropdown from "../../../../ui/inputs/MultiLevelDropDown";
|
||||
import { AddIcon } from "../../../../icons/ExportCommonIcons";
|
||||
import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
|
||||
import useChartStore from "../../../../../store/useChartStore";
|
||||
import { useSelectedZoneStore } from "../../../../../store/useZoneStore";
|
||||
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
||||
import axios from "axios";
|
||||
import RenameInput from "../../../../ui/inputs/RenameInput";
|
||||
|
||||
const Widget3InputCard3D = () => {
|
||||
const { selectedChartId } = useWidgetStore();
|
||||
const [widgetName, setWidgetName] = useState("untited");
|
||||
const { setMeasurements, updateDuration, updateName } = useChartStore();
|
||||
const [duration, setDuration] = useState('1h')
|
||||
const [dropDowndata, setDropDownData] = useState({});
|
||||
const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>({});
|
||||
const { selectedZone } = useSelectedZoneStore();
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
console.log(selectedChartId);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
const response = await axios.get(`http://${iotApiUrl}/getinput`);
|
||||
if (response.status === 200) {
|
||||
// console.log("dropdown data:", response.data);
|
||||
setDropDownData(response.data);
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
};
|
||||
fetchZoneData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSavedInputes = async () => {
|
||||
if (selectedChartId.id !== "") {
|
||||
try {
|
||||
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${selectedChartId.id}/${organization}`);
|
||||
if (response.status === 200) {
|
||||
setSelections(response.data.Data.measurements)
|
||||
setDuration(response.data.Data.duration)
|
||||
setWidgetName(response.data.widgetName)
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fetchSavedInputes();
|
||||
|
||||
}, [selectedChartId.id]);
|
||||
|
||||
useEffect(() => {
|
||||
setMeasurements(selections);
|
||||
updateDuration(duration);
|
||||
updateName(widgetName);
|
||||
}, [selections, duration, widgetName]);
|
||||
|
||||
|
||||
const sendInputes = async (inputMeasurement: any, inputDuration: any, inputName: any) => {
|
||||
try {
|
||||
const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/3dwidget/save`, {
|
||||
organization: organization,
|
||||
zoneId: selectedZone.zoneId,
|
||||
widget: {
|
||||
id: selectedChartId.id,
|
||||
widgetName: inputName,
|
||||
Data: {
|
||||
measurements: inputMeasurement,
|
||||
duration: inputDuration
|
||||
}
|
||||
}
|
||||
} as any);
|
||||
if (response.status === 200) {
|
||||
return true
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
return false
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSelect = async (inputKey: string, selectedData: { name: string; fields: string } | null) => {
|
||||
|
||||
// async() => {
|
||||
const newSelections = { ...selections };
|
||||
if (selectedData === null) {
|
||||
delete newSelections[inputKey];
|
||||
} else {
|
||||
newSelections[inputKey] = selectedData;
|
||||
}
|
||||
// setMeasurements(newSelections); // Update Zustand store
|
||||
console.log(newSelections);
|
||||
if (await sendInputes(newSelections, duration, widgetName)) {
|
||||
setSelections(newSelections);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectDuration = async (option: string) => {
|
||||
if (await sendInputes(selections, option, widgetName)) {
|
||||
setDuration(option);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNameChange = async (name:any) => {
|
||||
console.log('name change requested',name);
|
||||
|
||||
if (await sendInputes(selections, duration, name)) {
|
||||
setWidgetName(name);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="inputs-wrapper">
|
||||
<div className="datas">
|
||||
<div className="datas__label">Title</div>
|
||||
<RenameInput value={widgetName} onRename={handleNameChange}/>
|
||||
</div>
|
||||
{[...Array(7)].map((_, index) => {
|
||||
const inputKey = `input${index + 1}`;
|
||||
return (
|
||||
<div key={index} className="datas">
|
||||
<div className="datas__label">Input {index + 1}</div>
|
||||
<div className="datas__class">
|
||||
<MultiLevelDropdown
|
||||
data={dropDowndata}
|
||||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]} // Load from Zustand
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Widget3InputCard3D;
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import MultiLevelDropdown from "../../../../ui/inputs/MultiLevelDropDown";
|
||||
import { AddIcon } from "../../../../icons/ExportCommonIcons";
|
||||
import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
|
||||
import useChartStore from "../../../../../store/useChartStore";
|
||||
import { useSelectedZoneStore } from "../../../../../store/useZoneStore";
|
||||
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
||||
import axios from "axios";
|
||||
import RenameInput from "../../../../ui/inputs/RenameInput";
|
||||
|
||||
type Props = {};
|
||||
|
||||
const Widget4InputCard3D = (props: Props) => {
|
||||
const { selectedChartId } = useWidgetStore();
|
||||
const [widgetName, setWidgetName] = useState("untited");
|
||||
const { setMeasurements, updateDuration, updateName } = useChartStore();
|
||||
const [duration, setDuration] = useState('1h')
|
||||
const [dropDowndata, setDropDownData] = useState({});
|
||||
const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>({});
|
||||
const { selectedZone } = useSelectedZoneStore();
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
console.log(selectedChartId);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
const response = await axios.get(`http://${iotApiUrl}/getinput`);
|
||||
if (response.status === 200) {
|
||||
// console.log("dropdown data:", response.data);
|
||||
setDropDownData(response.data);
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
};
|
||||
fetchZoneData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSavedInputes = async () => {
|
||||
if (selectedChartId.id !== "") {
|
||||
try {
|
||||
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${selectedChartId.id}/${organization}`);
|
||||
if (response.status === 200) {
|
||||
setSelections(response.data.Data.measurements)
|
||||
setDuration(response.data.Data.duration)
|
||||
setWidgetName(response.data.widgetName)
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fetchSavedInputes();
|
||||
|
||||
}, [selectedChartId.id]);
|
||||
|
||||
// Sync Zustand state when component mounts
|
||||
useEffect(() => {
|
||||
setMeasurements(selections);
|
||||
updateDuration(duration);
|
||||
updateName(widgetName);
|
||||
}, [selections, duration, widgetName]);
|
||||
|
||||
|
||||
const sendInputes = async (inputMeasurement: any, inputDuration: any, inputName: any) => {
|
||||
try {
|
||||
const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/3dwidget/save`, {
|
||||
organization: organization,
|
||||
zoneId: selectedZone.zoneId,
|
||||
widget: {
|
||||
id: selectedChartId.id,
|
||||
widgetName: inputName,
|
||||
Data: {
|
||||
measurements: inputMeasurement,
|
||||
duration: inputDuration
|
||||
}
|
||||
}
|
||||
} as any);
|
||||
if (response.status === 200) {
|
||||
return true
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
return false
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSelect = async (inputKey: string, selectedData: { name: string; fields: string } | null) => {
|
||||
|
||||
// async() => {
|
||||
const newSelections = { ...selections };
|
||||
if (selectedData === null) {
|
||||
delete newSelections[inputKey];
|
||||
} else {
|
||||
newSelections[inputKey] = selectedData;
|
||||
}
|
||||
// setMeasurements(newSelections); // Update Zustand store
|
||||
console.log(newSelections);
|
||||
if (await sendInputes(newSelections, duration, widgetName)) {
|
||||
setSelections(newSelections);
|
||||
}
|
||||
// sendInputes(newSelections, duration); // Send data to server
|
||||
// return newSelections;
|
||||
// };
|
||||
};
|
||||
|
||||
const handleSelectDuration = async (option: string) => {
|
||||
if (await sendInputes(selections, option, widgetName)) {
|
||||
setDuration(option);
|
||||
}
|
||||
// setDuration(option);
|
||||
};
|
||||
|
||||
const handleNameChange = async (name:any) => {
|
||||
console.log('name change requested',name);
|
||||
|
||||
if (await sendInputes(selections, duration, name)) {
|
||||
setWidgetName(name);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="inputs-wrapper">
|
||||
<div className="datas">
|
||||
<div className="datas__label">Title</div>
|
||||
<RenameInput value={widgetName} onRename={handleNameChange}/>
|
||||
</div>
|
||||
{[...Array(1)].map((_, index) => {
|
||||
const inputKey = `input${index + 1}`;
|
||||
return (
|
||||
<div key={index} className="datas">
|
||||
<div className="datas__label">Input {index + 1}</div>
|
||||
<div className="datas__class">
|
||||
<MultiLevelDropdown
|
||||
data={dropDowndata}
|
||||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]} // Load from Zustand
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div>
|
||||
<div className="datas">
|
||||
<div className="datas__label">Duration</div>
|
||||
<div className="datas__class">
|
||||
<RegularDropDown
|
||||
header={duration}
|
||||
options={["1h", "2h", "12h"]}
|
||||
onSelect={handleSelectDuration}
|
||||
search={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Widget4InputCard3D;
|
||||
|
|
@ -4,6 +4,7 @@ import { AddIcon, RemoveIcon } from "../../../../icons/ExportCommonIcons";
|
|||
import MultiLevelDropDown from "../../../../ui/inputs/MultiLevelDropDown";
|
||||
import LineGrapInput from "../IotInputCards/LineGrapInput";
|
||||
import RenameInput from "../../../../ui/inputs/RenameInput";
|
||||
import InputSelecterComponent from "../IotInputCards/InputSelecterComponent";
|
||||
|
||||
// Define the data structure for demonstration purposes
|
||||
const DATA_STRUCTURE = {
|
||||
|
|
@ -133,8 +134,7 @@ const Data = () => {
|
|||
{
|
||||
chartDataGroups[selectedChartId?.id] &&
|
||||
<>
|
||||
<div className="sideBarHeader">2D Widget Input</div>
|
||||
<LineGrapInput />
|
||||
<InputSelecterComponent />
|
||||
</>
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import RenderOverlay from "./Overlay";
|
||||
import { ArrowIcon, CloseIcon } from "../icons/ExportCommonIcons";
|
||||
import { AccessOption, User } from "../../types/users";
|
||||
import RegularDropDown from "../ui/inputs/RegularDropDown";
|
||||
import { access } from "fs";
|
||||
import MultiEmailInvite from "../ui/inputs/MultiEmailInvite";
|
||||
import { useActiveUsers } from "../../store/store";
|
||||
|
||||
interface UserListTemplateProps {
|
||||
user: User;
|
||||
|
|
@ -57,6 +58,10 @@ interface CollaborateProps {
|
|||
const CollaborationPopup: React.FC<CollaborateProps> = ({
|
||||
setUserManagement,
|
||||
}) => {
|
||||
const { activeUsers } = useActiveUsers();
|
||||
useEffect(() => {
|
||||
console.log("activeUsers: ", activeUsers);
|
||||
}, [activeUsers]);
|
||||
const userName = localStorage.getItem("userName") || "Anonymous";
|
||||
const users = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useEffect, useRef, useState, useCallback } from "react";
|
||||
import { Widget } from "../../../store/useWidgetStore";
|
||||
import { useWidgetStore, Widget } from "../../../store/useWidgetStore";
|
||||
import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons";
|
||||
import { InfoIcon } from "../../icons/ExportCommonIcons";
|
||||
import {
|
||||
|
|
@ -73,7 +73,8 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
|
|||
// State to track overflow visibility
|
||||
const [showLeftArrow, setShowLeftArrow] = useState(false);
|
||||
const [showRightArrow, setShowRightArrow] = useState(false);
|
||||
const { floatingWidget, setFloatingWidget } = useFloatingWidget();
|
||||
const { floatingWidget, setFloatingWidget } = useFloatingWidget()
|
||||
const{setSelectedChartId}=useWidgetStore()
|
||||
|
||||
// Function to calculate overflow state
|
||||
const updateOverflowState = useCallback(() => {
|
||||
|
|
@ -150,6 +151,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
|
|||
if (selectedZone?.zoneId === zoneId) {
|
||||
return;
|
||||
}
|
||||
setSelectedChartId(null)
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
let response = await getSelect2dZoneData(zoneId, organization);
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import BarGraphComponent from "../realTimeVis/charts/BarGraphComponent";
|
|||
import LineGraphComponent from "../realTimeVis/charts/LineGraphComponent";
|
||||
import DoughnutGraphComponent from "../realTimeVis/charts/DoughnutGraphComponent";
|
||||
import PolarAreaGraphComponent from "../realTimeVis/charts/PolarAreaGraphComponent";
|
||||
import ProgressCard1 from "../realTimeVis/charts/ProgressCard1";
|
||||
import ProgressCard2 from "../realTimeVis/charts/ProgressCard2";
|
||||
import {
|
||||
DeleteIcon,
|
||||
DublicateIcon,
|
||||
|
|
@ -226,6 +228,7 @@ export const DraggableWidget = ({
|
|||
onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop
|
||||
}
|
||||
};
|
||||
console.log("widget.type", widget.type);
|
||||
|
||||
// useClickOutside(chartWidget, () => {
|
||||
// setSelectedChartId(null);
|
||||
|
|
@ -281,8 +284,11 @@ export const DraggableWidget = ({
|
|||
|
||||
{/* Render charts based on widget type */}
|
||||
|
||||
{widget.type === "progress" && (
|
||||
<ProgressCard title={widget.title} data={widget.data} />
|
||||
{widget.type === "progress 1" && (
|
||||
<ProgressCard1 title={widget.title} id={widget.id} />
|
||||
)}
|
||||
{widget.type === "progress 2" && (
|
||||
<ProgressCard2 title={widget.title} id={widget.id} />
|
||||
)}
|
||||
{widget.type === "line" && (
|
||||
<LineGraphComponent
|
||||
|
|
@ -291,14 +297,6 @@ export const DraggableWidget = ({
|
|||
title={widget.title}
|
||||
fontSize={widget.fontSize}
|
||||
fontWeight={widget.fontWeight}
|
||||
// data={{
|
||||
// measurements: [
|
||||
// { name: "testDevice", fields: "powerConsumption" },
|
||||
// { name: "furnace", fields: "powerConsumption" },
|
||||
// ],
|
||||
// interval: 1000,
|
||||
// duration: "1h",
|
||||
// }}
|
||||
/>
|
||||
)}
|
||||
{widget.type === "bar" && (
|
||||
|
|
@ -308,14 +306,6 @@ export const DraggableWidget = ({
|
|||
title={widget.title}
|
||||
fontSize={widget.fontSize}
|
||||
fontWeight={widget.fontWeight}
|
||||
// data={{
|
||||
// measurements: [
|
||||
// { name: "testDevice", fields: "powerConsumption" },
|
||||
// { name: "furnace", fields: "powerConsumption" },
|
||||
// ],
|
||||
// interval: 1000,
|
||||
// duration: "1h",
|
||||
// }}
|
||||
/>
|
||||
)}
|
||||
{widget.type === "pie" && (
|
||||
|
|
@ -325,14 +315,6 @@ export const DraggableWidget = ({
|
|||
title={widget.title}
|
||||
fontSize={widget.fontSize}
|
||||
fontWeight={widget.fontWeight}
|
||||
// data={{
|
||||
// measurements: [
|
||||
// { name: "testDevice", fields: "powerConsumption" },
|
||||
// { name: "furnace", fields: "powerConsumption" },
|
||||
// ],
|
||||
// interval: 1000,
|
||||
// duration: "1h",
|
||||
// }}
|
||||
/>
|
||||
)}
|
||||
{widget.type === "doughnut" && (
|
||||
|
|
|
|||
|
|
@ -138,15 +138,16 @@ export default function Dropped3dWidgets() {
|
|||
return (
|
||||
<>
|
||||
{activeZoneWidgets.map(({ id, type, position }) => {
|
||||
console.log('Typeeeeeeeeeeee',type);
|
||||
switch (type) {
|
||||
case "ui-Widget 1":
|
||||
return <ProductionCapacity key={id} position={position} />;
|
||||
return <ProductionCapacity key={id} id={id} type={type} position={position} />;
|
||||
case "ui-Widget 2":
|
||||
return <ReturnOfInvestment key={id} position={position} />;
|
||||
return <ReturnOfInvestment key={id} id={id} type={type} position={position} />;
|
||||
case "ui-Widget 3":
|
||||
return <StateWorking key={id} position={position} />;
|
||||
return <StateWorking key={id} id={id} type={type} position={position} />;
|
||||
case "ui-Widget 4":
|
||||
return <Throughput key={id} position={position} />;
|
||||
return <Throughput key={id} id={id} type={type} position={position} />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -526,7 +526,7 @@ const DroppedObjects: React.FC = () => {
|
|||
</>
|
||||
) : obj.className === "warehouseThroughput floating" ? (
|
||||
<>
|
||||
<WarehouseThroughputComponent />
|
||||
<WarehouseThroughputComponent object={obj}/>
|
||||
</>
|
||||
) : obj.className === "fleetEfficiency floating" ? (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ interface InputToggleProps {
|
|||
onChange?: (value: number) => void; // Function to handle toggle clicks
|
||||
disabled?: boolean;
|
||||
value?: number;
|
||||
onPointerUp?: (value: number) => void;
|
||||
}
|
||||
|
||||
const InputRange: React.FC<InputToggleProps> = ({
|
||||
|
|
@ -17,9 +18,10 @@ const InputRange: React.FC<InputToggleProps> = ({
|
|||
min,
|
||||
max,
|
||||
disabled,
|
||||
value = 5,
|
||||
value,
|
||||
onPointerUp,
|
||||
}) => {
|
||||
const [rangeValue, setRangeValue] = useState<number>(value);
|
||||
const [rangeValue, setRangeValue] = useState<number>(value ? value : 5);
|
||||
|
||||
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const newValue = parseInt(e.target.value); // Parse the value to an integer
|
||||
|
|
@ -31,8 +33,22 @@ const InputRange: React.FC<InputToggleProps> = ({
|
|||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
setRangeValue(value);
|
||||
value && setRangeValue(value);
|
||||
}, [value]);
|
||||
function handlePointerUp(e: React.PointerEvent<HTMLInputElement>) {
|
||||
const newValue = parseInt(e.currentTarget.value, 10); // Parse value correctly
|
||||
|
||||
if (onPointerUp) {
|
||||
onPointerUp(newValue); // Call the callback function if it exists
|
||||
}
|
||||
}
|
||||
function handlekey(e: React.KeyboardEvent<HTMLInputElement>) {
|
||||
const newValue = parseInt(e.currentTarget.value, 10); // Parse value correctly
|
||||
|
||||
if (onPointerUp) {
|
||||
onPointerUp(newValue); // Call the callback function if it exists
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="input-range-container">
|
||||
|
|
@ -52,6 +68,7 @@ const InputRange: React.FC<InputToggleProps> = ({
|
|||
onChange={handleChange}
|
||||
disabled={disabled}
|
||||
value={rangeValue}
|
||||
onPointerUp={handlePointerUp}
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
|
|
@ -61,6 +78,12 @@ const InputRange: React.FC<InputToggleProps> = ({
|
|||
value={rangeValue}
|
||||
onChange={handleChange}
|
||||
disabled={disabled}
|
||||
onKeyUp={(e) => {
|
||||
if (e.key === "ArrowUp" || e.key === "ArrowDown") {
|
||||
console.log("e.key: ", e.key);
|
||||
handlekey(e);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,105 @@
|
|||
import { StockIncreseIcon } from "../../../icons/RealTimeVisulationIcons";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import io from "socket.io-client";
|
||||
import useChartStore from "../../../../store/useChartStore";
|
||||
import { useWidgetStore } from "../../../../store/useWidgetStore";
|
||||
import axios from "axios";
|
||||
|
||||
const ProgressCard1 = ({ id,title,}: {
|
||||
id: string,
|
||||
title: string;
|
||||
}) => {
|
||||
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
|
||||
const [measurements, setmeasurements] = useState<any>({});
|
||||
const [duration, setDuration] = useState("1h")
|
||||
const [name, setName] = useState(title)
|
||||
const [value, setValue] = useState<any>('')
|
||||
const { selectedChartId } = useWidgetStore();
|
||||
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const socket = io(`http://${iotApiUrl}`);
|
||||
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
|
||||
|
||||
const inputData = {
|
||||
measurements,
|
||||
duration,
|
||||
interval: 1000,
|
||||
};
|
||||
|
||||
|
||||
const startStream = () => {
|
||||
socket.emit("lastInput", inputData);
|
||||
};
|
||||
|
||||
socket.on("connect", startStream);
|
||||
|
||||
socket.on("lastOutput", (response) => {
|
||||
const responseData = response.input1;
|
||||
setValue(responseData);
|
||||
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.off("lastOutput");
|
||||
socket.emit("stop_stream"); // Stop streaming when component unmounts
|
||||
socket.disconnect();
|
||||
};
|
||||
}, [measurements, duration]);
|
||||
|
||||
const fetchSavedInputes = async() => {
|
||||
|
||||
if (id !== "") {
|
||||
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) {
|
||||
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])
|
||||
|
||||
return(
|
||||
<div className="chart progressBar">
|
||||
<div className="header">{name}</div>
|
||||
<div className="stock">
|
||||
<span className="stock-item">
|
||||
<span className="stockValues">
|
||||
<div className="value">{value}</div>
|
||||
<div className="key">Units</div>
|
||||
|
||||
</span>
|
||||
<div className="stock-description">{
|
||||
measurements ? `${measurements?.input1?.fields}` : 'description'}</div>
|
||||
</span>
|
||||
<div className="icon">
|
||||
<StockIncreseIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
export default ProgressCard1;
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
import { StockIncreseIcon } from "../../../icons/RealTimeVisulationIcons";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import io from "socket.io-client";
|
||||
import useChartStore from "../../../../store/useChartStore";
|
||||
import { useWidgetStore } from "../../../../store/useWidgetStore";
|
||||
import axios from "axios";
|
||||
|
||||
const ProgressCard2 = ({ id,title,}: {
|
||||
id: string,
|
||||
title: string;
|
||||
}) => {
|
||||
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
|
||||
const [measurements, setmeasurements] = useState<any>({});
|
||||
const [duration, setDuration] = useState("1h")
|
||||
const [name, setName] = useState(title)
|
||||
const [value1, setValue1] = useState<any>('')
|
||||
const [value2, setValue2] = useState<any>('')
|
||||
const { selectedChartId } = useWidgetStore();
|
||||
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
|
||||
|
||||
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 responseData1 = response.input1;
|
||||
const responseData2 = response.input2;
|
||||
setValue1(responseData1);
|
||||
setValue2(responseData2);
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.off("lastOutput");
|
||||
socket.emit("stop_stream"); // Stop streaming when component unmounts
|
||||
socket.disconnect();
|
||||
};
|
||||
}, [measurements, duration]);
|
||||
|
||||
const fetchSavedInputes = async() => {
|
||||
|
||||
if (id !== "") {
|
||||
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) {
|
||||
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])
|
||||
|
||||
return(
|
||||
<div className="chart progressBar">
|
||||
<div className="header">{name}</div>
|
||||
|
||||
<div className="stock">
|
||||
<span className="stock-item">
|
||||
<span className="stockValues">
|
||||
<div className="value">{value1}</div>
|
||||
<div className="key">Units</div>
|
||||
|
||||
</span>
|
||||
<div className="stock-description">{
|
||||
measurements ? `${measurements?.input1?.fields}` : 'description'}</div>
|
||||
</span>
|
||||
<div className="icon">
|
||||
<StockIncreseIcon />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="stock">
|
||||
<span className="stock-item">
|
||||
<span className="stockValues">
|
||||
<div className="value">{value2}</div>
|
||||
<div className="key">Units</div>
|
||||
|
||||
</span>
|
||||
<div className="stock-description">{
|
||||
measurements ? `${measurements?.input2?.fields}` : 'description'}</div>
|
||||
</span>
|
||||
<div className="icon">
|
||||
<StockIncreseIcon />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
export default ProgressCard2;
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
const FleetEfficiency = () => {
|
||||
const progress = 75; // Example progress value (0-100)
|
||||
const progress = 50; // Example progress value (0-100)
|
||||
|
||||
// Calculate the rotation angle for the progress bar
|
||||
const rotationAngle = -90 + progress * 3.6; // Progress starts from the left (-90°)
|
||||
const rotationAngle = 45 + progress * 1.8;
|
||||
|
||||
const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
|
||||
const rect = event.currentTarget.getBoundingClientRect(); // Get position
|
||||
|
|
|
|||
|
|
@ -1,19 +1,99 @@
|
|||
import React from 'react'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Line } from 'react-chartjs-2'
|
||||
import useChartStore from '../../../../store/useChartStore';
|
||||
import { useWidgetStore } from '../../../../store/useWidgetStore';
|
||||
import axios from 'axios';
|
||||
import io from "socket.io-client";
|
||||
|
||||
type Props = {}
|
||||
const FleetEfficiencyComponent = ({object}: any) => {
|
||||
const [ progress, setProgress ] = useState<any>(0)
|
||||
const [measurements, setmeasurements] = useState<any>({});
|
||||
const [duration, setDuration] = useState("1h")
|
||||
const [name, setName] = useState(object.header ? object.header : '')
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
const { header, flotingDuration, flotingMeasurements } = useChartStore();
|
||||
const { selectedChartId } = useWidgetStore();
|
||||
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
|
||||
// Calculate the rotation angle for the progress bar
|
||||
const rotationAngle = 45 + progress * 1.8;
|
||||
|
||||
|
||||
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.input1;
|
||||
console.log(responseData);
|
||||
|
||||
if (typeof responseData === "number") {
|
||||
console.log("It's a number!");
|
||||
setProgress(responseData);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.off("lastOutput");
|
||||
socket.emit("stop_stream"); // Stop streaming when component unmounts
|
||||
socket.disconnect();
|
||||
};
|
||||
}, [measurements, duration, iotApiUrl]);
|
||||
|
||||
const fetchSavedInputes = async() => {
|
||||
|
||||
if (object?.id !== "") {
|
||||
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) {
|
||||
setmeasurements(response.data.Data.measurements)
|
||||
setDuration(response.data.Data.duration)
|
||||
setName(response.data.header)
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchSavedInputes();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedChartId?.id === object?.id) {
|
||||
fetchSavedInputes();
|
||||
}
|
||||
}
|
||||
,[header, flotingDuration, flotingMeasurements])
|
||||
|
||||
const FleetEfficiencyComponent = ({
|
||||
object
|
||||
}: any) => {
|
||||
return (
|
||||
<>
|
||||
<h2 className="header">Fleet Efficiency</h2>
|
||||
<h2 className="header">{name}</h2>
|
||||
<div className="progressContainer">
|
||||
<div className="progress">
|
||||
<div className="barOverflow">
|
||||
<div
|
||||
className="bar"
|
||||
style={{ transform: `rotate(${object.value}deg)` }}
|
||||
style={{ transform: `rotate(${rotationAngle}deg)` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -21,7 +101,7 @@ const FleetEfficiencyComponent = ({
|
|||
<div className="scaleLabels">
|
||||
<span>0%</span>
|
||||
<div className="centerText">
|
||||
<div className="percentage">{object.per}%</div>
|
||||
<div className="percentage">{progress}%</div>
|
||||
<div className="status">Optimal</div>
|
||||
</div>
|
||||
<span>100%</span>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,95 @@
|
|||
import React from 'react'
|
||||
import { WalletIcon } from '../../../icons/3dChartIcons'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Line } from 'react-chartjs-2'
|
||||
import useChartStore from '../../../../store/useChartStore';
|
||||
import { useWidgetStore } from '../../../../store/useWidgetStore';
|
||||
import axios from 'axios';
|
||||
import io from "socket.io-client";
|
||||
import { WalletIcon } from '../../../icons/3dChartIcons';
|
||||
|
||||
|
||||
const TotalCardComponent = ({
|
||||
object
|
||||
}: any) => {
|
||||
|
||||
const { setSelectedChartId } =
|
||||
useWidgetStore();
|
||||
const [ progress, setProgress ] = useState<any>(0)
|
||||
const [measurements, setmeasurements] = useState<any>({});
|
||||
const [duration, setDuration] = useState("1h")
|
||||
const [name, setName] = useState(object.header ? object.header : '')
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
const { header, flotingDuration, flotingMeasurements } = useChartStore();
|
||||
const { selectedChartId } = useWidgetStore();
|
||||
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
|
||||
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.input1;
|
||||
|
||||
if (typeof responseData === "number") {
|
||||
setProgress(responseData);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.off("lastOutput");
|
||||
socket.emit("stop_stream"); // Stop streaming when component unmounts
|
||||
socket.disconnect();
|
||||
};
|
||||
}, [measurements, duration, iotApiUrl]);
|
||||
|
||||
const fetchSavedInputes = async() => {
|
||||
|
||||
if (object?.id !== "") {
|
||||
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) {
|
||||
setmeasurements(response.data.Data.measurements)
|
||||
setDuration(response.data.Data.duration)
|
||||
setName(response.data.header)
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchSavedInputes();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedChartId?.id === object?.id) {
|
||||
fetchSavedInputes();
|
||||
}
|
||||
}
|
||||
,[header, flotingDuration, flotingMeasurements])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="header-wrapper" onClick={() => {
|
||||
setSelectedChartId(object.id)
|
||||
}}>
|
||||
<div className="header">{object.header}</div>
|
||||
<div className="header-wrapper" >
|
||||
<div className="header">{name}</div>
|
||||
<div className="data-values">
|
||||
<div className="value">{object.value}</div>
|
||||
<div className="value">{progress}</div>
|
||||
<div className="per">{object.per}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
import React, { useState } from 'react'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Line } from 'react-chartjs-2'
|
||||
import useChartStore from '../../../../store/useChartStore';
|
||||
import { useWidgetStore } from '../../../../store/useWidgetStore';
|
||||
import axios from 'axios';
|
||||
import io from "socket.io-client";
|
||||
|
||||
const WarehouseThroughputComponent = ({
|
||||
object
|
||||
|
|
@ -8,6 +11,17 @@ const WarehouseThroughputComponent = ({
|
|||
|
||||
const [measurements, setmeasurements] = useState<any>({});
|
||||
const [duration, setDuration] = useState("1h")
|
||||
const [name, setName] = useState(object.header ? object.header : '')
|
||||
const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
|
||||
labels: [],
|
||||
datasets: [],
|
||||
});
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
const { header, flotingDuration, flotingMeasurements } = useChartStore();
|
||||
const { selectedChartId } = useWidgetStore();
|
||||
|
||||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
|
||||
const lineGraphData = {
|
||||
labels: [
|
||||
|
|
@ -95,35 +109,94 @@ const WarehouseThroughputComponent = ({
|
|||
};
|
||||
|
||||
|
||||
// const fetchSavedInputes = async() => {
|
||||
useEffect(() => {
|
||||
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
|
||||
|
||||
// if (object.id !== "") {
|
||||
// try {
|
||||
// const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_BASE_URL}/api/v2/WidgetData/${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);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
const socket = io(`http://${iotApiUrl}`);
|
||||
|
||||
const inputData = {
|
||||
measurements,
|
||||
duration,
|
||||
interval: 1000,
|
||||
};
|
||||
|
||||
|
||||
const startStream = () => {
|
||||
socket.emit("lineInput", inputData);
|
||||
};
|
||||
|
||||
socket.on("connect", startStream);
|
||||
|
||||
socket.on("lineOutput", (response) => {
|
||||
const responseData = response.data;
|
||||
|
||||
// Extract timestamps and values
|
||||
const labels = responseData.time;
|
||||
const datasets = Object.keys(measurements).map((key) => {
|
||||
const measurement = measurements[key];
|
||||
const datasetKey = `${measurement.name}.${measurement.fields}`;
|
||||
return {
|
||||
label: datasetKey,
|
||||
data: responseData[datasetKey]?.values ?? [],
|
||||
borderColor: "#6f42c1", // Use the desired color for the line (purple)
|
||||
backgroundColor: "rgba(111, 66, 193, 0.2)", // Use a semi-transparent purple for the fill
|
||||
borderWidth: 2, // Line thickness
|
||||
fill: true, // Enable fill for this dataset
|
||||
pointRadius: 0, // Remove dots at each data point
|
||||
tension: 0.5, // Smooth interpolation for the line
|
||||
};
|
||||
});
|
||||
|
||||
setChartData({ labels, datasets });
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.off("lineOutput");
|
||||
socket.emit("stop_stream"); // Stop streaming when component unmounts
|
||||
socket.disconnect();
|
||||
};
|
||||
}, [measurements, duration, iotApiUrl]);
|
||||
|
||||
const fetchSavedInputes = async() => {
|
||||
|
||||
if (object?.id !== "") {
|
||||
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) {
|
||||
setmeasurements(response.data.Data.measurements)
|
||||
setDuration(response.data.Data.duration)
|
||||
setName(response.data.header)
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("There was an error!", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchSavedInputes();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedChartId?.id === object?.id) {
|
||||
fetchSavedInputes();
|
||||
}
|
||||
}
|
||||
,[header, flotingDuration, flotingMeasurements])
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="header">
|
||||
<h2>Warehouse Throughput</h2>
|
||||
<p>
|
||||
<h2>{name}</h2>
|
||||
{/* <p>
|
||||
<span>(+5) more</span> in 2025
|
||||
</p>
|
||||
</p> */}
|
||||
</div>
|
||||
<div className="lineGraph" style={{ height: "100%" }}>
|
||||
<Line data={lineGraphData} options={lineGraphOptions} />
|
||||
<Line data={ Object.keys(measurements).length > 0 ? chartData : lineGraphData} options={lineGraphOptions} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -57,7 +57,6 @@ const FilterSearch: React.FC<ModelsProps> = ({
|
|||
const filteredModel = filteredModels?.filter((model) =>
|
||||
model.filename.toLowerCase().includes(val.toLowerCase())
|
||||
);
|
||||
|
||||
setModels(filteredModel);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,6 @@ const MarketPlace = () => {
|
|||
const filteredAssets = async () => {
|
||||
try {
|
||||
const filt = await getAssetImages("67d934ad0f42a1fdadb19aa6");
|
||||
|
||||
setModels(filt.items);
|
||||
setFilteredModels(filt.items);
|
||||
} catch {}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,52 @@
|
|||
import { useToggleView } from '../../../store/store';
|
||||
import * as CONSTANTS from '../../../types/world/worldConstants';
|
||||
import { useTileDistance, useToggleView } from "../../../store/store";
|
||||
import * as CONSTANTS from "../../../types/world/worldConstants";
|
||||
|
||||
const Ground = ({ grid, plane }: any) => {
|
||||
const { toggleView } = useToggleView();
|
||||
const savedTheme: string | null = localStorage.getItem('theme');
|
||||
const savedTheme: string | null = localStorage.getItem("theme");
|
||||
const { planeValue, gridValue } = useTileDistance();
|
||||
|
||||
return (
|
||||
|
||||
<mesh name="Ground">
|
||||
<mesh ref={grid} name="Grid" position={!toggleView ? CONSTANTS.gridConfig.position3D : CONSTANTS.gridConfig.position2D}>
|
||||
<gridHelper args={[CONSTANTS.gridConfig.size, CONSTANTS.gridConfig.divisions, CONSTANTS.gridConfig.primaryColor, CONSTANTS.gridConfig.secondaryColor]} />
|
||||
<mesh
|
||||
ref={grid}
|
||||
name="Grid"
|
||||
position={
|
||||
!toggleView
|
||||
? CONSTANTS.gridConfig.position3D
|
||||
: CONSTANTS.gridConfig.position2D
|
||||
}
|
||||
>
|
||||
<gridHelper
|
||||
args={[
|
||||
gridValue.size,
|
||||
gridValue.divisions,
|
||||
// CONSTANTS.gridConfig.size,
|
||||
// CONSTANTS.gridConfig.divisions,
|
||||
CONSTANTS.gridConfig.primaryColor,
|
||||
CONSTANTS.gridConfig.secondaryColor,
|
||||
]}
|
||||
/>
|
||||
</mesh>
|
||||
<mesh ref={plane} rotation-x={CONSTANTS.planeConfig.rotation} position={!toggleView ? CONSTANTS.planeConfig.position3D : CONSTANTS.planeConfig.position2D} name="Plane" receiveShadow>
|
||||
<planeGeometry args={[CONSTANTS.planeConfig.width, CONSTANTS.planeConfig.height]} />
|
||||
<mesh
|
||||
ref={plane}
|
||||
rotation-x={CONSTANTS.planeConfig.rotation}
|
||||
position={
|
||||
!toggleView
|
||||
? CONSTANTS.planeConfig.position3D
|
||||
: CONSTANTS.planeConfig.position2D
|
||||
}
|
||||
name="Plane"
|
||||
receiveShadow
|
||||
>
|
||||
<planeGeometry
|
||||
args={[planeValue.width, planeValue.height]}
|
||||
// args={[CONSTANTS.planeConfig.width, CONSTANTS.planeConfig.height]}
|
||||
/>
|
||||
<meshBasicMaterial color={CONSTANTS.planeConfig.color} />
|
||||
</mesh>
|
||||
</mesh>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default Ground;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,22 @@
|
|||
import { useRef, useEffect} from 'react';
|
||||
import { useThree } from '@react-three/fiber';
|
||||
import * as THREE from 'three';
|
||||
import { useAzimuth, useElevation, useShadows, useSunPosition, useFloorItems, useWallItems } from '../../../store/store';
|
||||
import * as CONSTANTS from '../../../types/world/worldConstants';
|
||||
const shadowWorker = new Worker(new URL('../../../services/factoryBuilder/webWorkers/shadowWorker', import.meta.url));
|
||||
import { useRef, useEffect } from "react";
|
||||
import { useThree } from "@react-three/fiber";
|
||||
import * as THREE from "three";
|
||||
import {
|
||||
useAzimuth,
|
||||
useElevation,
|
||||
useShadows,
|
||||
useSunPosition,
|
||||
useFloorItems,
|
||||
useWallItems,
|
||||
useTileDistance,
|
||||
} from "../../../store/store";
|
||||
import * as CONSTANTS from "../../../types/world/worldConstants";
|
||||
const shadowWorker = new Worker(
|
||||
new URL(
|
||||
"../../../services/factoryBuilder/webWorkers/shadowWorker",
|
||||
import.meta.url
|
||||
)
|
||||
);
|
||||
|
||||
export default function Shadows() {
|
||||
const { shadows, setShadows } = useShadows();
|
||||
|
|
@ -15,6 +28,7 @@ export default function Shadows() {
|
|||
const { azimuth, setAzimuth } = useAzimuth();
|
||||
const { floorItems } = useFloorItems();
|
||||
const { wallItems } = useWallItems();
|
||||
const { planeValue } = useTileDistance();
|
||||
|
||||
useEffect(() => {
|
||||
gl.shadowMap.enabled = true;
|
||||
|
|
@ -48,9 +62,9 @@ export default function Shadows() {
|
|||
useEffect(() => {
|
||||
if (controls && shadows) {
|
||||
updateShadows();
|
||||
(controls as any).addEventListener('update', updateShadows);
|
||||
(controls as any).addEventListener("update", updateShadows);
|
||||
return () => {
|
||||
(controls as any).removeEventListener('update', updateShadows);
|
||||
(controls as any).removeEventListener("update", updateShadows);
|
||||
};
|
||||
}
|
||||
}, [controls, elevation, azimuth, shadows]);
|
||||
|
|
@ -75,9 +89,23 @@ export default function Shadows() {
|
|||
shadow-normalBias={CONSTANTS.shadowConfig.shadownormalBias}
|
||||
/>
|
||||
<object3D ref={targetRef} />
|
||||
<mesh position={CONSTANTS.shadowConfig.shadowMaterialPosition} rotation={CONSTANTS.shadowConfig.shadowMaterialRotation} receiveShadow>
|
||||
<planeGeometry args={[CONSTANTS.planeConfig.width, CONSTANTS.planeConfig.height]} />
|
||||
<shadowMaterial opacity={CONSTANTS.shadowConfig.shadowMaterialOpacity} transparent />
|
||||
<mesh
|
||||
position={CONSTANTS.shadowConfig.shadowMaterialPosition}
|
||||
rotation={CONSTANTS.shadowConfig.shadowMaterialRotation}
|
||||
receiveShadow
|
||||
>
|
||||
{/* <planeGeometry
|
||||
args={[CONSTANTS.planeConfig.width, CONSTANTS.planeConfig.height]}
|
||||
/>
|
||||
<shadowMaterial
|
||||
opacity={CONSTANTS.shadowConfig.shadowMaterialOpacity}
|
||||
transparent
|
||||
/> */}
|
||||
<planeGeometry args={[planeValue.width, planeValue.height]} />
|
||||
<shadowMaterial
|
||||
opacity={CONSTANTS.shadowConfig.shadowMaterialOpacity}
|
||||
transparent
|
||||
/>
|
||||
</mesh>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -30,6 +30,8 @@ import {
|
|||
useWalls,
|
||||
useToolMode,
|
||||
useRefTextUpdate,
|
||||
useRenderDistance,
|
||||
useLimitDistance,
|
||||
} from "../../../store/store";
|
||||
|
||||
////////// 3D Function Imports //////////
|
||||
|
|
@ -117,6 +119,8 @@ export default function World() {
|
|||
const { roofVisibility, setRoofVisibility } = useRoofVisibility();
|
||||
const { wallVisibility, setWallVisibility } = useWallVisibility();
|
||||
const { shadows, setShadows } = useShadows();
|
||||
const { renderDistance, setRenderDistance } = useRenderDistance();
|
||||
const { limitDistance, setLimitDistance } = useLimitDistance();
|
||||
const { updateScene, setUpdateScene } = useUpdateScene();
|
||||
const { walls, setWalls } = useWalls();
|
||||
const { refTextupdate, setRefTextUpdate } = useRefTextUpdate();
|
||||
|
|
@ -200,6 +204,8 @@ export default function World() {
|
|||
setRoofVisibility(visibility.roofVisibility);
|
||||
setWallVisibility(visibility.wallVisibility);
|
||||
setShadows(visibility.shadowVisibility);
|
||||
setRenderDistance(visibility.renderDistance);
|
||||
setLimitDistance(visibility.limitDistance);
|
||||
}
|
||||
}
|
||||
fetchVisibility();
|
||||
|
|
|
|||
|
|
@ -1,15 +1,18 @@
|
|||
import { setEnvironment } from './setEnvironment';
|
||||
import { setEnvironment } from "./setEnvironment";
|
||||
|
||||
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
|
||||
|
||||
export const findEnvironment = async (organization: string, userId: string) => {
|
||||
try {
|
||||
const response = await fetch(`${url_Backend_dwinzo}/api/v1/findEnvironments/${organization}/${userId}`, {
|
||||
const response = await fetch(
|
||||
`${url_Backend_dwinzo}/api/v1/findEnvironments/${organization}/${userId}`,
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to get wall and roof visibility");
|
||||
|
|
@ -17,7 +20,15 @@ export const findEnvironment = async (organization: string, userId: string) => {
|
|||
|
||||
const result = await response.json();
|
||||
if (result === "user not found") {
|
||||
const userpos = setEnvironment(organization, userId, false, false, false);
|
||||
const userpos = setEnvironment(
|
||||
organization,
|
||||
userId,
|
||||
false,
|
||||
false,
|
||||
false,
|
||||
0,
|
||||
true
|
||||
);
|
||||
return userpos;
|
||||
} else {
|
||||
return result;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,33 @@
|
|||
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
|
||||
|
||||
export const setEnvironment = async (organization: string, userId: string, wallVisibility: Boolean, roofVisibility: Boolean, shadowVisibility: Boolean) => {
|
||||
export const setEnvironment = async (
|
||||
organization: string,
|
||||
userId: string,
|
||||
wallVisibility: Boolean,
|
||||
roofVisibility: Boolean,
|
||||
shadowVisibility: Boolean,
|
||||
renderDistance: number,
|
||||
limitDistance: boolean
|
||||
) => {
|
||||
try {
|
||||
const response = await fetch(`${url_Backend_dwinzo}/api/v1/setEvironments`, {
|
||||
const response = await fetch(
|
||||
`${url_Backend_dwinzo}/api/v1/setEvironments`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ organization, userId, wallVisibility, roofVisibility, shadowVisibility }),
|
||||
});
|
||||
body: JSON.stringify({
|
||||
organization,
|
||||
userId,
|
||||
wallVisibility,
|
||||
roofVisibility,
|
||||
shadowVisibility,
|
||||
renderDistance,
|
||||
limitDistance,
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to set wall and roof visibility");
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ export const fetchAssets = async () => {
|
|||
throw new Error("Network response was not ok");
|
||||
}
|
||||
const result = await response.json();
|
||||
const last10Assets = result.slice(-10);
|
||||
console.log('last10Assets: ', last10Assets);
|
||||
// const last10Assets = result.slice(-10);
|
||||
// console.log('last10Assets: ', last10Assets);
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.log("error: ", error);
|
||||
|
|
|
|||
|
|
@ -264,7 +264,7 @@ export const useAzimuth = create<any>((set: any) => ({
|
|||
}));
|
||||
|
||||
export const useRenderDistance = create<any>((set: any) => ({
|
||||
renderDistance: 50,
|
||||
renderDistance: 40,
|
||||
setRenderDistance: (x: any) => set({ renderDistance: x }),
|
||||
}));
|
||||
|
||||
|
|
@ -409,3 +409,22 @@ export const useWidgetSubOption = create<any>((set: any) => ({
|
|||
widgetSubOption: "2D",
|
||||
setWidgetSubOption: (x: any) => set({ widgetSubOption: x }),
|
||||
}));
|
||||
export const useLimitDistance = create<any>((set: any) => ({
|
||||
limitDistance: true,
|
||||
setLimitDistance: (x: any) => set({ limitDistance: x }),
|
||||
}));
|
||||
|
||||
export const useTileDistance = create<any>((set: any) => ({
|
||||
gridValue: { size: 300, divisions: 75 },
|
||||
planeValue: { height: 300, width: 300 },
|
||||
|
||||
setGridValue: (value: any) =>
|
||||
set((state: any) => ({
|
||||
gridValue: { ...state.gridValue, ...value },
|
||||
})),
|
||||
|
||||
setPlaneValue: (value: any) =>
|
||||
set((state: any) => ({
|
||||
planeValue: { ...state.planeValue, ...value },
|
||||
})),
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -10,9 +10,15 @@ interface MeasurementStore {
|
|||
interval: number;
|
||||
duration: string;
|
||||
name: string;
|
||||
header: string;
|
||||
flotingDuration: string;
|
||||
flotingMeasurements: Record<string, Measurement>; // Change array to Record<string, Measurement>
|
||||
setMeasurements: (newMeasurements: Record<string, Measurement>) => void;
|
||||
updateDuration: (newDuration: string) => void;
|
||||
updateName: (newName: string) => void;
|
||||
updateHeader: (newHeader: string) => void;
|
||||
updateFlotingDuration: (newFlotingDuration: string) => void;
|
||||
setFlotingMeasurements: (newFlotingMeasurements: Record<string, Measurement>) => void;
|
||||
}
|
||||
|
||||
const useChartStore = create<MeasurementStore>((set) => ({
|
||||
|
|
@ -20,6 +26,9 @@ const useChartStore = create<MeasurementStore>((set) => ({
|
|||
interval: 1000,
|
||||
duration: "1h",
|
||||
name:'',
|
||||
header:'',
|
||||
flotingDuration: "1h",
|
||||
flotingMeasurements: {},
|
||||
|
||||
setMeasurements: (newMeasurements) =>
|
||||
set(() => ({ measurements: newMeasurements })),
|
||||
|
|
@ -28,7 +37,16 @@ const useChartStore = create<MeasurementStore>((set) => ({
|
|||
set(() => ({ duration: newDuration })),
|
||||
|
||||
updateName: (newName) =>
|
||||
set(() => ({ duration: newName })),
|
||||
set(() => ({ name: newName })),
|
||||
|
||||
updateHeader: (newHeader) =>
|
||||
set(() => ({ header: newHeader })),
|
||||
|
||||
updateFlotingDuration: (newFlotingDuration) =>
|
||||
set(() => ({ flotingDuration: newFlotingDuration })),
|
||||
|
||||
setFlotingMeasurements: (newFlotingMeasurements) =>
|
||||
set(() => ({ flotingMeasurements: newFlotingMeasurements })),
|
||||
}));
|
||||
|
||||
export default useChartStore;
|
||||
|
|
|
|||
|
|
@ -551,7 +551,7 @@ input {
|
|||
}
|
||||
|
||||
.input-value {
|
||||
width: 40px;
|
||||
width: 42px;
|
||||
text-align: center;
|
||||
&::-webkit-inner-spin-button,
|
||||
&::-webkit-outer-spin-button {
|
||||
|
|
|
|||
|
|
@ -113,7 +113,9 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
|
||||
.assets-container {
|
||||
height: auto;
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
|
|
|
|||
|
|
@ -320,9 +320,7 @@
|
|||
.dataSideBar {
|
||||
.inputs-wrapper {
|
||||
.datas {
|
||||
|
||||
.input-value {
|
||||
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
|
|
@ -963,6 +961,7 @@
|
|||
padding: 0 6px;
|
||||
|
||||
.assets-wrapper {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin: 8px 10px;
|
||||
|
||||
|
|
@ -1010,9 +1009,11 @@
|
|||
top: 50%;
|
||||
right: -10px;
|
||||
transform: translate(0, -50%);
|
||||
background: linear-gradient(144.19deg,
|
||||
background: linear-gradient(
|
||||
144.19deg,
|
||||
#f1e7cd 16.62%,
|
||||
#fffaef 85.81%);
|
||||
#fffaef 85.81%
|
||||
);
|
||||
}
|
||||
|
||||
.category-image {
|
||||
|
|
@ -1076,3 +1077,51 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.assets-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
gap: 3px;
|
||||
padding: 10px 0;
|
||||
|
||||
.assets {
|
||||
width: 117px;
|
||||
height: 95px;
|
||||
border-radius: 3.59px;
|
||||
background-color: var(--background-color-gray);
|
||||
padding: 8px;
|
||||
padding-top: 12px;
|
||||
font-weight: $medium-weight;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.asset-name {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
font-size: var(--font-size-regular);
|
||||
}
|
||||
|
||||
.asset-image {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
// top: 50%;
|
||||
// right: 5px;
|
||||
// transform: translate(0, -50%);
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
.assets-result {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 8px 10px;
|
||||
.assets-wrapper {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -549,10 +549,11 @@
|
|||
}
|
||||
|
||||
.floating-wrapper {
|
||||
// .icon {
|
||||
.icon {
|
||||
// width: 25px !important;
|
||||
// height: 25px !important;
|
||||
// }
|
||||
// background-color: transparent;
|
||||
}
|
||||
|
||||
.kebab {
|
||||
width: 25px;
|
||||
|
|
@ -563,7 +564,7 @@
|
|||
z-index: 10;
|
||||
cursor: pointer;
|
||||
@include flex-center;
|
||||
background-color: transparent;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.kebab-options {
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ export type GridConfig = {
|
|||
secondaryColor: string;
|
||||
position2D: [x: number, y: number, z: number];
|
||||
position3D: [x: number, y: number, z: number];
|
||||
}
|
||||
};
|
||||
|
||||
export type PlaneConfig = {
|
||||
position2D: [x: number, y: number, z: number];
|
||||
|
|
@ -74,24 +74,24 @@ export type PlaneConfig = {
|
|||
width: number;
|
||||
height: number;
|
||||
color: string;
|
||||
}
|
||||
};
|
||||
|
||||
export type ShadowConfig = {
|
||||
shadowOffset: number,
|
||||
shadowmapSizewidth: number,
|
||||
shadowmapSizeheight: number,
|
||||
shadowcamerafar: number,
|
||||
shadowcameranear: number,
|
||||
shadowcameratop: number,
|
||||
shadowcamerabottom: number,
|
||||
shadowcameraleft: number,
|
||||
shadowcameraright: number,
|
||||
shadowbias: number,
|
||||
shadownormalBias: number,
|
||||
shadowMaterialPosition: [x: number, y: number, z: number],
|
||||
shadowMaterialRotation: [x: number, y: number, z: number],
|
||||
shadowMaterialOpacity: number,
|
||||
}
|
||||
shadowOffset: number;
|
||||
shadowmapSizewidth: number;
|
||||
shadowmapSizeheight: number;
|
||||
shadowcamerafar: number;
|
||||
shadowcameranear: number;
|
||||
shadowcameratop: number;
|
||||
shadowcamerabottom: number;
|
||||
shadowcameraleft: number;
|
||||
shadowcameraright: number;
|
||||
shadowbias: number;
|
||||
shadownormalBias: number;
|
||||
shadowMaterialPosition: [x: number, y: number, z: number];
|
||||
shadowMaterialRotation: [x: number, y: number, z: number];
|
||||
shadowMaterialOpacity: number;
|
||||
};
|
||||
|
||||
export type SkyConfig = {
|
||||
defaultTurbidity: number;
|
||||
|
|
@ -118,7 +118,7 @@ export type PointConfig = {
|
|||
aisleOuterColor: string;
|
||||
zoneOuterColor: string;
|
||||
snappingThreshold: number;
|
||||
}
|
||||
};
|
||||
|
||||
export type LineConfig = {
|
||||
tubularSegments: number;
|
||||
|
|
@ -136,7 +136,7 @@ export type LineConfig = {
|
|||
aisleColor: string;
|
||||
zoneColor: string;
|
||||
helperColor: string;
|
||||
}
|
||||
};
|
||||
|
||||
export type WallConfig = {
|
||||
defaultColor: string;
|
||||
|
|
@ -148,7 +148,7 @@ export type FloorConfig = {
|
|||
defaultColor: string;
|
||||
height: number;
|
||||
textureScale: number;
|
||||
}
|
||||
};
|
||||
|
||||
export type RoofConfig = {
|
||||
defaultColor: string;
|
||||
|
|
@ -159,13 +159,13 @@ export type AisleConfig = {
|
|||
width: number;
|
||||
height: number;
|
||||
defaultColor: number;
|
||||
}
|
||||
};
|
||||
|
||||
export type ZoneConfig = {
|
||||
defaultColor: string;
|
||||
height: number;
|
||||
color: string;
|
||||
}
|
||||
};
|
||||
|
||||
export type ColumnConfig = {
|
||||
defaultColor: string;
|
||||
|
|
@ -249,7 +249,7 @@ export const gridConfig: GridConfig = {
|
|||
|
||||
position2D: [0, 0.1, 0], // Position of the grid in 2D view
|
||||
position3D: [0, -0.5, 0], // Position of the grid in 3D view
|
||||
}
|
||||
};
|
||||
|
||||
export const planeConfig: PlaneConfig = {
|
||||
position2D: [0, -0.5, 0], // Position of the plane
|
||||
|
|
@ -258,8 +258,8 @@ export const planeConfig: PlaneConfig = {
|
|||
|
||||
width: 300, // Width of the plane
|
||||
height: 300, // Height of the plane
|
||||
color: savedTheme === "dark" ? "#323232" : "#f3f3f3" // Color of the plane
|
||||
}
|
||||
color: savedTheme === "dark" ? "#323232" : "#f3f3f3", // Color of the plane
|
||||
};
|
||||
|
||||
export const shadowConfig: ShadowConfig = {
|
||||
shadowOffset: 50, // Offset of the shadow
|
||||
|
|
@ -351,8 +351,8 @@ export const aisleConfig: AisleConfig = {
|
|||
export const zoneConfig: ZoneConfig = {
|
||||
defaultColor: "black", // Default color of the zones
|
||||
height: 3,
|
||||
color: "#8656DF" // Color of the zones
|
||||
}
|
||||
color: "#8656DF", // Color of the zones
|
||||
};
|
||||
|
||||
export const columnConfig: ColumnConfig = {
|
||||
defaultColor: "White", // Default color of the columns
|
||||
|
|
|
|||
Loading…
Reference in New Issue