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

Extracted controls in Widget Edit model and included proper message when no sim model is available

Browse source
This commit is contained in:
Ricardo Hernandez-Montoya 2017-04-13 10:05:57 +02:00
parent d240d5553b
commit fe543dee93
7 changed files with 87 additions and 182 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/dialog/edit-widget-image.js → src/components/dialog/edit-widget-image-control.js
View file

@ -1,5 +1,5 @@
/**
* File: edit-widget-value.js
* File: edit-widget-image-control.js
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
* 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;

85
src/components/dialog/edit-widget-plot.js
View file

@ -1,85 +0,0 @@
/**
* File: edit-widget-plot.js
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
* 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 (
<div>
<FormGroup controlId="time">
<ControlLabel>Time</ControlLabel>
<FormControl type="number" min="1" max="300" placeholder="Enter time" value={this.state.widget.time} onChange={(e) => this.props.handleChange(e)} />
<HelpBlock>Time in seconds</HelpBlock>
</FormGroup>
<FormGroup controlId="simulator">
<ControlLabel>Simulator</ControlLabel>
<FormControl componentClass="select" placeholder="Select simulator" value={this.state.widget.simulator} onChange={(e) => this.props.handleChange(e)}>
{this.props.simulation.models.map((model, index) => (
<option key={index} value={model.simulator}>{model.name}</option>
))}
</FormControl>
</FormGroup>
<FormGroup>
<ControlLabel>Signals</ControlLabel>
{simulationModel.mapping.map((signal, index) => (
<Checkbox key={index} checked={this.state.widget.signals.indexOf(index) !== -1} onChange={(e) => this.handleSignalChange(e, index)}>{signal.name}</Checkbox>
))}
</FormGroup>
</div>
);
}
}
export default EditPlotWidget;

31
src/components/dialog/edit-widget-signals-control.js
View file

@ -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 (
<FormGroup>
<ControlLabel>Signals</ControlLabel>
{simulationModel.mapping.map((signal, index) => (
<Checkbox key={index} checked={this.state.widget.preselectedSignals.indexOf(index) !== -1} onChange={(e) => this.handleSignalChange(e.target.checked, index)}>{signal.name}</Checkbox>
))}
{
signalsToRender.length === 0 ? (
<FormControl.Static>No signals available.</FormControl.Static>
) : (
signalsToRender.map((signal, index) => (
<Checkbox key={index} checked={this.state.widget.preselectedSignals.indexOf(index) !== -1} onChange={(e) => this.handleSignalChange(e.target.checked, index)}>{signal.name}</Checkbox>
))
)
}
</FormGroup>
);
}

11
src/components/dialog/edit-widget-simulator-control.js
View file

@ -31,10 +31,15 @@ class EditWidgetSimulatorControl extends Component {
return (
<FormGroup controlId="simulator">
<ControlLabel>Simulator</ControlLabel>
<FormControl componentClass="select" placeholder="Select simulator" value={this.state.widget.simulator} onChange={(e) => this.props.handleChange(e)}>
{this.props.simulation.models.map((model, index) => (
<FormControl componentClass="select" placeholder="Select simulator" value={this.state.widget.simulator || '' } onChange={(e) => this.props.handleChange(e)}>
{
this.props.simulation.models.length === 0? (
<option disabled value style={{ display: 'none' }}> No simulators available. </option>
) : (
this.props.simulation.models.map((model, index) => (
<option key={index} value={model.simulator}>{model.name}</option>
))}
)))
}
</FormControl>
</FormGroup>
);

40
src/components/dialog/edit-widget-time-control.js Normal file
View file

@ -0,0 +1,40 @@
/**
* 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.
**********************************************************************************/
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 (
<FormGroup controlId="time">
<ControlLabel>Time</ControlLabel>
<FormControl type="number" min="1" max="300" placeholder="Enter time" value={this.state.widget.time} onChange={(e) => this.props.handleChange(e)} />
<HelpBlock>Time in seconds</HelpBlock>
</FormGroup>
);
}
}
export default EditWidgetTimeControl;

64
src/components/dialog/edit-widget-value.js
View file

@ -1,64 +0,0 @@
/**
* File: edit-widget-value.js
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
* 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 (
<div>
<FormGroup controlId="simulator">
<ControlLabel>Simulator</ControlLabel>
<FormControl componentClass="select" placeholder="Select simulator" value={this.state.widget.simulator} onChange={(e) => this.props.handleChange(e)}>
{this.props.simulation.models.map((model, index) => (
<option key={index} value={model.simulator}>{model.name}</option>
))}
</FormControl>
</FormGroup>
<FormGroup controlId="signal">
<ControlLabel>Signal</ControlLabel>
<FormControl componentClass="select" placeholder="Select signal" value={this.state.widget.signal} onChange={(e) => this.props.handleChange(e)}>
{simulationModel.mapping.map((signal, index) => (
<option key={index} value={index}>{simulationModel.mapping[index].name}</option>
))}
</FormControl>
</FormGroup>
</div>
);
}
}
export default EditValueWidget;

32
src/components/dialog/edit-widget.js
View file

@ -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 = <EditValueWidget widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />;
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') {
widgetDialog = <EditPlotWidget widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />;
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)} />
)
} else if (this.props.widget.type === 'Table') {
widgetDialog = <EditTableWidget widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />;
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') {
widgetDialog = <EditImageWidget widget={this.state.temporal} files={this.props.files} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />;
dialogControls.push(
<EditImageWidgetControl key={1} 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)} />,
@ -99,7 +104,7 @@ class EditWidgetDialog extends Component {
} 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} 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)} />
)
} else if (this.props.widget.type === 'Slider') {
dialogControls.push(
@ -117,7 +122,6 @@ class EditWidgetDialog extends Component {
<FormControl.Feedback />
</FormGroup>
{ dialogControls }
{widgetDialog}
</form>
</Dialog>
);