User can define the threshold of the room humitidy

front/package.json

@@ -75,6 +75,7 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-dnd-touch-backend": "^16.0.1",
     "react-select": "^4.3.1",
+    "react-slider": "^2.0.6",
     "unistore": "^3.5.2",
     "useragent-parser-js": "^1.0.3",
     "uuid": "^3.4.0"

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

@@ -1,8 +1,11 @@
 import { Component } from 'preact';
 import { Text } from 'preact-i18n';
 import BaseEditBox from '../baseEditBox';
+import ReactSlider from 'react-slider';
 
+import { DEFAULT_VALUE_HUMIDITY } from '../../../../../server/utils/constants';
 import RoomSelector from '../../house/RoomSelector';
+import cx from 'classnames';
 
 const updateBoxRoom = (updateBoxRoomFunc, x, y) => room => {
   updateBoxRoomFunc(x, y, room.selector);
@@ -19,6 +22,35 @@ const EditRoomHumidityBox = ({ 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.humidity_use_custom_value || false}
+          onChange={props.updateBoxUseCustomValue}
+        />
+        <Text id="dashboard.boxes.humidityInRoom.thresholdsLabel" />
+      </label>
+    </div>
+
+    <div class="form-group">
+      <ReactSlider
+        className={cx('humidity-slider', {
+          'opacity-60': !(props.box.humidity_use_custom_value || false)
+        })}
+        thumbClassName="humidity-slider-thumb"
+        trackClassName="humidity-slider-track"
+        defaultValue={[props.humidityMin, props.humidityMax]}
+        renderThumb={(props, state) => <div {...props}>{state.valueNow}%</div>}
+        pearling
+        minDistance={10}
+        onAfterChange={props.updateBoxValue}
+        value={[props.humidityMin, props.humidityMax]}
+        disabled={!(props.box.humidity_use_custom_value || false)}
+      />
+    </div>
   </BaseEditBox>
 );
 
@@ -28,8 +60,46 @@ class EditRoomHumidityBoxComponent extends Component {
       room: selector
     });
   };
+
+  updateBoxUseCustomValue = e => {
+    this.props.updateBoxConfig(this.props.x, this.props.y, {
+      humidity_use_custom_value: e.target.checked
+    });
+  };
+
+  updateBoxValue = values => {
+    this.props.updateBoxConfig(this.props.x, this.props.y, {
+      humidity_min: values[0],
+      humidity_max: values[1]
+    });
+  };
+
   render(props, {}) {
-    return <EditRoomHumidityBox {...props} updateBoxRoom={this.updateBoxRoom} />;
+    let humidity_min = this.props.box.humidity_min;
+    let humidity_max = this.props.box.humidity_max;
+
+    if (!this.props.box.humidity_use_custom_value) {
+      humidity_min = DEFAULT_VALUE_HUMIDITY.MINIMUM;
+      humidity_max = DEFAULT_VALUE_HUMIDITY.MAXIMUM;
+    }
+
+    if (isNaN(humidity_min)) {
+      humidity_min = DEFAULT_VALUE_HUMIDITY.MINIMUM;
+    }
+    if (isNaN(humidity_max)) {
+      humidity_max = DEFAULT_VALUE_HUMIDITY.MAXIMUM;
+    }
+
+    return (
+      <EditRoomHumidityBox
+        {...props}
+        updateBoxRoom={this.updateBoxRoom}
+        updateBoxUseCustomValue={this.updateBoxUseCustomValue}
+        updateBoxValue={this.updateBoxValue}
+        humidityMin={humidity_min}
+        humidityMax={humidity_max}
+      />
+    );
   }
 }
 

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

@@ -5,25 +5,32 @@ import get from 'get-value';
 
 import actions from '../../../actions/dashboard/boxes/humidityInRoom';
 import { DASHBOARD_BOX_STATUS_KEY, DASHBOARD_BOX_DATA_KEY } from '../../../utils/consts';
