Fix #1277: Should be able to slide brightness on a touchscreen

front/package.json

@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@gladysassistant/gladys-gateway-js": "^3.5.0",
-    "@gladysassistant/theme-optimized": "^1.0.2",
+    "@gladysassistant/theme-optimized": "^1.0.3",
     "@jaames/iro": "^5.5.2",
     "@yaireo/tagify": "^4.5.0",
     "axios": "^0.21.1",

front/src/actions/dashboard/boxes/devicesInRoom.js

@@ -3,6 +3,7 @@ import createBoxActions from '../boxActions';
 import createDeviceActions from '../../device';
 import update from 'immutability-helper';
 import get from 'get-value';
+import debounce from 'debounce';
 const { DEVICE_FEATURE_TYPES, DEVICE_FEATURE_CATEGORIES } = require('../../../../../server/utils/constants');
 
 const BOX_KEY = 'DevicesInRoom';
@@ -76,8 +77,38 @@ function createActions(store) {
       });
       await Promise.all(promises);
     },
+    async setValueDevice(state, deviceFeatureSelector, action) {
+      await deviceActions.setValue(state, deviceFeatureSelector, action);
+    },
+    async updateValueWithDebounce(state, x, y, device, deviceFeature, deviceIndex, featureIndex, action) {
+      const data = boxActions.getBoxData(state, BOX_KEY, x, y);
+      const newData = update(data, {
+        room: {
+          devices: {
+            [deviceIndex]: {
+              features: {
+                [featureIndex]: {
+                  last_value: {
+                    $set: action
+                  },
+                  last_value_changed: {
+                    $set: new Date()
+                  }
+                }
+              }
+            }
+          }
+        }
+      });
+      const { hasBinaryLightDeviceFeature, roomLightStatus } = getLightStatus(newData.room);
+      boxActions.mergeBoxData(state, BOX_KEY, x, y, {
+        room: newData.room,
+        hasBinaryLightDeviceFeature,
+        roomLightStatus
+      });
+      await actions.setValueDeviceDebounce(state, deviceFeature.selector, action);
+    },
     async updateValue(state, x, y, device, deviceFeature, deviceIndex, featureIndex, action) {
-      await deviceActions.setValue(state, deviceFeature.selector, action);
       const data = boxActions.getBoxData(state, BOX_KEY, x, y);
       const newData = update(data, {
         room: {
@@ -103,6 +134,7 @@ function createActions(store) {
         hasBinaryLightDeviceFeature,
         roomLightStatus
       });
+      await deviceActions.setValue(state, deviceFeature.selector, action);
     },
     deviceFeatureWebsocketEvent(state, x, y, payload) {
       const data = boxActions.getBoxData(state, BOX_KEY, x, y);
@@ -150,6 +182,7 @@ function createActions(store) {
       }
     }
   };
+  actions.setValueDeviceDebounce = debounce(actions.setValueDevice, 500);
   return Object.assign({}, actions, boxActions);
 }
 

front/src/components/boxs/device-in-room/DeviceList.jsx

@@ -3,7 +3,13 @@ import RoomCard from './RoomCard';
 const DeviceList = ({ children, ...props }) => (
   <div class="card-columns">
     {props.rooms.map((room, index) => (
-      <RoomCard room={room} roomIndex={index} updateValue={props.updateValue} collapseRoom={props.collapseRoom} />
+      <RoomCard
+        room={room}
+        roomIndex={index}
+        updateValue={props.updateValue}
+        updateValueWithDebounce={props.updateValueWithDebounce}
+        collapseRoom={props.collapseRoom}
+      />
     ))}
   </div>
 );

front/src/components/boxs/device-in-room/DevicesInRoomsBox.jsx

@@ -7,10 +7,6 @@ import get from 'get-value';
 
 import DeviceRow from './DeviceRow';
 
-const cardStyle = {
-  maxHeight: '20rem'
-};
-
 const minHeight = {
   minHeight: '6rem'
 };
