mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
move editing of simulation model (except for signal mappings) into dialog instead of separate frame, exclude file selection and upload for now
This commit is contained in:
Sonja Happ
parent
aefd73c398
commit
c35acc8c2d
2 changed files with 169 additions and 18 deletions
|
|
@ -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='Simulator' dataKey='simulatorID' modifier={(simulatorID) => this.getSimulatorName(simulatorID)} />
|
||||
<TableColumn title='Outputs' dataKey='outputLength' width='100' />
|
||||
<TableColumn title='Inputs' dataKey='inputLength' width='100' />
|
||||
<TableColumn title='Name' dataKey='name' />
|
||||
<TableColumn
|
||||
title=''
|
||||
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='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>
|
||||
|
|
|
|||
129
src/simulationmodel/edit-simulation-model.js
Normal file
129
src/simulationmodel/edit-simulation-model.js
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
/**
|
||||
* 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;
|
||||
Loading…
Add table
Reference in a new issue