Fixed updates on circular inputs

smart-hut/src/components/dashboard/DevicePanel.js

@@ -48,9 +48,7 @@ const mapStateToProps = (state, _) => ({
     if (state.active.activeRoom === -1) {
       return Object.values(state.devices);
     } else {
-      console.log(state.active.activeRoom);
       const deviceArray = [...state.rooms[state.active.activeRoom].devices].sort();
-      console.log(deviceArray);
       return deviceArray.map((id) => state.devices[id]);
     }
   },

smart-hut/src/components/dashboard/devices/Dimmer.js

@@ -60,23 +60,50 @@ export class ButtonDimmerComponent extends Component {
 }
 
 export class KnobDimmerComponent extends Component {
-  setIntensity = (newValue) => {
+  constructor(props) {
-    const val = Math.round(newValue * 100);
+    super(props);
+
+    this.state = {
+      intensity: this.props.device.intensity || 0,
+      timeout: null
+    };
+
+    this.saveIntensity = this.saveIntensity.bind(this);
+    this.setIntensity = this.setIntensity.bind(this);
+  }
+
+  setIntensity(intensity) {
+    intensity *= 100;
+    
+    if (this.state.timeout) {
+      clearTimeout(this.state.timeout);
+    }
+
+    this.setState({ 
+      intensity,
+      timeout: setTimeout(() => {
+        this.saveIntensity();
+        this.setState({
+          intensity: this.state.intensity,
+          timeout: null
+        });
+      }, 100)
+    });
+  }
+
+  saveIntensity() {
+    const val = Math.round(this.state.intensity);
     this.props
       .knobDimmerDimTo(this.props.id, val)
       .catch((err) => console.error("knob dimmer set intensity error", err));
   };
 
-  get intensity() {
-    return this.props.device.intensity || 0;
-  }
-
   render() {
     return (
       <div style={knobContainer}>
         <CircularInput
           style={KnobDimmerStyle}
-          value={+(Math.round(this.intensity / 100 + "e+2") + "e-2")}
+          value={+(Math.round(this.state.intensity / 100 + "e+2") + "e-2")}
           onChange={this.setIntensity}
         >
           <text
@@ -90,7 +117,7 @@ export class KnobDimmerComponent extends Component {
             Knob Dimmer
           </text>
           <CircularProgress
-            style={{ ...KnobProgress, opacity: this.intensity + 0.1 }}
+            style={{ ...KnobProgress, opacity: this.state.intensity + 0.1 }}
           />
           <CircularThumb style={CircularThumbStyle} />
           <ThumbText color={"#1a2849"} />

smart-hut/src/components/dashboard/devices/Light.js

@@ -36,8 +36,12 @@ import { connect } from "react-redux";
 class Light extends Component {
   constructor(props) {
     super(props);
+    this.state = { intensity: this.props.device.intensity, timeout: null };
+
     this.iconOn = "/img/lightOn.svg";
     this.iconOff = "/img/lightOff.svg";
+
+    this.setIntensity = this.setIntensity.bind(this);
   }
 
   get turnedOn() {
@@ -59,8 +63,27 @@ class Light extends Component {
     return this.turnedOn ? this.iconOn : this.iconOff;
   };
 
-  setIntensity = (newValue) => {
+  setIntensity(intensity) {
-    const intensity = Math.round(newValue * 100);
+    intensity *= 100;
+    
+    if (this.state.timeout) {
+      clearTimeout(this.state.timeout);
+    }
+
+    this.setState({ 
+      intensity,
+      timeout: setTimeout(() => {
+        this.saveIntensity();
+        this.setState({
+          intensity: this.state.intensity,
+          timeout: null
+        });
+      }, 100)
+    });
+  }
+
+  saveIntensity = () => {
+    const intensity = Math.round(this.state.intensity);
     this.props
       .saveDevice({ ...this.props.device, intensity })
       .catch((err) => console.error("intensity light update error", err));
@@ -71,8 +94,9 @@ class Light extends Component {
       <div style={LightDimmerContainer}>
         <CircularInput
           style={LightDimmerStyle}
-          value={+(Math.round(this.intensity / 100 + "e+2") + "e-2")}
+          value={+(Math.round(this.state.intensity / 100 + "e+2") + "e-2")}
           onChange={this.setIntensity}
+          onMouseUp={this.saveIntensity}
         >
           <text
             style={textStyle}
@@ -87,7 +111,7 @@ class Light extends Component {
           <CircularProgress
             style={{
               ...KnobProgress,
-              opacity: this.intensity / 100 + 0.3,
+              opacity: this.state.intensity / 100 + 0.3,
             }}
           />
           <CircularThumb style={CircularThumbStyle} />

smart-hut/src/store.js

@@ -235,7 +235,6 @@ function reducer(previousState, action) {
   }
 
   console.log("new state: ", newState);
-  console.log("active room: ", newState.active.activeRoom);
   return newState;
 }