From e8ecd01f5fb1d29991b3271693457ed9e4c395ef Mon Sep 17 00:00:00 2001 From: Ricardo Hernandez-Montoya Date: Tue, 11 Apr 2017 11:31:36 +0200 Subject: [PATCH] allow slider orientation selection --- .../dialog/edit-widget-orientation.js | 61 +++++++++++++++++++ src/components/dialog/edit-widget.js | 5 ++ src/components/widget-slider.js | 57 ++++++++++++----- src/containers/visualization.js | 3 + src/styles/widgets.css | 34 +++++++++++ 5 files changed, 144 insertions(+), 16 deletions(-) create mode 100644 src/components/dialog/edit-widget-orientation.js diff --git a/src/components/dialog/edit-widget-orientation.js b/src/components/dialog/edit-widget-orientation.js new file mode 100644 index 0000000..76aa874 --- /dev/null +++ b/src/components/dialog/edit-widget-orientation.js @@ -0,0 +1,61 @@ +/** + * File: edit-widget-orientation.js + * Author: Ricardo Hernandez-Montoya + * Date: 10.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 { FormGroup, Col, Row, Radio, ControlLabel } from 'react-bootstrap'; + +import WidgetSlider from '../widget-slider'; + +class EditWidgetOrientation extends Component { + constructor(props) { + super(props); + + this.state = { + widget: {} + }; + } + + componentWillReceiveProps(nextProps) { + // Update state's widget with props + this.setState({ widget: nextProps.widget }); + } + + handleOrientationChange(orientation) { + this.props.handleChange({ target: { id: 'orientation', value: orientation } }); + } + + render() { + + // The tag shouldn't be necessary, but it gives height to the row while combining horizontal and vertical forms + return ( + + + + Orientation + + + { + Object.keys(WidgetSlider.OrientationTypes).map( (type) => { + let value = WidgetSlider.OrientationTypes[type].value; + let name = WidgetSlider.OrientationTypes[type].name; + + return ( + this.handleOrientationChange(value)}> + { name } + ) + }) + } + + + + ); + } +} + +export default EditWidgetOrientation; \ No newline at end of file diff --git a/src/components/dialog/edit-widget.js b/src/components/dialog/edit-widget.js index ec6c7d9..a5a2daa 100644 --- a/src/components/dialog/edit-widget.js +++ b/src/components/dialog/edit-widget.js @@ -19,6 +19,7 @@ import EditImageWidget from './edit-widget-image'; import EditWidgetSimulatorControl from './edit-widget-simulator-control'; import EditWidgetSignalControl from './edit-widget-signal-control'; import EditWidgetSignalsControl from './edit-widget-signals-control'; +import EditWidgetOrientation from './edit-widget-orientation'; class EditWidgetDialog extends Component { static propTypes = { @@ -100,6 +101,10 @@ class EditWidgetDialog extends Component { this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />, this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} /> ) + } else if (this.props.widget.type === 'Slider') { + dialogControls.push( + this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />, + ) } } diff --git a/src/components/widget-slider.js b/src/components/widget-slider.js index 73d1cb1..40f890f 100644 --- a/src/components/widget-slider.js +++ b/src/components/widget-slider.js @@ -8,10 +8,17 @@ **********************************************************************************/ import React, { Component } from 'react'; -import { Form, FormGroup, Col, ControlLabel } from 'react-bootstrap'; +import classNames from 'classnames'; class WidgetSlider extends Component { + static get OrientationTypes() { + return ({ + HORIZONTAL: {value: 0, name: 'Horizontal'}, + VERTICAL: {value: 1, name: 'Vertical'} + }) + } + constructor(props) { super(props); @@ -25,22 +32,40 @@ class WidgetSlider extends Component { } render() { + let fields = { + 'name': this.props.widget.name, + 'control': this.valueChanged(e) } defaultValue={ this.state.value }/>, + 'value': this.state.value + } + + let vertical = this.props.widget.orientation === WidgetSlider.OrientationTypes.VERTICAL.value; + var widgetClasses = classNames({ + 'slider-widget': true, + 'full': true, + 'vertical': vertical, + 'horizontal': !vertical + }); + return ( -
-
- - - {this.props.widget.name} - - - this.valueChanged(e) } defaultValue={ this.state.value }/> - - - { this.state.value } - - -
-
+ this.props.widget.orientation === WidgetSlider.OrientationTypes.HORIZONTAL.value? ( +
+
+ +
+
+ { fields.control } + { fields.value } +
+
+ ) : ( +
+
+ + { fields.value } +
+
{ fields.control }
+
+ ) ); } } diff --git a/src/containers/visualization.js b/src/containers/visualization.js index d6acda6..6085b06 100644 --- a/src/containers/visualization.js +++ b/src/containers/visualization.js @@ -23,6 +23,8 @@ import SimulationStore from '../stores/simulation-store'; import FileStore from '../stores/file-store'; import AppDispatcher from '../app-dispatcher'; +import WidgetSlider from '../components/widget-slider'; + class Visualization extends Component { static getStores() { return [ VisualizationStore, ProjectStore, SimulationStore, FileStore ]; @@ -190,6 +192,7 @@ class Visualization extends Component { widget.minHeight = 30; widget.width = 400; widget.height = 50; + widget.orientation = WidgetSlider.OrientationTypes.HORIZONTAL.value; // Assign default orientation } else if (item.name === 'Gauge') { widget.simulator = this.state.simulation.models[0].simulator; widget.signal = 0; diff --git a/src/styles/widgets.css b/src/styles/widgets.css index 45956cb..78795e1 100644 --- a/src/styles/widgets.css +++ b/src/styles/widgets.css @@ -283,6 +283,15 @@ div[class*="-widget"] label { /* End number input widget */ /* Slider widget */ +.slider-widget.vertical input[type="range"] { + position: absolute; + top: 40%; + left: 50%; + transform: rotate(270deg); + /*margin-left: 20px;*/ + width: 150px; +} + input[type=range]::-moz-range-thumb { background: #ffffff; } @@ -294,6 +303,31 @@ input[type=range]::-webkit-slider-thumb { input[type=range]::-ms-thumb { background: #ffffff; } + +.slider-widget.horizontal div { + width: 50%; + display: inline-block; + text-align: center; + vertical-align: top; +} + +.slider-widget.horizontal span { + display: block; + margin: 5px; +} + +.slider-widget.vertical div { + width: 50%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; +} + +.slider-widget span { + font-size: 1.5em; + font-weight: 600; +} /* End slider widget */ /* Gauge widget */