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

Merge branch '85-thermostat-fix-2' into 'dev'

Browse source 
thermostat fix

Closes #85

See merge request sa4-2020/the-sanmarinoes/frontend!100
This commit is contained in:
Andrea Brites Marto 2020-04-27 19:27:49 +02:00
commit 1d1fbe335e
4 changed files with 66 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
smart-hut/src/components/dashboard/NewSceneDevice.js
View file

@ -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 (

2
smart-hut/src/components/dashboard/devices/Thermostat.css
View file

@ -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%);
} }

100
smart-hut/src/components/dashboard/devices/ThermostatStyle.js
View file

@ -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)",
}; };

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

@ -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)