ANL-CEEESA
/
RELOG
mirror of https://github.com/ANL-CEEESA/RELOG.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

consolidated add, move, remove functions

Browse Source
pull/33/head
Khwaja 2 months ago
parent 9761a47c86
commit 052cd374c0
1 changed files with 158 additions and 254 deletions
Show Stats Download Patch File Download Diff File

276
web/src/components/CaseBuilder/CaseBuilder.tsx
Unescape View File

@ -9,130 +9,87 @@ import Header from "./Header";
import "tabulator-tables/dist/css/tabulator.min.css";
import "../Common/Forms/Tables.css";
import Footer from "./Footer";
import React, { useState,useRef } from "react";
import React, { useState, useRef } from "react";
import { defaultPlant, defaultProduct, defaultCenter } from "./defaults";
import PipelineBlock from "./PipelineBlock";
import '@xyflow/react/dist/style.css';
import { PlantNode, CenterNode, ProductNode, RELOGScenario} from "./CircularData";
import "@xyflow/react/dist/style.css";
import {
PlantNode,
CenterNode,
ProductNode,
RELOGScenario,
} from "./CircularData";
import { idText } from "typescript";
declare global {
interface Window {
nextX: number;
nextY: number;
}
}
}
const Default_Scenario: RELOGScenario = {
Parameters: { version: "1.0"},
const Default_Scenario: RELOGScenario = {
Parameters: { version: "1.0" },
Plants: {},
Products: {},
Centers: {},
};
};
const CaseBuilder = () => {
const nextUid= useRef(1);
const nextUid = useRef(1);
const [scenario, setScenario] = useState<RELOGScenario>(Default_Scenario);
const onClear = () => {};
const onSave = () => {};
const onLoad = () => {};
const randomPosition = (): [number,number] => {
const nextNodePosition = (): [number, number] => {
if (window.nextX === undefined) window.nextX = 15;
if (window.nextY === undefined) window.nextY = 15;
window.nextY +=60;
if (window.nextY >=500) {
window.nextY += 60;
if (window.nextY >= 500) {
window.nextY = 15;
window.nextX += 150;
}
return [window.nextX, window.nextY];
};
const promptName = (prevData:RELOGScenario): string | undefined => {
const promptName = (): string | undefined => {
const name = prompt("Name");
if (!name || name.length ===0) return;
if (!name || name.length === 0) return;
return name;
};
const onAddPlant = () => {
setScenario((prevData) => {
const name = promptName(prevData);
if (name ===undefined) return prevData;
const uid = `${name}-${nextUid.current++}`;
const [x,y] = randomPosition();
const newData: RELOGScenario = {
...prevData,
Plants: {
...prevData.Plants,
[uid]: {
...defaultPlant,
x,
y,
name,
uid
}
}
};
return newData;
});
};
type EntityKey = "Plants" | "Products" | "Centers";
const onAddProduct = () => {
const onAddNode = (type: EntityKey) => {
setScenario((prevData) => {
const name = promptName(prevData);
if (name ===undefined) return prevData;
const uid = `${name}-${nextUid.current++}`;
const [x,y] = randomPosition();
const newData: RELOGScenario = {
...prevData,
Products: {
...prevData.Products,
[uid]: {
...defaultProduct,
x,
y,
name,
uid
}
const name = promptName();
if (!name) return prevData;
const uid = `${name}-$${nextUid.current++}`;
const [x, y] = nextNodePosition();
let newNode;
if (type === "Plants") {
newNode = { ...defaultPlant, uid, name, x, y };
} else if (type === "Products") {
newNode = { ...defaultProduct, uid, name, x, y };
} else {
newNode = { ...defaultCenter, uid, name, x, y };
}
};
return newData;
});
};
const onAddCenter = () => {
setScenario((prevData) => {
const name = promptName(prevData);
if (name ===undefined) return prevData;
const uid = `${name}-${nextUid.current++}`;
const [x,y] = randomPosition();
const newData: RELOGScenario = {
return {
...prevData,
Centers: {
...prevData.Centers,
[uid]: {
...defaultCenter,
x,
y,
name,
uid
}
}
};
return newData;
[type]: {
...prevData[type],
[uid]: newNode,
},
} as RELOGScenario;
});
};
};
const onSetCenterInput = (centerName: string, productName: string) => {
const onSetCenterInput = (centerName: string, productName: string) => {
setScenario((prev) => {
const center = prev.Centers[centerName];
if (!center) return prev;
@ -140,54 +97,40 @@ const onSetCenterInput = (centerName: string, productName: string) => {
...prev,
centers: {
...prev.Centers,
[centerName]: { ...center, input: productName},
[centerName]: { ...center, input: productName },
},
};
});
};
};
const onSetPlantInput = (plantName: string, productName: string) => {
setScenario((prevData: RELOGScenario) => {
const plant = prevData.Plants[plantName];
if (!plant) return prevData;
const updatedPlant: PlantNode = {
...plant,
inputs: plant.inputs.includes(productName)
? plant.inputs
: [...plant.inputs, productName],
};
return {
...prevData,
plants: {
...prevData.Plants,
[plantName]: updatedPlant,
},
};
});
};
};
const onAddPlantOutput = (plantName: string, productName: string) => {
setScenario(prevData => {
const onAddPlantOutput = (plantName: string, productName: string) => {
setScenario((prevData) => {
const plant = prevData.Plants[plantName];
if (!plant) return prevData;
@ -206,9 +149,9 @@ const onAddPlantOutput = (plantName: string, productName: string) => {
},
};
});
};
};
const onAddCenterOutput = (centerName: string, productName: string) => {
const onAddCenterOutput = (centerName: string, productName: string) => {
setScenario((prev) => {
const center = prev.Centers[centerName];
if (!center) return prev;
@ -218,123 +161,84 @@ const onAddCenterOutput = (centerName: string, productName: string) => {
...prev,
centers: {
...prev.Centers,
[centerName]: { ...center, output: updatedOutputs},
[centerName]: { ...center, output: updatedOutputs },
},
};
});
};
const onMovePlant = (plantName: string, x: number, y: number) => {
setScenario((prevData: RELOGScenario): RELOGScenario => {
const newData: RELOGScenario ={ ...prevData};
if (!newData.Plants[plantName]) return prevData;
newData.Plants[plantName].x =x;
newData.Plants[plantName].y =y;
return newData;
});
};
const onMoveProduct = (productName: string, x: number, y: number) => {
setScenario((prevData: RELOGScenario): RELOGScenario => {
const newData: RELOGScenario ={ ...prevData};
const product = newData.Products[productName];
if (!product) return prevData;
product.x = x;
product.y =y;
return newData;
});
};
const onMoveNode = (type: EntityKey, id: string, x: number, y: number) => {
setScenario((prevData) => {
const nodesMap = prevData[type];
const node = nodesMap[id];
if (!node) return prevData;
const onMoveCenter = (centerName: string, x: number, y: number) => {
setScenario((prev) => {
const center = prev.Centers[centerName];
if (!center) return prev;
return {
...prev,
centers: {
...prev.Centers,
[centerName]: { ...center,x,y},
...prevData,
[type]: {
...nodesMap,
[id]: { ...node, x, y },
},
};
} as RELOGScenario;
});
};
const onRemovePlant = (plantName: string) => {
setScenario(prev => {
const next = { ...prev };
delete next.Plants[plantName];
const onRemoveNode = (type: EntityKey, id: string) => {
setScenario((prevData) => {
const nodesMap = { ...prevData[type] };
delete nodesMap[id];
return next;
});
return {
...prevData,
[type]: nodesMap,
};
const onRemoveProduct = (productName: string) => {
setScenario(prev => {
const next = { ...prev };
delete next.Products[productName];
return next;
});
};
const onRemoveCenter = (centerName: string) => {
setScenario(prev => {
const next = { ...prev };
delete next.Centers[centerName];
return next;
});
};
const onRenamePlant = (uniqueId: string, newName: string) => {
setScenario(prev => {
setScenario((prev) => {
const plant = prev.Plants[uniqueId];
if (!plant) return prev;
const next = {
...prev,
plants: {
...prev.Plants,
[uniqueId]: { ...plant, name: newName},
[uniqueId]: { ...plant, name: newName },
},
};
return next;
});
};
const onRenameProduct = (uniqueId: string, newName: string) => {
setScenario(prev => {
const onRenameProduct = (uniqueId: string, newName: string) => {
setScenario((prev) => {
const product = prev.Products[uniqueId];
if (!product) return prev;
const next = {
...prev,
products: {
...prev.Products,
[uniqueId]: { ...product, name: newName},
[uniqueId]: { ...product, name: newName },
},
};
return next;
});
};
};
const onRenameCenter = (uniqueId: string, newName: string) => {
setScenario(prev => {
const onRenameCenter = (uniqueId: string, newName: string) => {
setScenario((prev) => {
const center = prev.Centers[uniqueId];
if (!center) return prev;
const next = {
...prev,
centers: {
...prev.Centers,
[uniqueId]: { ...center, name: newName},
[uniqueId]: { ...center, name: newName },
},
};
return next;
});
};
};
return (
<div>
@ -343,28 +247,28 @@ const onRenameCenter = (uniqueId: string, newName: string) => {
<div id="contentBackground">
<div id="content">
<PipelineBlock
onAddPlant={onAddPlant}
onAddProduct={onAddProduct}
onMovePlant={onMovePlant}
onMoveProduct={onMoveProduct}
onAddPlant={() => onAddNode("Plants")}
onAddProduct={() => onAddNode("Products")}
onMovePlant={(id, x, y) => onMoveNode("Plants", id, x, y)}
onMoveProduct={(id, x, y) => onMoveNode("Products", id, x, y)}
plants={scenario.Plants}
products={scenario.Products}
onSetPlantInput={onSetPlantInput}
onAddPlantOutput={onAddPlantOutput}
onAddCenter= {onAddCenter}
onAddCenter={() => onAddNode("Centers")}
onAddCenterInput={onSetCenterInput}
onAddCenterOutput={onAddCenterOutput}
onMoveCenter={onMoveCenter}
onMoveCenter={(id, x, y) => onMoveNode("Centers", id, x, y)}
centers={scenario.Centers}
onRemovePlant={onRemovePlant}
onRemoveProduct={onRemoveProduct}
onRemoveCenter={onRemoveCenter}
onRenamePlant = {onRenamePlant}
onRenameProduct = {onRenameProduct}
onRenameCenter = {onRenameCenter}
onRemovePlant={(id) => onRemoveNode("Plants", id)}
onRemoveProduct={(id) => onRemoveNode("Products", id)}
onRemoveCenter={(id) => onRemoveNode("Centers", id)}
onRenamePlant={onRenamePlant}
onRenameProduct={onRenameProduct}
onRenameCenter={onRenameCenter}
/>
</div>
</div>
</div>
</div>
<Footer />
</div>

Write Preview
Loading…
Cancel
Save