update all these faders

4 files changed, 74 insertions, 24 deletions

diff --git a/app/client/common/paramGroup.component.js b/app/client/common/paramGroup.component.js
index 276425b..ccff0b0 100644
--- a/app/client/common/paramGroup.component.js
+++ b/app/client/common/paramGroup.component.js
@@ -1,23 +1,29 @@
 import { h, Component } from 'preact'
 import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import * as liveActions from '../live/actions'
 
-function ParamGroup(props) {
-  return (
-    <div class='paramGroup'>
-      <label>
-        <h3>{props.title}</h3>
-        <input type='checkbox' />
-      </label>
-      {props.children}
-    </div>
-  )
+class ParamGroup extends Component {
+  render() {
+    const props = this.props
+    return (
+      <div class='paramGroup'>
+        <label>
+          <h3>{props.title}</h3>
+          <input type='checkbox' />
+        </label>
+        {props.children}
+      </div>
+    )
+  }
 }
 
 const mapStateToProps = state => ({
-
+  opt: state.live.opt,
 })
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
+  actions: bindActionCreators(liveActions, dispatch)
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(ParamGroup)
diff --git a/app/client/common/slider.component.js b/app/client/common/slider.component.js
index 8932fbd..c8b4ed1 100644
--- a/app/client/common/slider.component.js
+++ b/app/client/common/slider.component.js
@@ -1,29 +1,72 @@
 import { h, Component } from 'preact'
 import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import * as liveActions from '../live/actions'
+
+const SLIDER_THROTTLE_TIME = 100
 
 class Slider extends Component {
+  constructor(props){
+    super(props)
+    this.timeout = 0
+    this.state = {
+      value: props.opt[props.name]
+    }
+    this.handleInput = this.handleInput.bind(this)
+    this.handleRange = this.handleRange.bind(this)
+  }
+
+  handleInput(e){
+    let { name, opt } = this.props
+    let old_value = opt[name]
+    let new_value = e.target.value
+    if (this.props.type === 'int') {
+      new_value = parseInt(new_value)
+    }
+    if (old_value !== new_value) {
+      this.setState({ value: new_value })
+      this.props.actions.set_param(this.props.name, new_value)
+    }
+    clearTimeout(this.timeout)
+  }
+  handleRange(e){
+    clearTimeout(this.timeout)
+    let new_value = e.target.value
+    if (this.props.type === 'int') {
+      new_value = parseInt(new_value)
+    }
+    this.setState({ value: new_value })
+    this.timeout = setTimeout(() => {
+      this.props.actions.set_param(this.props.name, new_value)
+    }, SLIDER_THROTTLE_TIME)
+  }
   render(){
-    const props = this.props
-    const name = props.name
-    const title = props.title || name.replace(/_/g, ' ')
+    let { name, title } = this.props
+    let value = this.state.value
+    if (typeof value === 'undefined') {
+      value = this.props.min
+    }
+    let text_value = value
     let step;
-    if (props.type === 'int') {
+    if (this.props.type === 'int') {
       step = 1
     } else {
-      step = (props.max - props.min) / 100
+      step = (this.props.max - this.props.min) / 100
+      text_value = parseFloat(value).toFixed(2)
     }
     return (
       <div class='slider'>
         <label>
-          <span>{title}</span>
-          <input type='text'
-          />
+          <span>{title || name.replace(/_/g, ' ')}</span>
+          <input type='text' value={text_value} onBlur={this.handleInput} />
         </label>
         <input
           type='range'
-          min={props.min}
-          max={props.max}
+          min={this.props.min}
+          max={this.props.max}
           step={step}
+          value={value}
+          onInput={this.handleRange}
         />
       </div>
     )
@@ -31,10 +74,11 @@ class Slider extends Component {
 }
 
 const mapStateToProps = state => ({
+  opt: state.live.opt,
 })
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
-  ...ownProps,
+  actions: bindActionCreators(liveActions, dispatch)
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Slider)
diff --git a/app/client/live/reducer.js b/app/client/live/reducer.js
index 09a00b5..6e18624 100644
--- a/app/client/live/reducer.js
+++ b/app/client/live/reducer.js
@@ -8,7 +8,7 @@ const liveInitialState = {
 
 const liveReducer = (state = liveInitialState, action) => {
   let results;
-  console.log(action.type)
+
   switch(action.type) {
     case 'LOAD_PARAMS':
       return {
diff --git a/app/client/socket.js b/app/client/socket.js
index 3528139..8d74524 100644
--- a/app/client/socket.js
+++ b/app/client/socket.js
@@ -16,7 +16,7 @@ socket.on('res', (data) => {
     case 'get_params':
       store.dispatch({
         type: 'LOAD_PARAMS',
-        opt: data.payload,
+        opt: data.res,
       })
       break
     default: