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

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

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