Add table widget

src/components/dialog/edit-widget-table.js

@@ -0,0 +1,55 @@
+/**
+ * File: edit-widget-table.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 14.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 EditTableWidget extends Component {
+   constructor(props) {
+     super(props);
+
+     this.state = {
+       widget: {
+         simulator: ''
+       }
+     };
+   }
+
+   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>
+       </div>
+     );
+   }
+ }
+
+ export default EditTableWidget;

src/components/dialog/edit-widget.js

@@ -14,6 +14,7 @@ import Dialog from './dialog';
 
 import EditValueWidget from './edit-widget-value';
 import EditPlotWidget from './edit-widget-plot';
+import EditTableWidget from './edit-widget-table';
 
 class EditWidgetDialog extends Component {
   static propTypes = {
@@ -78,6 +79,8 @@ class EditWidgetDialog extends Component {
         widgetDialog = <EditValueWidget widget={this.state.widget} 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.widget} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />;
+      } else if (this.props.widget.type === 'Table') {
+        widgetDialog = <EditTableWidget widget={this.state.widget} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />;
       }
     }
 

src/components/widget-table.js

@@ -0,0 +1,72 @@
+/**
+ * File: widget-table.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 14.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 Table from './table';
+import TableColumn from './table-column';
+
+class WidgetTable extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      rows: [],
+      sequence: null
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    // check data
+    const simulator = nextProps.widget.simulator;
+
+    if (nextProps.simulation == null || nextProps.data == null || nextProps.data[simulator] == null || nextProps.data[simulator].length === 0 || nextProps.data[simulator].values[0].length === 0) {
+      // clear values
+      this.setState({ rows: [], sequence: null });
+      return;
+    }
+
+    // check if new data, otherwise skip
+    if (this.state.sequence >= nextProps.data[simulator].sequence) {
+      return;
+    }
+
+    // get simulation model
+    const simulationModel = nextProps.simulation.models.find((model) => {
+      return (model.simulator === simulator);
+    });
+
+    // get rows
+    var rows = [];
+
+    nextProps.data[simulator].values.forEach((signal, index) => {
+      rows.push({
+        name: simulationModel.mapping[index].name,
+        value: signal[signal.length - 1].y
+      })
+    });
+
+    this.setState({ rows: rows, sequence: nextProps.data[simulator].sequence });
+  }
+
+  render() {
+    return (
+      <div style={{ width: '100%', height: '100%' }}>
+        <h4>{this.props.widget.name}</h4>
+
+        <Table data={this.state.rows}>
+          <TableColumn title="Signal" dataKey="name" width={120} />
+          <TableColumn title="Value" dataKey="value" />
+        </Table>
+      </div>
+    );
+  }
+}
+
+export default WidgetTable;

src/containers/visualization.js

@@ -121,6 +121,10 @@ class Visualization extends Component {
       widget.time = 300;
       widget.width = 400;
       widget.height = 200;
+    } else if (item.name === 'Table') {
+      widget.simulator = this.state.simulation.models[0].simulator;
+      widget.width = 400;
+      widget.height = 200;
     }
 
     var visualization = this.state.visualization;
@@ -204,6 +208,7 @@ class Visualization extends Component {
             <div className="toolbox">
               <ToolboxItem name="Value" type="widget" />
               <ToolboxItem name="Plot" type="widget" />
+              <ToolboxItem name="Table" type="widget" />
             </div>
           }
 

src/containers/widget.js

@@ -13,8 +13,10 @@ import { ContextMenuTrigger } from 'react-contextmenu';
 import Rnd from 'react-rnd';
 
 import SimulatorDataStore from '../stores/simulator-data-store';
+
 import WidgetValue from '../components/widget-value';
 import WidgetPlot from '../components/widget-plot';
+import WidgetTable from '../components/widget-table';
 
 import '../styles/widgets.css';
 
@@ -72,6 +74,8 @@ class Widget extends Component {
       element = <WidgetValue widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} />
     } else if (widget.type === 'Plot') {
       element = <WidgetPlot widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} />
+    } else if (widget.type === 'Table') {
+      element = <WidgetTable widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} />
     }
 
     if (this.props.editing) {