1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00

allow signal selection in gauge edit menu & modular edit controls (code reuse)

This commit is contained in:
Ricardo Hernandez-Montoya 2017-04-03 15:59:05 +02:00
parent baddee0df3
commit 6da223ef3d
3 changed files with 108 additions and 1 deletions

View file

@ -0,0 +1,54 @@
/**
* 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.
**********************************************************************************/
import React, { Component } from 'react';
import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
class EditWidgetSignalControl extends Component {
constructor(props) {
super(props);
this.state = {
widget: {
simulator: ''
}
};
}
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;
}
});
}
return (
<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>
);
}
}
export default EditWidgetSignalControl;

View file

@ -0,0 +1,44 @@
/**
* 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.
**********************************************************************************/
import React, { Component } from 'react';
import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
class EditWidgetSimulatorControl extends Component {
constructor(props) {
super(props);
this.state = {
widget: {
simulator: ''
}
};
}
componentWillReceiveProps(nextProps) {
// Update state's widget with props
this.setState({ widget: nextProps.widget });
}
render() {
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) => (
<option key={index} value={model.simulator}>{model.name}</option>
))}
</FormControl>
</FormGroup>
);
}
}
export default EditWidgetSimulatorControl;

View file

@ -16,6 +16,8 @@ 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 EditWidgetSimulatorControl from './edit-widget-simulator-control';
import EditWidgetSignalControl from './edit-widget-signal-control';
class EditWidgetDialog extends Component {
static propTypes = {
@ -75,6 +77,8 @@ 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') {
@ -85,6 +89,11 @@ class EditWidgetDialog extends Component {
widgetDialog = <EditTableWidget widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />;
} 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)} />;
} else if (this.props.widget.type === 'Gauge') {
dialogControls.push(
<EditWidgetSimulatorControl widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
<EditWidgetSignalControl widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />
)
}
}
@ -96,7 +105,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 }
{widgetDialog}
</form>
</Dialog>