Merge branch '98-thermostats-must-have-an-option-to-choose-between-internal-and-external-sensors-must-be-disabled' into 'dev'

Resolve "thermostats must have an option to choose between internal and external sensors (must be disabled when no temp sensors are in the room) @britea"

Closes #98

See merge request sa4-2020/the-sanmarinoes/frontend!123

smart-hut/src/components/dashboard/devices/Device.js

@@ -123,13 +123,16 @@ class Device extends React.Component {
         <Card.Content>
           <Card.Header textAlign="center">
             <Header as="h3">{this.deviceName}</Header>
-            <Header as="h4">{this.props.roomName}</Header>
+            <Header as="h4" style={{ marginTop: ".5rem" }}>
+              {this.props.roomName}
+            </Header>
           </Card.Header>
 
           <Card.Description
             style={
               this.props.device.kind !== "curtains" ? centerComponent : null
-            }>
+            }
+          >
             {this.renderDeviceComponent()}
           </Card.Description>
         </Card.Content>

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 (
     <Form>
       <Form.Field>
@@ -46,7 +52,6 @@ const SettingsForm = (props) => {
           placeholder={props.name}
         />
       </Form.Field>
-
       <Form.Field>
         <DeleteModal removeDevice={() => props.removeDevice(values)} />
       </Form.Field>
@@ -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;

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;
-}
-*/

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",

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 (
       <div style={container}>
@@ -118,18 +123,30 @@ class Thermostats extends Component {
           {this.props.device.targetTemperature.toFixed(1)} ºC
         </div>
         {this.props.tab === "Devices" ? (
-          <Slider
+          <React.Fragment>
-            disabled={this.props.disabled}
+            <Slider
-            min={10}
+              disabled={this.props.disabled}
-            max={30}
+              min={10}
-            step={0.1}
+              max={30}
-            tooltip={false}
+              step={0.1}
-            className="slider-css"
+              tooltip={false}
-            value={this.state.targetTemperature}
+              className="slider-css"
-            onChange={(event) => this.handleChange(event)}
+              value={this.state.targetTemperature}
-            onChangeComplete={() => this.setTargetTemperature()}
+              onChange={(event) => this.handleChange(event)}
-          />
+              onChangeComplete={() => this.setTargetTemperature()}
+            />
+            <Checkbox
+              style={{ padding: "0 .7rem" }}
+              label="Use external sensors"
+              name="external"
+              toggle
+              checked={this.props.stateOrDevice.useExternalSensors}
+              disabled={!this.props.tempSensorsInRoom}
+              onChange={(e, val) => this.handleCheckbox(val.checked)}
+            />
+          </React.Fragment>
         ) : null}
+
         <div style={stateTagContainer}>
           <span style={stateTag}>
             {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;

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,