diff --git a/src/components/widget-number-input.js b/src/components/widget-number-input.js new file mode 100644 index 0000000..13061bb --- /dev/null +++ b/src/components/widget-number-input.js @@ -0,0 +1,69 @@ +/** + * File: widget-number-input.js + * Author: Ricardo Hernandez-Montoya + * 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 ( +
+
+ + + {this.props.widget.name} + + + this.validateInput(e) } placeholder="Enter value" value={ this.state.value } /> + + + +
+
+ ); + } +} + +export default WidgetNumberInput; \ No newline at end of file diff --git a/src/containers/visualization.js b/src/containers/visualization.js index fefec05..7a82db8 100644 --- a/src/containers/visualization.js +++ b/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 { + } diff --git a/src/containers/widget.js b/src/containers/widget.js index 9aa7b92..9062b2b 100644 --- a/src/containers/widget.js +++ b/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 = } else if (widget.type === 'Button') { element = + } else if (widget.type === 'NumberInput') { + element = } if (this.props.editing) { diff --git a/src/styles/widgets.css b/src/styles/widgets.css index d3205d2..9861347 100644 --- a/src/styles/widgets.css +++ b/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%; -} \ No newline at end of file +} + +/* Number input widget */ +.number-input-widget label { + cursor: inherit; +} +/* Number input widget */ \ No newline at end of file