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

Adapt add, edit and delete dialogs #266

Browse source
This commit is contained in:
Laura Fuentes Grau 2020-10-28 18:30:08 +01:00
parent c2d0378ee5
commit 7a76e5e71b
4 changed files with 46 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/common/dialogs/delete-dialog.js
View file

@ -16,7 +16,8 @@
******************************************************************************/
import React from 'react';
import { Button, Modal } from 'react-bootstrap';
import { Button, Modal, FormLabel } from 'react-bootstrap';
import {Collapse} from 'react-collapse';
class DeleteDialog extends React.Component {
onModalKeyPress = (event) => {
@ -35,6 +36,9 @@ class DeleteDialog extends React.Component {
<Modal.Body>
Are you sure you want to delete the {this.props.title} <strong>'{this.props.name}'</strong>?
<Collapse isOpened={this.props.managedexternally} >
<FormLabel size="sm">The IC will be deleted if the respective VILLAScontroller sends "gone" state and no component config is using the IC anymore</FormLabel>
</Collapse>
</Modal.Body>
<Modal.Footer>

22
src/ic/edit-ic.js
View file

@ -16,9 +16,9 @@
******************************************************************************/
import React from 'react';
import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
import { FormGroup, FormControl, FormLabel, FormCheck } from 'react-bootstrap';
import _ from 'lodash';
import {Collapse} from 'react-collapse';
import Dialog from '../common/dialogs/dialog';
import ParametersEditor from '../common/parameters-editor';
@ -33,6 +33,7 @@ class EditICDialog extends React.Component {
host: '',
type: '',
category: '',
managedexternally: false,
properties: {},
};
}
@ -61,16 +62,25 @@ class EditICDialog extends React.Component {
data.properties = this.state.properties
}
data.managedexternally = this.state.managedexternally;
this.props.onClose(data);
this.setState({managedexternally: false});
}
} else {
this.props.onClose();
this.setState({managedexternally: false});
}
}
handleChange(e) {
if(e.target.id === "managedexternally"){
this.setState({ managedexternally : !this.state.managedexternally});
}
else{
this.setState({ [e.target.id]: e.target.value });
}
}
handlePropertiesChange(data) {
@ -83,6 +93,7 @@ class EditICDialog extends React.Component {
host: this.props.ic.host,
type: this.props.ic.type,
category: this.props.ic.category,
managedexternally: false,
properties: _.merge({}, _.get(this.props.ic, 'rawProperties'), _.get(this.props.ic, 'properties'))
});
}
@ -100,6 +111,13 @@ class EditICDialog extends React.Component {
>
<form>
<FormLabel column={false}>UUID: {this.props.ic.uuid}</FormLabel>
<FormGroup controlId="managedexternally">
<FormCheck type={"checkbox"} label={"Managed externally"} defaultChecked={this.state.managedexternally} onChange={e => this.handleChange(e)}>
</FormCheck>
</FormGroup>
<Collapse isOpened={this.state.managedexternally} >
<FormLabel size="sm">Externally managed ICs cannot be edited by users</FormLabel>
</Collapse>
<FormGroup controlId="name">
<FormLabel column={false}>Name</FormLabel>
<FormControl type="text" placeholder={this.props.ic.name} value={this.state.name} onChange={(e) => this.handleChange(e)} />

2
src/ic/ics.js
View file

@ -370,7 +370,7 @@ class InfrastructureComponents extends Component {
<EditICDialog show={this.state.editModal} onClose={data => this.closeEditModal(data)} ic={this.state.modalIC} />
<ImportICDialog show={this.state.importModal} onClose={data => this.closeImportModal(data)} />
<DeleteDialog title="infrastructure-component" name={_.get(this.state.modalIC, 'properties.name') || _.get(this.state.modalIC, 'rawProperties.name') || 'Unknown'} show={this.state.deleteModal} onClose={(e) => this.closeDeleteModal(e)} />
<DeleteDialog title="infrastructure-component" name={_.get(this.state.modalIC, 'properties.name') || _.get(this.state.modalIC, 'rawProperties.name') || 'Unknown'} managedexternally={this.state.modalIC.managedexternally} show={this.state.deleteModal} onClose={(e) => this.closeDeleteModal(e)} />
</div>
);
}

24
src/ic/new-ic.js
View file

@ -16,8 +16,8 @@
******************************************************************************/
import React from 'react';
import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
import { FormGroup, FormControl, FormLabel, FormCheck } from 'react-bootstrap';
import {Collapse} from 'react-collapse';
import Dialog from '../common/dialogs/dialog';
class NewICDialog extends React.Component {
@ -32,6 +32,7 @@ class NewICDialog extends React.Component {
uuid: '',
type: '',
category: '',
managedexternally: false,
};
}
@ -42,7 +43,8 @@ class NewICDialog extends React.Component {
name: this.state.name,
type: this.state.type,
category: this.state.category,
uuid: this.state.uuid
uuid: this.state.uuid,
managedexternally: this.state.managedexternally,
};
if (this.state.host != null && this.state.host !== "" && this.state.host !== 'http://') {
@ -50,18 +52,25 @@ class NewICDialog extends React.Component {
}
this.props.onClose(data);
this.setState({managedexternally: false});
}
} else {
this.props.onClose();
this.setState({managedexternally: false});
}
}
handleChange(e) {
if(e.target.id === "managedexternally"){
this.setState({ managedexternally : !this.state.managedexternally});
}
else{
this.setState({ [e.target.id]: e.target.value });
}
}
resetState() {
this.setState({ name: '', host: 'http://', uuid: this.uuidv4(), type: '', category: ''});
this.setState({ name: '', host: 'http://', uuid: this.uuidv4(), type: '', category: '', managedexternally: false});
}
validateForm(target) {
@ -110,6 +119,13 @@ class NewICDialog extends React.Component {
return (
<Dialog show={this.props.show} title="New Infrastructure Component" buttonTitle="Add" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
<form>
<FormGroup controlId="managedexternally">
<FormCheck type={"checkbox"} label={"Managed externally"} defaultChecked={this.state.managedexternally} onChange={e => this.handleChange(e)}>
</FormCheck>
</FormGroup>
<Collapse isOpened={this.state.managedexternally} >
<FormLabel size="sm">the component will show up in the list only after a VILLAScontroller for the component type has created the component and cannot be edited by users</FormLabel>
</Collapse>
<FormGroup controlId="name" valid={this.validateForm('name')}>
<FormLabel>Name</FormLabel>
<FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />