Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Add data mapping options and improve layout in BlockEditor

Browse Source
This commit is contained in:
Nalvazhuthi
2025-12-16 13:02:15 +05:30
parent a771f34b04
commit a06768e0f2
2 changed files with 112 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
app/src/components/SimulationDashboard/components/block/BlockEditor.tsx
View File

@@ -35,6 +35,7 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
}) => {
const [selectType, setSelectType] = useState("data")
const [selectDataMapping, setSelectDataMapping] = useState("singleMachine")
return (
<div ref={blockEditorRef} className="panel block-editor-panel">
@@ -349,66 +350,121 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
</div>
{/* <div className="data-mapping">
{/* Data Mapping */}
<div className="data-mapping">
<div className="heading">Data Mapping</div>
<div className="type-switch">
<div
className={`type active`}
onClick={() => setSelectType("design")}
className={`type ${selectDataMapping === "singleMachine" ? "active" : ""}`}
onClick={() => setSelectDataMapping("singleMachine")}
>
Single Machine
</div>
<div
className={`type`}
onClick={() => setSelectType("data")}
className={`type ${selectDataMapping === "multipleeMachine" ? "active" : ""}`}
onClick={() => setSelectDataMapping("multipleeMachine")}
>
Multiple Machine
</div>
</div>
<div className="fields-wrapper">
<div className="datas">
<div className="datas__label">Data Source</div>
<div className="datas__class">
<RegularDropDown
header={"Select value"}
options={["1h", "2h", "12h"]}
onSelect={() => { }}
search={false}
/>
{selectDataMapping === "singleMachine" && (
<div className="fields-wrapper">
<div className="datas">
<div className="datas__label">Data Source</div>
<div className="datas__class">
<RegularDropDown
header={"Select value"}
options={["1h", "2h", "12h"]}
onSelect={() => { }}
search={false}
/>
<div className="icon"><EyeDroperIcon isActive={false} /></div>
</div>
</div>
</div>
<div className="datas">
<div className="datas__label">Input 1</div>
<div className="datas__class">
<RegularDropDown
header={"Select value"}
options={["1h", "2h", "12h"]}
onSelect={() => { }}
search={false}
/>
<div className="datas">
<div className="datas__label">Input 1</div>
<div className="datas__class">
<RegularDropDown
header={"Select value"}
options={["1h", "2h", "12h"]}
onSelect={() => { }}
search={false}
/>
</div>
</div>
</div>
<div className="datas">
<div className="datas__label">Input 2</div>
<div className="datas__class">
<RegularDropDown
header={"Select value"}
options={["1h", "2h", "12h"]}
onSelect={() => { }}
search={false}
/>
<div className="datas">
<div className="datas__label">Input 2</div>
<div className="datas__class">
<RegularDropDown
header={"Select value"}
options={["1h", "2h", "12h"]}
onSelect={() => { }}
search={false}
/>
</div>
</div>
</div>
<div className="add-field">
<div className="icon"><AddIcon /></div>
<div className="label">Add Field</div>
</div>
<div className="add-field">
<div className="icon"><AddIcon /></div>
<div className="label">Add Field</div>
</div>
</div>
</div> */}
</div>
)}
{selectDataMapping === "multipleeMachine" && (
<div className="fields-wrapper">
<div className="datas">
<div className="datas__label">Common Value</div>
<div className="datas__class">
<RegularDropDown
header={"Select value"}
options={["1h", "2h", "12h"]}
onSelect={() => { }}
search={false}
/>
</div>
</div>
<div className="datas">
<div className="datas__label">Data Source</div>
<div className="datas__class">
<RegularDropDown
header={"Select assets"}
options={["1h", "2h", "12h"]}
onSelect={() => { }}
search={false}
/>
<div className="icon"><EyeDroperIcon isActive={false} /></div>
</div>
</div>
<div className="datas">
<div className="datas__label">Data Source</div>
<div className="datas__class">
<RegularDropDown
header={"Select assets"}
options={["1h", "2h", "12h"]}
onSelect={() => { }}
search={false}
/>
<div className="icon"><EyeDroperIcon isActive={false} /></div>
</div>
</div>
<div className="add-field">
<div className="icon"><AddIcon /></div>
<div className="label">Add Field</div>
</div>
</div>
)}
</div>
</div>
)}
</div>

17
app/src/styles/components/simulationDashboard/_simulationDashBoard.scss
View File

@@ -318,8 +318,8 @@
min-width: 280px;
height: fit-content;
min-width: 320px;
min-height: 70vh;
padding: 20px 8px;
min-height: 60vh;
padding: 12px;
// h4 {
// color: #4caf50;
// }
@@ -402,12 +402,23 @@
.datas {
width: 100%;
display: flex;
align-items: center;
padding: 6px 12px;
.datas__label,
.datas__class {
flex: 1;
}
.datas__label {
flex: 0.8;
}
.datas__class {
display: flex;
align-items: center;
gap: 4px;
}
}
.add-field {
@@ -746,7 +757,7 @@
justify-content: space-between;
align-items: center;
.data-section-count{
.data-section-count {
font-size: 10px;
}
}