Dashboard: User can define the thresholds of the room temperature (#1888

)

front/src/components/boxs/room-humidity/RoomHumidity.jsx

@@ -30,7 +30,7 @@ const RoomHumidityBox = ({ children, ...props }) => (
         </span>
       )}
       {!isNotNullOrUndefined(props.humidity) && (
-        <span class="stamp stamp-md bg-red mr-3">
+        <span class="stamp stamp-md bg-warning mr-3">
           <i class="fe fe-droplet" />
         </span>
       )}

front/src/components/boxs/room-temperature/EditRoomTemperatureBox.jsx

@@ -2,14 +2,18 @@ import { Component } from 'preact';
 import { connect } from 'unistore/preact';
 import { Text } from 'preact-i18n';
 import BaseEditBox from '../baseEditBox';
+import ReactSlider from 'react-slider';
 
+import { DEFAULT_VALUE_TEMPERATURE, DEVICE_FEATURE_UNITS } from '../../../../../server/utils/constants';
 import RoomSelector from '../../house/RoomSelector';
+import cx from 'classnames';
+import { celsiusToFahrenheit, fahrenheitToCelsius } from '../../../../../server/utils/units';
 
 const updateBoxRoom = (updateBoxRoomFunc, x, y) => room => {
   updateBoxRoomFunc(x, y, room.selector);
 };
 
-const EditRoomTemperatureBox = ({ children, ...props }) => (
+const EditRoomTemperatureBox = ({ children, unit, ...props }) => (
   <BaseEditBox {...props} titleKey="dashboard.boxTitle.temperature-in-room">
     <div class="form-group">
       <label>
@@ -20,6 +24,41 @@ const EditRoomTemperatureBox = ({ children, ...props }) => (
         updateRoomSelection={updateBoxRoom(props.updateBoxRoom, props.x, props.y)}
       />
     </div>
+    <div className="form-group form-check">
+      <label className="form-check-label">
+        <input
+          type="checkbox"
+          id="useCustomValue"
+          className="form-check-input"
+          checked={props.box.temperature_use_custom_value || false}
+          onChange={props.updateBoxUseCustomValue}
+        />
+        <Text id="dashboard.boxes.temperatureInRoom.thresholdsLabel" />
+      </label>
+    </div>
+    <div class="form-group">
+      <ReactSlider
+        className={cx('temperature-slider', {
+          'opacity-60': !(props.box.temperature_use_custom_value || false)
+        })}
+        thumbClassName="temperature-slider-thumb"
+        trackClassName="temperature-slider-track"
+        defaultValue={[props.temperatureMin, props.temperatureMax]}
+        renderThumb={(props, state) => (
+          <div {...props}>
+            <Text id="global.degreeValue" fields={{ value: state.valueNow }} />
+            <Text id={`global.${unit}`} />
+          </div>
+        )}
+        pearling
+        minDistance={10}
+        max={unit === DEVICE_FEATURE_UNITS.CELSIUS ? 50 : 122}
+        min={unit === DEVICE_FEATURE_UNITS.CELSIUS ? -20 : -4}
+        onAfterChange={props.updateBoxValue}
+        value={[props.temperatureMin, props.temperatureMax]}
+        disabled={!(props.box.temperature_use_custom_value || false)}
+      />
+    </div>
   </BaseEditBox>
 );
 
@@ -29,9 +68,63 @@ class EditRoomTemperatureBoxComponent extends Component {
       room
     });
   };
+
+  updateBoxUseCustomValue = e => {
+    this.props.updateBoxConfig(this.props.x, this.props.y, {
+      temperature_use_custom_value: e.target.checked
+    });
+  };
+
+  updateBoxValue = values => {
+    let temperature_min = values[0];
+    let temperature_max = values[1];
+
+    if (this.props.user.temperature_unit_preference === DEVICE_FEATURE_UNITS.FAHRENHEIT) {
+      temperature_min = fahrenheitToCelsius(temperature_min);
+      temperature_max = fahrenheitToCelsius(temperature_max);
+    }
+
+    this.props.updateBoxConfig(this.props.x, this.props.y, {
+      temperature_min,
+      temperature_max
+    });
+  };
+
   render(props, {}) {
-    return <EditRoomTemperatureBox {...props} updateBoxRoom={this.updateBoxRoom} />;
+    let temperature_min = this.props.box.temperature_min;
+    let temperature_max = this.props.box.temperature_max;
+
+    const unit = this.props.user.temperature_unit_preference;
+
+    if (!this.props.box.temperature_use_custom_value) {
+      temperature_min = DEFAULT_VALUE_TEMPERATURE.MINIMUM;
+      temperature_max = DEFAULT_VALUE_TEMPERATURE.MAXIMUM;
+    }
+
+    if (isNaN(temperature_min)) {
+      temperature_min = DEFAULT_VALUE_TEMPERATURE.MINIMUM;
+    }
+    if (isNaN(temperature_max)) {
+      temperature_max = DEFAULT_VALUE_TEMPERATURE.MAXIMUM;
+    }
+
+    if (this.props.user.temperature_unit_preference === DEVICE_FEATURE_UNITS.FAHRENHEIT) {
+      temperature_min = celsiusToFahrenheit(temperature_min);
+      temperature_max = celsiusToFahrenheit(temperature_max);
+    }
+
+    return (
+      <EditRoomTemperatureBox
+        {...props}
+        updateBoxRoom={this.updateBoxRoom}
+        updateBoxUseCustomValue={this.updateBoxUseCustomValue}
+        updateBoxValue={this.updateBoxValue}
+        temperatureMin={temperature_min}
+        temperatureMax={temperature_max}
+        unit={unit}
+      />
+    );
   }
 }
 
