Scene: Add shutter value selector to control device action (#2085)

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

@@ -1,9 +1,6 @@
 import get from 'get-value';
-import { Text } from 'preact-i18n';
-import cx from 'classnames';
-
 import { DeviceFeatureCategoriesIcon } from '../../../../utils/consts';
-import { COVER_STATE } from '../../../../../../server/utils/constants';
+import ShutterButtons from '../../../device/ShutterButtons';
 
 const CoverDeviceFeature = ({ children, ...props }) => {
   const { deviceFeature } = props;
@@ -13,18 +10,6 @@ const CoverDeviceFeature = ({ children, ...props }) => {
     props.updateValueWithDebounce(deviceFeature, value);
   }
 
-  function open() {
-    updateValue(COVER_STATE.OPEN);
-  }
-
-  function close() {
-    updateValue(COVER_STATE.CLOSE);
-  }
-
-  function stop() {
-    updateValue(COVER_STATE.STOP);
-  }
-
   return (
     <tr>
       <td>
@@ -34,30 +19,7 @@ const CoverDeviceFeature = ({ children, ...props }) => {
 
       <td class="py-0">
         <div class="d-flex justify-content-end">
-          <div class="btn-group" role="group">
-            <button
-              class={cx('btn btn-sm btn-secondary', {
-                active: lastValue === COVER_STATE.OPEN
-              })}
-              onClick={open}
-            >
-              <Text id={`deviceFeatureAction.category.${category}.${type}`} plural={COVER_STATE.OPEN} />
-            </button>
-            <button
-              class={cx('btn btn-sm btn-secondary', 'fe', 'fe-pause', {
-                active: lastValue === COVER_STATE.STOP
-              })}
-              onClick={stop}
-            />
-            <button
-              class={cx('btn btn-sm', 'btn-secondary', {
-                active: lastValue === COVER_STATE.CLOSE
-              })}
-              onClick={close}
-            >
-              <Text id={`deviceFeatureAction.category.${category}.${type}`} plural={COVER_STATE.CLOSE} />
-            </button>
-          </div>
+          <ShutterButtons category={category} type={type} updateValue={updateValue} value={lastValue} isLive />
         </div>
       </td>
     </tr>

front/src/components/device/ShutterButtons.jsx

@@ -0,0 +1,58 @@
+import { Component } from 'preact';
+import { Text } from 'preact-i18n';
+import cx from 'classnames';
+
+import { COVER_STATE } from '../../../../server/utils/constants';
+
+class ShutterButtons extends Component {
+  open = () => {
+    this.props.updateValue(COVER_STATE.OPEN);
+  };
+
+  close = () => {
+    this.props.updateValue(COVER_STATE.CLOSE);
+  };
+
+  stop = () => {
+    this.props.updateValue(COVER_STATE.STOP);
+  };
+
+  render({ value, category, type, isLive = false }, {}) {
+    return (
+      <div class="btn-group" role="group">
+        <button
+          class={cx('btn btn-sm btn-secondary', {
+            active: value === COVER_STATE.OPEN
+          })}
+          onClick={this.open}
+        >
+          {value === COVER_STATE.OPEN && isLive ? (
+            <Text id={`deviceFeatureAction.category.${category}.stateLiveFinished`} plural={COVER_STATE.OPEN} />
+          ) : (
+            <Text id={`deviceFeatureAction.category.${category}.${type}`} plural={COVER_STATE.OPEN} />
+          )}
+        </button>
+        <button
+          class={cx('btn btn-sm btn-secondary', 'fe', 'fe-pause', {
+            active: value === COVER_STATE.STOP
+          })}
+          onClick={this.stop}
+        />
+        <button
+          class={cx('btn btn-sm', 'btn-secondary', {
+            active: value === COVER_STATE.CLOSE
+          })}
+          onClick={this.close}
+        >
+          {value === COVER_STATE.CLOSE && isLive ? (
+            <Text id={`deviceFeatureAction.category.${category}.stateLiveFinished`} plural={COVER_STATE.CLOSE} />
+          ) : (
+            <Text id={`deviceFeatureAction.category.${category}.${type}`} plural={COVER_STATE.CLOSE} />
+          )}
+        </button>
+      </div>
+    );
+  }
+}
+
+export default ShutterButtons;

front/src/config/i18n/de.json

@@ -2667,13 +2667,23 @@
   "deviceFeatureAction": {
     "category": {
       "shutter": {
+        "stateLiveFinished": {
+          "zero": "Stoppen",
+          "one": "Offen",
+          "other": "Geschlossen"
+        },
         "state": {
           "zero": "Stopp",
           "one": "Öffnen",
           "other": "Schließen"
         }
       },
       "curtain": {
+        "stateLiveFinished": {
+          "zero": "Stoppen",
+          "one": "Offen",
+          "other": "Geschlossen"
+        },
         "state": {
           "zero": "Stopp",
           "one": "Öffnen",

front/src/config/i18n/en.json

@@ -2667,13 +2667,23 @@
   "deviceFeatureAction": {
     "category": {
       "shutter": {
+        "stateLiveFinished": {
+          "zero": "Stop",
+          "one": "Open",
+          "other": "Closed"
+        },
         "state": {
           "zero": "Stop",
           "one": "Open",
           "other": "Close"
         }
       },
       "curtain": {
+        "stateLiveFinished": {
+          "zero": "Stop",
+          "one": "Open",
+          "other": "Closed"
+        },
         "state": {
           "zero": "Stop",
           "one": "Open",

front/src/config/i18n/fr.json

@@ -2667,13 +2667,23 @@
   "deviceFeatureAction": {
     "category": {
       "shutter": {
+        "stateLiveFinished": {
+          "zero": "Arrêter",
+          "one": "Ouvert",
+          "other": "Fermé"
+        },
         "state": {
           "zero": "Arrêter",
           "one": "Ouvrir",
           "other": "Fermer"
         }
       },
       "curtain": {
+        "stateLiveFinished": {
+          "zero": "Arrêter",
+          "one": "Ouvert",
+          "other": "Fermé"
+        },
         "state": {
           "zero": "Arrêter",
           "one": "Ouvrir",

front/src/routes/scene/edit-scene/actions/DeviceSetValue.jsx

@@ -7,11 +7,12 @@ import ColorPicker from '../../../../components/device/ColorPicker';
 import SelectDeviceFeature from '../../../../components/device/SelectDeviceFeature';
 import withIntlAsProp from '../../../../utils/withIntlAsProp';
 
-import { DEVICE_FEATURE_TYPES } from '../../../../../../server/utils/constants';
+import { DEVICE_FEATURE_CATEGORIES, DEVICE_FEATURE_TYPES } from '../../../../../../server/utils/constants';
 import TextWithVariablesInjected from '../../../../components/scene/TextWithVariablesInjected';
 
 import '../../../../components/boxs/device-in-room/device-features/style.css';
 import style from './DeviceSetValue.css';
+import ShutterButtons from '../../../../components/device/ShutterButtons';
 
 class DeviceSetValue extends Component {
   constructor(props) {
@@ -50,9 +51,9 @@ class DeviceSetValue extends Component {
     this.props.updateActionProperty(columnIndex, index, 'evaluate_value', undefined);
   };
 
-  handleNewColorValue = color => {
+  handleNewPureValue = value => {
     const { columnIndex, index } = this.props;
-    this.props.updateActionProperty(columnIndex, index, 'value', color);
+    this.props.updateActionProperty(columnIndex, index, 'value', value);
     this.props.updateActionProperty(columnIndex, index, 'evaluate_value', undefined);
   };
 
@@ -124,7 +125,23 @@ class DeviceSetValue extends Component {
     }
 
     if (this.state.deviceFeature.type === DEVICE_FEATURE_TYPES.LIGHT.COLOR) {
-      return <ColorPicker value={this.props.action.value} updateValue={this.handleNewColorValue} />;
+      return <ColorPicker value={this.props.action.value} updateValue={this.handleNewPureValue} />;
+    }
+
+    if (
+      [DEVICE_FEATURE_TYPES.SHUTTER.STATE, DEVICE_FEATURE_TYPES.CURTAIN.STATE].includes(
+        this.state.deviceFeature.type
+      ) &&
+      [DEVICE_FEATURE_CATEGORIES.SHUTTER, DEVICE_FEATURE_CATEGORIES.CURTAIN].includes(this.state.deviceFeature.category)
+    ) {
+      return (
+        <ShutterButtons
+          value={this.props.action.value}
+          category={this.state.deviceFeature.category}
+          type={this.state.deviceFeature.type}
+          updateValue={this.handleNewPureValue}
+        />
+      );
     }
 
     return (