thermostat fix
This commit is contained in:
parent
f6c8379fa0
commit
2eaa0e8345
4 changed files with 66 additions and 57 deletions
|
@ -80,11 +80,13 @@ class NewSceneDevice extends Component {
|
||||||
const availableDevices = [];
|
const availableDevices = [];
|
||||||
this.props.devices.forEach((e) => {
|
this.props.devices.forEach((e) => {
|
||||||
if (!Object.keys(this.state.sceneDevices).find((d) => e.id === d)) {
|
if (!Object.keys(this.state.sceneDevices).find((d) => e.id === d)) {
|
||||||
availableDevices.push({
|
if (e.flowType === "OUTPUT") {
|
||||||
key: e.id,
|
availableDevices.push({
|
||||||
text: e.name,
|
key: e.id,
|
||||||
value: e.id,
|
text: e.name,
|
||||||
});
|
value: e.id,
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
width: 20rem;
|
width: 20rem;
|
||||||
font-family: "Lato";
|
font-family: "Lato";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin-top: 32%;
|
margin-top: 27%;
|
||||||
margin-left: 50%;
|
margin-left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,73 +1,73 @@
|
||||||
export const container = {
|
export const container = {
|
||||||
position: "relative",
|
position: "relative",
|
||||||
width: "25rem",
|
width: "25rem",
|
||||||
height: "12rem",
|
height: "12rem",
|
||||||
boxShadow: "22px 18px 54px -7px rgba(102,102,102,1)",
|
boxShadow: "22px 18px 54px -7px rgba(102,102,102,1)",
|
||||||
borderRadius: "30px",
|
borderRadius: "30px",
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
};
|
};
|
||||||
|
|
||||||
export const line = {
|
export const line = {
|
||||||
width: "250px",
|
width: "250px",
|
||||||
height: "47px",
|
height: "47px",
|
||||||
borderBottom: "1px solid #646464",
|
borderBottom: "1px solid #646464",
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
left: "5%",
|
left: "5%",
|
||||||
};
|
};
|
||||||
|
|
||||||
export const deviceName = {
|
export const deviceName = {
|
||||||
fontFamily: "Lato",
|
fontFamily: "Lato",
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
marginTop: "5%",
|
marginTop: "5%",
|
||||||
marginLeft: "8%",
|
marginLeft: "8%",
|
||||||
fontSize: "1rem",
|
fontSize: "1rem",
|
||||||
fontWeight: "bold",
|
fontWeight: "bold",
|
||||||
color: "#646464",
|
color: "#646464",
|
||||||
};
|
};
|
||||||
|
|
||||||
export const targetTemperature = {
|
export const targetTemperature = {
|
||||||
fontFamily: "Lato",
|
fontFamily: "Lato",
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
marginTop: "20%",
|
marginTop: "20%",
|
||||||
marginLeft: "50%",
|
marginLeft: "50%",
|
||||||
transform: "translate(-50%,-50%)",
|
transform: "translate(-50%,-50%)",
|
||||||
fontSize: "3.5rem",
|
fontSize: "2rem",
|
||||||
fontWeight: "bold",
|
fontWeight: "bold",
|
||||||
color: "#646464",
|
color: "#646464",
|
||||||
};
|
};
|
||||||
|
|
||||||
export const slider = {
|
export const slider = {
|
||||||
width: "25rem",
|
width: "25rem",
|
||||||
fontFamily: "Lato",
|
fontFamily: "Lato",
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
marginTop: "35%",
|
marginTop: "35%",
|
||||||
marginLeft: "50%",
|
marginLeft: "50%",
|
||||||
transform: "translate(-50%,-50%)",
|
transform: "translate(-50%,-50%)",
|
||||||
};
|
};
|
||||||
|
|
||||||
export const stateTagContainer = {
|
export const stateTagContainer = {
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
width: "4rem",
|
//width: "3rem",
|
||||||
height: "1rem",
|
height: "2rem",
|
||||||
marginTop: "40%",
|
marginTop: "35%",
|
||||||
marginLeft: "50%",
|
marginLeft: "50%",
|
||||||
transform: "translate(-50%,-50%)",
|
transform: "translate(-50%,-50%)",
|
||||||
padding: "0.5rem 4rem",
|
padding: "0.5rem 4rem",
|
||||||
backgroundColor: "rgba(94,246,152,1)",
|
backgroundColor: "rgba(94,246,152,1)",
|
||||||
borderRadius: "50px",
|
borderRadius: "50px",
|
||||||
};
|
};
|
||||||
|
|
||||||
export const stateTag = {
|
export const stateTag = {
|
||||||
fontFamily: "Lato",
|
fontFamily: "Lato",
|
||||||
fontSize: "1.2rem",
|
fontSize: "1.2rem",
|
||||||
color: "white",
|
color: "white",
|
||||||
textTransform: "uppercase",
|
textTransform: "uppercase",
|
||||||
};
|
};
|
||||||
|
|
||||||
export const toggle = {
|
export const toggle = {
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: "10%",
|
top: "10%",
|
||||||
left: "35%",
|
left: "35%",
|
||||||
transform: "rotate(-360deg)",
|
transform: "rotate(-360deg)",
|
||||||
};
|
};
|
||||||
|
|
|
@ -64,6 +64,7 @@ class Thermostats extends Component {
|
||||||
//i came to the conclusion that is not possible to set mode.
|
//i came to the conclusion that is not possible to set mode.
|
||||||
//this.mode = "HEATING";
|
//this.mode = "HEATING";
|
||||||
const turnOn = mode;
|
const turnOn = mode;
|
||||||
|
console.log(turnOn);
|
||||||
if (this.props.tab === "Devices") {
|
if (this.props.tab === "Devices") {
|
||||||
this.props
|
this.props
|
||||||
.saveDevice({ ...this.props.stateOrDevice, turnOn })
|
.saveDevice({ ...this.props.stateOrDevice, turnOn })
|
||||||
|
@ -92,9 +93,14 @@ class Thermostats extends Component {
|
||||||
|
|
||||||
//It seems to work
|
//It seems to work
|
||||||
saveTargetTemperature(targetTemperature) {
|
saveTargetTemperature(targetTemperature) {
|
||||||
|
const turn = this.props.stateOrDevice.mode !== "OFF" ? true : false;
|
||||||
if (this.props.tab === "Devices") {
|
if (this.props.tab === "Devices") {
|
||||||
this.props
|
this.props
|
||||||
.saveDevice({ ...this.props.stateOrDevice, targetTemperature })
|
.saveDevice({
|
||||||
|
...this.props.stateOrDevice,
|
||||||
|
targetTemperature,
|
||||||
|
turnOn: turn,
|
||||||
|
})
|
||||||
.catch((err) => console.error("thermostat update error", err));
|
.catch((err) => console.error("thermostat update error", err));
|
||||||
} else {
|
} else {
|
||||||
this.props.updateState(
|
this.props.updateState(
|
||||||
|
@ -174,6 +180,7 @@ class Thermostats extends Component {
|
||||||
<h3 style={deviceName}>{this.props.stateOrDevice.name}</h3>
|
<h3 style={deviceName}>{this.props.stateOrDevice.name}</h3>
|
||||||
<div style={line}></div>
|
<div style={line}></div>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
|
checked={this.props.stateOrDevice.mode !== "OFF" ? true : false}
|
||||||
slider
|
slider
|
||||||
style={toggle}
|
style={toggle}
|
||||||
// TODO Manage the state hereconsole.log("CHANGE", val.checked)
|
// TODO Manage the state hereconsole.log("CHANGE", val.checked)
|
||||||
|
|
Loading…
Reference in a new issue