diff --git a/src/components/dialog/edit-widget-signal-type-control.js b/src/components/dialog/edit-widget-signal-type-control.js new file mode 100644 index 0000000..8978186 --- /dev/null +++ b/src/components/dialog/edit-widget-signal-type-control.js @@ -0,0 +1,64 @@ +/** + * File: edit-widget-signal-type-control.js + * Author: Ricardo Hernandez-Montoya + * 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 ( + + Signal type + this.props.handleChange(e)}> + + {signalTypes.map((type, index) => ( + + ))} + + + ); + } +} + +export default EditWidgetSignalTypeControl; \ No newline at end of file diff --git a/src/components/dialog/edit-widget.js b/src/components/dialog/edit-widget.js index 7275649..689f731 100644 --- a/src/components/dialog/edit-widget.js +++ b/src/components/dialog/edit-widget.js @@ -18,6 +18,7 @@ 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'; +import EditWidgetSignalTypeControl from './edit-widget-signal-type-control'; class EditWidgetDialog extends Component { static propTypes = { @@ -94,6 +95,11 @@ class EditWidgetDialog extends Component { 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 === '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)} /> + ) } } diff --git a/src/components/widget-plot-table.js b/src/components/widget-plot-table.js index 5305ff8..70859c4 100644 --- a/src/components/widget-plot-table.js +++ b/src/components/widget-plot-table.js @@ -52,10 +52,13 @@ class WidgetPlotTable extends Component { // get rows var rows = []; - - simulationModel.mapping.forEach((signal) => { - rows.push({ name: signal.name }) - }); + // populate the table rows with the signals of the chosen type + simulationModel.mapping + .filter( (signal) => + signal.type.toLowerCase() === nextProps.widget.signalType) + .forEach((signal) => { + rows.push({ name: signal.name }) + }); // get timestamps var latestTimestamp = nextProps.data[simulator].values[0][nextProps.data[simulator].values[0].length - 1].x; @@ -82,19 +85,23 @@ class WidgetPlotTable extends Component { } render() { - console.log("Signal: " + this.state.signal); return ( -
+

{this.props.widget.name}

- - { this.state.rows.map( (row, index) => ( - - )) - } - + { this.state.rows && this.state.rows.length > 0 ? ( + + { this.state.rows.map( (row, index) => ( + + )) + } + + ) : ( + No signal found, select a different signal type. + ) + }
diff --git a/src/containers/visualization.js b/src/containers/visualization.js index 432b1b3..100c484 100644 --- a/src/containers/visualization.js +++ b/src/containers/visualization.js @@ -163,6 +163,7 @@ class Visualization extends Component { widget.minHeight = 20; } else if (item.name === 'PlotTable') { widget.simulator = this.state.simulation.models[0].simulator; + widget.signalType = this.state.simulation.models[0].mapping[0].type.toLowerCase(); widget.minWidth = 400; widget.minHeight = 200; widget.width = 500; diff --git a/src/styles/widgets.css b/src/styles/widgets.css index b0e7ac0..097f866 100644 --- a/src/styles/widgets.css +++ b/src/styles/widgets.css @@ -93,6 +93,7 @@ right: 7px; } +/* PlotTable widget */ .plot-table-widget, .plot-widget, .value-widget, .image-widget, .label-widget { width: 100%; height: 100%; @@ -112,6 +113,11 @@ justify-content: center; } +.plot-table-widget small { + text-align: center; +} +/* End PlotTable Widget */ + /* Reset Bootstrap styles to "disable" while editing */ div[class*="-widget"] .btn[disabled], div[class*="-widget"] input[disabled], .form-control[disabled] { cursor: inherit;