initial number input widget

src/components/widget-number-input.js

@@ -0,0 +1,69 @@
+/**
+ * File: widget-number-input.js
+ * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
+ * Date: 29.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 { Form, FormGroup, Col, ControlLabel, FormControl } from 'react-bootstrap';
+
+class WidgetNumberInput extends Component {
+  
+  static whichValidationStateIs( condition ) {
+    switch(condition) {
+        case 'ok': return null;
+        case 'error': return 'error';
+        default: return 'error';
+    }
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+        value: '',
+        validationState: WidgetNumberInput.whichValidationStateIs('ok')
+    };
+  }
+
+  validateInput(e) {
+      if (e.target.value === '' || e.target.value.endsWith('.')) {
+        this.setState({
+            validationState: WidgetNumberInput.whichValidationStateIs('ok'),
+            value: e.target.value });
+      } else {
+        var num = Number(e.target.value);
+        if (Number.isNaN(num)) {
+            this.setState({ validationState: WidgetNumberInput.whichValidationStateIs('error'),
+                value: e.target.value });
+        } else {
+            this.setState({
+                validationState: WidgetNumberInput.whichValidationStateIs('ok'),
+                value: num });
+        }
+      }
+  }
+
+  render() {
+    return (
+      <div className="number-input-widget full">
+          <Form componentClass="fieldset" horizontal>
+              <FormGroup controlId="formValidationError3" validationState={ this.state.validationState} >
+                  <Col componentClass={ControlLabel} xs={3}>
+                    {this.props.widget.name}
+                  </Col>
+                  <Col xs={9}>
+                    <FormControl type="text" disabled={ this.props.editing } onInput={ (e) => this.validateInput(e) } placeholder="Enter value" value={ this.state.value } />
+                    <FormControl.Feedback />
+                  </Col>
+                </FormGroup>
+            </Form>
+      </div>
+    );
+  }
+}
+
+export default WidgetNumberInput;

src/containers/visualization.js

@@ -173,6 +173,16 @@ class Visualization extends Component {
       widget.minHeight = 100;
       widget.width = 200;
       widget.height = 200;
+    } else if (item.name === 'Button') {
+      widget.minWidth = 100;
+      widget.minHeight = 50;
+      widget.width = 100;
+      widget.height = 100;
+    } else if (item.name === 'NumberInput') {
+      widget.minWidth = 200;
+      widget.minHeight = 50;
+      widget.width = 200;
+      widget.height = 50;
     }
 
     var new_widgets = this.state.visualization.widgets;
@@ -342,6 +352,7 @@ class Visualization extends Component {
               <ToolboxItem name="Image" type="widget" />
               <ToolboxItem name="PlotTable" type="widget" />
               <ToolboxItem name="Button" type="widget" />
+              <ToolboxItem name="NumberInput" type="widget" />
             </div>
           }
 

src/containers/widget.js

@@ -23,6 +23,7 @@ import WidgetLabel from '../components/widget-label';
 import WidgetPlotTable from '../components/widget-plot-table';
 import WidgetImage from '../components/widget-image';
 import WidgetButton from '../components/widget-button';
+import WidgetNumberInput from '../components/widget-number-input';
 
 import '../styles/widgets.css';
 
@@ -131,6 +132,8 @@ class Widget extends Component {
       element = <WidgetImage widget={widget} files={this.state.files} />
     } else if (widget.type === 'Button') {
       element = <WidgetButton widget={widget} editing={this.props.editing} />
+    } else if (widget.type === 'NumberInput') {
+      element = <WidgetNumberInput widget={widget} editing={this.props.editing} />
     }
     
     if (this.props.editing) {

src/styles/widgets.css

@@ -113,7 +113,7 @@
 }
 
 /* Reset Bootstrap styles to "disable" while editing */
-div[class*="-widget"] .btn[disabled] {
+div[class*="-widget"] .btn[disabled], .form-control[disabled] {
   cursor: inherit;
   pointer-events: none;
 }
@@ -174,4 +174,10 @@ div[class*="-widget"] .btn[disabled] {
 .full {
     width: 100%;
     height: 100%;
-}
+}
+
+/* Number input widget */ 
+.number-input-widget label {
+    cursor: inherit;
+}
+/* Number input widget */