fix states scenes

2020-04-25 17:46:04 +02:00 · 2020-04-25 17:46:04 +02:00 · bd3a39181c
commit bd3a39181c
parent fd5c28b1c9
5 changed files with 254 additions and 143 deletions
--- a/smart-hut/src/components/dashboard/ScenesPanel.js
+++ b/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 [];
    }
--- a/smart-hut/src/components/dashboard/devices/Device.js
+++ b/smart-hut/src/components/dashboard/devices/Device.js
@ -13,114 +13,211 @@ import { connect } from "react-redux";
 import DeviceSettingsModal from "./DeviceSettingsModal";

 class Device extends React.Component {
-    constructor(props) {
-        super(props);
+  constructor(props) {
+    super(props);

-        this.modalRef = React.createRef();
-        this.edit = this.edit.bind(this);
-        this.resetSmartPlug = this.resetSmartPlug.bind(this);
-    }
+    this.modalRef = React.createRef();
+    this.edit = this.edit.bind(this);
+    this.resetSmartPlug = this.resetSmartPlug.bind(this);
+  }

-    edit() {
-        console.log("editing device with id=" + this.props.id);
-        this.modalRef.current.openModal();
-    }
+  edit() {
+    console.log("editing device with id=" + this.props.id);
+    this.modalRef.current.openModal();
+  }

-    resetSmartPlug() {
-        this.props
-            .smartPlugReset(this.props.id)
-            .catch((err) => console.error(`Smart plug reset error`, err));
-    }
+  resetSmartPlug() {
+    this.props
+      .smartPlugReset(this.props.id)
+      .catch((err) => console.error(`Smart plug reset error`, err));
+  }

-    renderDeviceComponent() {
-        console.log("check here")
-        console.log(this.props.stateOrDevice.kind)
-        switch (this.props.stateOrDevice.kind) {
-            case "curtains":
-                return <Curtains tab={this.props.tab} id={this.props.id} />;
-            case "thermostat":
-                return <Thermostat tab={this.props.tab} id={this.props.id} />;
-            case "regularLight":
-                return <Light tab={this.props.tab} id={this.props.id} />;
-            case "sensor":
-                return <Sensor tab={this.props.tab} id={this.props.id} />;
-            case "motionSensor":
-                return <Sensor tab={this.props.tab} id={this.props.id} />;
-            case "buttonDimmer":
-                return <ButtonDimmer tab={this.props.tab} id={this.props.id} />;
-            case "knobDimmer":
-                return <KnobDimmer tab={this.props.tab} id={this.props.id} />;
-            case "smartPlug":
-                return <SmartPlug tab={this.props.tab} id={this.props.id} />;
-            case "switch":
-                return <Switcher tab={this.props.tab} id={this.props.id} />;
-            case "dimmableLight":
-                return <Light id={this.props.id} />;
-            case "securityCamera":
-                return <Videocam id={this.props.id} />;
-            default:
-                throw new Error("Device type unknown");
-        }
-    }
-
-    render() {
+  renderDeviceComponent() {
+    console.log(JSON.stringify(this.props.stateOrDevice));
+    switch (
+      this.props.tab === "Devices"
+        ? this.props.stateOrDevice.kind
+        : this.props.type
+    ) {
+      case "curtains":
        return (
-            <Segment>
-                <Grid columns={2}>
-                    <Grid.Column>{this.renderDeviceComponent()}</Grid.Column>
-                    {this.props.tab === "Devices" ? (
-                        <Grid.Column textAlign="center">
-                            <Header as="h3">
-                                {this.props.stateOrDevice.name}
-                            </Header>
-                            <Button
-                                color="blue"
-                                icon
-                                onClick={this.edit}
-                                labelPosition="left"
-                            >
-                                <Icon name="pencil" />
-                                Edit
-                            </Button>
-                            {this.props.stateOrDevice.kind === "smartPlug" ? (
-                                <Button
-                                    color="orange"
-                                    icon
-                                    onClick={this.resetSmartPlug}
-                                    labelPosition="left"
-                                >
-                                    <Icon name="undo" />
-                                    Reset
-                                </Button>
-                            ) : null}
-                        </Grid.Column>
-                    ) : (
-                        <Grid.Column textAlign="center">
-                            <Header as="h3">
-                                {this.props.stateOrDevice.name}
-                            </Header>
-                        </Grid.Column>
-                    )}
-
-                    <DeviceSettingsModal
-                        ref={this.modalRef}
-                        id={this.props.id}
-                    />
-                </Grid>
-            </Segment>
+          <Curtains
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.id}
+          />
        );
+      case "thermostat":
+        return (
+          <Thermostat
+            tab={this.props.tab}
+            sceneState={this.props.sceneStat}
+            id={this.props.stateOrDevice.id}
+          />
+        );
+      case "regularLight":
+        return (
+          <Light
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.stateOrDevice.id}
+          />
+        );
+      case "sensor":
+        return (
+          <Sensor
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.stateOrDevice.id}
+          />
+        );
+      case "motionSensor":
+        return (
+          <Sensor
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.stateOrDevice.id}
+          />
+        );
+      case "buttonDimmer":
+        return (
+          <ButtonDimmer
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.stateOrDevice.id}
+          />
+        );
+      case "knobDimmer":
+        return (
+          <KnobDimmer
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.stateOrDevice.id}
+          />
+        );
+      case "smartPlug":
+        return (
+          <SmartPlug
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.stateOrDevice.id}
+          />
+        );
+      case "switch":
+        return (
+          <Switcher
+            tab={this.props.tab}
+            sceneState={this.props.sceneState}
+            id={this.props.stateOrDevice.id}
+          />
+        );
+      case "dimmableLight":
+        return (
+          <Light
+            id={this.props.stateOrDevice.id}
+            sceneState={this.props.sceneState}
+            tab={this.props.tab}
+          />
+        );
+      case "securityCamera":
+        return (
+          <Videocam
+            id={this.props.stateOrDevice.id}
+            sceneState={this.props.sceneState}
+            tab={this.props.tab}
+          />
+        );
+      case "":
+        return "";
+      default:
+        throw new Error("Device type unknown");
    }
