Merge branch '82-scene-states-update' of lab.si.usi.ch:sa4-2020/the-sanmarinoes/frontend into 82-scene-states-update

# Conflicts:
#	smart-hut/src/components/dashboard/devices/Light.js

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

@@ -15,9 +15,10 @@ class ScenesPanel extends Component {
       <Grid doubling columns={2} divided="vertically">
         {!this.props.isActiveDefaultScene
           ? this.props.sceneStates.map((e, i) => {
+              console.log(this.props.sceneStates);
               return (
                 <Grid.Column key={i}>
-                  <Device tab={this.props.tab} id={e} />
+                  <Device tab={this.props.tab} id={e.id} />
                 </Grid.Column>
               );
             })
@@ -40,7 +41,8 @@ const mapStateToProps = (state, _) => ({
       const stateArray = [
         ...state.scenes[state.active.activeScene].sceneStates,
       ].sort();
-      return stateArray.map((id) => state.sceneStates[id]);
+      console.log(stateArray);
+      return stateArray;
     } else {
       return [];
     }

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

@@ -33,31 +33,102 @@ class Device extends React.Component {
   }
 
   renderDeviceComponent() {
-        console.log("check here")
+    console.log(JSON.stringify(this.props.stateOrDevice));
-        console.log(this.props.stateOrDevice.kind)
+    switch (
-        switch (this.props.stateOrDevice.kind) {
+      this.props.tab === "Devices"
+        ? this.props.stateOrDevice.kind
+        : this.props.type
+    ) {
       case "curtains":
-                return <Curtains tab={this.props.tab} id={this.props.id} />;
+        return (
+          <Curtains
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.id}
+          />
+        );
       case "thermostat":
-                return <Thermostat tab={this.props.tab} id={this.props.id} />;
+        return (
+          <Thermostat
+            tab={this.props.tab}
+            sceneState={this.props.sceneStat}
+            id={this.props.stateOrDevice.id}
+          />
+        );
       case "regularLight":
-                return <Light tab={this.props.tab} id={this.props.id} />;
+        return (
+          <Light
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.stateOrDevice.id}
+          />
+        );
       case "sensor":
-                return <Sensor tab={this.props.tab} id={this.props.id} />;
+        return (
+          <Sensor
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.stateOrDevice.id}
+          />
+        );
       case "motionSensor":
-                return <Sensor tab={this.props.tab} id={this.props.id} />;
+        return (
+          <Sensor
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.stateOrDevice.id}
+          />
+        );
       case "buttonDimmer":
-                return <ButtonDimmer tab={this.props.tab} id={this.props.id} />;
+        return (
+          <ButtonDimmer
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.stateOrDevice.id}
+          />
+        );
       case "knobDimmer":
-                return <KnobDimmer tab={this.props.tab} id={this.props.id} />;
+        return (
+          <KnobDimmer
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.stateOrDevice.id}
+          />
+        );
       case "smartPlug":
-                return <SmartPlug tab={this.props.tab} id={this.props.id} />;
+        return (
+          <SmartPlug
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.stateOrDevice.id}
+          />
+        );
       case "switch":
-                return <Switcher tab={this.props.tab} id={this.props.id} />;
+        return (
+          <Switcher
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.stateOrDevice.id}
+          />
+        );
       case "dimmableLight":
-                return <Light id={this.props.id} />;
+        return (
+          <Light
+            id={this.props.stateOrDevice.id}
+            sceneState={this.props.sceneState}
+            tab={this.props.tab}
+          />
+        );
       case "securityCamera":
-                return <Videocam id={this.props.id} />;
+        return (
+          <Videocam
+            id={this.props.stateOrDevice.id}
+            sceneState={this.props.sceneState}
+            tab={this.props.tab}
+          />
+        );
+      case "":
+        return "";
       default:
         throw new Error("Device type unknown");
     }
