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

feat: Implement simulation dashboard with Zustand store, types, and UI components for block and element management.

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-12-20 17:30:39 +05:30
parent b10afc975c
commit 0d6bdf6157
6 changed files with 60 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/components/SimulationDashboard/DashboardEditor.tsx
View File

@@ -55,6 +55,7 @@ const DashboardEditor: React.FC = () => {
peekUpdateGraphData,
peekUpdateGraphTitle,
peekUpdateGraphType,
peekUpdateTextValue,
peekUpdateDataType,
peekUpdateCommonValue,
peekUpdateDataValue,
@@ -611,6 +612,13 @@ const DashboardEditor: React.FC = () => {
await updateBackend(updatedBlock);
}
}}
updateTextValue={async (blockId, elementId, textValue) => {
const updatedBlocks = peekUpdateTextValue(blockId, elementId, textValue);
const updatedBlock = getBlockFromPeekedBlocks(updatedBlocks, blockId);
if (updatedBlock) {
await updateBackend(updatedBlock);
}
}}
updateDataType={async (blockId, elementId, dataType) => {
const updatedBlocks = peekUpdateDataType(blockId, elementId, dataType);
const updatedBlock = getBlockFromPeekedBlocks(updatedBlocks, blockId);

15
app/src/components/SimulationDashboard/components/element/ElementDesign.tsx
View File

@@ -25,6 +25,7 @@ interface ElementDesignProps {
updateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => void;
updateGraphTitle: (blockId: string, elementId: string, title: string) => void;
updateGraphType: (blockId: string, elementId: string, type: GraphTypes) => void;
updateTextValue: (blockId: string, elementId: string, textValue: string) => void;
updateDataType: (blockId: string, elementId: string, dataType: "single-machine" | "multiple-machine") => void;
updateCommonValue: (blockId: string, elementId: string, commonValue: string) => void;
updateDataValue: (blockId: string, elementId: string, dataValue: string | string[]) => void;
@@ -45,6 +46,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
updateElementZIndex,
updateGraphTitle,
updateGraphType,
updateTextValue,
}) => {
const [color, setColor] = useState("#000000");
@@ -76,6 +78,19 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
</div>
)}
{element?.type === "text" && (
<div className="design-section">
<InputWithDropDown
label="Text Value"
value={currentElement.textValue || ""}
placeholder={"Enter text..."}
onChange={(newValue: string) => {
updateTextValue(selectedBlock, selectedElement, newValue);
}}
/>
</div>
)}
<div className="design-section">
<div className="section-header">Position</div>
<div className="select-type">

3
app/src/components/SimulationDashboard/components/element/ElementEditor.tsx
View File

@@ -25,6 +25,7 @@ interface ElementEditorProps {
updateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => void;
updateGraphTitle: (blockId: string, elementId: string, title: string) => void;
updateGraphType: (blockId: string, elementId: string, type: GraphTypes) => void;
updateTextValue: (blockId: string, elementId: string, textValue: string) => void;
updateDataType: (blockId: string, elementId: string, dataType: "single-machine" | "multiple-machine") => void;
updateCommonValue: (blockId: string, elementId: string, commonValue: string) => void;
updateDataValue: (blockId: string, elementId: string, dataValue: string | string[]) => void;
@@ -46,6 +47,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
updateGraphData,
updateGraphTitle,
updateGraphType,
updateTextValue,
updateDataType,
updateCommonValue,
updateDataValue,
@@ -562,6 +564,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
updateGraphData={updateGraphData}
updateGraphTitle={updateGraphTitle}
updateGraphType={updateGraphType}
updateTextValue={updateTextValue}
updateDataType={updateDataType}
updateCommonValue={updateCommonValue}
updateDataValue={updateDataValue}

5
app/src/components/SimulationDashboard/functions/helpers/resolveElementValue.ts
View File

@@ -1,6 +1,11 @@
import type { UIElement } from "../../../../types/exportedTypes";
export const resolveElementValue = (element: UIElement) => {
// For text elements, return the textValue
if (element.type === "text") {
return { value: element.textValue || "Text" };
}
if (!element.dataBinding) {
return { value: "No data" };
}

28
app/src/store/simulation/useSimulationDashBoardStore.ts
View File

@@ -48,6 +48,7 @@ interface SimulationDashboardStore {
updateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => void;
updateGraphTitle: (blockId: string, elementId: string, title: string) => void;
updateGraphType: (blockId: string, elementId: string, graphType: GraphTypes) => void;
updateTextValue: (blockId: string, elementId: string, textValue: string) => void;
// Element swapping
swapElements: (blockId: string, elementId1: string, elementId2: string) => void;
@@ -73,6 +74,7 @@ interface SimulationDashboardStore {
peekUpdateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => Block[];
peekUpdateGraphTitle: (blockId: string, elementId: string, title: string) => Block[];
peekUpdateGraphType: (blockId: string, elementId: string, graphType: GraphTypes) => Block[];
peekUpdateTextValue: (blockId: string, elementId: string, textValue: string) => Block[];
peekUpdateDataType: (blockId: string, elementId: string, dataType: "single-machine" | "multiple-machine") => Block[];
peekUpdateCommonValue: (blockId: string, elementId: string, commonValue: string) => Block[];
peekUpdateDataValue: (blockId: string, elementId: string, dataValue: string | string[]) => Block[];
@@ -321,6 +323,7 @@ export const createSimulationDashboardStore = () => {
newElement = {
...commonProps,
type: "text",
textValue: "Text",
style: {
color: "#ffffff",
fontSize: 14,
@@ -487,6 +490,18 @@ export const createSimulationDashboardStore = () => {
});
},
updateTextValue: (blockId, elementId, textValue) => {
set((state) => {
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element && element.type === "text") {
element.textValue = textValue;
}
}
});
},
// Element swapping
swapElements: (blockId, elementId1, elementId2) => {
set((state) => {
@@ -685,6 +700,7 @@ export const createSimulationDashboardStore = () => {
newElement = {
...commonProps,
type: "text",
textValue: "Text",
style: {
color: "#ffffff",
fontSize: 14,
@@ -846,6 +862,18 @@ export const createSimulationDashboardStore = () => {
return blocks;
},
peekUpdateTextValue: (blockId, elementId, textValue) => {
const blocks = cloneBlocks(get().blocks);
const block = blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element && element.type === "text") {
element.textValue = textValue;
}
}
return blocks;
},
peekUpdateDataType: (blockId: string, elementId: string, dataType: DataType) => {
const blocks = cloneBlocks(get().blocks);

1
app/src/types/exportedTypes.ts
View File

@@ -20,6 +20,7 @@ export type UIElement = {
type: UIType;
graphType?: GraphTypes;
graphTitle?: string;
textValue?: string;
style: ExtendedCSSProperties;
dataBinding?: ElementDataBinding;
position?: Position;