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

GladysAssistant · Sep 22, 2023 · 411f2cc · 411f2cc
2 parents 04456c1 + a49c4d5
commit 411f2cc
Show file tree

Hide file tree

Showing 18 changed files with 316 additions and 97 deletions.
diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/package.json b/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"

diff --git a/front/src/components/boxs/camera/Camera.jsx b/front/src/components/boxs/camera/Camera.jsx
@@ -7,6 +7,7 @@ import Hls from 'hls.js';
 import config from '../../../config';
 import { WEBSOCKET_MESSAGE_TYPES } from '../../../../../server/utils/constants';
 import get from 'get-value';
+import style from './style.css';
 
 const SEGMENT_DURATIONS_PER_LATENCY = {
   'ultra-low': 1,
@@ -270,8 +271,7 @@ class CameraBoxComponent extends Component {
         {image && <img class="card-img-top" src={`data:${image}`} alt={props.roomName} />}
         {error && (
           <div>
-            <p class="alert alert-danger">
-              <i class="fe fe-bell" />
+            <p class={style.noImageToShowError}>
               <span class="pl-2">
                 <Text id="dashboard.boxes.camera.noImageToShow" />
               </span>

diff --git a/front/src/components/boxs/camera/style.css b/front/src/components/boxs/camera/style.css
@@ -0,0 +1,12 @@
+.noImageToShowError {
+  background-color: #34495e;
+  color: white;
+  height: 244px;
+  padding: 12px;
+  padding-bottom: 0px;
+  margin-bottom: 0px;
+  display: table-cell;
+  vertical-align: middle;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
diff --git a/front/src/components/boxs/room-humidity/EditRoomHumidityBox.jsx b/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}
+      />
+    );
   }
 }