@@ -70,9 +141,7 @@ class Device extends React.Component {
           <Grid.Column>{this.renderDeviceComponent()}</Grid.Column>
           {this.props.tab === "Devices" ? (
             <Grid.Column textAlign="center">
-                            <Header as="h3">
+              <Header as="h3">{this.props.stateOrDevice.name}</Header>
-                                {this.props.stateOrDevice.name}
-                            </Header>
               <Button
                 color="blue"
                 icon
@@ -97,28 +166,56 @@ class Device extends React.Component {
           ) : (
             <Grid.Column textAlign="center">
               <Header as="h3">
-                                {this.props.stateOrDevice.name}
+                {this.props.stateOrDevice ? this.props.stateOrDevice.name : ""}
               </Header>
             </Grid.Column>
           )}
-
-                    <DeviceSettingsModal
-                        ref={this.modalRef}
-                        id={this.props.id}
-                    />
         </Grid>
       </Segment>
     );
   }
 }
+/*
 
+{this.props.stateOrDevice ? 
+                        <DeviceSettingsModal
+                        ref={this.modalRef}
+                        id={this.props.stateOrDevice.id}
+                        /> :
+                        ""
+                    }
+*/
 const mapStateToProps = (state, ownProps) => ({
   get stateOrDevice() {
     if (state.active.activeTab === "Devices") {
       return state.devices[ownProps.id];
     } else {
-            const sceneState = state.sceneStates[ownProps.id];
+      console.log(
-            return state.devices[sceneState];
+        state.sceneStates,
+        ownProps.id,
+        state.sceneStates[ownProps.id]
+      );
+      return state.sceneStates[ownProps.id];
+    }
+  },
+  get sceneState() {
+    if (state.active.activeTab === "Scenes") {
+      const array = [
+        ...state.scenes[state.active.activeScene].sceneStates,
+      ].sort();
+      const deviceState = array.filter((e) => e.id === ownProps.id)[0];
+      return deviceState;
+    } else {
+      return null;
+    }
+  },
+  get type() {
+    if (state.active.activeTab === "Scenes") {
+      const id = state.sceneStates[ownProps.id].deviceId;
+      console.log(id, state.devices[id].kind);
+      return state.devices[id].kind;
+    } else {
+      return null;
     }
   },
 });

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

