allow slider orientation selection

src/components/dialog/edit-widget-orientation.js

@@ -0,0 +1,61 @@
+/**
+ * File: edit-widget-orientation.js
+ * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
+ * 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 <Row> tag shouldn't be necessary, but it gives height to the row while combining horizontal and vertical forms
+    return (
+        <FormGroup controlId="orientation">
+          <Row>
+            <Col componentClass={ControlLabel} sm={2}>
+              Orientation
+            </Col>
+            <Col sm={10}>
+              { 
+                Object.keys(WidgetSlider.OrientationTypes).map( (type) => {
+                  let value = WidgetSlider.OrientationTypes[type].value;
+                  let name = WidgetSlider.OrientationTypes[type].name;
+                  
+                  return (
+                    <Radio inline key={value} name='orientation' checked={ value === this.state.widget.orientation } onChange={(e) => this.handleOrientationChange(value)}>
+                      { name }
+                    </Radio>)
+                })
+              }
+            </Col>
+          </Row>
+        </FormGroup>
+    );
+  }
+}
+
+export default EditWidgetOrientation;

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 {
           <EditWidgetSimulatorControl key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
           <EditWidgetSignalsControl key={2} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />
         )
+      } else if (this.props.widget.type === 'Slider') {
+        dialogControls.push(
+          <EditWidgetOrientation key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
+        )
       }
     }
 

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': <input type="range"  min="0" max="100" disabled={ this.props.editing } onChange={ (e) => 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 (
-      <div className="slider-widget full">
-          <Form componentClass="fieldset" horizontal>
-              <FormGroup validationState={ this.state.validationState} >
-                  <Col componentClass={ControlLabel} xs={3}>
-                    {this.props.widget.name}
-                  </Col>
-                  <Col xs={8}>
-                    <input type="range"  min="0" max="100" disabled={ this.props.editing } onChange={ (e) => this.valueChanged(e) } defaultValue={ this.state.value }/>
-                  </Col>
-                  <Col xs={1}>
-                    <span>{ this.state.value }</span>
-                  </Col>
-                </FormGroup>
-            </Form>
-      </div>
+      this.props.widget.orientation === WidgetSlider.OrientationTypes.HORIZONTAL.value? (
+        <div className={widgetClasses}>
+          <div>
+            <label>{ fields.name }</label>
+          </div>
+          <div>
+            { fields.control }
+            <span>{ fields.value }</span>
+          </div>
+        </div>
+      ) : (
+        <div className={widgetClasses}>
+          <div>
+            <label>{ fields.name }</label>
+            <span>{ fields.value }</span>
+          </div>
+          <div>{ fields.control }</div>
+        </div>
+      )
     );
   }
 }

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;

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 */