Merge branch '57-get-real-time-updates-on-outputs-statuses-from-input-device-action' into 'dev'

Resolve "Get real time updates on outputs statuses from input device action"

Closes #57

See merge request sa4-2020/the-sanmarinoes/frontend!60

smart-hut/src/client_server.js

@@ -63,9 +63,7 @@ class ServiceSocket {
           console.error("socket authentication failed");
         }
       } else {
-        if (data.id && this.callbacks[data.id]) {
-          this.callbacks[data.id].forEach((f) => f(data));
-        }
+        this.invokeCallbacks(data);
       }
     };
 
@@ -79,6 +77,12 @@ class ServiceSocket {
     };
   }
 
+  invokeCallbacks(data) {
+    if (data.id && this.callbacks[data.id]) {
+      this.callbacks[data.id].forEach((f) => f(data));
+    }
+  }
+
   /**
    * Registers a new callback function to be called when updates on the device
    * with the id given are recieved
@@ -226,9 +230,20 @@ export var call = {
     if (typeDevice) {
       url = typeDevice;
     }
-    return axios.put(config + url, data, {
+    let promiseRes = axios.put(config + url, data, {
       headers: { Authorization: "Bearer " + tkn },
     });
+
+    if (typeDevice === "switch/operate") {
+      promiseRes = promiseRes.then((e) => {
+        if (e.status === 200) {
+          e.data.forEach((device) => socket.invokeCallbacks(device));
+        }
+        return e;
+      });
+    }
+
+    return promiseRes;
   },
   deviceDelete: function (data, headers) {
     return axios.delete(config + data.device + "/" + data.id, {

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

@@ -1,3 +1,5 @@
+// vim: set ts=2 sw=2 et tw=80:
+
 /**
  * Users can add lights in their rooms.
  * Lights are devices like bulbs, LED strip lights, lamps.
@@ -29,9 +31,27 @@ export default class Light extends Component {
     super(props);
     this.state = {
       turnedOn: false,
+      intensity: 0,
     };
     this.iconOn = "/img/lightOn.svg";
     this.iconOff = "/img/lightOff.svg";
+
+    this.stateCallback = (e) => {
+      const update = {};
+      if (e.kind === "dimmableLight") {
+        update.intensity = e.intensity;
+      } else {
+        update.turnedOn = e.on;
+      }
+
+      this.setState(Object.assign(this.state, update));
+    };
+
+    call.socketSubscribe(this.props.device.id, this.stateCallback);
+  }
+
+  componentWillUnmount() {
+    call.socketUnsubscribe(this.props.device.id, this.stateCallback);
   }
 
   onClickDevice = () => {
@@ -75,7 +95,7 @@ export default class Light extends Component {
   render() {
     const intensityLightView = (
       <CircularInput
-        value={+(Math.round(this.props.device.intensity / 100 + "e+2") + "e-2")}
+        value={+(Math.round(this.state.intensity / 100 + "e+2") + "e-2")}
         onChange={this.setIntensity}
         style={style}
       >
@@ -91,7 +111,7 @@ export default class Light extends Component {
           dy="0.3em"
           fontWeight="bold"
         >
-          {Math.round(this.props.device.intensity)}%
+          {Math.round(this.state.intensity)}%
         </text>
         <text
           style={intensityLightStyle}

smart-hut/src/components/modalform.js

@@ -84,8 +84,7 @@ export default class ModalWindow extends Component {
     let reader = new FileReader();
     reader.readAsDataURL(file.target.files[0]);
     reader.onload = () => {
-      this.state.img = reader.result;
-      this.setState(this.state);
+      this.setState(Object.assign(this.state, { img: reader.result }));
     };
     reader.onerror = console.error;
   }