Commit c35acc8c authored by Sonja Happ's avatar Sonja Happ

move editing of simulation model (except for signal mappings) into dialog...

move editing of simulation model (except for signal mappings) into dialog instead of separate frame, exclude file selection and upload for now
parent aefd73c3
......@@ -41,6 +41,7 @@ import NewDashboardDialog from "../dashboard/new-dashboard";
import SimulatorAction from '../simulator/simulator-action';
import DeleteDialog from '../common/dialogs/delete-dialog';
import EditSimulationModelDialog from "../simulationmodel/edit-simulation-model";
class Scenario extends React.Component {
static getStores() {
......@@ -75,6 +76,7 @@ class Scenario extends React.Component {
deleteSimulationModelModal: false,
importSimulationModelModal: false,
editSimulationModelModal: false,
modalSimulationModelData: {},
selectedSimulationModels: [],
......@@ -115,15 +117,11 @@ class Scenario extends React.Component {
});
}
addSimulationModel = () => {
addSimulationModel(){
const simulationModel = {
scenario: this.state.scenario.id,
scenarioID: this.state.scenario.id,
name: 'New Simulation Model',
simulator: this.state.simulators.length > 0 ? this.state.simulators[0].id : null,
outputLength: 1,
outputMapping: [{ name: 'Signal', type: 'Type' }],
inputLength: 1,
inputMapping: [{ name: 'Signal', type: 'Type' }]
simulatorID: this.state.simulators.length > 0 ? this.state.simulators[0].id : null,
};
AppDispatcher.dispatch({
......@@ -141,7 +139,19 @@ class Scenario extends React.Component {
});
}
closeDeleteSimulationModelModal = confirmDelete => {
closeEditSimulationModelModal(data){
this.setState({ editSimulationModelModal : false });
if (data) {
AppDispatcher.dispatch({
type: 'simulationModels/start-edit',
data: data,
token: this.state.sessionToken,
});
}
}
closeDeleteSimulationModelModal(confirmDelete) {
this.setState({ deleteSimulationModelModal: false });
if (confirmDelete === false) {
......@@ -155,7 +165,7 @@ class Scenario extends React.Component {
});
}
importSimulationModel = simulationModel => {
importSimulationModel(simulationModel){
this.setState({ importSimulationModelModal: false });
if (simulationModel == null) {
......@@ -313,15 +323,27 @@ class Scenario extends React.Component {
<h2>Simulation Models</h2>
<Table data={this.state.simulationModels}>
<TableColumn checkbox onChecked={(index, event) => this.onSimulationModelChecked(index, event)} width='30' />
<TableColumn title='Name' dataKey='name' link='/simulationModel/' linkKey='id' />
<TableColumn title='Name' dataKey='name' />
<TableColumn
title='# Outputs'
dataKey='outputLength'
editButton
onEdit={index => this.setState({ editSimulationModelModal: true, modalSimulationModelData: this.state.simulationModels[index], modalIndex: index })}
/>
<TableColumn
title='# Inputs'
dataKey='inputLength'
editButton
onEdit={index => this.setState({ editSimulationModelModal: true, modalSimulationModelData: this.state.simulationModels[index], modalIndex: index })}
/>
<TableColumn title='Simulator' dataKey='simulatorID' modifier={(simulatorID) => this.getSimulatorName(simulatorID)} />
<TableColumn title='Outputs' dataKey='outputLength' width='100' />
<TableColumn title='Inputs' dataKey='inputLength' width='100' />
<TableColumn
title=''
title='Edit/ Delete/ Export'
width='200'
editButton
deleteButton
exportButton
onEdit={index => this.setState({ editSimulationModelModal: true, modalSimulationModelData: this.state.simulationModels[index], modalIndex: index })}
onDelete={(index) => this.setState({ deleteSimulationModelModal: true, modalSimulationModelData: this.state.simulationModels[index], modalSimulationModelIndex: index })}
onExport={index => this.exportModel(index)}
/>
......@@ -340,15 +362,15 @@ class Scenario extends React.Component {
</div>
<div style={{ float: 'right' }}>
<Button onClick={this.addSimulationModel} style={buttonStyle}><Icon icon="plus" /> Simulation Model</Button>
<Button onClick={() => this.addSimulationModel()} style={buttonStyle}><Icon icon="plus" /> Simulation Model</Button>
<Button onClick={() => this.setState({ importSimulationModelModal: true })} style={buttonStyle}><Icon icon="upload" /> Import</Button>
</div>
<div style={{ clear: 'both' }} />
<ImportSimulationModelDialog show={this.state.importSimulationModelModal} onClose={this.importSimulationModel} simulators={this.state.simulators} />
<DeleteDialog title="simulation model" name={this.state.modalSimulationModelData.name} show={this.state.deleteSimulationModelModal} onClose={this.closeDeleteSimulationModelModal} />
<EditSimulationModelDialog show={this.state.editSimulationModelModal} onClose={data => this.closeEditSimulationModelModal(data)} simulationModel={this.state.modalSimulationModelData} simulators={this.state.simulators} />
<ImportSimulationModelDialog show={this.state.importSimulationModelModal} onClose={data => this.importSimulationModel(data)} simulators={this.state.simulators} />
<DeleteDialog title="simulation model" name={this.state.modalSimulationModelData.name} show={this.state.deleteSimulationModelModal} onClose={(c) => this.closeDeleteSimulationModelModal(c)} />
{/*Dashboard table*/}
<h2>Dashboards</h2>
......
/**
* 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 {FormGroup, FormControl, FormLabel} from 'react-bootstrap';
import _ from 'lodash';
import Dialog from '../common/dialogs/dialog';
import ParametersEditor from '../common/parameters-editor';
//import SelectFile from "../file/select-file";
class EditSimulationModelDialog extends React.Component {
valid = false;
constructor(props) {
super(props);
this.state = {
selectedFile: null,
name: '',
simulatorID: '',
configuration: null,
startParameters: {},
};
}
onClose(canceled) {
if (canceled === false) {
if (this.valid) {
let data = this.props.simulationModel;
if (this.state.name !== '' && this.props.simulationModel.name !== this.state.name) {
console.log("name update");
data.name = this.state.name;
}
if (this.state.simulatorID !== '' && this.props.simulationModel.simulatorID !== parseInt(this.state.simulatorID)) {
console.log("SimulatorID update");
data.simulatorID = parseInt(this.state.simulatorID, 10);
}
if(this.state.startParameters !== {} && this.props.simulationModel.startParameters !== this.state.startParameters){
console.log("Start Parameters update");
data.startParameters = this.state.startParameters;
}
// TODO selectedFile and configuration?!
//forward modified simulation model to callback function
this.props.onClose(data)
}
} else {
this.props.onClose();
}
}
handleChange(e) {
this.setState({ [e.target.id]: e.target.value });
// input is valid if at least one element has changed from its initial value
this.valid = this.state.name !== '' || this.state.simulatorID !== ''|| this.state.startParameters !== {} || this.state.selectedFile != null || this.state.configuration != null;
}
handleParameterChange(data) {
if (data) {
console.log("Start parameter change")
this.setState({startParameters: data});
}
// input is valid if at least one element has changed from its initial value
this.valid = this.state.name !== '' || this.state.simulatorID !== ''|| this.state.startParameters !== {} || this.state.selectedFile != null || this.state.configuration != null;
}
resetState() {
//this.setState({});
}
render() {
const simulatorOptions = this.props.simulators.map(s =>
<option key={s.id} value={s.id}>{_.get(s, 'properties.name') || _.get(s, 'rawProperties.name') || s.uuid}</option>
);
return (
<Dialog show={this.props.show} title="Edit Simulation Model" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
<form>
<FormGroup controlId="name">
<FormLabel column={false}>Name</FormLabel>
<FormControl type="text" placeholder={this.props.simulationModel.name} value={this.state.name} onChange={(e) => this.handleChange(e)} />
<FormControl.Feedback />
</FormGroup>
<FormGroup controlId="simulatorID">
<FormLabel column={false}> Simulator </FormLabel>
<FormControl as="select" placeholder='Select simulator' value={this.state.simulatorID} onChange={(e) => this.handleChange(e)}>
{simulatorOptions}
</FormControl>
</FormGroup>
{/*
<SelectFile type='model' name='Model' onChange={(e) => this.handleChange(e)}
value={this.state.selectedFile}/>
< SelectFile type='configuration' name='Configuration' onChange={(e) => this.handleChange(e)} value={this.state.configuration} />
*/}
<FormGroup controlId='startParameters'>
<FormLabel> Start Parameters </FormLabel>
<ParametersEditor content={this.props.simulationModel.startParameters} onChange={(data) => this.handleParameterChange(data)} />
</FormGroup>
</form>
</Dialog>
);
}
}
export default EditSimulationModelDialog;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment