From 357e3129b11c2f19b930eb802edddd3906619e6c Mon Sep 17 00:00:00 2001 From: Khwaja Date: Tue, 17 Jun 2025 11:15:41 -0500 Subject: [PATCH] Refactored the onAddPlant and onAddProduct setup, created typesafe interfaces for defaultPlant and defaultProduct, imported idex.css as well --- package-lock.json | 6 + .../components/CaseBuilder/CaseBuilder.tsx | 59 +++++++--- web/src/components/CaseBuilder/defaults.ts | 72 ++++++++++++ web/src/index.css | 109 ++++++++++++++++++ web/tsconfig.json | 3 +- 5 files changed, 233 insertions(+), 16 deletions(-) create mode 100644 package-lock.json create mode 100644 web/src/components/CaseBuilder/defaults.ts create mode 100644 web/src/index.css diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..9737715 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "RELOG", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/web/src/components/CaseBuilder/CaseBuilder.tsx b/web/src/components/CaseBuilder/CaseBuilder.tsx index be7b1d4..9183a74 100644 --- a/web/src/components/CaseBuilder/CaseBuilder.tsx +++ b/web/src/components/CaseBuilder/CaseBuilder.tsx @@ -10,8 +10,9 @@ import "tabulator-tables/dist/css/tabulator.min.css"; import "../Common/Forms/Tables.css"; import Footer from "./Footer"; import React, { useState } from "react"; -import {CircularData} from "./CircularData.ts"; - +import {CircularData} from "./CircularData"; +import { defaultPlant, defaultProduct } from "./defaults"; +import "../../index.css"; declare global { interface Window { nextX: number; @@ -41,9 +42,9 @@ const CaseBuilder = () => { window.nextX += 150; } - return [window.nextX, window.nextY] + return [window.nextX, window.nextY]; - } + }; const promptName = (prevData:CircularData): string | undefined => { const name = prompt("Name"); @@ -57,23 +58,51 @@ const CaseBuilder = () => { setCircularData((prevData) => { const id = promptName(prevData); if (id ==undefined) return prevData; - const newData = { ...prevData}; const [x,y] = randomPosition(); - newData.plants[id] = { - ...defaultPlant, - x: x, - y: y, - - }; - onSave(newData); - return newData; + const newData: CircularData = { + ...prevData, + plants: { + ...prevData.plants, + [id]: { + ...defaultPlant, + x, + y, + } + } + }; + return newData; }); - } + }; + + const onAddProduct = () => { + setCircularData((prevData) => { + const id = promptName(prevData); + if (id ==undefined) return prevData; + const [x,y] = randomPosition(); + const newData: CircularData = { + ...prevData, + products: { + ...prevData.products, + [id]: { + ...defaultProduct, + x, + y, + } + } + }; + return newData; + }); + + }; return (
-
+
+
+
+
+
); diff --git a/web/src/components/CaseBuilder/defaults.ts b/web/src/components/CaseBuilder/defaults.ts new file mode 100644 index 0000000..183cc7b --- /dev/null +++ b/web/src/components/CaseBuilder/defaults.ts @@ -0,0 +1,72 @@ +import { CircularPlant, CircularProduct } from "./CircularData"; + +export interface DefaultProduct extends CircularProduct{ + "initial amounts": Record; + "acquisition cost ($/tonne)": string; + "disposal cost ($/tonne)": string; + "disposal limit (tonne)": string; + "disposal limit (%)": string; + "transportation cost ($/km/tonne)": string; + "transportation energy (J/km/tonne)": string; + "transportation emissions (tonne/km/tonne)": Record; + x: number; + y: number; +} + +export interface DefaultPlant extends CircularPlant{ + locations: Record; + "outputs (tonne/tonne)": Record; + "disposal cost ($/tonne)": Record; + "disposal limit (tonne)": Record; + "emissions (tonne/tonne)": Record; + storage: { + "cost ($/tonne)": string; + "limit (tonne)": string; + }; + "maximum capacity (tonne)": string; + "minimum capacity (tonne)": string; + "opening cost (max capacity) ($)": string; + "opening cost (min capacity) ($)": string; + "fixed operating cost (max capacity) ($)": string; + "fixed operating cost (min capacity) ($)": string; + "variable operating cost ($/tonne)": string; + "energy (GJ/tonne)": string; + x: number; + y: number; +} + +export const defaultProduct: DefaultProduct = { +"initial amounts": {}, + "acquisition cost ($/tonne)": "0", + "disposal cost ($/tonne)": "0", + "disposal limit (tonne)": "0", + "disposal limit (%)": "", + "transportation cost ($/km/tonne)": "0", + "transportation energy (J/km/tonne)": "0", + "transportation emissions (tonne/km/tonne)": {}, + x: 0, + y: 0, + +}; + +export const defaultPlant: DefaultPlant = { + locations: {}, + "outputs (tonne/tonne)": {}, + "disposal cost ($/tonne)": {}, + "disposal limit (tonne)": {}, + "emissions (tonne/tonne)": {}, + storage: { + "cost ($/tonne)": "0", + "limit (tonne)": "0", + }, + "maximum capacity (tonne)": "0", + "minimum capacity (tonne)": "0", + "opening cost (max capacity) ($)": "0", + "opening cost (min capacity) ($)": "0", + "fixed operating cost (max capacity) ($)": "0", + "fixed operating cost (min capacity) ($)": "0", + "variable operating cost ($/tonne)": "0", + "energy (GJ/tonne)": "0", + x: 0, + y: 0, +}; \ No newline at end of file diff --git a/web/src/index.css b/web/src/index.css new file mode 100644 index 0000000..b55e2ed --- /dev/null +++ b/web/src/index.css @@ -0,0 +1,109 @@ +:root { + --site-width: 1200px; + --box-border: 1px solid rgba(0, 0, 0, 0.2); + --box-shadow: 0px 2px 4px -3px rgba(0, 0, 0, 0.2); + --border-radius: 4px; + --primary: #0d6efd; +} + +html, +body { + margin: 0; + padding: 0; + border: 0; + font-family: sans-serif; +} + +body { + background-color: #333; + color: rgba(0, 0, 0, 0.95); +} + +#contentBackground { + background-color: #f6f6f6; +} + +#content { + max-width: var(--site-width); + min-width: 900px; + margin: 0 auto; + padding: 1px 6px 32px 6px; +} + +.react-flow__node.selected { + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2) !important; + border-width: 2px !important; + margin-top: -1px !important; + margin-left: -1px !important; + border-radius: 8px !important; +} + +.react-flow__handle { + width: 6px !important; + height: 6px !important; + background-color: white !important; + border: 1px solid black !important; +} + +.react-flow__handle:hover { + background-color: black !important; +} + +.react-flow__handle-right { + right: -4px !important; +} + +.react-flow__handle-left { + left: -4px !important; +} + +#messageTray { + max-width: var(--site-width); + margin: 0 auto; + position: fixed; + bottom: 12px; + left: 0; + right: 0; + z-index: 100; +} + +#messageTray .message { + background-color: rgb(221, 69, 69); + color: #eee; + padding: 12px; + border-radius: var(--border-radius); + box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4); + display: flex; + margin-top: 12px; +} + +#messageTray .message p { + flex: 1; + margin: 0; + padding: 12px 0; +} + +#messageTray .message button { + margin: 0; + background: transparent; + border: 1px solid #eee; + color: #eee; + float: right; + padding: 0 24px; + line-height: 6px; +} + +#messageTray .message button:hover { + background: rgba(255, 255, 255, 0.05); +} + +#messageTray .message button:active { + background: rgba(255, 255, 255, 0.1); +} + +.nodata { + text-align: center; + padding: 24px 0; + color: #888; + margin: 0; +} \ No newline at end of file diff --git a/web/tsconfig.json b/web/tsconfig.json index a5a6cae..13cc76e 100644 --- a/web/tsconfig.json +++ b/web/tsconfig.json @@ -29,7 +29,8 @@ "noUncheckedIndexedAccess": true, "noUnusedLocals": false, "noUnusedParameters": false, - "checkJs": true + "checkJs": false, + "allowImportingTsExtensions": true }, "include": ["src"] }