added new widget for custom actions

src/components/dialogs/edit-widget-control-creator.js

@@ -36,12 +36,21 @@ import EditWidgetCheckboxControl from './edit-widget-checkbox-control';
 import EditWidgetColorZonesControl from './edit-widget-color-zones-control';
 import EditWidgetMinMaxControl from './edit-widget-min-max-control';
 import EditWidgetHTMLContent from './edit-widget-html-content';
+import EditWidgetParametersControl from './edit-widget-parameters-control';
 
 export default function createControls(widgetType = null, widget = null, sessionToken = null, files = null, validateForm, simulationModels, handleChange) {
     // Use a list to concatenate the controls according to the widget type
     var dialogControls = [];
 
     switch(widgetType) {
+        case 'CustomAction':
+            dialogControls.push(
+              <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
+              <EditWidgetTextControl key={1} widget={widget} controlId={'icon'} label={'Icon'} placeholder={'Enter an awesome font icon name'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
+              <EditWidgetSimulationControl key={2} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
+              <EditWidgetParametersControl key={3} widget={widget} controlId={'action'} label={'Action'} handleChange={(e) => handleChange(e)} />
+            )
+            break;
         case 'Action':
             dialogControls.push(
               <EditWidgetSimulationControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />

src/components/widget-factory.js

@@ -20,6 +20,7 @@
  * You should have received a copy of the GNU General Public License
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
+
 import WidgetSlider from './widgets/slider';
 
 class WidgetFactory {
@@ -39,6 +40,22 @@ class WidgetFactory {
 
         // set type specific properties
         switch(type) {
+            case 'CustomAction':
+                widget.action = {
+                  action: 'start',
+                  model: {
+                    url: 'ftp://user:pass@example.com/projectA/model.zip'
+                  },
+                  parameters: {
+                    timestep: 50e-6
+                  }
+                };
+                widget.name = 'Action';
+                widget.icon = 'star';
+                widget.width = 100;
+                widget.height = 50;
+                widget.simulationModel = defaultSimulationModel;
+                break;
             case 'Action':
                 widget.simulationModel = defaultSimulationModel;
                 break;

src/components/widgets/custom-action.js

@@ -0,0 +1,69 @@
+/**
+ * File: action.js
+ * Author: Steffen Vogel <stvogel@eonerc.rwth-aachen.de>
+ * Date: 21.11.2018
+ * Copyright: 2018, Institute for Automation of Complex Power Systems, EONERC
+ *
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import React, { Component } from 'react';
+import { Button } from 'react-bootstrap';
+import Icon from '../icon';
+import UserStore from '../../stores/user-store';
+import SimulatorStore from '../../stores/simulator-store';
+import AppDispatcher from '../../app-dispatcher';
+
+class WidgetCustomAction extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      simulator: null
+    };
+  }
+
+  static getStores() {
+    return [ SimulatorStore ];
+  }
+
+  componentWillReceiveProps(props) {
+    if (props.simulationModel === null)
+      return;
+
+    this.setState({
+      simulator: SimulatorStore.getState().find(s => s._id === props.simulationModel.simulator),
+      sessionToken: UserStore.getState().token
+    });
+  }
+
+  onClick() {
+    AppDispatcher.dispatch({
+      type: 'simulators/start-action',
+      simulator: this.state.simulator,
+      data: this.props.widget.action,
+      token: this.state.sessionToken
+    });
+  }
+
+  render() {
+    const btnStyle = { width: '100%', height: '100%' };
+
+    return <Button disabled={this.state.simulator === null} style={btnStyle} onClick={(e) => this.onClick()}><Icon icon={this.props.widget.icon} /> <span dangerouslySetInnerHTML={{ __html: this.props.widget.name }} /></Button>;
+  }
+}
+
+export default WidgetCustomAction;

src/containers/visualization.js

@@ -480,6 +480,7 @@ class Visualization extends React.Component {
                 { editingControls }
               </ButtonToolbar>
               <ButtonToolbar className="toolbox box-header">
+                <ToolboxItem icon="star" name="CustomAction" type="widget" />
                 <ToolboxItem icon="play" name="Action" type="widget" disabled={true} />
                 <ToolboxItem icon="lightbulb" name="Lamp" type="widget" />
                 <ToolboxItem icon="font" name="Value" type="widget" />

src/containers/widget.js

@@ -31,6 +31,7 @@ import SimulatorDataStore from '../stores/simulator-data-store';
 import SimulationModelStore from '../stores/simulation-model-store';
 import FileStore from '../stores/file-store';
 
+import WidgetCustomAction from '../components/widgets/custom-action';
 import WidgetAction from '../components/widgets/action';
 import WidgetLamp from '../components/widgets/lamp';
 import WidgetValue from '../components/widgets/value';
@@ -204,7 +205,9 @@ class Widget extends React.Component {
     }
 
     // dummy is passed to widgets to keep updating them while in edit mode
-    if (widget.type === 'Action') {
+    if (widget.type === 'CustomAction') {
+      element = <WidgetCustomAction widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulationModel={simulationModel} />
+    } else if (widget.type === 'Action') {
       element = <WidgetAction widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulationModel={simulationModel} />
     } else if (widget.type === 'Lamp') {
       element = <WidgetLamp widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulationModel={simulationModel} />