Merge branch 'zwavejs2mqtt' of https://github.com/rpochet/Gladys into…

… zwavejs2mqtt

front/package.json

@@ -76,7 +76,6 @@
     "react-dnd-touch-backend": "^16.0.1",
     "react-select": "^4.3.1",
     "react-slider": "^2.0.6",
-    "semver": "^7.3.8",
     "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 })
+        }}
+      />
+    );
   }
 }
 

front/src/config/i18n/en.json

@@ -257,7 +257,8 @@
       },
       "humidityInRoom": {
         "editRoomLabel": "Select the room you want to display here.",
-        "noHumidityRecorded": "No humidity recorded recently."
+        "noHumidityRecorded": "No humidity recorded recently.",
+        "thresholdsLabel": "Configure custom thresholds"
       },
       "userPresence": {
         "description": "Display who's at home and who is not. You can change the user presence in scenes, and select here the users displayed.",
@@ -838,7 +839,7 @@
     },
     "openWeather": {
       "title": "OpenWeather API",
-      "description": "Display the weather in your town on your dasboard.",
+      "description": "Display the weather in your town on your dashboard.",
       "introduction": "This integration helps you integrate with OpenWeather API to get the weather in Gladys.",
       "instructions": "You first need to create an account on OpenWeather API website: <a href=\"https://openweathermap.org/api\">https://openweathermap.org/api</a>.",
       "apiKeyLabel": "Then, enter your API key here:",

front/src/config/i18n/fr.json

@@ -257,7 +257,8 @@
       },
       "humidityInRoom": {
         "editRoomLabel": "Sélectionnez la pièce que vous souhaitez afficher ici.",
-        "noHumidityRecorded": "Aucune mesure d'humidité enregistrée récemment."
+        "noHumidityRecorded": "Aucune mesure d'humidité enregistrée récemment.",
+        "thresholdsLabel": "Configurer des seuils personnalisés"
       },
       "userPresence": {
         "description": "Cette box affiche qui est à la maison et qui ne l'est pas. Vous pouvez changer la présence d'un utilisateur dans les scènes, et sélectionner ici quels utilisateurs afficher.",

front/src/style/index.css

@@ -307,3 +307,54 @@ body {
 .react-clock__second-hand {
   transition: transform cubic-bezier(0.68, 0, 0.27, 1.55) 0.2s;
 }
+
+.opacity-60 {
+  opacity: 60%;
+}
+
+
+.humidity-slider {
+  width: 100%;
+  max-width: 500px;
+  height: 30px;
+}
+
+.humidity-slider-thumb {
+  font-size: 0.9em;
+  text-align: center;
+  background-color: #fafafa;
+  #color: white;
+  cursor: pointer;
+  border: 1px solid gray;
+  border-radius: 10px;
+  box-sizing: border-box;
+}
+
+.humidity-slider-thumb.active {
+  border: 1px solid #467fcf;
+}
+
+.humidity-slider-track {
+  position: relative;
+  background: #f1c40f;
+}
+
+.humidity-slider-track-1 {
+  background: #5eba00;
+}
+
+.humidity-slider-track-2 {
+  background: #467fcf ;
+}
+
+.humidity-slider .humidity-slider-track {
+  top: 10px;
+  height: 10px;
+}
+
+.humidity-slider .humidity-slider-thumb {
+  top: 3px;
+  width: 41px;
+  height: 24px;
+  line-height: 22px;
+}

server/api/controllers/user.controller.js

@@ -2,7 +2,7 @@ const asyncMiddleware = require('../middlewares/asyncMiddleware');
 const logger = require('../../utils/logger');
 const { BadParameters } = require('../../utils/coreErrors');
 
-const LOGIN_SESSION_VALIDITY_IN_SECONDS = 30 * 24 * 60 * 60;
+const LOGIN_SESSION_VALIDITY_IN_SECONDS = 365 * 24 * 60 * 60;
 
 module.exports = function UserController(gladys) {
   /**

server/models/dashboard.js

@@ -29,6 +29,9 @@ const boxesSchema = Joi.array().items(
       camera_latency: Joi.string(),
       camera_live_auto_start: Joi.boolean(),
       scenes: Joi.array().items(Joi.string()),
+      humidity_use_custom_value: Joi.boolean(),
+      humidity_min: Joi.number(),
+      humidity_max: Joi.number(),
     }),
   ),
 );

server/utils/constants.js

@@ -977,6 +977,11 @@ const JOB_ERROR_TYPES = {
   UNKNOWN_ERROR: 'unknown-error',
 };
 
+const DEFAULT_VALUE_HUMIDITY = {
+  MINIMUM: 45,
+  MAXIMUM: 60,
+};
+
 const createList = (obj) => {
   const list = [];
   Object.keys(obj).forEach((key) => {
@@ -1074,3 +1079,5 @@ module.exports.JOB_STATUS = JOB_STATUS;
 module.exports.JOB_STATUS_LIST = JOB_STATUS_LIST;
 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;