smarthut/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

stateOrDevice() added in various places

Browse source
This commit is contained in:
Jacob Salvi 2020-04-25 17:27:56 +02:00
parent 7f9a42fb84
commit fd5c28b1c9
6 changed files with 98 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
smart-hut/src/components/dashboard/devices/Curtain.js
View file

@ -2,30 +2,29 @@ import React, { Component } from "react";
import "./Curtains.css";
import { RemoteService } from "../../../remote";
import { connect } from "react-redux";
import { Slider } from "@material-ui/core";
class Curtain extends Component {
constructor(props) {
super(props);
this.state = { intensity: this.props.device.intensity, timeout: null };
this.state = { intensity: this.props.stateOrDevice.intensity, timeout: null };
this.setIntensity = this.setIntensity.bind(this);
}
//getters
get turnedOn() {
return this.props.device.on;
return this.props.stateOrDevice.on;
}
get intensity() {
return this.props.device.intensity || 0;
return this.props.stateOrDevice.intensity || 0;
}
onClickDevice = () => {
const on = !this.turnedOn;
if(this.props.tab==="Devices"){
this.props
.saveDevice({ ...this.props.device, on })
.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);
@ -55,7 +54,7 @@ class Curtain extends Component {
const intensity = Math.round(this.state.intensity);
if(this.props.tab==="Devices"){
this.props
.saveDevice({ ...this.props.device, intensity })
.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);
@ -67,7 +66,7 @@ class Curtain extends Component {
this.setIntensity(1);
this.saveIntensity();
} else {
this.setIntensity(this.props.device.intensity / 100 + 0.1);
this.setIntensity(this.props.stateOrDevice.intensity / 100 + 0.1);
this.saveIntensity();
}
};
@ -86,15 +85,15 @@ class Curtain extends Component {
<div
className="open-container"
style={{
height: (9 * this.props.device.intensity) / 100 + "rem",
height: (9 * this.props.stateOrDevice.intensity) / 100 + "rem",
}}
></div>{" "}
<span className="span-open">
{Math.round(this.props.device.intensity)}%
{Math.round(this.props.stateOrDevice.intensity)}%
</span>
<input
onChange={this.handleChange}
value={this.props.device.intensity}
value={this.props.stateOrDevice.intensity}
className="slider"
type="range"
min="0"
@ -107,7 +106,15 @@ class Curtain extends Component {
}
const mapStateToProps = (state, ownProps) => ({
device: state.devices[ownProps.id],
get stateOrDevice(){
if(state.active.activeTab==="Devices"){
return state.devices[ownProps.id];
}else{
const sceneState = state.sceneStates[ownProps.id];
return state.devices[sceneState];
}
},
//device: state.devices[ownProps.id],
});
const CurtainContainer = connect(mapStateToProps, RemoteService)(Curtain);
export default CurtainContainer;

11
smart-hut/src/components/dashboard/devices/Dimmer.js
View file

@ -64,7 +64,7 @@ export class KnobDimmerComponent extends Component {
super(props);
this.state = {
intensity: this.props.device.intensity || 0,
intensity: this.props.stateOrDevice.intensity || 0,
timeout: null,
};
@ -129,7 +129,14 @@ export class KnobDimmerComponent extends Component {
}
const mapStateToProps = (state, ownProps) => ({
device: state.devices[ownProps.id],
get stateOrDevice(){
if(state.active.activeTab==="Devices"){
return state.devices[ownProps.id];
}else{
const sceneState = state.sceneStates[ownProps.id];
return state.devices[sceneState];
}
},
});
const conn = connect(mapStateToProps, RemoteService);

26
smart-hut/src/components/dashboard/devices/Light.js
View file

@ -35,7 +35,7 @@ import { connect } from "react-redux";
class Light extends Component {
constructor(props) {
super(props);
this.state = { intensity: this.props.device.intensity, timeout: null };
this.state = { intensity: this.props.stateOrDevice.intensity, timeout: null };
this.iconOn = "/img/lightOn.svg";
this.iconOff = "/img/lightOff.svg";
@ -44,24 +44,24 @@ class Light extends Component {
}
componentDidUpdate(prevProps, prevState) {
if (this.props.device.intensity !== prevProps.device.intensity) {
this.setState({ intensity: this.props.device.intensity, timeout: null });
if (this.props.stateOrDevice.intensity !== prevProps.stateOrDevice.intensity) {
this.setState({ intensity: this.props.stateOrDevice.intensity, timeout: null });
}
}
get turnedOn() {
return this.props.device.on;
return this.props.stateOrDevice.on;
}
get intensity() {
return this.props.device.intensity || 0;
return this.props.stateOrDevice.intensity || 0;
}
onClickDevice = () => {
const on = !this.turnedOn;
if(this.props.tab==="Devices"){
this.props
.saveDevice({ ...this.props.device, on })
.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);
@ -95,7 +95,7 @@ class Light extends Component {
const intensity = Math.round(this.state.intensity);
if(this.props.tab==="Devices"){
this.props
.saveDevice({ ...this.props.device, intensity })
.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);
@ -147,7 +147,7 @@ class Light extends Component {
return (
<div>
{this.props.device.kind === "dimmableLight"
{this.props.stateOrDevice.kind === "dimmableLight"
? intensityLightView
: normalLightView}
</div>
@ -156,7 +156,15 @@ class Light extends Component {
}
const mapStateToProps = (state, ownProps) => ({
device: state.devices[ownProps.id],
get stateOrDevice(){
if(state.active.activeTab==="Devices"){
return state.devices[ownProps.id];
}else{
const sceneState = state.sceneStates[ownProps.id];
return state.devices[sceneState];
}
},
//device: state.devices[ownProps.id],
});
const LightContainer = connect(mapStateToProps, RemoteService)(Light);

29
smart-hut/src/components/dashboard/devices/Sensor.js
View file

@ -65,20 +65,20 @@ class Sensor extends Component {
componentDidUpdate(prevProps) {
if (
this.props.device.kind === "sensor" &&
this.props.device.value !== prevProps.device.value
this.props.stateOrDevice.kind === "sensor" &&
this.props.stateOrDevice.value !== prevProps.stateOrDevice.value
) {
this.setState({ value: this.props.device.value });
this.setState({ value: this.props.stateOrDevice.value });
} else if (
this.props.device.kind === "motionSensor" &&
this.props.device.detected !== prevProps.device.detected
this.props.stateOrDevice.kind === "motionSensor" &&
this.props.stateOrDevice.detected !== prevProps.stateOrDevice.detected
) {
this.setState({ motion: true, detected: this.props.device.detected });
this.setState({ motion: true, detected: this.props.stateOrDevice.detected });
}
}
componentDidMount() {
if (this.props.device.kind === "sensor") {
if (this.props.stateOrDevice.kind === "sensor") {
switch (this.props.device.sensor) {
case "TEMPERATURE":
this.units = "ºC";
@ -102,11 +102,11 @@ class Sensor extends Component {
this.units = "";
}
this.setState({
value: this.props.device.value,
value: this.props.stateOrDevice.value,
});
} else {
this.setState({
detected: this.props.device.detected,
detected: this.props.stateOrDevice.detected,
motion: true,
});
}
@ -149,7 +149,7 @@ class Sensor extends Component {
<React.Fragment>
<CircularInput
value={
this.props.device.sensor === "LIGHT"
this.props.stateOrDevice.sensor === "LIGHT"
? this.state.value / 2000
: this.state.value / 100
}
@ -192,7 +192,14 @@ class Sensor extends Component {
}
const mapStateToProps = (state, ownProps) => ({
device: state.devices[ownProps.id],
get stateOrDevice(){
if(state.active.activeTab==="Devices"){
return state.devices[ownProps.id];
}else{
const sceneState = state.sceneStates[ownProps.id];
return state.devices[sceneState];
}
},
});
const SensorContainer = connect(mapStateToProps, RemoteService)(Sensor);
export default SensorContainer;

15
smart-hut/src/components/dashboard/devices/SmartPlug.js
View file

@ -24,18 +24,18 @@ class SmartPlug extends Component {
}
get turnedOn() {
return this.props.device.on;
return this.props.stateOrDevice.on;
}
get energyConsumed() {
return (this.props.device.totalConsumption / 1000).toFixed(3);
return (this.props.stateOrDevice.totalConsumption / 1000).toFixed(3);
}
onClickDevice = () => {
const on = !this.turnedOn;
if(this.props.tab==="Devices"){
this.props
.saveDevice({ ...this.props.device, on })
.saveDevice({ ...this.props.stateOrDevice, on })
.catch((err) => console.error("smart plug update error", err));
}else{
this.props.updateState({ id: this.props.sceneState.id, on: on},this.props.sceneState.kind);
@ -68,7 +68,14 @@ class SmartPlug extends Component {
}
const mapStateToProps = (state, ownProps) => ({
device: state.devices[ownProps.id],
get stateOrDevice(){
if(state.active.activeTab==="Devices"){
return state.devices[ownProps.id];
}else{
const sceneState = state.sceneStates[ownProps.id];
return state.devices[sceneState];
}
},
});
const SmartPlugContainer = connect(mapStateToProps, RemoteService)(SmartPlug);
export default SmartPlugContainer;

43
smart-hut/src/components/dashboard/devices/Thermostats.js
View file

@ -19,11 +19,11 @@ class Thermostats extends Component {
constructor(props) {
super(props);
this.state = {
targetTemperature: this.props.device.targetTemperature,
internalSensorTemperature: this.props.device.internalSensorTemperature,
mode: this.props.device.mode,
measuredTemperature: this.props.device.measuredTemperature,
useExternalSensors: this.props.device.useExternalSensors,
targetTemperature: this.props.stateOrDevice.targetTemperature,
internalSensorTemperature: this.props.stateOrDevice.internalSensorTemperature,
mode: this.props.stateOrDevice.mode,
measuredTemperature: this.props.stateOrDevice.measuredTemperature,
useExternalSensors: this.props.stateOrDevice.useExternalSensors,
timeout: null,
};
this.setMode = this.setMode.bind(this);
@ -35,23 +35,23 @@ class Thermostats extends Component {
//getters
get getMode() {
return this.props.device.mode;
return this.props.stateOrDevice.mode;
}
get getTargetTemperature() {
return this.props.device.targetTemperature;
return this.props.stateOrDevice.targetTemperature;
}
get getInternalSensorTemperature() {
return this.props.device.internalSensorTemperature;
return this.props.stateOrDevice.internalSensorTemperature;
}
get getMeasuredTemperature() {
return this.props.device.measuredTemperature;
return this.props.stateOrDevice.measuredTemperature;
}
get getUseExternalSensors() {
return this.props.device.useExternalSensors;
return this.props.stateOrDevice.useExternalSensors;
}
setMode(mode) {
@ -65,7 +65,7 @@ class Thermostats extends Component {
const turnOn = mode;
if(this.props.tab==="Devices"){
this.props
.saveDevice({ ...this.props.device, turnOn })
.saveDevice({ ...this.props.stateOrDevice, turnOn })
.catch((err) => console.error("thermostat update error", err));
}else{
this.props.updateState({ id: this.props.sceneState.id, turnOn: turnOn },this.props.sceneState.kind);
@ -76,7 +76,7 @@ class Thermostats extends Component {
const on = !this.turnedOn;
if(this.props.tab==="Devices"){
this.props
.saveDevice({ ...this.props.device, on })
.saveDevice({ ...this.props.stateOrDevice, on })
.catch((err) => console.error("thermostat update error", err));
}else{
this.props.updateState({ id: this.props.sceneState.id, on: on },this.props.sceneState.kind);
@ -87,7 +87,7 @@ class Thermostats extends Component {
saveTargetTemperature(targetTemperature) {
if(this.props.tab==="Devices"){
this.props
.saveDevice({ ...this.props.device, targetTemperature })
.saveDevice({ ...this.props.stateOrDevice, targetTemperature })
.catch((err) => console.error("thermostat update error", err));
}else{
this.props.updateState({id: this.props.sceneState.id, targetTemperature: targetTemperature},this.props.sceneState.kind);
@ -153,7 +153,7 @@ class Thermostats extends Component {
return (
<div style={container}>
<h3 style={deviceName}>{this.props.device.name}</h3>
<h3 style={deviceName}>{this.props.stateOrDevice.name}</h3>
<div style={line}></div>
<Checkbox
slider
@ -163,19 +163,19 @@ class Thermostats extends Component {
/>
<span style={targetTemperature}>
{this.props.device.targetTemperature}ºC
{this.props.stateOrDevice.targetTemperature}ºC
</span>
<input
type="range"
min="0"
max="40"
className="slider-css"
value={this.props.device.targetTemperature}
value={this.props.stateOrDevice.targetTemperature}
onChange={(event) => this.handleChange(event.target.value)}
id="targetTemperature"
/>
<div style={stateTagContainer}>
<span style={stateTag}>{this.props.device.mode}</span>
<span style={stateTag}>{this.props.stateOrDevice.mode}</span>
</div>
</div>
);
@ -183,7 +183,14 @@ class Thermostats extends Component {
}
const mapStateToProps = (state, ownProps) => ({
device: state.devices[ownProps.id],
get stateOrDevice(){
if(state.active.activeTab==="Devices"){
return state.devices[ownProps.id];
}else{
const sceneState = state.sceneStates[ownProps.id];
return state.devices[sceneState];
}
},
});
const ThermostatContainer = connect(