first commit
This commit is contained in:
@@ -0,0 +1,235 @@
|
||||
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/visualization/useChartStore";
|
||||
import { useSelectedZoneStore } from "../../../../../store/visualization/useZoneStore";
|
||||
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
||||
import axios from "axios";
|
||||
import RenameInput from "../../../../ui/inputs/RenameInput";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useSocketStore } from "../../../../../store/builder/store";
|
||||
|
||||
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];
|
||||
const [isLoading, setLoading] = useState<boolean>(true);
|
||||
const { projectId } = useParams();
|
||||
const { visualizationSocket } = useSocketStore();
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
|
||||
if (response.status === 200) {
|
||||
// console.log("dropdown data:", response.data);
|
||||
setDropDownData(response.data);
|
||||
setLoading(false);
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
} catch (error) {
|
||||
echo.error("Failed to fetch zone data");
|
||||
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/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: "Bearer <access_token>",
|
||||
"Content-Type": "application/json",
|
||||
token: localStorage.getItem("token") || "",
|
||||
refresh_token: localStorage.getItem("refreshToken") || "",
|
||||
},
|
||||
}
|
||||
);
|
||||
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) {
|
||||
echo.error("Failed to fetch saved inputs");
|
||||
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
|
||||
) => {
|
||||
// const userId = localStorage.getItem("userId");
|
||||
// let newWidget = {
|
||||
// id: selectedChartId.id,
|
||||
// panel: selectedChartId.panel,
|
||||
// widgetName: inputName,
|
||||
// Data: {
|
||||
// measurements: inputMeasurement,
|
||||
// duration: inputDuration,
|
||||
// }
|
||||
// }
|
||||
// const adding3dWidget = {
|
||||
// organization: organization,
|
||||
// widget: newWidget,
|
||||
// zoneUuid: selectedZone.zoneUuid,
|
||||
// projectId, userId
|
||||
// };
|
||||
// if (visualizationSocket) {
|
||||
// visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget);
|
||||
// }
|
||||
try {
|
||||
const response = await axios.post(
|
||||
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: "Bearer <access_token>",
|
||||
"Content-Type": "application/json",
|
||||
token: localStorage.getItem("token") || "",
|
||||
refresh_token: localStorage.getItem("refreshToken") || "",
|
||||
},
|
||||
},
|
||||
{
|
||||
organization: organization,
|
||||
zoneUuid: selectedZone.zoneUuid,
|
||||
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) {
|
||||
echo.error("Failed to send input");
|
||||
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={widgetName || selectedChartId?.title}
|
||||
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
|
||||
isLoading={isLoading}
|
||||
allSelections={selections}
|
||||
/>
|
||||
<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;
|
||||
Reference in New Issue
Block a user