-export default connect('', {})(EditRoomTemperatureBoxComponent);
+export default connect('user', {})(EditRoomTemperatureBoxComponent);

front/src/components/boxs/room-temperature/RoomTemperature.jsx

@@ -5,24 +5,49 @@ import get from 'get-value';
 
 import actions from '../../../actions/dashboard/boxes/temperatureInRoom';
 import { DASHBOARD_BOX_STATUS_KEY, DASHBOARD_BOX_DATA_KEY } from '../../../utils/consts';
-import { WEBSOCKET_MESSAGE_TYPES } from '../../../../../server/utils/constants';
+import {
+  DEFAULT_VALUE_TEMPERATURE,
+  DEVICE_FEATURE_UNITS,
+  WEBSOCKET_MESSAGE_TYPES
+} from '../../../../../server/utils/constants';
+import { celsiusToFahrenheit } from '../../../../../server/utils/units';
 
 const isNotNullOrUndefined = value => value !== undefined && value !== null;
 
 const RoomTemperatureBox = ({ children, ...props }) => (
   <div class="card p-3">
     <div class="d-flex align-items-center">
-      <span class="stamp stamp-md bg-blue mr-3">
-        <i class="fe fe-thermometer" />
-      </span>
+      {isNotNullOrUndefined(props.temperature) &&
+        props.temperature >= props.temperatureMin &&
+        props.temperature <= props.temperatureMax && (
+          <span class="stamp stamp-md bg-green mr-3">
+            <i class="fe fe-thermometer" />
+          </span>
+        )}
+      {isNotNullOrUndefined(props.temperature) && props.temperature < props.temperatureMin && (
+        <span class="stamp stamp-md bg-blue mr-3">
+          <i class="fe fe-thermometer" />
+        </span>
+      )}
+      {isNotNullOrUndefined(props.temperature) && props.temperature > props.temperatureMax && (
+        <span class="stamp stamp-md bg-red mr-3">
+          <i class="fe fe-thermometer" />
+        </span>
+      )}
+      {!isNotNullOrUndefined(props.temperature) && (
+        <span class="stamp stamp-md bg-warning mr-3">
+          <i class="fe fe-thermometer" />
+        </span>
+      )}
+
       <div>
-        {props.valued && (
+        {isNotNullOrUndefined(props.temperature) && (
           <h4 class="m-0">
             <Text id="global.degreeValue" fields={{ value: Number(props.temperature).toFixed(1) }} />
             <Text id={`global.${props.unit}`} />
           </h4>
         )}
-        {!props.valued && (
+        {!isNotNullOrUndefined(props.temperature) && (
           <p class="m-0">
             <Text id="dashboard.boxes.temperatureInRoom.noTemperatureRecorded" />
           </p>
@@ -64,7 +89,29 @@ class RoomTemperatureBoxComponent extends Component {
     const temperature = get(boxData, 'room.temperature.temperature');
     const unit = get(boxData, 'room.temperature.unit');
     const roomName = get(boxData, 'room.name');
-    const valued = isNotNullOrUndefined(temperature);
+
+    const temperature_use_custom_value = get(props, 'box.temperature_use_custom_value');
+    let temperature_min = get(props, 'box.temperature_min');
+    let temperature_max = get(props, 'box.temperature_max');
+
+    if (!temperature_use_custom_value) {
+      temperature_min = DEFAULT_VALUE_TEMPERATURE.MINIMUM;
+      temperature_max = DEFAULT_VALUE_TEMPERATURE.MAXIMUM;
+    }
+
+    if (isNaN(temperature_min)) {
+      temperature_min = DEFAULT_VALUE_TEMPERATURE.MINIMUM;
+    }
+    if (isNaN(temperature_max)) {
+      temperature_max = DEFAULT_VALUE_TEMPERATURE.MAXIMUM;
+    }
+
+    console.log('unit', unit);
+
+    if (unit === DEVICE_FEATURE_UNITS.FAHRENHEIT) {
+      temperature_min = celsiusToFahrenheit(temperature_min);
+      temperature_max = celsiusToFahrenheit(temperature_min);
+    }
 
     return (
       <RoomTemperatureBox
@@ -73,7 +120,9 @@ class RoomTemperatureBoxComponent extends Component {
         unit={unit}
         boxStatus={boxStatus}
         roomName={roomName}
-        valued={valued}
+        useCustomValue={temperature_use_custom_value}
+        temperatureMin={temperature_min}
+        temperatureMax={temperature_max}
       />
     );
   }

front/src/config/i18n/en.json

@@ -253,7 +253,8 @@
       },
       "temperatureInRoom": {
         "editRoomLabel": "Select the room you want to display here.",
-        "noTemperatureRecorded": "No temperature recorded recently."
+        "noTemperatureRecorded": "No temperature recorded recently.",
+        "thresholdsLabel": "Configure custom thresholds"
       },
       "humidityInRoom": {
         "editRoomLabel": "Select the room you want to display here.",

front/src/config/i18n/fr.json

@@ -253,7 +253,8 @@
       },
       "temperatureInRoom": {
         "editRoomLabel": "Sélectionnez la pièce que vous souhaitez afficher ici.",
-        "noTemperatureRecorded": "Aucune température enregistrée récemment."
+        "noTemperatureRecorded": "Aucune température enregistrée récemment.",
+        "thresholdsLabel": "Configurer des seuils personnalisés"
       },
       "humidityInRoom": {
         "editRoomLabel": "Sélectionnez la pièce que vous souhaitez afficher ici.",

front/src/style/index.css

@@ -323,7 +323,6 @@ body {
   font-size: 0.9em;
   text-align: center;
   background-color: #fafafa;
-  #color: white;
   cursor: pointer;
   border: 1px solid gray;
   border-radius: 10px;
@@ -358,3 +357,49 @@ body {
   height: 24px;
   line-height: 22px;
 }
+
+
+.temperature-slider {
+  width: 100%;
+  max-width: 500px;
+  height: 30px;
+}
+
+.temperature-slider-thumb {
+  font-size: 0.9em;
+  text-align: center;
+  background-color: #fafafa;
+  cursor: pointer;
+  border: 1px solid gray;
+  border-radius: 10px;
+  box-sizing: border-box;
+}
+
+.temperature-slider-thumb.active {
+  border: 1px solid #467fcf;
+}
+
+.temperature-slider-track {
+  position: relative;
+  background: #467fcf;
+}
+
+.temperature-slider-track-1 {
+  background: #5eba00;
+}
+
+.temperature-slider-track-2 {
+  background: #cd201f;
+}
+
+.temperature-slider .temperature-slider-track {
+  top: 10px;
+  height: 10px;
+}
+
+.temperature-slider .temperature-slider-thumb {
+  top: 3px;
+  width: 41px;
+  height: 24px;
+  line-height: 22px;
+}

server/models/dashboard.js

@@ -32,6 +32,9 @@ const boxesSchema = Joi.array().items(
       humidity_use_custom_value: Joi.boolean(),
       humidity_min: Joi.number(),
       humidity_max: Joi.number(),
+      temperature_use_custom_value: Joi.boolean(),
+      temperature_min: Joi.number(),
+      temperature_max: Joi.number(),
     }),
   ),
 );

server/utils/constants.js

@@ -949,6 +949,11 @@ const DEFAULT_VALUE_HUMIDITY = {
   MAXIMUM: 60,
 };
 
+const DEFAULT_VALUE_TEMPERATURE = {
+  MINIMUM: 17,
+  MAXIMUM: 24,
+};
+
 const createList = (obj) => {
   const list = [];
   Object.keys(obj).forEach((key) => {
@@ -1046,3 +1051,4 @@ module.exports.JOB_ERROR_TYPES = JOB_ERROR_TYPES;
 module.exports.JOB_ERROR_TYPES_LIST = JOB_ERROR_TYPES_LIST;
 
 module.exports.DEFAULT_VALUE_HUMIDITY = DEFAULT_VALUE_HUMIDITY;
+module.exports.DEFAULT_VALUE_TEMPERATURE = DEFAULT_VALUE_TEMPERATURE;