Commit be1afb11 authored by Ricardo Hernandez's avatar Ricardo Hernandez
Browse files

Merge branch '67-edit-controls-fix' into 'develop'

Resolve "While editing a widget, update the rest of the fields after changing one."

See merge request !12
parents d2f714f0 125e936e
......@@ -26,6 +26,7 @@
"rc-slider": "^7.0.1"
},
"devDependencies": {
"chai": "^3.5.0",
"react-scripts": "0.9.3"
},
"scripts": {
......
import { expect } from 'chai';
import createControls from '../../../components/dialog/edit-widget-control-creator';
import EditWidgetTextControl from '../../../components/dialog/edit-widget-text-control';
import EditWidgetColorControl from '../../../components/dialog/edit-widget-color-control';
import EditWidgetTimeControl from '../../../components/dialog/edit-widget-time-control';
import EditImageWidgetControl from '../../../components/dialog/edit-widget-image-control';
import EditWidgetSimulatorControl from '../../../components/dialog/edit-widget-simulator-control';
import EditWidgetSignalControl from '../../../components/dialog/edit-widget-signal-control';
import EditWidgetSignalsControl from '../../../components/dialog/edit-widget-signals-control';
import EditWidgetOrientation from '../../../components/dialog/edit-widget-orientation';
describe('edit widget control creator', () => {
it('should not return null', () => {
let controls = createControls('Value', null, null, null, null, null, null);
expect(controls).to.be.defined;
});
var runs = [
{ args: { widgetType: 'Value' }, result: { controlNumber: 2, controlTypes: [EditWidgetSimulatorControl, EditWidgetSignalControl] } },
{ args: { widgetType: 'Plot' }, result: { controlNumber: 4, controlTypes: [EditWidgetTimeControl, EditWidgetSimulatorControl, EditWidgetSignalsControl, EditWidgetTextControl] } },
{ args: { widgetType: 'Table' }, result: { controlNumber: 1, controlTypes: [EditWidgetSimulatorControl] } },
{ args: { widgetType: 'Image' }, result: { controlNumber: 1, controlTypes: [EditImageWidgetControl] } },
{ args: { widgetType: 'Gauge' }, result: { controlNumber: 2, controlTypes: [EditWidgetSimulatorControl, EditWidgetSignalControl] } },
{ args: { widgetType: 'PlotTable' }, result: { controlNumber: 3, controlTypes: [EditWidgetSimulatorControl, EditWidgetSignalsControl, EditWidgetTextControl] } },
{ args: { widgetType: 'Slider' }, result: { controlNumber: 1, controlTypes: [EditWidgetOrientation] } },
{ args: { widgetType: 'Button' }, result: { controlNumber: 2, controlTypes: [EditWidgetColorControl] } },
{ args: { widgetType: 'Box' }, result: { controlNumber: 1, controlTypes: [EditWidgetColorControl] } },
];
runs.forEach( (run) => {
let itMsg = run.args.widgetType + ' widget edit model should have correct controls';
it(itMsg, () => {
let controls = createControls(run.args.widgetType, null, null, null, null, null, null);
expect(controls).to.have.lengthOf(run.result.controlNumber);
controls.forEach( (control) => expect(control.type).to.be.oneOf(run.result.controlTypes))
});
});
});
\ No newline at end of file
/**
* File: edit-widget-control-creator.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 23.05.2017
*
* 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 EditWidgetTextControl from './edit-widget-text-control';
import EditWidgetColorControl from './edit-widget-color-control';
import EditWidgetTimeControl from './edit-widget-time-control';
import EditImageWidgetControl from './edit-widget-image-control';
import EditWidgetSimulatorControl from './edit-widget-simulator-control';
import EditWidgetSignalControl from './edit-widget-signal-control';
import EditWidgetSignalsControl from './edit-widget-signals-control';
import EditWidgetOrientation from './edit-widget-orientation';
export default function createControls(widgetType = null, widget = null, sessionToken = null, files = null, validateForm, simulation, handleChange) {
// Use a list to concatenate the controls according to the widget type
var dialogControls = [];
switch(widgetType) {
case 'Value': {
let valueBoundOnChange = (e) => {
handleChange([e, {target: {id: 'signal', value: 0}}]);
}
dialogControls.push(
<EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => valueBoundOnChange(e)} />,
<EditWidgetSignalControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />
)
}
break;
case 'Plot': {
let plotBoundOnChange = (e) => {
handleChange([e, {target: {id: 'signals', value: []}}]);
}
dialogControls.push(
<EditWidgetTimeControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
<EditWidgetSimulatorControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => plotBoundOnChange(e)} />,
<EditWidgetSignalsControl key={3} controlId={'signals'} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
<EditWidgetTextControl key={4} controlId={'ylabel'} label={'Y-Axis name'} placeholder={'Enter a name for the y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />)
}
break;
case 'Table': {
dialogControls.push(
<EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />)
}
break;
case 'Image': {
dialogControls.push(
<EditImageWidgetControl key={1} sessionToken={sessionToken} widget={widget} files={files} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />)
}
break;
case 'Gauge': {
let gaugeBoundOnChange = (e) => {
handleChange([e, {target: {id: 'signal', value: ''}}]);
}
dialogControls.push(
<EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => gaugeBoundOnChange(e) } />,
<EditWidgetSignalControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />)
}
break;
case 'PlotTable': {
let plotTableBoundOnChange = (e) => {
handleChange([e, {target: {id: 'preselectedSignals', value: []}}]);
}
dialogControls.push(
<EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => plotTableBoundOnChange(e)} />,
<EditWidgetSignalsControl key={2} controlId={'preselectedSignals'} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
<EditWidgetTextControl key={3} controlId={'ylabel'} label={'Y-Axis'} placeholder={'Enter a name for the Y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />)
}
break;
case 'Slider': {
dialogControls.push(
<EditWidgetOrientation key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />)
}
break;
case 'Button': {
dialogControls.push(
<EditWidgetColorControl key={1} widget={widget} controlId={'background_color'} label={'Background'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
<EditWidgetColorControl key={2} widget={widget} controlId={'font_color'} label={'Font color'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />)
}
break;
case 'Box': {
dialogControls.push(
<EditWidgetColorControl key={1} widget={widget} controlId={'border_color'} label={'Border color'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />)
}
break;
default:
console.log('Non-valid widget type');
}
return dialogControls;
}
\ No newline at end of file
......@@ -2,9 +2,21 @@
* File: edit-widget-orientation.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 10.04.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
*
* 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, { Component } from 'react';
......
......@@ -2,9 +2,21 @@
* File: edit-widget-signal-control.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 03.04.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
*
* 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, { Component } from 'react';
......@@ -31,7 +43,7 @@ class EditWidgetSignalControl extends Component {
if (this.props.simulation) {
// get selected simulation model
const simulationModel = this.props.simulation.models.find( model => model.simulation === this.state.widget.simulation );
const simulationModel = this.props.simulation.models.find( model => model.simulator === this.state.widget.simulator );
// If simulation model update the signals to render
signalsToRender = simulationModel? simulationModel.mapping : [];
......
/**
* File: edit-widget-signal-type-control.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 03.04.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
**********************************************************************************/
import React, { Component } from 'react';
import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
class EditWidgetSignalTypeControl extends Component {
constructor(props) {
super(props);
this.state = {
widget: {}
};
}
componentWillReceiveProps(nextProps) {
// Update state's widget with props
this.setState({ widget: nextProps.widget });
}
render() {
// get selected simulation model
var simulationModel = {};
if (this.props.simulation) {
this.props.simulation.models.forEach((model) => {
if (model.simulation === this.state.widget.simulation) {
simulationModel = model;
}
});
}
// Obtain unique signal types with the help of dictionary keys
var signalTypes = Object.keys(simulationModel.mapping.reduce( (collection, signal) => {
var lower = signal.type.toLowerCase();
collection[lower] = '';
return collection;
}, {}));
var capitalize = (str) => { return str.charAt(0).toUpperCase() + str.slice(1); }
var selectedValue = signalTypes.includes(this.state.widget.signalType) ? this.state.widget.signalType : '';
return (
<FormGroup controlId="signalType">
<ControlLabel>Signal type</ControlLabel>
<FormControl componentClass="select" placeholder="Select signal type" value={ selectedValue } onChange={(e) => this.props.handleChange(e)}>
<option disabled value style={{ display: 'none' }}> Select signal type </option>
{signalTypes.map((type, index) => (
<option key={type} value={type}>{ capitalize(type) }</option>
))}
</FormControl>
</FormGroup>
);
}
}
export default EditWidgetSignalTypeControl;
\ No newline at end of file
......@@ -2,9 +2,21 @@
* File: edit-widget-signals-control.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 03.04.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
*
* 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, { Component } from 'react';
......@@ -46,7 +58,7 @@ class EditWidgetSignalsControl extends Component {
if (this.props.simulation) {
// get selected simulation model
const simulationModel = this.props.simulation.models.find( model => model.simulation === this.state.widget.simulation );
const simulationModel = this.props.simulation.models.find( model => model.simulator === this.state.widget.simulator );
// If simulation model update the signals to render
signalsToRender = simulationModel? simulationModel.mapping : [];
......
......@@ -2,9 +2,21 @@
* File: edit-widget-simulator-control.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 03.04.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
*
* 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, { Component } from 'react';
......
......@@ -2,9 +2,21 @@
* File: edit-widget-text-control.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 21.04.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
*
* 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, { Component } from 'react';
......
......@@ -2,9 +2,21 @@
* File: edit-widget-time-control.js
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
* Date: 13.04.2017
* Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
*
* 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, { Component } from 'react';
......
......@@ -24,14 +24,7 @@ import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
import Dialog from './dialog';
import EditWidgetTextControl from './edit-widget-text-control';
import EditWidgetColorControl from './edit-widget-color-control';
import EditWidgetTimeControl from './edit-widget-time-control';
import EditImageWidgetControl from './edit-widget-image-control';
import EditWidgetSimulatorControl from './edit-widget-simulator-control';
import EditWidgetSignalControl from './edit-widget-signal-control';
import EditWidgetSignalsControl from './edit-widget-signals-control';
import EditWidgetOrientation from './edit-widget-orientation';
import createControls from './edit-widget-control-creator';
class EditWidgetDialog extends Component {
static propTypes = {
......@@ -62,10 +55,16 @@ class EditWidgetDialog extends Component {
}
}
handleChange(e, index) {
var update = this.state.temporal;
update[e.target.id] = e.target.value;
this.setState({ temporal: update });
handleChange(e) {
if (e.constructor === Array) {
// Every property in the array will be updated
let changes = e.reduce( (changesObject, event) => { changesObject[event.target.id] = event.target.value; return changesObject }, {});
this.setState({ temporal: Object.assign({}, this.state.temporal, changes ) });
} else {
let changeObject = {};
changeObject[e.target.id] = e.target.value;
this.setState({ temporal: Object.assign({}, this.state.temporal, changeObject ) });
}
}
resetState() {
......@@ -88,55 +87,17 @@ class EditWidgetDialog extends Component {
}
render() {
// Use a list to concatenate the controls according to the widget type
var dialogControls = [];
let controls = null;
if (this.props.widget) {
if (this.props.widget.type === 'Value') {
dialogControls.push(
<EditWidgetSimulatorControl key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
<EditWidgetSignalsControl key={2} controlId={'signals'} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />
)
} else if (this.props.widget.type === 'Plot') {
dialogControls.push(
<EditWidgetTimeControl key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />,
<EditWidgetSimulatorControl key={2} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
<EditWidgetSignalsControl key={3} controlId={'signals'} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
<EditWidgetTextControl key={4} controlId={'ylabel'} label={'Y-Axis name'} placeholder={'Enter a name for the y-axis'} widget={this.state.temporal} handleChange={(e) => this.handleChange(e)} />
)
} else if (this.props.widget.type === 'Table') {
dialogControls.push(
<EditWidgetSimulatorControl key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />
)
} else if (this.props.widget.type === 'Image') {
dialogControls.push(
<EditImageWidgetControl key={1} sessionToken={this.props.sessionToken} widget={this.state.temporal} files={this.props.files} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />
)
} else if (this.props.widget.type === 'Gauge') {
dialogControls.push(
<EditWidgetSimulatorControl key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
<EditWidgetSignalControl key={2} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />
)
} else if (this.props.widget.type === 'PlotTable') {
dialogControls.push(
<EditWidgetSimulatorControl key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
<EditWidgetSignalsControl key={2} controlId={'preselectedSignals'} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
<EditWidgetTextControl key={3} controlId={'ylabel'} label={'Y-Axis'} placeholder={'Enter a name for the Y-axis'} widget={this.state.temporal} handleChange={(e) => this.handleChange(e)} />
)
} else if (this.props.widget.type === 'Slider') {
dialogControls.push(
<EditWidgetOrientation key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
)
} else if (this.props.widget.type === 'Button') {
dialogControls.push(
<EditWidgetColorControl key={1} widget={this.state.temporal} controlId={'background_color'} label={'Background'} validate={(id) => this.validateForm(id)} handleChange={(e, index) => this.handleChange(e, index)} />,
<EditWidgetColorControl key={2} widget={this.state.temporal} controlId={'font_color'} label={'Font color'} validate={(id) => this.validateForm(id)} handleChange={(e, index) => this.handleChange(e, index)} />
)
} else if (this.props.widget.type === 'Box') {
dialogControls.push(
<EditWidgetColorControl key={1} widget={this.state.temporal} controlId={'border_color'} label={'Border color'} validate={(id) => this.validateForm(id)} handleChange={(e, index) => this.handleChange(e, index)} />
)
}
controls = createControls(
this.props.widget.type,
this.state.temporal,
this.props.sessionToken,
this.props.files,
(id) => this.validateForm(id),
this.props.simulation,
(e) => this.handleChange(e));
}
return (
......@@ -147,7 +108,7 @@ class EditWidgetDialog extends Component {
<FormControl type="text" placeholder="Enter name" value={this.state.temporal.name} onChange={(e) => this.handleChange(e)} />
<FormControl.Feedback />
</FormGroup>
{ dialogControls }
{ controls || '' }
</form>
</Dialog>
);
......
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