diff --git a/src/components/dialog/edit-simulation.js b/src/components/dialog/edit-simulation.js index fba0d19..0b1c87e 100644 --- a/src/components/dialog/edit-simulation.js +++ b/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 ( - this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> -
- - Name - this.handleChange(e)} /> - - -
-
- ); - } + 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 +
+ + Name + + + + + + Start Parameters + + + +
+
; + } } export default EditSimulationDialog; diff --git a/src/components/dialog/import-simulation.js b/src/components/dialog/import-simulation.js index 624b11e..e14eada 100644 --- a/src/components/dialog/import-simulation.js +++ b/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 ( - this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> -
- - Simulation File - this.loadFile(e.target.files)} /> - + return; + } + + this.setState({ [e.target.id]: e.target.value }); + } - - Name - this.handleChange(e)} /> - - + resetState = () => { + this.setState({ name: '', models: [], startParameters: {} }); - {this.state.models.map((model, index) => ( - - {model.name} - Simulator - this.handleChange(e, index)}> - {this.props.nodes.map(node => ( - node.simulators.map((simulator, index) => ( - - )) - ))} - - - ))} -
-
- ); - } + 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 +
+ + Simulation File + + + + + Name + this.handleChange(e)} /> + + + + + Start Parameters + + + + + {/* {this.state.models.map((model, index) => ( + + {model.name} - Simulator + this.handleChange(e, index)}> + {this.props.nodes.map(node => ( + node.simulators.map((simulator, index) => ( + + )) + ))} + + + ))} */} +
+
; + } } export default ImportSimulationDialog; diff --git a/src/components/dialog/new-simulation.js b/src/components/dialog/new-simulation.js index 2d09c0d..b09559c 100644 --- a/src/components/dialog/new-simulation.js +++ b/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 ( - this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> -
- - Name - this.handleChange(e)} /> - - -
-
- ); - } + 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 +
+ + Name + + + + + + Start Parameters + + + +
+
; + } } export default NewSimulationDialog; diff --git a/src/components/parameters-editor.js b/src/components/parameters-editor.js index f11b327..38f81df 100644 --- a/src/components/parameters-editor.js +++ b/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
- +
; } } ParametersEditor.PropTypes = { content: PropTypes.object, - onChange: PropTypes.func + onChange: PropTypes.func, + disabled: PropTypes.bool }; ParametersEditor.defaultProps = { - content: {} + content: {}, + disabled: false }; export default ParametersEditor; diff --git a/src/containers/simulations.js b/src/containers/simulations.js index c2c7e11..db04249 100644 --- a/src/containers/simulations.js +++ b/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, diff --git a/src/data-managers/simulations-data-manager.js b/src/data-managers/simulations-data-manager.js index d5fdfde..30885aa 100644 --- a/src/data-managers/simulations-data-manager.js +++ b/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' ]);