Box to group widgets

src/components/dialog/edit-widget.js

@@ -119,6 +119,10 @@ class EditWidgetDialog extends Component {
           <EditWidgetColorControl key={1} widget={this.state.temporal} controlId={'background_color'} label={'Background'} validate={(id) => this.validateForm(id)} handleChange={(e, index) => this.handleChange(e, index)} />,
           <EditWidgetColorControl key={2} widget={this.state.temporal} controlId={'font_color'} label={'Font color'} validate={(id) => this.validateForm(id)} handleChange={(e, index) => this.handleChange(e, index)} />
         )
+      } else if (this.props.widget.type === 'Box') {
+        dialogControls.push(
+          <EditWidgetColorControl key={1} widget={this.state.temporal} controlId={'border_color'} label={'Border color'} validate={(id) => this.validateForm(id)} handleChange={(e, index) => this.handleChange(e, index)} />
+        )
       }
     }
 

src/components/widget-box.js

@@ -0,0 +1,33 @@
+/**
+ * File: widget-box.js
+ * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
+ * Date: 25.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 EditWidgetColorControl from './dialog/edit-widget-color-control';
+
+class WidgetBox extends Component {
+  render() {
+    
+    let colors = EditWidgetColorControl.ColorPalette;
+
+    let colorStyle = {
+      borderColor: colors[this.props.widget.border_color]
+    }
+
+    return (
+      <div className="box-widget full">
+        <div className="border" style={colorStyle}>
+          {  }
+        </div>
+      </div>
+    );
+  }
+}
+
+export default WidgetBox;

src/components/widget-factory.js

@@ -101,6 +101,14 @@ class WidgetFactory {
                 widget.width = 200;
                 widget.height = 150;
                 break;
+            case 'Box':
+                widget.minWidth = 50;
+                widget.minHeight = 50;
+                widget.width = 100;
+                widget.height = 100;
+                widget.border_color = 0;
+                widget.z = 0;
+                break;
             default:
                 widget.width = 100;
                 widget.height = 100;

src/containers/visualization.js

@@ -349,6 +349,7 @@ class Visualization extends Component {
               <ToolboxItem name="NumberInput" type="widget" />
               <ToolboxItem name="Slider" type="widget" />
               <ToolboxItem name="Gauge" type="widget" />
+              <ToolboxItem name="Box" type="widget" />
             </div>
           }
 

src/containers/widget.js

@@ -27,6 +27,7 @@ import WidgetButton from '../components/widget-button';
 import WidgetNumberInput from '../components/widget-number-input';
 import WidgetSlider from '../components/widget-slider';
 import WidgetGauge from '../components/widget-gauge';
+import WidgetBox from '../components/widget-box';
 
 import '../styles/widgets.css';
 
@@ -146,6 +147,8 @@ class Widget extends Component {
       element = <WidgetSlider widget={widget} editing={this.props.editing} onWidgetChange={(w) => this.props.onWidgetStatusChange(w, this.props.index) } />
     } else if (widget.type === 'Gauge') {
       element = <WidgetGauge widget={widget} data={this.state.simulatorData} editing={this.props.editing} simulation={this.props.simulation} />
+    } else if (widget.type === 'Box') {
+      element = <WidgetBox widget={widget} editing={this.props.editing} />
     }
     
     let widgetClasses = classNames({

src/styles/widgets.css

@@ -441,4 +441,12 @@ div[class*="-widget"] label {
 .table-widget td, .table-widget th {
     text-align: center;
 }
-/* End table widget*/
+/* End table widget*/
+
+/* Begin box widget */
+.box-widget .border {
+    width: 100%;
+    height: 100%;
+    border: 2px solid;
+}
+/* End box widget */