@@ -42,14 +38,14 @@ const RoomCard = ({ children, ...props }) => {
         )}
       </div>
       {props.loading && (
-        <div class="card-body o-auto" style={cardStyle}>
+        <div class="card-body o-auto">
           <div class={props.loading ? 'dimmer active' : 'dimmer'}>
             <div class="loader" />
             <div class="dimmer-content">{props.loading && <div style={minHeight} />}</div>
           </div>
         </div>
       )}
-      <div class="table-responsive" style={cardStyle}>
+      <div class="table-responsive">
         <table class="table card-table table-vcenter">
           <tbody>
             {props.devices &&
@@ -69,6 +65,7 @@ const RoomCard = ({ children, ...props }) => {
                         deviceIndex={deviceIndex}
                         deviceFeatureIndex={deviceFeatureIndex}
                         updateValue={props.updateValue}
+                        updateValueWithDebounce={props.updateValueWithDebounce}
                       />
                     )
                 )

front/src/components/boxs/device-in-room/RoomCard.jsx

@@ -29,6 +29,7 @@ const RoomCard = ({ children, ...props }) => {
                   deviceIndex={deviceIndex}
                   deviceFeatureIndex={deviceFeatureIndex}
                   updateValue={props.updateValue}
+                  updateValueWithDebounce={props.updateValueWithDebounce}
                 />
               ))
             )}

front/src/components/boxs/device-in-room/device-features/LightTemperatureDeviceFeature.jsx

@@ -2,7 +2,7 @@ import { getDeviceName } from './utils';
 
 const LightTemperatureDeviceType = ({ children, ...props }) => {
   function updateValue(e) {
-    props.updateValue(
+    props.updateValueWithDebounce(
       props.x,
       props.y,
       props.device,
@@ -30,7 +30,7 @@ const LightTemperatureDeviceType = ({ children, ...props }) => {
             type="range"
             value={props.deviceFeature.last_value}
             onChange={updateValue}
-            class="form-control custom-range light-temperature"
+            class="custom-range light-temperature"
             step="1"
             min={props.deviceFeature.min}
             max={props.deviceFeature.max}

front/src/components/boxs/device-in-room/device-features/MultiLevelDeviceFeature.jsx

@@ -5,7 +5,7 @@ import { DeviceFeatureCategoriesIcon } from '../../../../utils/consts';
 
 const MultiLevelDeviceType = ({ children, ...props }) => {
   function updateValue(e) {
-    props.updateValue(
+    props.updateValueWithDebounce(
       props.x,
       props.y,
       props.device,
@@ -39,7 +39,7 @@ const MultiLevelDeviceType = ({ children, ...props }) => {
             type="range"
             value={props.deviceFeature.last_value}
             onChange={updateValue}
-            class="form-control custom-range"
+            class="custom-range"
             step="1"
             min={props.deviceFeature.min}
             max={props.deviceFeature.max}

front/src/components/boxs/device-in-room/device-features/style.css

@@ -1,18 +1,18 @@
 .deviceRowPopover {
-    top: auto;
+  top: auto;
 }
 
 /* Chrome */
-input[type=range][class~=light-temperature]::-webkit-slider-runnable-track {
-    background: linear-gradient(to right, rgb(178, 212, 251), rgb(243, 166, 60));
+input[type='range'][class~='light-temperature']::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, rgb(178, 212, 251), rgb(243, 166, 60));
 }
 
 /* Firefox */
-input[type=range][class~=light-temperature]::-moz-range-progress {
-    background: linear-gradient(to right, rgb(178, 212, 251), rgb(243, 166, 60));
+input[type='range'][class~='light-temperature']::-moz-range-progress {
+  background: linear-gradient(to right, rgb(178, 212, 251), rgb(243, 166, 60));
 }
 
 /* Edge */
-input[type=range][class~=light-temperature]::-ms-fill-lower {
-    background: linear-gradient(to right, rgb(178, 212, 251), rgb(243, 166, 60));
-}
+input[type='range'][class~='light-temperature']::-ms-fill-lower {
+  background: linear-gradient(to right, rgb(178, 212, 251), rgb(243, 166, 60));
+}