Add start parameters json editor in simulation model

package.json

@@ -28,6 +28,7 @@
     "react-dnd-html5-backend": "^2.2.4",
     "react-dom": "^15.4.2",
     "react-fullscreenable": "^2.4.3",
+    "react-json-view": "^1.17.0",
     "react-notification-system": "^0.2.13",
     "react-rnd": "^7.4.0",
     "react-router": "^4.1.2",

src/components/parameters-editor.js

@@ -0,0 +1,86 @@
+/**
+ * File: header.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 06.06.2018
+ *
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ControlLabel, Col } from 'react-bootstrap';
+import JsonView from 'react-json-view';
+
+class ParametersEditor extends React.Component {
+    onAdd = event => {
+        if (this.props.onChange != null) {
+            this.props.onChange(event.updated_src);
+        }
+    }
+
+    onEdit = event => {
+        if (this.props.onChange != null) {
+            this.props.onChange(event.updated_src);
+        }
+    }
+
+    onDelete = event => {
+        if (this.props.onChange != null) {
+            this.props.onChange(event.updated_src);
+        }
+    }
+
+    render() {
+        const containerStyle = {
+            minHeight: '100px',
+
+            paddingTop: '5px',
+            paddingBottom: '5px',
+
+            border: '1px solid lightgray'
+        };
+
+        return <div>
+            <Col componentClass={ControlLabel} sm={3} md={2}>
+                {this.props.name}
+            </Col>
+            
+            <Col sm={9} md={10} style={containerStyle}>
+                <JsonView
+                    src={this.props.content}
+                    name={false}
+                    displayDataTypes={false}
+                    onAdd={this.onAdd}
+                    onEdit={this.onEdit}
+                    onDelete={this.onDelete}
+                />
+            </Col>
+        </div>;
+    }
+}
+
+ParametersEditor.PropTypes = {
+    name: PropTypes.string,
+    content: PropTypes.object,
+    onChange: PropTypes.func
+};
+
+ParametersEditor.defaultProps = {
+    name: "Parameters",
+    content: {}
+};
+
+export default ParametersEditor;

src/containers/simulation-model.js

@@ -31,6 +31,7 @@ import SelectSimulator from './select-simulator';
 import SelectFile from './select-file';
 import SignalMapping from '../components/signal-mapping';
 import EditableHeader from '../components/editable-header';
+import ParametersEditor from '../components/parameters-editor';
 
 class SimulationModel extends React.Component {
     static getStores() {
@@ -114,6 +115,14 @@ class SimulationModel extends React.Component {
         this.setState({ simulationModel });
     }
 
+    handleStartParametersChange = startParameters => {
+        const simulationModel = this.state.simulationModel;
+
+        simulationModel.startParameters = startParameters;
+
+        this.setState({ simulationModel });
+    }
+
     render() {
         const buttonStyle = {
             marginRight: '10px'
@@ -129,6 +138,8 @@ class SimulationModel extends React.Component {
                     <SelectFile disabled type='model' name='Model' onChange={this.handleModelChange} value={this.state.simulationModel.model} />
 
                     <SelectFile disabled type='configuration' name='Configuration' onChange={this.handleConfigurationChange} value={this.state.simulationModel.configuration} />
+
+                    <ParametersEditor name='Start Parameters' content={this.state.simulationModel.startParameters} onChange={this.handleStartParametersChange} />
                 </Col>
 
                 <Col xs={12} sm={6}>