toggles and layout adjust

2 files changed, 23 insertions, 3 deletions

diff --git a/app/client/common/paramGroup.component.js b/app/client/common/paramGroup.component.js
index ccff0b0..2533642 100644
--- a/app/client/common/paramGroup.component.js
+++ b/app/client/common/paramGroup.component.js
@@ -4,13 +4,28 @@ import { bindActionCreators } from 'redux'
 import * as liveActions from '../live/actions'
 
 class ParamGroup extends Component {
+  constructor(props){
+    super(props)
+    this.handleClick = this.handleClick.bind(this)
+  }
+  handleClick(e){
+    clearTimeout(this.timeout)
+    let new_value = e.target.checked
+    this.props.actions.set_param(this.props.name, new_value)
+  }
   render() {
     const props = this.props
+    const checked = this.props.opt[this.props.name]
+    const className = checked ? 'paramGroup active' : 'paramGroup inactive'
     return (
-      <div class='paramGroup'>
+      <div className={className}>
         <label>
           <h3>{props.title}</h3>
-          <input type='checkbox' />
+          <input
+            type='checkbox'
+            onClick={this.handleClick}
+            checked={checked}
+          />
         </label>
         {props.children}
       </div>
diff --git a/app/client/common/slider.component.js b/app/client/common/slider.component.js
index c8b4ed1..ca22689 100644
--- a/app/client/common/slider.component.js
+++ b/app/client/common/slider.component.js
@@ -15,7 +15,12 @@ class Slider extends Component {
     this.handleInput = this.handleInput.bind(this)
     this.handleRange = this.handleRange.bind(this)
   }
-
+  componentWillReceiveProps(nextProps) {
+    const next_value = nextProps.opt[nextProps.name]
+    if (next_value !== this.state.value) {
+      this.setState({ value: next_value });
+    }
+  }
   handleInput(e){
     let { name, opt } = this.props
     let old_value = opt[name]