Thermostats fixed (for scenes)

smart-hut/src/components/SceneModal.js

@@ -17,8 +17,6 @@ class SceneModal extends Component {
   constructor(props) {
     super(props);
     this.state = this.initialState;
-    this.setInitialState();
-
     this.addSceneModal = this.addSceneModal.bind(this);
     this.modifySceneModal = this.modifySceneModal.bind(this);
     this.deleteScene = this.deleteScene.bind(this);

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

@@ -26,7 +26,7 @@ class DevicePanel extends Component {
     return (
       <Card.Group centered style={{ paddingTop: "3rem" }}>
         {this.props.devices.map((e, i) => {
-          return <Device tab={this.props.tab} id={e.id} />;
+          return <Device key={i} tab={this.props.tab} id={e.id} />;
         })}
         {!this.props.isActiveRoomHome ? (
           <Card style={{ height: "23em" }}>

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

@@ -98,7 +98,14 @@ class NewSceneDevice extends Component {
         open={this.state.openModal}
         onClose={this.resetState}
         trigger={
-          <StyledDiv onClick={this.handleOpen}>
+          <StyledDiv
+            onClick={this.handleOpen}
+            style={{
+              position: "relative",
+              top: "calc(50% - 5rem)",
+              left: "calc(50% - 5rem)",
+            }}
+          >
             <Image src="/img/add.svg" style={{ filter: "invert()" }} />
           </StyledDiv>
         }

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

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import { RemoteService } from "../../remote";
 import Device from "./devices/Device";
 import NewSceneDevice from "./NewSceneDevice";
-import { Grid, Button } from "semantic-ui-react";
+import { Grid, Button, Card, Segment, Header } from "semantic-ui-react";
 
 class ScenesPanel extends Component {
   constructor(props) {
@@ -13,38 +13,44 @@ class ScenesPanel extends Component {
 
   applyScene() {
     console.log(this.props.activeScene);
-    this.props.sceneApply(this.props.activeScene).then(() => {
-      alert("Scene applied.");
-    });
+    this.props
+      .sceneApply(this.props.activeScene)
+      .then(() => {
+        alert("Scene applied.");
+      })
+      .catch(console.error);
   }
 
   render() {
     return (
-      <Grid doubling columns={2} divided="vertically">
+      <Card.Group centered style={{ paddingTop: "3rem" }}>
         {!this.props.isActiveDefaultScene ? (
-          <Grid.Row centered>
-            <Button color="blue" onClick={this.applyScene}>
-              Apply Scene
-            </Button>
-          </Grid.Row>
-        ) : null}
-        {!this.props.isActiveDefaultScene
-          ? this.props.sceneStates.map((e, i) => {
-              return (
-                <Grid.Column key={i}>
-                  <Device tab={this.props.tab} id={e.id} />
-                </Grid.Column>
-              );
-            })
-          : null}
-        {!this.props.isActiveDefaultScene ? (
-          <Grid.Column>
-            <NewSceneDevice />
-          </Grid.Column>
+          <Card style={{ height: "27em" }}>
+            <Card.Content>
+              <Card.Header textAlign="center">
+                <Header as="h3">Add devices - Apply Scene</Header>
+              </Card.Header>
+              <Segment basic style={{ width: "100%", height: "100%" }}>
+                <NewSceneDevice />
+              </Segment>
+            </Card.Content>
+            <Card.Content extra>
+              <div className="ui two buttons">
+                <Button color="blue" onClick={this.applyScene}>
+                  Apply Scene
+                </Button>
+              </div>
+            </Card.Content>
+          </Card>
         ) : (
           <Grid.Column>Welcome to the Scene View, you add a Scene</Grid.Column>
         )}
-      </Grid>
+        {!this.props.isActiveDefaultScene
+          ? this.props.sceneStates.map((e, i) => {
+              return <Device key={i} tab={this.props.tab} id={e.id} />;
+            })
+          : null}
+      </Card.Group>
     );
   }
 }

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

@@ -41,8 +41,8 @@ class Device extends React.Component {
   }
 
   deleteState() {
-    //console.log("alpaca "+this.props);
-    this.props.deleteState(this.props.id, this.props.type);
+    console.log("alpaca ", this.props);
+    this.props.deleteState(this.props.id, this.props.stateOrDevice.kind);
   }
 
   renderDeviceComponent() {
@@ -136,7 +136,7 @@ class Device extends React.Component {
 
   stateDescription() {
     return (
-      <div class="ui one button">
+      <div className="ui two buttons">
         <Button
           color="red"
           icon
@@ -159,7 +159,9 @@ class Device extends React.Component {
   render() {
     {
       return (
-        <Card style={{ height: "23em" }}>
+        <Card
+          style={{ height: this.props.tab === "Devices" ? "23em" : "27em" }}
+        >
           <Card.Content>
             <Card.Header textAlign="center">
               <Header as="h3">{this.deviceName}</Header>

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

@@ -46,7 +46,7 @@ class Light extends Component {
     this.setIntensity = this.setIntensity.bind(this);
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps) {
     if (
       this.props.stateOrDevice.intensity !== prevProps.stateOrDevice.intensity
     ) {

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

@@ -28,7 +28,7 @@ class SmartPlug extends Component {
   }
 
   get energyConsumed() {
-    return (this.props.stateOrDevice.totalConsumption / 1000).toFixed(3);
+    return (this.props.device.totalConsumption / 1000).toFixed(3);
   }
 
   onClickDevice = () => {
@@ -78,6 +78,13 @@ const mapStateToProps = (state, ownProps) => ({
       return state.sceneStates[ownProps.id];
     }
   },
+  get device() {
+    if (state.active.activeTab === "Devices") {
+      return state.devices[ownProps.id];
+    } else {
+      return state.devices[state.sceneStates[ownProps.id].deviceId];
+    }
+  },
 });
 const SmartPlugContainer = connect(mapStateToProps, RemoteService)(SmartPlug);
 export default SmartPlugContainer;

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

@@ -15,39 +15,21 @@ import {
   stateTagContainer,
 } from "./ThermostatStyle";
 
-//not quite working yet
 class Thermostats extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      targetTemperature: this.props.stateOrDevice.targetTemperature,
-      mode: this.props.stateOrDevice.mode,
-      measuredTemperature: this.props.stateOrDevice.measuredTemperature,
-      useExternalSensors: this.props.stateOrDevice.useExternalSensors,
-      timeout: null,
+      targetTemperature: this.props.device.targetTemperature,
+      mode: this.props.device.mode,
+      measuredTemperature: this.props.device.measuredTemperature,
+      useExternalSensors: this.props.device.useExternalSensors,
     };
+    console.log(this.state);
     this.setMode = this.setMode.bind(this);
     this.setTargetTemperature = this.setTargetTemperature.bind(this);
     this.setTargetTemperature = this.setTargetTemperature.bind(this);
   }
 
-  //getters
-  get getMode() {
-    return this.props.stateOrDevice.mode;
-  }
-
-  get getTargetTemperature() {
-    return this.props.stateOrDevice.targetTemperature;
-  }
-
-  get getMeasuredTemperature() {
-    return this.props.stateOrDevice.measuredTemperature;
-  }
-
-  get getUseExternalSensors() {
-    return this.props.stateOrDevice.useExternalSensors;
-  }
-
   setMode(mode) {
     if (this.state.timeout) {
       clearTimeout(this.state.timeout);
@@ -85,7 +67,6 @@ class Thermostats extends Component {
     }
   };
 
-  //It seems to work
   saveTargetTemperature(targetTemperature) {
     const turn = this.props.stateOrDevice.mode !== "OFF";
     if (this.props.tab === "Devices") {
@@ -124,8 +105,6 @@ class Thermostats extends Component {
     });
   }
 
-  //I have no idea why it doesn't want to update the temperature
-  // Maybe ask yourself some questions
   saveTargetTemperature(targetTemperature) {
     if (this.props.tab === "Devices") {
       this.props
@@ -160,7 +139,11 @@ class Thermostats extends Component {
         <h3 style={deviceName}>
           Thermostat
           <Checkbox
-            checked={this.props.stateOrDevice.mode !== "OFF" ? true : false}
+            checked={
+              this.props.tab === "Devices"
+                ? this.props.device.mode !== "OFF"
+                : this.props.stateOrDevice.on
+            }
             slider
             style={toggle}
             onChange={(e, val) => this.setMode(val.checked)}
@@ -185,7 +168,13 @@ class Thermostats extends Component {
           />
         ) : null}
         <div style={stateTagContainer}>
-          <span style={stateTag}>{this.props.stateOrDevice.mode}</span>
+          <span style={stateTag}>
+            {this.props.tab === "Devices"
+              ? this.props.device.mode
+              : this.props.stateOrDevice.on
+              ? "WILL TURN ON"
+              : "WILL TURN OFF"}
+          </span>
         </div>
       </div>
     );

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

@@ -59,7 +59,11 @@ class Videocam extends Component {
 }
 
 const mapStateToProps = (state, ownProps) => ({
-  device: state.devices[ownProps.id],
+  device:
+    ownProps.tab === "Devices"
+      ? state.devices[ownProps.id]
+      : state.devices[state.sceneStates[ownProps.id].deviceId],
+  state: state.sceneStates[ownProps.id],
 });
 const VideocamContainer = connect(mapStateToProps, RemoteService)(Videocam);
 export default VideocamContainer;

smart-hut/src/remote.js

@@ -13,7 +13,11 @@ class RemoteError extends Error {
   messages;
 
   constructor(messages) {
-    super(messages.join(" - "));
+    super(
+      messages && Array.isArray(messages)
+        ? messages.join(" - ")
+        : JSON.stringify(messages, null, 2)
+    );
     this.messages = messages;
   }
 }

smart-hut/src/views/Dashboard.js

@@ -89,14 +89,12 @@ class Dashboard extends Component {
               <Grid.Column textAlign="center" width={16}>
                 <Menu fluid widths={3} inverted color="grey">
                   <Menu.Item
-                    basic
                     name="Devices"
                     content="Devices"
                     active={this.activeTab === "Devices"}
                     onClick={this.selectTab}
                   />
                   <Menu.Item
-                    basic
                     name="Scenes"
                     content="Scenes"
                     active={this.activeTab === "Scenes"}