@@ -35,7 +35,10 @@ import { connect } from "react-redux";
 class Light extends Component {
   constructor(props) {
     super(props);
-    this.state = { intensity: this.props.stateOrDevice.intensity, timeout: null };
+    this.state = {
+      intensity: this.props.stateOrDevice.intensity,
+      timeout: null,
+    };
 
     this.iconOn = "/img/lightOn.svg";
     this.iconOff = "/img/lightOff.svg";
@@ -44,8 +47,13 @@ class Light extends Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    if (this.props.stateOrDevice.intensity !== prevProps.stateOrDevice.intensity) {
+    if (
-      this.setState({ intensity: this.props.stateOrDevice.intensity, timeout: null });
+      this.props.stateOrDevice.intensity !== prevProps.stateOrDevice.intensity
+    ) {
+      this.setState({
+        intensity: this.props.stateOrDevice.intensity,
+        timeout: null,
+      });
     }
   }
 
@@ -59,12 +67,15 @@ class Light extends Component {
 
   onClickDevice = () => {
     const on = !this.turnedOn;
-    if(this.props.tab==="Devices"){
+    if (this.props.tab === "Devices") {
       this.props
         .saveDevice({ ...this.props.stateOrDevice, on })
         .catch((err) => console.error("regular light update error", err));
-    }else{
+    } else {
-      this.props.updateState({ id: this.props.sceneState.id, on: on }, this.props.sceneState.kind);
+      this.props.updateState(
+        { id: this.props.sceneState.id, on: on },
+        this.props.sceneState.kind
+      );
     }
   };
 
@@ -93,12 +104,15 @@ class Light extends Component {
 
   saveIntensity = () => {
     const intensity = Math.round(this.state.intensity);
-    if(this.props.tab==="Devices"){
+    if (this.props.tab === "Devices") {
       this.props
         .saveDevice({ ...this.props.stateOrDevice, intensity })
         .catch((err) => console.error("regular light update error", err));
-    }else{
+    } else {
-      this.props.updateState({ id: this.props.sceneState.id, intensity: intensity }, this.props.sceneState.kind);
+      this.props.updateState(
+        { id: this.props.sceneState.id, intensity: intensity },
+        this.props.sceneState.kind
+      );
     }
   };
 
@@ -156,11 +170,10 @@ class Light extends Component {
 }
 
 const mapStateToProps = (state, ownProps) => ({
-  get stateOrDevice(){
+  get stateOrDevice() {
-    if(state.active.activeTab==="Devices"){
+    if (state.active.activeTab === "Devices") {
       return state.devices[ownProps.id];
-    }else{
+    } else {
-      const sceneState = state.sceneStates[ownProps.id];
       return state.sceneStates[ownProps.id];
     }
   },

smart-hut/src/remote.js

@@ -375,16 +375,16 @@ export const RemoteService = {
   },
 
   //
-  updateState: (data,type)=>{
+  updateState: (data, type) => {
     return (dispatch) => {
       let url;
-      if(type=="dimmableState"){
+      if (type == "dimmableState") {
-        url="/dimmableState"
+        url = "/dimmableState";
-      }else{
+      } else {
-        url="/switchableState"
+        url = "/switchableState";
       }
 
-      return Endpoint["put"](url, {}, data)
+      return Endpoint.put(url, {}, data)
         .then((res) => {
           dispatch(actions.stateSave(res.data));
           return res.data;

smart-hut/src/store.js

@@ -80,8 +80,8 @@ function reducer(previousState, action) {
   };
 
   const updateSceneStateProps = (state) => {
-    change.sceneStates[state.deviceId] = {};
+    change.sceneStates[state.id] = {};
-    change.sceneStates[state.deviceId] = { $set: state.deviceId };
+    change.sceneStates[state.id] = { $set: state.id };
   };
 
   switch (action.type) {
@@ -104,6 +104,7 @@ function reducer(previousState, action) {
       }
       break;
     case "STATE_UPDATE":
+      console.log(action.sceneStates);
       newState = previousState;
       change = null;
 
@@ -129,9 +130,9 @@ function reducer(previousState, action) {
       };
 
       for (const sceneState of action.sceneStates) {
-        if (!newState.sceneStates[sceneState.deviceId]) {
+        if (!newState.sceneStates[sceneState.id]) {
-          change.sceneStates[sceneState.deviceId] = {
+          change.sceneStates[sceneState.id] = {
-            $set: sceneState.deviceId,
+            $set: sceneState,
           };
         } else {
           updateSceneStateProps(sceneState);
@@ -144,19 +145,17 @@ function reducer(previousState, action) {
             change.scenes[sceneState.sceneId].sceneStates || {};
           const sceneStates = change.scenes[sceneState.sceneId].sceneStates;
           sceneStates.$add = sceneStates.$add || [];
-          sceneStates.$add.push(sceneState.deviceId);
+          sceneStates.$add.push(sceneState);
         } else {
           // room does not exist yet, so add to the list of pending
           // joins
 
           if (!change.pendingJoins.scenes[sceneState.sceneId]) {
             change.pendingJoins.scenes[sceneState.sceneId] = {
-              $set: new Set([sceneState.deviceId]),
+              $set: new Set([sceneState]),
             };
           } else {
-            change.pendingJoins.scenes[sceneState.sceneId].$set.add(
+            change.pendingJoins.scenes[sceneState.sceneId].$set.add(sceneState);
-              sceneState.deviceId
-            );
           }
         }
       }