1
0
Fork 0
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 2020-02-05 11:45:59 +01:00
parent aefd73c398
commit c35acc8c2d
2 changed files with 169 additions and 18 deletions

View file

@ -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>

View 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;