From fe543dee931b8d2131d3b8386932b1772e62dae5 Mon Sep 17 00:00:00 2001 From: Ricardo Hernandez-Montoya Date: Thu, 13 Apr 2017 10:05:57 +0200 Subject: [PATCH] Extracted controls in Widget Edit model and included proper message when no sim model is available --- ...-image.js => edit-widget-image-control.js} | 6 +- src/components/dialog/edit-widget-plot.js | 85 ------------------- .../dialog/edit-widget-signals-control.js | 31 ++++--- .../dialog/edit-widget-simulator-control.js | 11 ++- .../dialog/edit-widget-time-control.js | 40 +++++++++ src/components/dialog/edit-widget-value.js | 64 -------------- src/components/dialog/edit-widget.js | 32 ++++--- 7 files changed, 87 insertions(+), 182 deletions(-) rename src/components/dialog/{edit-widget-image.js => edit-widget-image-control.js} (94%) delete mode 100644 src/components/dialog/edit-widget-plot.js create mode 100644 src/components/dialog/edit-widget-time-control.js delete mode 100644 src/components/dialog/edit-widget-value.js diff --git a/src/components/dialog/edit-widget-image.js b/src/components/dialog/edit-widget-image-control.js similarity index 94% rename from src/components/dialog/edit-widget-image.js rename to src/components/dialog/edit-widget-image-control.js index f7b06e4..d484bee 100644 --- a/src/components/dialog/edit-widget-image.js +++ b/src/components/dialog/edit-widget-image-control.js @@ -1,5 +1,5 @@ /** - * File: edit-widget-value.js + * File: edit-widget-image-control.js * Author: Markus Grigull * Date: 04.03.2017 * Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC @@ -12,7 +12,7 @@ import { FormGroup, FormControl, ControlLabel, Button } from 'react-bootstrap'; import AppDispatcher from '../../app-dispatcher'; -class EditImageWidget extends Component { +class EditImageWidgetControl extends Component { constructor(props) { super(props); @@ -68,4 +68,4 @@ class EditImageWidget extends Component { } } -export default EditImageWidget; +export default EditImageWidgetControl; diff --git a/src/components/dialog/edit-widget-plot.js b/src/components/dialog/edit-widget-plot.js deleted file mode 100644 index a2371e3..0000000 --- a/src/components/dialog/edit-widget-plot.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * File: edit-widget-plot.js - * Author: Markus Grigull - * Date: 13.03.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, Checkbox, HelpBlock } from 'react-bootstrap'; - -class EditPlotWidget extends Component { - constructor(props) { - super(props); - - this.state = { - widget: { - simulator: '', - signals: [], - time: 0 - } - }; - } - - componentWillReceiveProps(nextProps) { - this.setState({ widget: nextProps.widget }); - } - - handleSignalChange(e, index) { - var signals = this.state.widget.signals; - - if (e.target.checked) { - // add signal - signals.push(index); - } else { - // remove signal - const pos = signals.indexOf(index); - if (pos > -1) { - signals.splice(pos, 1); - } - } - - this.props.handleChange({ target: { id: 'signals', value: signals } }); - } - - 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; - } - }); - } - - return ( -
- - Time - this.props.handleChange(e)} /> - Time in seconds - - - Simulator - this.props.handleChange(e)}> - {this.props.simulation.models.map((model, index) => ( - - ))} - - - - Signals - {simulationModel.mapping.map((signal, index) => ( - this.handleSignalChange(e, index)}>{signal.name} - ))} - -
- ); - } -} - -export default EditPlotWidget; diff --git a/src/components/dialog/edit-widget-signals-control.js b/src/components/dialog/edit-widget-signals-control.js index 2842618..a7fcd07 100644 --- a/src/components/dialog/edit-widget-signals-control.js +++ b/src/components/dialog/edit-widget-signals-control.js @@ -8,7 +8,7 @@ **********************************************************************************/ import React, { Component } from 'react'; -import { FormGroup, Checkbox, ControlLabel } from 'react-bootstrap'; +import { FormGroup, Checkbox, ControlLabel, FormControl } from 'react-bootstrap'; class EditWidgetSignalsControl extends Component { constructor(props) { @@ -39,27 +39,32 @@ class EditWidgetSignalsControl extends Component { new_signals = signals.filter( (idx) => idx !== index ); } - this.props.handleChange({ target: { id: 'preselectedSignals', value: new_signals } }); + this.props.handleChange({ target: { id: this.props.controlId, value: new_signals } }); } render() { - // get selected simulation model - var simulationModel = {}; + let signalsToRender = []; if (this.props.simulation) { - this.props.simulation.models.forEach((model) => { - if (model.simulation === this.state.widget.simulation) { - simulationModel = model; - } - }); - } + // get selected simulation model + const simulationModel = this.props.simulation.models.find( model => model.simulation === this.state.widget.simulation ); + // If simulation model update the signals to render + signalsToRender = simulationModel? simulationModel.mapping : []; + } + return ( Signals - {simulationModel.mapping.map((signal, index) => ( - this.handleSignalChange(e.target.checked, index)}>{signal.name} - ))} + { + signalsToRender.length === 0 ? ( + No signals available. + ) : ( + signalsToRender.map((signal, index) => ( + this.handleSignalChange(e.target.checked, index)}>{signal.name} + )) + ) + } ); } diff --git a/src/components/dialog/edit-widget-simulator-control.js b/src/components/dialog/edit-widget-simulator-control.js index baa9679..23de386 100644 --- a/src/components/dialog/edit-widget-simulator-control.js +++ b/src/components/dialog/edit-widget-simulator-control.js @@ -31,10 +31,15 @@ class EditWidgetSimulatorControl extends Component { return ( Simulator - this.props.handleChange(e)}> - {this.props.simulation.models.map((model, index) => ( + this.props.handleChange(e)}> + { + this.props.simulation.models.length === 0? ( + + ) : ( + this.props.simulation.models.map((model, index) => ( - ))} + ))) + } ); diff --git a/src/components/dialog/edit-widget-time-control.js b/src/components/dialog/edit-widget-time-control.js new file mode 100644 index 0000000..5b8e234 --- /dev/null +++ b/src/components/dialog/edit-widget-time-control.js @@ -0,0 +1,40 @@ +/** + * File: edit-widget-time-control.js + * Author: Ricardo Hernandez-Montoya + * 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. + **********************************************************************************/ + +import React, { Component } from 'react'; +import { FormGroup, FormControl, ControlLabel, HelpBlock } from 'react-bootstrap'; + +class EditWidgetTimeControl extends Component { + constructor(props) { + super(props); + + this.state = { + widget: { + time: 0 + } + }; + } + + componentWillReceiveProps(nextProps) { + this.setState({ widget: nextProps.widget }); + } + + render() { + + return ( + + Time + this.props.handleChange(e)} /> + Time in seconds + + ); + } +} + +export default EditWidgetTimeControl; diff --git a/src/components/dialog/edit-widget-value.js b/src/components/dialog/edit-widget-value.js deleted file mode 100644 index 7f16a03..0000000 --- a/src/components/dialog/edit-widget-value.js +++ /dev/null @@ -1,64 +0,0 @@ -/** - * File: edit-widget-value.js - * Author: Markus Grigull - * Date: 04.03.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 EditValueWidget extends Component { - constructor(props) { - super(props); - - this.state = { - widget: { - simulator: '', - signal: 0 - } - }; - } - - componentWillReceiveProps(nextProps) { - 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; - } - }); - } - - return ( -
- - Simulator - this.props.handleChange(e)}> - {this.props.simulation.models.map((model, index) => ( - - ))} - - - - Signal - this.props.handleChange(e)}> - {simulationModel.mapping.map((signal, index) => ( - - ))} - - -
- ); - } -} - -export default EditValueWidget; diff --git a/src/components/dialog/edit-widget.js b/src/components/dialog/edit-widget.js index a5a2daa..b90e75c 100644 --- a/src/components/dialog/edit-widget.js +++ b/src/components/dialog/edit-widget.js @@ -12,10 +12,8 @@ import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap'; import Dialog from './dialog'; -import EditValueWidget from './edit-widget-value'; -import EditPlotWidget from './edit-widget-plot'; -import EditTableWidget from './edit-widget-table'; -import EditImageWidget from './edit-widget-image'; +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'; @@ -53,8 +51,6 @@ class EditWidgetDialog extends Component { var update = this.state.temporal; update[e.target.id] = e.target.value; this.setState({ temporal: update }); - - //console.log(this.state.widget); } resetState() { @@ -77,20 +73,29 @@ class EditWidgetDialog extends Component { } render() { - // get widget part - var widgetDialog = null; // Use a list to concatenate the controls according to the widget type var dialogControls = []; if (this.props.widget) { if (this.props.widget.type === 'Value') { - widgetDialog = this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />; + dialogControls.push( + this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />, + this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} /> + ) } else if (this.props.widget.type === 'Plot') { - widgetDialog = this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />; + dialogControls.push( + this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />, + this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />, + this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} /> + ) } else if (this.props.widget.type === 'Table') { - widgetDialog = this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />; + dialogControls.push( + this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} /> + ) } else if (this.props.widget.type === 'Image') { - widgetDialog = this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />; + dialogControls.push( + this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} /> + ) } else if (this.props.widget.type === 'Gauge') { dialogControls.push( this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />, @@ -99,7 +104,7 @@ class EditWidgetDialog extends Component { } else if (this.props.widget.type === 'PlotTable') { dialogControls.push( this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />, - this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} /> + this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} /> ) } else if (this.props.widget.type === 'Slider') { dialogControls.push( @@ -117,7 +122,6 @@ class EditWidgetDialog extends Component { { dialogControls } - {widgetDialog} );