From bbd80747323397d2ac922a1a672f53062f1ee656 Mon Sep 17 00:00:00 2001 From: britea Date: Mon, 4 May 2020 19:42:13 +0200 Subject: [PATCH] added option to use external temperature sensor --- .../components/dashboard/devices/Device.js | 7 ++- .../dashboard/devices/DeviceSettingsModal.js | 37 +++++++++-- .../dashboard/devices/Thermostat.css | 27 -------- .../dashboard/devices/ThermostatStyle.js | 4 +- .../dashboard/devices/Thermostats.js | 63 ++++++++++++++----- smart-hut/src/store.js | 2 +- 6 files changed, 85 insertions(+), 55 deletions(-) diff --git a/smart-hut/src/components/dashboard/devices/Device.js b/smart-hut/src/components/dashboard/devices/Device.js index dc820fa..e54d52b 100644 --- a/smart-hut/src/components/dashboard/devices/Device.js +++ b/smart-hut/src/components/dashboard/devices/Device.js @@ -123,13 +123,16 @@ class Device extends React.Component {
{this.deviceName}
-
{this.props.roomName}
+
+ {this.props.roomName} +
+ } + > {this.renderDeviceComponent()} diff --git a/smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js b/smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js index a5dad4f..83773c8 100644 --- a/smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js +++ b/smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js @@ -1,5 +1,13 @@ import React, { Component, useState } from "react"; -import { Button, Form, Icon, Header, Modal, Input } from "semantic-ui-react"; +import { + Button, + Form, + Icon, + Header, + Modal, + Input, + Checkbox, +} from "semantic-ui-react"; import { connect } from "react-redux"; import { RemoteService } from "../../../remote"; @@ -33,8 +41,6 @@ const SettingsForm = (props) => { const [values, setValues] = useState({ name: "" }); - console.log(props); - return (
@@ -46,7 +52,6 @@ const SettingsForm = (props) => { placeholder={props.name} /> - props.removeDevice(values)} /> @@ -72,6 +77,7 @@ class DeviceSettingsModal extends Component { this.updateDevice = this.updateDevice.bind(this); this.deleteDevice = this.deleteDevice.bind(this); + //this.useExternalTempSensor = this.useExternalTempSensor.bind(this); } closeModal = (e) => { @@ -83,9 +89,27 @@ class DeviceSettingsModal extends Component { }; updateDevice(values) { - if (values.name.length === 0) return; + console.log(values, this.external); + let name = values.name; + if (values.name.length === 0) { + name = this.props.device.name; + } + + let data = { + ...this.props.device, + name: name, + }; + + if (this.props.device.kind === "thermostat") { + let external = values.external + ? values.external + : this.props.device.useExternalSensors; + console.log(external); + data.useExternalSensors = external; + } + console.log(data.useExternalSensors); this.props - .saveDevice({ ...this.props.device, name: values.name }) + .saveDevice(data) .then(() => this.setState({ openModal: false })) .catch((err) => console.error( @@ -114,6 +138,7 @@ class DeviceSettingsModal extends Component { name={this.state.name} removeDevice={this.deleteDevice} saveFunction={this.updateDevice} + tempSensor={this.useExternalTempSensor} /> ); return this._editForm; diff --git a/smart-hut/src/components/dashboard/devices/Thermostat.css b/smart-hut/src/components/dashboard/devices/Thermostat.css index cf6fa0b..c64ffb8 100644 --- a/smart-hut/src/components/dashboard/devices/Thermostat.css +++ b/smart-hut/src/components/dashboard/devices/Thermostat.css @@ -2,30 +2,3 @@ margin-left: 1rem; margin-right: 1rem; } - -/* -.slider-css::-webkit-slider-thumb { - border: 5px solid #ffffff; - width: 18px; - height: 18px; - border-radius: 10px; - background-color: rgba(94, 246, 152, 1); - cursor: pointer; - box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.4); - margin-top: -7px; -} - -.slider-css:focus { - outline: none; -} - -.slider-css::-webkit-slider-runnable-track { - outline: none; - width: 100%; - height: 7px; - cursor: pointer; - box-shadow: 4.5px 4.5px 20px 1px rgba(0, 0, 0, 0.3); - background: white; - border-radius: 5px; -} -*/ diff --git a/smart-hut/src/components/dashboard/devices/ThermostatStyle.js b/smart-hut/src/components/dashboard/devices/ThermostatStyle.js index 4e29276..d0d71a2 100644 --- a/smart-hut/src/components/dashboard/devices/ThermostatStyle.js +++ b/smart-hut/src/components/dashboard/devices/ThermostatStyle.js @@ -1,7 +1,7 @@ export const container = { margin: "-1em 0", width: "15em", - height: "14em", + height: "15.5em", boxShadow: "5px 5px 5px 5px #DDD", borderRadius: "1em", backgroundColor: "white", @@ -40,7 +40,7 @@ export const stateTagContainer = { position: "absolute", width: "10rem", height: "2rem", - bottom: 0, + bottom: "-.25rem", left: "50%", transform: "translate(-50%,-50%)", backgroundColor: "#2b2", diff --git a/smart-hut/src/components/dashboard/devices/Thermostats.js b/smart-hut/src/components/dashboard/devices/Thermostats.js index f159012..9ec24ff 100644 --- a/smart-hut/src/components/dashboard/devices/Thermostats.js +++ b/smart-hut/src/components/dashboard/devices/Thermostats.js @@ -23,17 +23,12 @@ class Thermostats extends Component { targetTemperature: this.props.device.targetTemperature, mode: this.props.device.mode, measuredTemperature: this.props.device.measuredTemperature, - useExternalSensors: this.props.device.useExternalSensors, }; this.setMode = this.setMode.bind(this); this.setTargetTemperature = this.setTargetTemperature.bind(this); } setMode(mode) { - if (this.state.timeout) { - clearTimeout(this.state.timeout); - } - //i came to the conclusion that is not possible to set mode. // Good job Jacob (Claudio) //this.mode = "HEATING"; @@ -93,6 +88,16 @@ class Thermostats extends Component { this.setState({ ...this.state, targetTemperature: value }); }; + handleCheckbox = (val) => { + const useExternalSensors = val; + const turnOn = this.props.stateOrDevice.mode !== "OFF"; + if (this.props.tab === "Devices") { + this.props + .saveDevice({ ...this.props.stateOrDevice, useExternalSensors, turnOn }) + .catch((err) => console.error("thermostat update error", err)); + } + }; + render() { return (
@@ -118,18 +123,30 @@ class Thermostats extends Component { {this.props.device.targetTemperature.toFixed(1)} ºC
{this.props.tab === "Devices" ? ( - this.handleChange(event)} - onChangeComplete={() => this.setTargetTemperature()} - /> + + this.handleChange(event)} + onChangeComplete={() => this.setTargetTemperature()} + /> + this.handleCheckbox(val.checked)} + /> + ) : null} +
{this.props.tab !== "Scenes" @@ -144,8 +161,20 @@ class Thermostats extends Component { } } +const mapStateToProps2 = (state, ownProps) => ({ + ...mapStateToProps(state, ownProps), + get tempSensorsInRoom() { + const deviceIds = state.rooms[state.devices[ownProps.id].roomId].devices; + const devices = [...deviceIds].map((id) => state.devices[id]); + const sensors = devices.filter( + (d) => d.kind === "sensor" && d.sensor === "TEMPERATURE" + ); + return sensors.length > 0; + }, +}); + const ThermostatContainer = connect( - mapStateToProps, + mapStateToProps2, RemoteService )(Thermostats); export default ThermostatContainer; diff --git a/smart-hut/src/store.js b/smart-hut/src/store.js index 5583473..1ade73b 100644 --- a/smart-hut/src/store.js +++ b/smart-hut/src/store.js @@ -518,7 +518,7 @@ function reducer(previousState, action) { } return a; }, {}); - + console.log(devices); newState = reducer(previousState, { type: "DEVICES_UPDATE", partial: true,