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

Write Preview
Loading…
Cancel
Save