@@ -52,6 +61,7 @@ const DictInputRow = (props) => {
data-index={index}
value={dict[key]}
placeholder={props.valuePlaceholder}
+ className={className}
onChange={e => onChangeValue(key, e.target.value)}
/>
{tooltip}
diff --git a/relog-web/src/FileInputRow.js b/relog-web/src/FileInputRow.js
index 71239a9..a2b0099 100644
--- a/relog-web/src/FileInputRow.js
+++ b/relog-web/src/FileInputRow.js
@@ -2,7 +2,6 @@ import form_styles from './Form.module.css';
import Button from './Button';
const FileInputRow = (props) => {
-
let tooltip = "";
if (props.tooltip != undefined) {
tooltip =
-
+
diff --git a/relog-web/src/Form.js b/relog-web/src/Form.js
index e2c4607..4776a05 100644
--- a/relog-web/src/Form.js
+++ b/relog-web/src/Form.js
@@ -1,3 +1,17 @@
+const VALIDATION_REGEX = {
+ int: new RegExp('^[0-9]+$'),
+ intList: new RegExp('^\[[0-9]+(,[0-9]+)*\]$'),
+ float: new RegExp('^[0-9]*\\.?[0-9]*$'),
+};
+
+export const validate = (kind, value) => {
+ if (value.length == 0) return false;
+ if (!VALIDATION_REGEX[kind].test(value)) {
+ return false;
+ }
+ return true;
+};
+
const Form = (props) => {
return <>{props.children}>;
};
diff --git a/relog-web/src/Form.module.css b/relog-web/src/Form.module.css
index 4885c4e..8a508d0 100644
--- a/relog-web/src/Form.module.css
+++ b/relog-web/src/Form.module.css
@@ -20,4 +20,9 @@
.FormRow_unit {
color: rgba(0, 0, 0, 0.4);
+}
+
+.invalid {
+ border: 2px solid #faa !important;
+ background-color: rgba(255, 0, 0, 0.05);
}
\ No newline at end of file
diff --git a/relog-web/src/InputPage.js b/relog-web/src/InputPage.js
index 9edd5d9..8c93220 100644
--- a/relog-web/src/InputPage.js
+++ b/relog-web/src/InputPage.js
@@ -12,7 +12,7 @@ const defaultData = {
parameters: {
"time horizon (years)": "1",
"building period (years)": "[1]",
- "annual inflation rate (%)": "0.0",
+ "annual inflation rate (%)": "0",
},
products: {
},
@@ -21,15 +21,13 @@ const defaultData = {
};
const defaultProduct = {
- "acquisition cost ($/tonne)": "0.00",
- "disposal cost ($/tonne)": "0.00",
+ "initial amounts": {},
+ "acquisition cost ($/tonne)": "0",
+ "disposal cost ($/tonne)": "0",
"disposal limit (tonne)": "0",
- "transportation cost ($/km/tonne)": "0.00",
+ "transportation cost ($/km/tonne)": "0",
"transportation energy (J/km/tonne)": "0",
- "transportation emissions (J/km/tonne)": {
- "CO2": 0,
- "NH2": 0,
- }
+ "transportation emissions (J/km/tonne)": {}
};
const randomPosition = () => {
diff --git a/relog-web/src/ParametersBlock.js b/relog-web/src/ParametersBlock.js
index 57fb950..1a7fc3f 100644
--- a/relog-web/src/ParametersBlock.js
+++ b/relog-web/src/ParametersBlock.js
@@ -19,6 +19,7 @@ const ParametersBlock = (props) => {
tooltip="Number of years in the simulation."
value={props.value["time horizon (years)"]}
onChange={v => onChangeField("time horizon (years)", v)}
+ validate="int"
/>
{
tooltip="List of years in which we are allowed to open new plants. For example, if this parameter is set to [1,2,3], we can only open plants during the first three years. By default, this equals [1]; that is, plants can only be opened during the first year."
value={props.value["building period (years)"]}
onChange={v => onChangeField("building period (years)", v)}
+ validate="intList"
/>
{
tooltip="Rate of inflation applied to all costs."
value={props.value["annual inflation rate (%)"]}
onChange={v => onChangeField("annual inflation rate (%)", v)}
+ validate="float"
/>
diff --git a/relog-web/src/ProductBlock.js b/relog-web/src/ProductBlock.js
index fb7dcac..f4379c0 100644
--- a/relog-web/src/ProductBlock.js
+++ b/relog-web/src/ProductBlock.js
@@ -13,6 +13,8 @@ const ProductBlock = (props) => {
props.onChange(newProduct);
};
+ const nCenters = Object.keys(props.value["initial amounts"]).length;
+
return (
<>
@@ -20,6 +22,7 @@ const ProductBlock = (props) => {
diff --git a/relog-web/src/TextInputRow.js b/relog-web/src/TextInputRow.js
index 193e31a..13daf94 100644
--- a/relog-web/src/TextInputRow.js
+++ b/relog-web/src/TextInputRow.js
@@ -1,5 +1,6 @@
import form_styles from './Form.module.css';
import Button from './Button';
+import { validate } from './Form';
const TextInputRow = (props) => {
let unit = "";
@@ -12,6 +13,14 @@ const TextInputRow = (props) => {
tooltip = ;
}
+ let isValid = true;
+ if (props.validate !== undefined) {
+ isValid = validate(props.validate, props.value);
+ }
+
+ let className = "";
+ if (!isValid) className = form_styles.invalid;
+
return