fixed scenes

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

@@ -8,13 +8,14 @@ import { Grid, Button } from "semantic-ui-react";
 class ScenesPanel extends Component {
   constructor(props) {
     super(props);
-
     this.applyScene = this.applyScene.bind(this);
   }
 
   applyScene() {
     console.log(this.props.activeScene);
-    this.props.sceneApply(this.props.activeScene);
+    this.props.sceneApply(this.props.activeScene).then(() => {
+      alert("Scene applied.");
+    });
   }
 
   render() {

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

@@ -4,116 +4,123 @@ import { RemoteService } from "../../../remote";
 import { connect } from "react-redux";
 
 class Curtain extends Component {
-    constructor(props) {
+  constructor(props) {
-        super(props);
+    super(props);
-        this.state = { intensity: this.props.stateOrDevice.intensity, timeout: null };
+    this.state = {
-
+      intensity: this.props.stateOrDevice.intensity,
-        this.setIntensity = this.setIntensity.bind(this);
+      timeout: null,
-    }
-
-    //getters
-    get turnedOn() {
-        return this.props.stateOrDevice.on;
-    }
-
-    get intensity() {
-        return this.props.stateOrDevice.intensity || 0;
-    }
-
-    onClickDevice = () => {
-        const on = !this.turnedOn;
-        if(this.props.tab==="Devices"){
-            this.props
-                .saveDevice({ ...this.props.stateOrDevice, on })
-                .catch((err) => console.error("curtains update error", err));
-        }else{
-            this.props.updateState({ id: this.props.sceneState.id, on: on },this.props.sceneState.kind);
-        }
     };
 
-    setIntensity(intensity) {
+    this.setIntensity = this.setIntensity.bind(this);
-        intensity *= 100;
+  }
 
-        if (this.state.timeout) {
+  //getters
-            clearTimeout(this.state.timeout);
+  get turnedOn() {
-        }
+    return this.props.stateOrDevice.on;
+  }
 
-        this.setState({
+  get intensity() {
-            intensity,
+    return this.props.stateOrDevice.intensity || 0;
-            timeout: setTimeout(() => {
+  }
-                this.saveIntensity();
+
-                this.setState({
+  onClickDevice = () => {
-                    intensity: this.state.intensity,
+    const on = !this.turnedOn;
-                    timeout: null,
+    if (this.props.tab === "Devices") {
-                });
+      this.props
-            }, 100),
+        .saveDevice({ ...this.props.stateOrDevice, on })
-        });
+        .catch((err) => console.error("curtains update error", err));
+    } else {
+      this.props.updateState(
+        { id: this.props.stateOrDevice.id, on: on },
+        this.props.stateOrDevice.kind
+      );
+    }
+  };
+
+  setIntensity(intensity) {
+    intensity *= 100;
+
+    if (this.state.timeout) {
+      clearTimeout(this.state.timeout);
     }
 
-    saveIntensity = () => {
+    this.setState({
-        const intensity = Math.round(this.state.intensity);
+      intensity,
-        if(this.props.tab==="Devices"){
+      timeout: setTimeout(() => {
-            this.props
-                .saveDevice({ ...this.props.stateOrDevice, intensity })
-                .catch((err) => console.error("curtain update error", err));
-        }else{
-            this.props.updateState({ id: this.props.sceneState.id, intensity: intensity },this.props.sceneState.kind);
-        }
-    };
-
-    helper = () => {
-        if (this.props.device.intensity >= 90) {
-            this.setIntensity(1);
-            this.saveIntensity();
-        } else {
-            this.setIntensity(this.props.stateOrDevice.intensity / 100 + 0.1);
-            this.saveIntensity();
-        }
-    };
-
-
-    ///*this took me way too much more time than it should have*/
-
-    handleChange = (a) => {
-        this.setIntensity(a.target.value / 100);
         this.saveIntensity();
-    };
+        this.setState({
+          intensity: this.state.intensity,
+          timeout: null,
+        });
+      }, 100),
+    });
+  }
 
-    render() {
+  saveIntensity = () => {
-        return (
+    const intensity = Math.round(this.state.intensity);
-            <div className="container">
+    if (this.props.tab === "Devices") {
-                <div
+      this.props
-                    className="open-container"
+        .saveDevice({ ...this.props.stateOrDevice, intensity })
-                    style={{
+        .catch((err) => console.error("curtain update error", err));
-                        height: (9 * this.props.stateOrDevice.intensity) / 100 + "rem",
+    } else {
-                    }}
+      this.props.updateState(
-                ></div>{" "}
+        { id: this.props.stateOrDevice.id, intensity: intensity },
-                <span className="span-open">
+        this.props.stateOrDevice.kind
-                    {Math.round(this.props.stateOrDevice.intensity)}%
+      );
-                </span>
-                <input
-                    onChange={this.handleChange}
-                    value={this.props.stateOrDevice.intensity}
-                    className="slider"
-                    type="range"
-                    min="0"
-                    max="100"
-                />
-            </div>
-
-        );
     }
+  };
+
+  helper = () => {
+    if (this.props.device.intensity >= 90) {
+      this.setIntensity(1);
+      this.saveIntensity();
+    } else {
+      this.setIntensity(this.props.stateOrDevice.intensity / 100 + 0.1);
+      this.saveIntensity();
+    }
+  };
+
+  ///*this took me way too much more time than it should have*/
+
+  handleChange = (a) => {
+    this.setIntensity(a.target.value / 100);
+    this.saveIntensity();
+  };
+
+  render() {
+    return (
+      <div className="container">
+        <div
+          className="open-container"
+          style={{
+            height: (9 * this.props.stateOrDevice.intensity) / 100 + "rem",
+          }}
+        ></div>{" "}
+        <span className="span-open">
+          {Math.round(this.props.stateOrDevice.intensity)}%
+        </span>
+        <input
+          onChange={this.handleChange}
+          value={this.props.stateOrDevice.intensity}
+          className="slider"
+          type="range"
+          min="0"
+          max="100"
+        />
+      </div>
+    );
+  }
 }
 
 const mapStateToProps = (state, ownProps) => ({
-    get stateOrDevice(){
+  get stateOrDevice() {
-        if(state.active.activeTab==="Devices"){
+    if (state.active.activeTab === "Devices") {
-            return state.devices[ownProps.id];
+      return state.devices[ownProps.id];
-        }else{
+    } else {
-            return state.sceneStates[ownProps.id];
+      return state.sceneStates[ownProps.id];
-        }
+    }
-    },
+  },
-    //device: state.devices[ownProps.id],
+  //device: state.devices[ownProps.id],
 });
 const CurtainContainer = connect(mapStateToProps, RemoteService)(Curtain);
 export default CurtainContainer;

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

@@ -77,60 +77,28 @@ class Device extends React.Component {
           />
         );
       case "motionSensor":
-        return (
+        return <Sensor tab={this.props.tab} id={this.props.stateOrDevice.id} />;
-          <Sensor
-            tab={this.props.tab}
-            sceneState={this.props.sceneState}
-            id={this.props.stateOrDevice.id}
-          />
-        );
       case "buttonDimmer":
         return (
-          <ButtonDimmer
+          <ButtonDimmer tab={this.props.tab} id={this.props.stateOrDevice.id} />
-            tab={this.props.tab}
-            sceneState={this.props.sceneState}
-            id={this.props.stateOrDevice.id}
-          />
         );
       case "knobDimmer":
         return (
-          <KnobDimmer
+          <KnobDimmer tab={this.props.tab} id={this.props.stateOrDevice.id} />
-            tab={this.props.tab}
-            sceneState={this.props.sceneState}
-            id={this.props.stateOrDevice.id}
-          />
         );
       case "smartPlug":
         return (
-          <SmartPlug
+          <SmartPlug tab={this.props.tab} id={this.props.stateOrDevice.id} />
-            tab={this.props.tab}
-            sceneState={this.props.sceneState}
-            id={this.props.stateOrDevice.id}
-          />
         );
       case "switch":
         return (
-          <Switcher
+          <Switcher tab={this.props.tab} id={this.props.stateOrDevice.id} />
-            tab={this.props.tab}
-            sceneState={this.props.sceneState}
-            id={this.props.stateOrDevice.id}
-          />
         );
       case "dimmableLight":
-        return (
+        return <Light id={this.props.stateOrDevice.id} tab={this.props.tab} />;
-          <Light
-            id={this.props.stateOrDevice.id}
-            sceneState={this.props.sceneState}
-            tab={this.props.tab}
-          />
-        );
       case "securityCamera":
         return (
-          <Videocam
+          <Videocam id={this.props.stateOrDevice.id} tab={this.props.tab} />
-            id={this.props.stateOrDevice.id}
-            sceneState={this.props.sceneState}
-            tab={this.props.tab}
-          />
         );
       default:
         //throw new Error("Device type unknown");
@@ -171,11 +139,12 @@ class Device extends React.Component {
                 </Grid.Column>
               ) : (
                 <Grid.Column textAlign="center">
-                  <Header as="h3">
+                  <Header as="h3">{this.props.device.name}</Header>
-                    {this.props.stateOrDevice
+                  {this.props.tab === "Scenes" ? (
-                      ? this.props.stateOrDevice.name
+                    <Header as="h4">{this.props.roomName}</Header>
-                      : ""}
+                  ) : (
-                  </Header>
+                    ""
+                  )}
                   <Button
                     color="red"
                     icon
@@ -188,6 +157,14 @@ class Device extends React.Component {
                 </Grid.Column>
               )}
             </Grid>
+            {this.props.stateOrDevice ? (
+              <DeviceSettingsModal
+                ref={this.modalRef}
+                id={this.props.stateOrDevice.id}
+              />
+            ) : (
+              ""
+            )}
           </Segment>
         );
       } else {
@@ -211,23 +188,22 @@ const mapStateToProps = (state, ownProps) => ({
     if (state.active.activeTab === "Devices") {
       return state.devices[ownProps.id];
     } else {
-      /*console.log(
-        state.sceneStates,
-        ownProps.id,
-        state.sceneStates[ownProps.id]
-      );*/
       return state.sceneStates[ownProps.id];
     }
   },
-  get sceneState() {
+  get device() {
-    if (state.active.activeTab === "Scenes") {
+    if (state.active.activeTab === "Devices") {
-      const array = [
+      return state.devices[ownProps.id];
-        ...state.scenes[state.active.activeScene].sceneStates,
-      ].sort();
-      const deviceState = array.filter((e) => e.id === ownProps.id)[0];
-      return deviceState;
     } else {
-      return null;
+      return state.devices[state.sceneStates[ownProps.id].deviceId];
+    }
+  },
+  get roomName() {
+    if (state.active.activeTab === "Scenes") {
+      const device = state.devices[state.sceneStates[ownProps.id].deviceId];
+      return state.rooms[device.roomId].name;
+    } else {
+      return "";
     }
   },
   get type() {

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

@@ -66,6 +66,7 @@ class DeviceSettingsModal extends Component {
     super(props);
     this.state = {
       open: false,
+      name: this.props.device.name,
     };
 
     this.updateDevice = this.updateDevice.bind(this);
@@ -111,8 +112,7 @@ class DeviceSettingsModal extends Component {
         <Modal.Header>Settings of {this.props.device.name}</Modal.Header>
         <Modal.Content>
           <SettingsForm
-            name={this.props.device.name}
+            name={this.state.name}
-            type={this.props.device.type}
             removeDevice={this.deleteDevice}
             saveFunction={this.updateDevice}
           />

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

@@ -118,8 +118,8 @@ class Light extends Component {
         .catch((err) => console.error("regular light update error", err));
     } else {
       this.props.updateState(
-        { id: this.props.sceneState.id, intensity: intensity },
+        { id: this.props.stateOrDevice.id, intensity: intensity },
-        this.props.sceneState.kind
+        this.props.stateOrDevice.kind
       );
     }
   };

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

@@ -73,13 +73,16 @@ class Sensor extends Component {
       this.props.stateOrDevice.kind === "motionSensor" &&
       this.props.stateOrDevice.detected !== prevProps.stateOrDevice.detected
     ) {
-      this.setState({ motion: true, detected: this.props.stateOrDevice.detected });
+      this.setState({
+        motion: true,
+        detected: this.props.stateOrDevice.detected,
+      });
     }
   }
 
   componentDidMount() {
     if (this.props.stateOrDevice.kind === "sensor") {
-      switch (this.props.device.sensor) {
+      switch (this.props.stateOrDevice.sensor) {
         case "TEMPERATURE":
           this.units = "ºC";
           this.colors = temperatureSensorColors;
@@ -192,10 +195,10 @@ class Sensor 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 {
       return state.sceneStates[ownProps.id];
     }
   },

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

@@ -33,12 +33,15 @@ class SmartPlug extends Component {
 
   onClickDevice = () => {
     const on = !this.turnedOn;
-    if(this.props.tab==="Devices"){
+    if (this.props.tab === "Devices") {
       this.props
-          .saveDevice({ ...this.props.stateOrDevice, on })
+        .saveDevice({ ...this.props.stateOrDevice, on })
-          .catch((err) => console.error("smart plug update error", err));
+        .catch((err) => console.error("smart plug 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.stateOrDevice.id, on: on },
+        this.props.stateOrDevice.kind
+      );
     }
   };
 
@@ -68,10 +71,10 @@ class SmartPlug 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 {
       return state.sceneStates[ownProps.id];
     }
   },

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

@@ -70,8 +70,8 @@ class Thermostats extends Component {
         .catch((err) => console.error("thermostat update error", err));
     } else {
       this.props.updateState(
-        { id: this.props.sceneState.id, turnOn: turnOn },
+        { id: this.props.stateOrDevice.id, turnOn: turnOn },
-        this.props.sceneState.kind
+        this.props.stateOrDevice.kind
       );
     }
   }
@@ -84,8 +84,8 @@ class Thermostats extends Component {
         .catch((err) => console.error("thermostat update error", err));
     } else {
       this.props.updateState(
-        { id: this.props.sceneState.id, on: on },
+        { id: this.props.stateOrDevice.id, on: on },
-        this.props.sceneState.kind
+        this.props.stateOrDevice.kind
       );
     }
   };
@@ -98,8 +98,11 @@ class Thermostats extends Component {
         .catch((err) => console.error("thermostat update error", err));
     } else {
       this.props.updateState(
-        { id: this.props.sceneState.id, targetTemperature: targetTemperature },
+        {
-        this.props.sceneState.kind
+          id: this.props.stateOrDevice.id,
+          targetTemperature: targetTemperature,
+        },
+        this.props.stateOrDevice.kind
       );
     }
   }
@@ -130,10 +133,10 @@ class Thermostats extends Component {
     } else {
       this.props.updateState(
         {
-          id: this.props.sceneState.id,
+          id: this.props.stateOrDevice.id,
           internalSensorTemperature: internalSensorTemperature,
         },
-        this.props.sceneState.kind
+        this.props.stateOrDevice.kind
       );
     }
   }

smart-hut/src/remote.js

@@ -418,7 +418,7 @@ export const RemoteService = {
       let url = `/scene/${id}/apply`;
 
       return Endpoint.post(url)
-        .then((res) => dispatch(actions.sceneApply(res.data)))
+        .then((res) => dispatch(actions.deviceOperationUpdate(res.data)))
         .catch((err) => {
           console.warn("scene apply error", err);
           throw new RemoteError(["Network error"]);