diff --git a/smart-hut/src/components/dashboard/ScenesPanel.js b/smart-hut/src/components/dashboard/ScenesPanel.js index 2c5c726..6a56428 100644 --- a/smart-hut/src/components/dashboard/ScenesPanel.js +++ b/smart-hut/src/components/dashboard/ScenesPanel.js @@ -15,9 +15,10 @@ class ScenesPanel extends Component { {!this.props.isActiveDefaultScene ? this.props.sceneStates.map((e, i) => { + console.log(this.props.sceneStates); return ( - + ); }) @@ -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 []; } diff --git a/smart-hut/src/components/dashboard/devices/Device.js b/smart-hut/src/components/dashboard/devices/Device.js index db5b539..ecc650b 100644 --- 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 ; - case "thermostat": - return ; - case "regularLight": - return ; - case "sensor": - return ; - case "motionSensor": - return ; - case "buttonDimmer": - return ; - case "knobDimmer": - return ; - case "smartPlug": - return ; - case "switch": - return ; - case "dimmableLight": - return ; - case "securityCamera": - return ; - 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 ( - - - {this.renderDeviceComponent()} - {this.props.tab === "Devices" ? ( - -
- {this.props.stateOrDevice.name} -
- - {this.props.stateOrDevice.kind === "smartPlug" ? ( - - ) : null} -
- ) : ( - -
- {this.props.stateOrDevice.name} -
-
- )} - - -
-
+ ); + case "thermostat": + return ( + + ); + case "regularLight": + return ( + + ); + case "sensor": + return ( + + ); + case "motionSensor": + return ( + + ); + case "buttonDimmer": + return ( + + ); + case "knobDimmer": + return ( + + ); + case "smartPlug": + return ( + + ); + case "switch": + return ( + + ); + case "dimmableLight": + return ( + + ); + case "securityCamera": + return ( + + ); + case "": + return ""; + default: + throw new Error("Device type unknown"); } -} + } + render() { + return ( + + + {this.renderDeviceComponent()} + {this.props.tab === "Devices" ? ( + +
{this.props.stateOrDevice.name}
+ + {this.props.stateOrDevice.kind === "smartPlug" ? ( + + ) : null} +
+ ) : ( + +
+ {this.props.stateOrDevice ? this.props.stateOrDevice.name : ""} +
+
+ )} +
+
+ ); + } +} +/* + +{this.props.stateOrDevice ? + : + "" + } +*/ 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; diff --git a/smart-hut/src/components/dashboard/devices/Light.js b/smart-hut/src/components/dashboard/devices/Light.js index edee323..dc0c4f5 100644 --- 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,11 +170,10 @@ 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]; + } else { return state.sceneStates[ownProps.id]; } }, diff --git a/smart-hut/src/remote.js b/smart-hut/src/remote.js index 2b6f730..b1912e4 100644 --- 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"]); + }); }; }, diff --git a/smart-hut/src/store.js b/smart-hut/src/store.js index 930f387..8e9be90 100644 --- 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); } } }