feat: Enhance ElementEditor with product and analysis store integration, conditional rendering for element types, and improved data mapping UI
This commit is contained in:
@@ -51,7 +51,10 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
|
|||||||
setShowSwapUI,
|
setShowSwapUI,
|
||||||
dataModelManager,
|
dataModelManager,
|
||||||
}) => {
|
}) => {
|
||||||
const { simulationDashBoardStore } = useSceneContext();
|
const { simulationDashBoardStore, productStore, analysisStore } = useSceneContext();
|
||||||
|
const { products, selectedProduct, getProductById } = productStore();
|
||||||
|
const { analysis } = analysisStore();
|
||||||
|
const product = getProductById(selectedProduct.productName);
|
||||||
const { getElementById } = simulationDashBoardStore();
|
const { getElementById } = simulationDashBoardStore();
|
||||||
const element = getElementById(selectedBlock, selectedElement);
|
const element = getElementById(selectedBlock, selectedElement);
|
||||||
const [selectType, setSelectType] = useState("design");
|
const [selectType, setSelectType] = useState("design");
|
||||||
@@ -105,40 +108,44 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="type-switch">
|
{(element?.type === "graph" || element?.type === "label-value") && (
|
||||||
<div className={`type ${selectType === "design" ? "active" : ""}`} onClick={() => setSelectType("design")}>
|
<div className="type-switch">
|
||||||
Design
|
<div className={`type ${selectType === "design" ? "active" : ""}`} onClick={() => setSelectType("design")}>
|
||||||
|
Design
|
||||||
|
</div>
|
||||||
|
<div className={`type ${selectType === "data" ? "active" : ""}`} onClick={() => setSelectType("data")}>
|
||||||
|
Data
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={`type ${selectType === "data" ? "active" : ""}`} onClick={() => setSelectType("data")}>
|
)}
|
||||||
Data
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{selectType === "design" && (
|
{selectType === "design" && (
|
||||||
<>
|
<>
|
||||||
<DataSourceSelector
|
<div className="design-section">
|
||||||
label={"Chart Type"}
|
<DataSourceSelector
|
||||||
options={["Line Chart", "Bar Chart", "Pie Chart", "Area Chart", "Radar Chart"]}
|
label={"Chart Type"}
|
||||||
onSelect={(newValue) => {
|
options={["Line Chart", "Bar Chart", "Pie Chart", "Area Chart", "Radar Chart"]}
|
||||||
if (newValue === "Line Chart") {
|
onSelect={(newValue) => {
|
||||||
updateGraphType(selectedBlock, selectedElement, "line");
|
if (newValue === "Line Chart") {
|
||||||
return;
|
updateGraphType(selectedBlock, selectedElement, "line");
|
||||||
} else if (newValue === "Bar Chart") {
|
return;
|
||||||
updateGraphType(selectedBlock, selectedElement, "bar");
|
} else if (newValue === "Bar Chart") {
|
||||||
return;
|
updateGraphType(selectedBlock, selectedElement, "bar");
|
||||||
} else if (newValue === "Pie Chart") {
|
return;
|
||||||
updateGraphType(selectedBlock, selectedElement, "pie");
|
} else if (newValue === "Pie Chart") {
|
||||||
return;
|
updateGraphType(selectedBlock, selectedElement, "pie");
|
||||||
} else if (newValue === "Area Chart") {
|
return;
|
||||||
updateGraphType(selectedBlock, selectedElement, "area");
|
} else if (newValue === "Area Chart") {
|
||||||
return;
|
updateGraphType(selectedBlock, selectedElement, "area");
|
||||||
} else if (newValue === "Radar Chart") {
|
return;
|
||||||
updateGraphType(selectedBlock, selectedElement, "radar");
|
} else if (newValue === "Radar Chart") {
|
||||||
return;
|
updateGraphType(selectedBlock, selectedElement, "radar");
|
||||||
}
|
return;
|
||||||
}}
|
}
|
||||||
showEyeDropper={false}
|
}}
|
||||||
/>
|
showEyeDropper={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="design-section">
|
<div className="design-section">
|
||||||
<div className="section-header">Position</div>
|
<div className="section-header">Position</div>
|
||||||
@@ -323,105 +330,109 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
|
|||||||
)}
|
)}
|
||||||
{selectType === "data" && (
|
{selectType === "data" && (
|
||||||
<div className="data-details">
|
<div className="data-details">
|
||||||
<div className="data-wrapper">
|
{element?.type === "label-value" && (
|
||||||
<InputWithDropDown label="Title" value={`title`} placeholder={"Label 1"} min={0.1} step={0.1} max={2} onChange={() => {}} />
|
<div className="data-wrapper">
|
||||||
<div className="data">
|
<InputWithDropDown label="Title" value={`title`} placeholder={"Label 1"} min={0.1} step={0.1} max={2} onChange={() => {}} />
|
||||||
<DataDetailedDropdown
|
<div className="data">
|
||||||
title="Data Source"
|
<DataDetailedDropdown
|
||||||
placeholder="Select assets"
|
title="Data Source"
|
||||||
sections={[
|
placeholder="Select assets"
|
||||||
{
|
sections={[
|
||||||
title: "Global",
|
{
|
||||||
items: [{ id: "global", label: "Global", icon: <DeviceIcon /> }],
|
title: "Global",
|
||||||
},
|
items: [{ id: "global", label: "Global", icon: <DeviceIcon /> }],
|
||||||
{
|
},
|
||||||
title: "Assets",
|
{
|
||||||
items: [
|
title: "Assets",
|
||||||
{ id: "cmm-001", label: "CMM-001", icon: <DeviceIcon /> },
|
items: [
|
||||||
{ id: "cnc-1", label: "CNC-Lathe-0001", icon: <DeviceIcon /> },
|
{ id: "cmm-001", label: "CMM-001", icon: <DeviceIcon /> },
|
||||||
{ id: "cnc-2", label: "CNC-drilling-tapping-3Axis", icon: <DeviceIcon /> },
|
{ id: "cnc-1", label: "CNC-Lathe-0001", icon: <DeviceIcon /> },
|
||||||
{ id: "cnc-3", label: "CNC_0001", icon: <DeviceIcon /> },
|
{ id: "cnc-2", label: "CNC-drilling-tapping-3Axis", icon: <DeviceIcon /> },
|
||||||
],
|
{ id: "cnc-3", label: "CNC_0001", icon: <DeviceIcon /> },
|
||||||
},
|
],
|
||||||
]}
|
},
|
||||||
value={null}
|
]}
|
||||||
onChange={() => {}}
|
value={null}
|
||||||
dropDownHeader={"RT-Data"}
|
onChange={() => {}}
|
||||||
eyedroper={true}
|
dropDownHeader={"RT-Data"}
|
||||||
/>
|
eyedroper={true}
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="data">
|
<div className="data">
|
||||||
<DataDetailedDropdown
|
<DataDetailedDropdown
|
||||||
title="Value"
|
title="Value"
|
||||||
placeholder="Select Value"
|
placeholder="Select Value"
|
||||||
sections={[
|
sections={[
|
||||||
{
|
{
|
||||||
title: "Selected Assets name",
|
title: "Selected Assets name",
|
||||||
items: [
|
items: [
|
||||||
{ id: "ambientTemp", label: "ambientTemp", icon: <ParametersIcon /> },
|
{ id: "ambientTemp", label: "ambientTemp", icon: <ParametersIcon /> },
|
||||||
{ id: "measurementDeviation", label: "measurementDeviation", icon: <ParametersIcon /> },
|
{ id: "measurementDeviation", label: "measurementDeviation", icon: <ParametersIcon /> },
|
||||||
{ id: "powerConsumption", label: "powerConsumption", icon: <ParametersIcon /> },
|
{ id: "powerConsumption", label: "powerConsumption", icon: <ParametersIcon /> },
|
||||||
{ id: "probeX", label: "probePositionX", icon: <ParametersIcon /> },
|
{ id: "probeX", label: "probePositionX", icon: <ParametersIcon /> },
|
||||||
{ id: "probeY", label: "probePositionY", icon: <ParametersIcon /> },
|
{ id: "probeY", label: "probePositionY", icon: <ParametersIcon /> },
|
||||||
{ id: "probeZ", label: "probePositionZ", icon: <ParametersIcon /> },
|
{ id: "probeZ", label: "probePositionZ", icon: <ParametersIcon /> },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
value={null}
|
value={null}
|
||||||
onChange={() => {}}
|
onChange={() => {}}
|
||||||
dropDownHeader={"RT-Data-Value"}
|
dropDownHeader={"RT-Data-Value"}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
|
<>{console.log(element)}</>
|
||||||
{/* Data Mapping */}
|
{/* Data Mapping */}
|
||||||
<div className="data-mapping">
|
{element?.type === "graph" && (
|
||||||
<div className="heading">Data Mapping</div>
|
<div className="data-mapping">
|
||||||
|
<div className="heading">Data Mapping</div>
|
||||||
|
|
||||||
<div className="type-switch">
|
<div className="type-switch">
|
||||||
<div className={`type ${selectDataMapping === "singleMachine" ? "active" : ""}`} onClick={() => setSelectDataMapping("singleMachine")}>
|
<div className={`type ${selectDataMapping === "singleMachine" ? "active" : ""}`} onClick={() => setSelectDataMapping("singleMachine")}>
|
||||||
Single Machine
|
Single Machine
|
||||||
</div>
|
</div>
|
||||||
<div className={`type ${selectDataMapping === "multipleeMachine" ? "active" : ""}`} onClick={() => setSelectDataMapping("multipleeMachine")}>
|
<div className={`type ${selectDataMapping === "multipleeMachine" ? "active" : ""}`} onClick={() => setSelectDataMapping("multipleeMachine")}>
|
||||||
Multiple Machine
|
Multiple Machine
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{selectDataMapping === "singleMachine" && (
|
|
||||||
<div className="fields-wrapper">
|
|
||||||
{singleFields.map((field) => (
|
|
||||||
<DataSourceSelector key={field.id} label={field.label} options={["1h", "2h", "12h"]} onSelect={() => {}} showEyeDropper={!!field.showEyeDropper} />
|
|
||||||
))}
|
|
||||||
|
|
||||||
<div className="add-field" onClick={addField}>
|
|
||||||
<div className="icon">
|
|
||||||
<AddIcon />
|
|
||||||
</div>
|
|
||||||
<div className="label">Add Field</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
{selectDataMapping === "multipleeMachine" && (
|
{selectDataMapping === "singleMachine" && (
|
||||||
<div className="fields-wrapper">
|
<div className="fields-wrapper">
|
||||||
{multipleFields.map((field) => (
|
{singleFields.map((field) => (
|
||||||
<div className="datas" key={field.id}>
|
<DataSourceSelector key={field.id} label={field.label} options={["1h", "2h", "12h"]} onSelect={() => {}} showEyeDropper={!!field.showEyeDropper} />
|
||||||
<div className="datas__class">
|
))}
|
||||||
<DataSourceSelector label={field.label} options={["1h", "2h", "12h"]} onSelect={() => {}} showEyeDropper={field.label !== "Common Value"} />
|
|
||||||
|
<div className="add-field" onClick={addField}>
|
||||||
|
<div className="icon">
|
||||||
|
<AddIcon />
|
||||||
</div>
|
</div>
|
||||||
|
<div className="label">Add Field</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
|
||||||
|
|
||||||
<div className="add-field" onClick={addField}>
|
|
||||||
<div className="icon">
|
|
||||||
<AddIcon />
|
|
||||||
</div>
|
|
||||||
<div className="label">Add Field</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
|
||||||
</div>
|
{selectDataMapping === "multipleeMachine" && (
|
||||||
|
<div className="fields-wrapper">
|
||||||
|
{multipleFields.map((field) => (
|
||||||
|
<div className="datas" key={field.id}>
|
||||||
|
<div className="datas__class">
|
||||||
|
<DataSourceSelector label={field.label} options={["1h", "2h", "12h"]} onSelect={() => {}} showEyeDropper={field.label !== "Common Value"} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<div className="add-field" onClick={addField}>
|
||||||
|
<div className="icon">
|
||||||
|
<AddIcon />
|
||||||
|
</div>
|
||||||
|
<div className="label">Add Field</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user