Add start parameters to simulation

src/components/dialog/edit-simulation.js

@@ -23,69 +23,81 @@ import React from 'react';
 import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
 
 import Dialog from './dialog';
+import ParametersEditor from '../parameters-editor';
 
 class EditSimulationDialog extends React.Component {
-  valid: false;
+    valid = true;
 
-  constructor(props) {
-    super(props);
+    constructor(props) {
+        super(props);
 
-    this.state = {
-      name: '',
-      _id: ''
-    }
-  }
-
-  onClose(canceled) {
-    if (canceled === false) {
-      if (this.valid) {
-        this.props.onClose(this.state);
-      }
-    } else {
-      this.props.onClose();
-    }
-  }
-
-  handleChange(e) {
-    this.setState({ [e.target.id]: e.target.value });
-  }
-
-  resetState() {
-    this.setState({
-      name: this.props.simulation.name,
-      _id: this.props.simulation._id
-    });
-  }
-
-  validateForm(target) {
-    // check all controls
-    var name = true;
-
-    if (this.state.name === '') {
-      name = false;
+        this.state = {
+            name: '',
+            _id: '',
+            startParameters: {}
+        };
     }
 
-    this.valid = name;
+    onClose = canceled => {
+        if (canceled) {
+            if (this.props.onClose != null) {
+                this.props.onClose();
+            }
 
-    // return state to control
-    if (target === 'name') return name ? "success" : "error";
+            return;
+        }
 
-    return "success";
-  }
+        if (this.valid && this.props.onClose != null) {
+            this.props.onClose(this.state);
+        }
+    }
 
-  render() {
-    return (
-      <Dialog show={this.props.show} title="Edit Simulation" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
-        <form>
-          <FormGroup controlId="name" validationState={this.validateForm('name')}>
-            <ControlLabel>Name</ControlLabel>
-            <FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
-            <FormControl.Feedback />
-          </FormGroup>
-        </form>
-      </Dialog>
-    );
-  }
+    handleChange = event => {
+        this.setState({ [event.target.id]: event.target.value });
+    }
+
+    resetState = () => {
+        this.setState({
+            name: this.props.simulation.name,
+            _id: this.props.simulation._id,
+            startParameters: this.props.simulation.startParameters || {}
+        });
+    }
+
+    handleStartParametersChange = startParameters => {
+        this.setState({ startParameters });
+    }
+
+    validateForm(target) {
+        let name = true;
+
+        if (this.state.name === '') {
+            name = false;
+        }
+
+        this.valid = name;
+
+        // return state to control
+        if (target === 'name') return name ? 'success' : 'error';
+    }
+
+    render() {
+        return <Dialog show={this.props.show} title='Edit Simulation' buttonTitle='Save' onClose={this.onClose} onReset={this.resetState} valid={true}>
+            <form>
+                <FormGroup controlId='name' validationState={this.validateForm('name')}>
+                    <ControlLabel>Name</ControlLabel>
+                    <FormControl type='text' placeholder='Enter name' value={this.state.name} onChange={this.handleChange} />
+                    <FormControl.Feedback />
+                </FormGroup>
+
+                <FormGroup controlId='startParameters'>
+                    <ControlLabel>Start Parameters</ControlLabel>
+
+                    <ParametersEditor content={this.state.startParameters} onChange={this.handleStartParametersChange} />
+                </FormGroup>
+            </form>
+        </Dialog>;
+    }
 }
 
 export default EditSimulationDialog;

src/components/dialog/import-simulation.js

@@ -23,118 +23,133 @@ import React from 'react';
 import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
 
 import Dialog from './dialog';
+import ParametersEditor from '../parameters-editor';
 
 class ImportSimulationDialog extends React.Component {
-  valid = false;
-  imported = false;
+    valid = false;
+    imported = false;
 
-  constructor(props) {
-    super(props);
+    constructor(props) {
+        super(props);
 
-    this.state = {
-      name: '',
-      models: [],
-    };
-  }
-
-  onClose(canceled) {
-    if (canceled === false) {
-      this.props.onClose(this.state);
-    } else {
-      this.props.onClose();
-    }
-  }
-
-  handleChange(e, index) {
-    if (e.target.id === 'simulator') {
-      const models = this.state.models;
-      models[index].simulator = JSON.parse(e.target.value);
-
-      this.setState({ models });
-    } else {
-      this.setState({ [e.target.id]: e.target.value });
-    }
-  }
-
-  resetState() {
-    this.setState({ name: '', models: [] });
-
-    this.imported = false;
-  }
-
-  loadFile(fileList) {
-    // get file
-    const file = fileList[0];
-    if (!file.type.match('application/json')) {
-      return;
+        this.state = {
+            name: '',
+            models: [],
+            startParameters: {}
+        };
     }
 
-    // create file reader
-    var reader = new FileReader();
-    var self = this;
+    onClose = canceled => {
+        if (canceled) {
+            if (this.props.onClose != null) {
+                this.props.onClose();
+            }
 
-    reader.onload = function(event) {
-      // read simulator
-      const simulation = JSON.parse(event.target.result);
-      simulation.models.forEach(model => {
-        model.simulator = {
-          node: self.props.nodes[0]._id,
-          simulator: 0
+            return;
+        }
+        
+        if (this.valid && this.props.onClose != null) {
+            this.props.onClose(this.state);
         }
-      });
-
-      self.imported = true;
-      self.setState({ name: simulation.name, models: simulation.models });
-    };
-
-    reader.readAsText(file);
-  }
-
-  validateForm(target) {
-    // check all controls
-    let name = true;
-
-    if (this.state.name === '') {
-      name = false;
     }
 
-    this.valid =  name;
+    handleChange(e, index) {
+        if (e.target.id === 'simulator') {
+            const models = this.state.models;
+            models[index].simulator = JSON.parse(e.target.value);
 
-    // return state to control
-    if (target === 'name') return name ? "success" : "error";
-  }
+            this.setState({ models });
 
-  render() {
-    return (
-      <Dialog show={this.props.show} title="Import Simulation" buttonTitle="Import" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
-        <form>
-          <FormGroup controlId="file">
-            <ControlLabel>Simulation File</ControlLabel>
-            <FormControl type="file" onChange={(e) => this.loadFile(e.target.files)} />
-          </FormGroup>
+            return;
+        }
+            
+        this.setState({ [e.target.id]: e.target.value });
+    }
 
-          <FormGroup controlId="name" validationState={this.validateForm('name')}>
-            <ControlLabel>Name</ControlLabel>
-            <FormControl readOnly={!this.imported} type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
-            <FormControl.Feedback />
-          </FormGroup>
+    resetState = () => {
+        this.setState({ name: '', models: [], startParameters: {} });
 
-          {this.state.models.map((model, index) => (
-            <FormGroup controlId="simulator" key={index}>
-              <ControlLabel>{model.name} - Simulator</ControlLabel>
-              <FormControl componentClass="select" placeholder="Select simulator" value={JSON.stringify({ node: model.simulator.node, simulator: model.simulator.simulator})} onChange={(e) => this.handleChange(e, index)}>
-                {this.props.nodes.map(node => (
-                  node.simulators.map((simulator, index) => (
-                    <option key={node._id + index} value={JSON.stringify({ node: node._id, simulator: index })}>{node.name}/{simulator.name}</option>
-                  ))
-                ))}
-              </FormControl>
-            </FormGroup>
-          ))}
-        </form>
-      </Dialog>
-    );
-  }
+        this.imported = false;
+    }
+
+    loadFile = event => {
+        const file = event.target.files[0];
+
+        if (!file.type.match('application/json')) {
+            return;
+        }
+
+        // create file reader
+        const reader = new FileReader();
+        const self = this;
+
+        reader.onload = onloadEvent => {
+            const simulation = JSON.parse(onloadEvent.target.result);
+
+            // simulation.models.forEach(model => {
+            //     model.simulator = {
+            //         node: self.props.nodes[0]._id,
+            //         simulator: 0
+            //     };
+            // });
+
+            self.imported = true;
+            self.valid = true;
+            self.setState({ name: simulation.name, models: simulation.models, startParameters: simulation.startParameters });
+        };
+
+        reader.readAsText(file);
+    }
+
+    validateForm(target) {
+        // check all controls
+        let name = true;
+
+        if (this.state.name === '') {
+            name = false;
+        }
+
+        this.valid =  name;
+
+        // return state to control
+        if (target === 'name') return name ? "success" : "error";
+    }
+
+    render() {
+        return <Dialog show={this.props.show} title="Import Simulation" buttonTitle="Import" onClose={this.onClose} onReset={this.resetState} valid={this.valid}>
+            <form>
+                <FormGroup controlId="file">
+                    <ControlLabel>Simulation File</ControlLabel>
+                    <FormControl type="file" onChange={this.loadFile} />
+                </FormGroup>
+
+                <FormGroup controlId="name" validationState={this.validateForm('name')}>
+                    <ControlLabel>Name</ControlLabel>
+                    <FormControl readOnly={this.imported === false} type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
+                    <FormControl.Feedback />
+                </FormGroup>
+
+                <FormGroup>
+                    <ControlLabel>Start Parameters</ControlLabel>
+
+                    <ParametersEditor content={this.state.startParameters} onChange={this.handleStartParametersChange} disabled={this.imported === false} />
+                </FormGroup>
+
+                {/* {this.state.models.map((model, index) => (
+                    <FormGroup controlId="simulator" key={index}>
+                        <ControlLabel>{model.name} - Simulator</ControlLabel>
+                        <FormControl componentClass="select" placeholder="Select simulator" value={JSON.stringify({ node: model.simulator.node, simulator: model.simulator.simulator})} onChange={(e) => this.handleChange(e, index)}>
+                            {this.props.nodes.map(node => (
+                                node.simulators.map((simulator, index) => (
+                                    <option key={node._id + index} value={JSON.stringify({ node: node._id, simulator: index })}>{node.name}/{simulator.name}</option>
+                                ))
+                            ))}
+                        </FormControl>
+                    </FormGroup>
+                ))} */}
+            </form>
+        </Dialog>;
+    }
 }
 
 export default ImportSimulationDialog;

src/components/dialog/new-simulation.js

@@ -23,63 +23,77 @@ import React from 'react';
 import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
 
 import Dialog from './dialog';
+import ParametersEditor from '../parameters-editor';
 
 class NewSimulationDialog extends React.Component {
-  valid: false;
+    valid = false;
 
-  constructor(props) {
-    super(props);
+    constructor(props) {
+        super(props);
 
-    this.state = {
-      name: ''
-    };
-  }
-
-  onClose(canceled) {
-    if (canceled === false) {
-      if (this.valid) {
-        this.props.onClose(this.state);
-      }
-    } else {
-      this.props.onClose();
-    }
-  }
-
-  handleChange(e) {
-    this.setState({ [e.target.id]: e.target.value });
-  }
-
-  resetState() {
-    this.setState({ name: '' });
-  }
-
-  validateForm(target) {
-    // check all controls
-    var name = true;
-
-    if (this.state.name === '') {
-      name = false;
+        this.state = {
+            name: '',
+            startParameters: {}
+        };
     }
 
-    this.valid =  name;
+    onClose = canceled => {
+        if (canceled) {
+            if (this.props.onClose != null) {
+                this.props.onClose();
+            }
+            
+            return;
+        }
 
-    // return state to control
-    if (target === 'name') return name ? "success" : "error";
-  }
+        if (this.valid && this.props.onClose != null) {
+            this.props.onClose(this.state);
+        }
+    }
 
-  render() {
-    return (
-      <Dialog show={this.props.show} title="New Simulation" buttonTitle="Add" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
-        <form>
-          <FormGroup controlId="name" validationState={this.validateForm('name')}>
-            <ControlLabel>Name</ControlLabel>
-            <FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
-            <FormControl.Feedback />
-          </FormGroup>
-        </form>
-      </Dialog>
-    );
-  }
+    handleChange = event => {
+        this.setState({ [event.target.id]: event.target.value });
+    }
+
+    resetState = () => {
+        this.setState({ name: '', startParameters: {} });
+    }
+
+    handleStartParametersChange = startParameters => {
+        this.setState({ startParameters });
+    }
+
+    validateForm(target) {
+        // check all controls
+        let name = true;
+
+        if (this.state.name === '') {
+            name = false;
+        }
+
+        this.valid =  name;
+
+        // return state to control
+        if (target === 'name') return name ? "success" : "error";
+    }
+
+    render() {
+        return <Dialog show={this.props.show} title="New Simulation" buttonTitle="Add" onClose={this.onClose} onReset={this.resetState} valid={this.valid}>
+            <form>
+                <FormGroup controlId="name" validationState={this.validateForm('name')}>
+                    <ControlLabel>Name</ControlLabel>
+                    <FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={this.handleChange} />
+                    <FormControl.Feedback />
+                </FormGroup>
+
+                <FormGroup>
+                    <ControlLabel>Start Parameters</ControlLabel>
+
+                    <ParametersEditor content={this.state.startParameters} onChange={this.handleStartParametersChange} />
+                </FormGroup>
+            </form>
+        </Dialog>;
+    }
 }
 
 export default NewSimulationDialog;

src/components/parameters-editor.js

@@ -26,19 +26,19 @@ import JsonView from 'react-json-view';
 class ParametersEditor extends React.Component {
     onAdd = event => {
         if (this.props.onChange != null) {
-            this.props.onChange(event.updated_src);
+            this.props.onChange(JSON.parse(JSON.stringify(event.updated_src)));
         }
     }
 
     onEdit = event => {
         if (this.props.onChange != null) {
-            this.props.onChange(event.updated_src);
+            this.props.onChange(JSON.parse(JSON.stringify(event.updated_src)));
         }
     }
 
     onDelete = event => {
         if (this.props.onChange != null) {
-            this.props.onChange(event.updated_src);
+            this.props.onChange(JSON.parse(JSON.stringify(event.updated_src)));
         }
     }
 
@@ -48,30 +48,33 @@ class ParametersEditor extends React.Component {
 
             paddingTop: '5px',
             paddingBottom: '5px',
+            paddingLeft: '8px',
 
             border: '1px solid lightgray'
         };
 
         return <div style={containerStyle}>
-                <JsonView
-                    src={this.props.content}
-                    name={false}
-                    displayDataTypes={false}
-                    onAdd={this.onAdd}
-                    onEdit={this.onEdit}
-                    onDelete={this.onDelete}
-                />
+            <JsonView
+                src={this.props.content}
+                name={false}
+                displayDataTypes={false}
+                onAdd={this.props.disabled ? undefined : this.onAdd}
+                onEdit={this.props.disabled ? undefined : this.onEdit}
+                onDelete={this.props.disabled ? undefined : this.onDelete}
+            />
         </div>;
     }
 }
 
 ParametersEditor.PropTypes = {
     content: PropTypes.object,
-    onChange: PropTypes.func
+    onChange: PropTypes.func,
+    disabled: PropTypes.bool
 };
 
 ParametersEditor.defaultProps = {
-    content: {}
+    content: {},
+    disabled: false
 };
 
 export default ParametersEditor;

src/containers/simulations.js

@@ -121,7 +121,7 @@ class Simulations extends Component {
   closeEditModal(data) {
     this.setState({ editModal : false });
 
-    if (data) {
+    if (data != null) {
       AppDispatcher.dispatch({
         type: 'simulations/start-edit',
         data,

src/data-managers/simulations-data-manager.js

@@ -21,4 +21,4 @@
 
 import RestDataManager from './rest-data-manager';
 
-export default new RestDataManager('simulation', '/simulations', [ '_id', 'name', 'projects', 'models' ]);
+export default new RestDataManager('simulation', '/simulations', [ '_id', 'name', 'projects', 'models', 'startParameters' ]);