-import { WEBSOCKET_MESSAGE_TYPES } from '../../../../../server/utils/constants';
+import { DEFAULT_VALUE_HUMIDITY, WEBSOCKET_MESSAGE_TYPES } from '../../../../../server/utils/constants';
 
 const isNotNullOrUndefined = value => value !== undefined && value !== null;
 
 const RoomHumidityBox = ({ children, ...props }) => (
   <div class="card p-3">
     <div class="d-flex align-items-center">
-      {props.humidity > 45 && props.humidity < 60 && (
-        <span class="stamp stamp-md bg-green mr-3">
+      {isNotNullOrUndefined(props.humidity) &&
+        props.humidity >= props.humidityMin &&
+        props.humidity <= props.humidityMax && (
+          <span class="stamp stamp-md bg-green mr-3">
+            <i class="fe fe-droplet" />
+          </span>
+        )}
+      {isNotNullOrUndefined(props.humidity) && props.humidity < props.humidityMin && (
+        <span class="stamp stamp-md bg-yellow mr-3">
           <i class="fe fe-droplet" />
         </span>
       )}
-      {props.humidity <= 45 && (
-        <span class="stamp stamp-md bg-yellow mr-3">
+      {isNotNullOrUndefined(props.humidity) && props.humidity > props.humidityMax && (
+        <span class="stamp stamp-md bg-blue mr-3">
           <i class="fe fe-droplet" />
         </span>
       )}
-      {props.humidity >= 60 && (
-        <span class="stamp stamp-md bg-blue mr-3">
+      {!isNotNullOrUndefined(props.humidity) && (
+        <span class="stamp stamp-md bg-red mr-3">
           <i class="fe fe-droplet" />
         </span>
       )}
@@ -74,8 +81,36 @@ class RoomHumidityBoxComponent extends Component {
     const boxStatus = get(props, `${DASHBOARD_BOX_STATUS_KEY}HumidityInRoom.${props.x}_${props.y}`);
     const humidity = get(boxData, 'room.humidity.humidity');
     const unit = get(boxData, 'room.humidity.unit');
+
+    const humidity_use_custom_value = get(props, 'box.humidity_use_custom_value');
+    let humidity_min = get(props, 'box.humidity_min');
+    let humidity_max = get(props, 'box.humidity_max');
+
+    if (!humidity_use_custom_value) {
+      humidity_min = DEFAULT_VALUE_HUMIDITY.MINIMUM;
+      humidity_max = DEFAULT_VALUE_HUMIDITY.MAXIMUM;
+    }
+
+    if (isNaN(humidity_min)) {
+      humidity_min = DEFAULT_VALUE_HUMIDITY.MINIMUM;
+    }
+    if (isNaN(humidity_max)) {
+      humidity_max = DEFAULT_VALUE_HUMIDITY.MAXIMUM;
+    }
+
     const roomName = get(boxData, 'room.name');
-    return <RoomHumidityBox {...props} humidity={humidity} unit={unit} boxStatus={boxStatus} roomName={roomName} />;
+    return (
+      <RoomHumidityBox
+        {...props}
+        humidity={humidity}
+        unit={unit}
+        boxStatus={boxStatus}
+        roomName={roomName}
+        useCustomValue={humidity_use_custom_value}
+        humidityMin={humidity_min}
+        humidityMax={humidity_max}
+      />
+    );
   }
 }
 

front/src/components/house/RoomSelector.jsx

@@ -70,7 +70,18 @@ class RoomSelector extends Component {
   }
 
   render({}, { selectedRoom, houseOptions }) {
-    return <Select value={selectedRoom} options={houseOptions} onChange={this.updateSelection} maxMenuHeight={220} />;
+    return (
+      <Select
+        value={selectedRoom}
+        options={houseOptions}
+        onChange={this.updateSelection}
+        maxMenuHeight={220}
+        styles={{
+          // Fixes the overlapping problem
+          menu: provided => ({ ...provided, zIndex: 100 })
+        }}
+      />
+    );
   }
 }