Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
Code Issues Releases Wiki Activity

Fixes a bug in editing component configurations (closes #252, closes #257)

Browse source
This commit is contained in:
Sonja Happ 2020-08-31 09:36:32 +02:00
parent 73c8f1733f
commit 9d8e9c4364
2 changed files with 141 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

259
src/componentconfig/edit-config.js
View file

@ -22,142 +22,163 @@ import Dialog from '../common/dialogs/dialog';
import ParametersEditor from '../common/parameters-editor';
class EditConfigDialog extends React.Component {
valid = false;
valid = false;
constructor(props) {
super(props);
constructor(props) {
super(props);
this.state = {
name: '',
icID: '',
startParameters: {},
selectedFiles: [] // list of selected files {name, id}, this is not the fileIDs list of the config!
};
}
this.state = {
name: '',
icID: '',
configuration: null,
startParameters: this.props.config.startParameters,
fileIDs: this.props.config.fileIDs
};
}
onClose(canceled) {
if (canceled === false) {
if (this.valid) {
let data = this.props.config;
if (this.state.name !== '' && this.props.config.name !== this.state.name) {
data.name = this.state.name;
}
if (this.state.icID !== '' && this.props.config.icID !== parseInt(this.state.icID)) {
data.icID = parseInt(this.state.icID, 10);
}
if(this.state.startParameters !== {} && JSON.stringify(this.props.config.startParameters) !== JSON.stringify(this.state.startParameters)){
data.startParameters = this.state.startParameters;
}
let IDs = []
for(let e of this.state.fileIDs){
IDs.push(e.id)
}
if (JSON.stringify(IDs) !== JSON.stringify(this.props.config.fileIDs)){
data.fileIDs = IDs;
}
//forward modified config to callback function
this.props.onClose(data)
}
} else {
this.props.onClose();
onClose(canceled) {
if (canceled === false) {
if (this.valid) {
let data = this.props.config;
if (this.state.name !== '' && this.props.config.name !== this.state.name) {
data.name = this.state.name;
}
if (this.state.icID !== '' && this.props.config.icID !== parseInt(this.state.icID)) {
data.icID = parseInt(this.state.icID, 10);
}
if(this.state.startParameters !== {} &&
JSON.stringify(this.props.config.startParameters) !== JSON.stringify(this.state.startParameters)){
data.startParameters = this.state.startParameters;
}
}
handleChange(e) {
this.setState({ [e.target.id]: e.target.value });
this.valid = this.isValid()
}
let IDs = []
for(let e of this.state.selectedFiles){
IDs.push(e.id)
}
if (JSON.stringify(IDs) !== JSON.stringify(this.props.config.fileIDs)){
data.fileIDs = IDs;
}
handleParameterChange(data) {
if (data) {
this.setState({startParameters: data});
//forward modified config to callback function
this.props.onClose(data)
}
this.valid = this.isValid()
} else {
this.props.onClose();
}
}
onFileSelect(selectedList, selectedItem) {
handleChange(e) {
this.setState({ [e.target.id]: e.target.value });
this.valid = this.isValid()
}
this.setState({
fileIDs: selectedList
})
this.valid = this.isValid()
handleParameterChange(data) {
if (data) {
this.setState({startParameters: data});
}
this.valid = this.isValid()
}
onFileRemove(selectedList, removedItem) {
onFileChange(selectedList, changedItem) {
this.setState({
selectedFiles: selectedList
})
this.valid = this.isValid()
}
this.setState({
fileIDs: selectedList
})
this.valid = this.isValid()
}
isValid() {
// input is valid if at least one element has changed from its initial value
return this.state.name !== ''
|| this.state.icID !== ''
|| this.state.startParameters !== {}
|| this.state.configuration != null
}
isValid() {
// input is valid if at least one element has changed from its initial value
return this.state.name !== ''
|| this.state.icID !== ''
|| this.state.startParameters !== {}
}
resetState() {
//this.setState({});
}
resetState() {
render() {
const ICOptions = this.props.ics.map(s =>
<option key={s.id} value={s.id}>{s.name}</option>
);
let configFileOptions = [];
for(let file of this.props.files) {
configFileOptions.push(
{name: file.name, id: file.id}
);
// determine list of selected files incl id and filename
let selectedFiles = []
for(let selectedFileID of this.props.config.fileIDs){
for (let file of this.props.files){
if (file.id === selectedFileID){
selectedFiles.push({name: file.name, id: file.id})
}
}
return (
<Dialog show={this.props.show} title="Edit Component Configuration" 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.config.name} value={this.state.name} onChange={(e) => this.handleChange(e)} />
<FormControl.Feedback />
</FormGroup>
<FormGroup controlId="icID">
<FormLabel column={false}> Infrastructure Component </FormLabel>
<FormControl as="select" placeholder='Select infrastructure component' value={this.state.icID} onChange={(e) => this.handleChange(e)}>
{ICOptions}
</FormControl>
</FormGroup>
<Multiselect
options={configFileOptions}
showCheckbox={true}
selectedValues={this.state.fileIDs}
onSelect={(selectedList, selectedItem) => this.onFileSelect(selectedList, selectedItem)}
onRemove={(selectedList, removedItem) => this.onFileRemove(selectedList, removedItem)}
displayValue={'name'}
placeholder={'Select file(s)...'}
/>
<FormGroup controlId='startParameters'>
<FormLabel> Start Parameters </FormLabel>
<ParametersEditor content={this.state.startParameters} onChange={(data) => this.handleParameterChange(data)} />
</FormGroup>
</form>
</Dialog>
);
}
this.setState({
name: this.props.config.name,
icID: this.props.config.icID,
startParameters: this.props.config.startParameters,
selectedFiles: selectedFiles,
});
}
render() {
const ICOptions = this.props.ics.map(s =>
<option key={s.id} value={s.id}>{s.name}</option>
);
let configFileOptions = [];
for(let file of this.props.files) {
configFileOptions.push(
{name: file.name, id: file.id}
);
}
return (
<Dialog
show={this.props.show}
title="Edit Component Configuration"
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.config.name}
value={this.state.name}
onChange={(e) => this.handleChange(e)}
/>
<FormControl.Feedback />
</FormGroup>
<FormGroup controlId="icID">
<FormLabel column={false}> Infrastructure Component </FormLabel>
<FormControl
as="select"
placeholder='Select infrastructure component'
value={this.state.icID}
onChange={(e) => this.handleChange(e)}
>
{ICOptions}
</FormControl>
</FormGroup>
<Multiselect
options={configFileOptions}
showCheckbox={true}
selectedValues={this.state.selectedFiles}
onSelect={(selectedList, selectedItem) => this.onFileChange(selectedList, selectedItem)}
onRemove={(selectedList, removedItem) => this.onFileChange(selectedList, removedItem)}
displayValue={'name'}
placeholder={'Select file(s)...'}
/>
<FormGroup controlId='startParameters'>
<FormLabel> Start Parameters </FormLabel>
<ParametersEditor
content={this.state.startParameters}
onChange={(data) => this.handleParameterChange(data)}
/>
</FormGroup>
</form>
</Dialog>
);
}
}
export default EditConfigDialog;

6
src/scenario/scenario.js
View file

@ -90,7 +90,7 @@ class Scenario extends React.Component {
deleteConfigModal: false,
importConfigModal: false,
editConfigModal: false,
editConfigModal: prevState.editConfigModal || false,
modalConfigData: (prevState.modalConfigData !== {} && prevState.modalConfigData !== undefined )? prevState.modalConfigData : {},
selectedConfigs: [],
modalConfigIndex: 0,
@ -453,10 +453,6 @@ class Scenario extends React.Component {
}
}
}
return fileList;
}