Fix sliders

Signed-off-by: Francis Giraldeau <[email protected]>

react-client/package.json

@@ -6,8 +6,12 @@
     "react-scripts": "0.7.0"
   },
   "dependencies": {
+    "immutable": "^3.8.1",
     "react": "^15.4.1",
     "react-dom": "^15.4.1",
+    "react-redux": "^4.4.6",
+    "react-simple-range": "^1.4.0",
+    "redux": "^3.6.0",
     "semantic-ui-css": "^2.2.4",
     "semantic-ui-react": "^0.61.4"
   },

react-client/src/App.js

@@ -1,85 +1,41 @@
 import React, { Component } from 'react';
-//import logo from './logo.svg';
 import './App.css';
-//import { Input } from 'semantic-ui-react';
-import 'semantic-ui-css/semantic.css'
+import 'semantic-ui-css/semantic.css';
+import ParametersPannel from './RangeInput.js';
 
-
-class RangeWidget extends Component {
-
-  constructor(props) {
-    super(props);
-    console.log(props);
-    this.step = (this.props.max - this.props.min) / this.props.resolution
-    this.handleValueChange = this.handleValueChange.bind(this);
-    this.state = {'value': this.props.value}
-  }
-
-  handleValueChange(event) {
-    this.setState({value: parseFloat(event.target.value)})
-  }
-
-  render() {
-    const value = this.state.value;
-    console.log(typeof(value));
-    return (
-      <div className="ui segment">
-        <input
-            className="ui range"
-            type="range"
-            value={value}
-            name={this.props.name}
-            min={this.props.min}
-            max={this.props.max}
-            step={this.step}
-            onChange={this.handleValueChange}
-        />
-        <p>{value.toFixed(1)}</p>
-      </div>
-    );
-  }
-}
-
-RangeWidget.propTypes = {
-  value: React.PropTypes.number,
-}
-
-RangeWidget.defaultProps = {
-  min: 0,
-  max: 1,
-  resolution: 10,
-  value: 0,
-}
+const carParameters = [
+  { id: "battery",
+    label: "Battery capacity",
+    min: 10,
+    max: 100,
+    step: 0.5,
+    defaultValue: 20,
+    unit: "kWh"
+  },
+  { id: "SOC_min",
+    label: "Energy reserve",
+    min: 5,
+    max: 30,
+    step: 1,
+    defaultValue: 12,
+    unit: "%"
+  },
+  { id: "eff",
+    label: "Efficiency",
+    min: 10.0,
+    max: 30.0,
+    step: 0.1,
+    defaultValue: 18.0,
+    unit: "Wh/km"
+  },
+];
 
 class App extends Component {
-
-  constructor(props) {
-    super(props);
-    this.onValuechange = this.onValueChange.bind(this);
-    this.state = { value: 2.0 }
-  }
-
-  onValueChange(id, newValue) {
-    console.log(id + " " + newValue);
-    this.setState({value: newValue});
-  }
-
-  componentDidMount() {
-      console.log("go");
-  }
-
   render() {
-    const value = this.state.value;
     return (
       <div className="App">
-        <RangeWidget 
-            value={value}
-            min={0}
-            /* max={10} */
-            resolution={100}
-            name="bidon"
-            valueChanged={() => {this.onValueChange()}}
-        />
+        <ParametersPannel
+          parameters={carParameters}/>
       </div>
     );
   }

react-client/src/RangeInput.js

@@ -0,0 +1,119 @@
+import React, { Component } from 'react';
+import { Button, Grid, Container} from 'semantic-ui-react'
+import ReactSimpleRange from 'react-simple-range';
+
+class RangeRow extends Component {
+  constructor(props) {
+    super(props);
+    this.valueChanged = this.valueChanged.bind(this);
+  }
+
+  valueChanged(event) {
+    if (this.props.onValueChanged) {
+      const newValue = parseFloat(event.value);
+      this.props.onValueChanged(this.props.index, newValue);
+    }
+  }
+
+  render() {
+    return (
+      <Grid.Row>
+        <Grid.Column width={4} textAlign="right">{this.props.label}</Grid.Column>
+        <Grid.Column width={8}>
+          <ReactSimpleRange
+            style={{width: 100 + '%'}}
+            type="range"
+            defaultValue={this.props.value}
+            min={this.props.min}
+            max={this.props.max}
+            step={1}
+            onChange={this.valueChanged}
+          />
+          </Grid.Column>
+        <Grid.Column width={4} textAlign="left">
+          <span className="ui">{this.props.value.toFixed(this.props.decimals)} </span>
+          <span className="ui">{this.props.unit}</span>
+        </Grid.Column>
+      </Grid.Row>
+
+    );
+  }
+}
+
+RangeRow.propTypes = {
+  label: React.PropTypes.string,
+  unit: React.PropTypes.string,
+  min: React.PropTypes.number,
+  max: React.PropTypes.number,
+  value: React.PropTypes.number,
+  step: React.PropTypes.number,
+  decimals: React.PropTypes.number,
+}
+
+RangeRow.defaultProps = {
+  label: "",
+  unit: "",
+  min: 0,
+  max: 1,
+  step: 0.1,
+  value: 0,
+  decimals: 0,
+}
+
+class ParametersPannel extends Component {
+
+  constructor(props) {
+    super(props);
+    this.resetState = this.resetState.bind(this);
+    this.state = {
+      values: [],
+    };
+  }
+
+  resetState() {
+    var values = this.props.parameters.map((item, index) => {
+      return item.defaultValue;
+    });
+    this.setState({values: values});
+  }
+
+  componentWillMount() {
+    this.resetState();
+  }
+
+  render() {
+    var content = this.state.values.map((value, index) => {
+      const item = this.props.parameters[index];
+      return (
+        <RangeRow
+          key={index}
+          index={index}
+          label={item.label}
+          min={item.min}
+          max={item.max}
+          step={item.step}
+          unit={item.unit}
+          value={value}
+          onValueChanged={(idx, val) => {
+            var nextState = Object.assign({}, this.state);
+            nextState.values[idx] = val;
+            this.setState(nextState);
+          }}
+        />
+      );
+    });
+    return (
+      <Container>
+        <Grid columns='equal'>
+          {content}
+        </Grid>
+        <Container textAlign="right">
+          <Button onClick={this.resetState}>Reset</Button>
+          <Button color='blue'>Done</Button>
+        </Container>
+      </Container>
+    );
+  }
+}
+
+export default ParametersPannel;