-}
+  }

+  render() {
+    return (
+      <Segment>
+        <Grid columns={2}>
+          <Grid.Column>{this.renderDeviceComponent()}</Grid.Column>
+          {this.props.tab === "Devices" ? (
+            <Grid.Column textAlign="center">
+              <Header as="h3">{this.props.stateOrDevice.name}</Header>
+              <Button
+                color="blue"
+                icon
+                onClick={this.edit}
+                labelPosition="left"
+              >
+                <Icon name="pencil" />
+                Edit
+              </Button>
+              {this.props.stateOrDevice.kind === "smartPlug" ? (
+                <Button
+                  color="orange"
+                  icon
+                  onClick={this.resetSmartPlug}
+                  labelPosition="left"
+                >
+                  <Icon name="undo" />
+                  Reset
+                </Button>
+              ) : null}
+            </Grid.Column>
+          ) : (
+            <Grid.Column textAlign="center">
+              <Header as="h3">
+                {this.props.stateOrDevice ? this.props.stateOrDevice.name : ""}
+              </Header>
+            </Grid.Column>
+          )}
+        </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];
-            return state.devices[sceneState];
-        }
-    },
+  get stateOrDevice() {
+    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() {
+    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;
+    }
+  },
 });
 const DeviceContainer = connect(mapStateToProps, RemoteService)(Device);
 export default DeviceContainer;
--- a/smart-hut/src/components/dashboard/devices/Light.js
+++ b/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) {
-      this.setState({ intensity: this.props.stateOrDevice.intensity, timeout: null });
+    if (
+      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{
-      this.props.updateState({ id: this.props.sceneState.id, on: on }, this.props.sceneState.kind);
+        .saveDevice({ ...this.props.stateOrDevice, on })
+        .catch((err) => console.error("regular light update error", err));
+    } else {
+      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{
-      this.props.updateState({ id: this.props.sceneState.id, intensity: intensity }, this.props.sceneState.kind);
+        .saveDevice({ ...this.props.stateOrDevice, intensity })
+        .catch((err) => console.error("regular light update error", err));
+    } else {
+      this.props.updateState(
+        { id: this.props.sceneState.id, intensity: intensity },
+        this.props.sceneState.kind
+      );
    }
  };

@ -156,12 +170,11 @@ class Light extends Component {
 }

 const mapStateToProps = (state, ownProps) => ({
-  get stateOrDevice(){
-    if(state.active.activeTab==="Devices"){
+  get stateOrDevice() {
+    if (state.active.activeTab === "Devices") {
      return state.devices[ownProps.id];
-    }else{
-      const sceneState = state.sceneStates[ownProps.id];
-      return state.devices[sceneState];
+    } else {
+      return state.sceneStates[ownProps.id];
    }
  },
  //device: state.devices[ownProps.id],
--- a/smart-hut/src/remote.js
+++ b/smart-hut/src/remote.js
@ -375,24 +375,24 @@ export const RemoteService = {
  },

  //
-  updateState: (data,type)=>{
+  updateState: (data, type) => {
    return (dispatch) => {
      let url;
-      if(type=="dimmableState"){
-        url="/dimmableState"
-      }else{
-        url="/switchableState"
+      if (type == "dimmableState") {
+        url = "/dimmableState";
+      } else {
+        url = "/switchableState";
      }

-      return Endpoint["put"](url, {}, data)
-          .then((res) => {
-            dispatch(actions.stateSave(res.data));
-            return res.data;
-          })
-          .catch((err) => {
-            console.warn("Update device: ", data, "error: ", err);
-            throw new RemoteError(["Network error"]);
-          });
+      return Endpoint.put(url, {}, data)
+        .then((res) => {
+          dispatch(actions.stateSave(res.data));
+          return res.data;
+        })
+        .catch((err) => {
+          console.warn("Update device: ", data, "error: ", err);
+          throw new RemoteError(["Network error"]);
+        });
    };
  },

--- a/smart-hut/src/store.js
+++ b/smart-hut/src/store.js
@ -80,8 +80,8 @@ function reducer(previousState, action) {
  };

  const updateSceneStateProps = (state) => {
-    change.sceneStates[state.deviceId] = {};
-    change.sceneStates[state.deviceId] = { $set: state.deviceId };
+    change.sceneStates[state.id] = {};
+    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]) {
-          change.sceneStates[sceneState.deviceId] = {
-            $set: sceneState.deviceId,
+        if (!newState.sceneStates[sceneState.id]) {
+          change.sceneStates[sceneState.id] = {
+            $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(
-              sceneState.deviceId
-            );
+            change.pendingJoins.scenes[sceneState.sceneId].$set.add(sceneState);
          }
        }
      }