Dashboard: Add push button feature (#2165)

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

@@ -14,6 +14,7 @@ import ThermostatDeviceFeature from './device-features/ThermostatDeviceFeature';
 import AirConditioningModeDeviceFeature from './device-features/AirConditioningModeDeviceFeature';
 import PilotWireModeDeviceFeature from './device-features/PilotWireModeDeviceFeature';
 import LMHVolumeDeviceFeature from './device-features/LMHVolumeDeviceFeature';
+import PushDeviceFeature from './device-features/PushDeviceFeature';
 
 const ROW_TYPE_BY_FEATURE_TYPE = {
   [DEVICE_FEATURE_TYPES.LIGHT.BINARY]: BinaryDeviceFeature,
@@ -33,7 +34,8 @@ const ROW_TYPE_BY_FEATURE_TYPE = {
   [DEVICE_FEATURE_TYPES.HEATER.PILOT_WIRE_MODE]: PilotWireModeDeviceFeature,
   [DEVICE_FEATURE_TYPES.SIREN.LMH_VOLUME]: LMHVolumeDeviceFeature,
   [DEVICE_FEATURE_TYPES.SIREN.MELODY]: NumberDeviceFeature,
-  [DEVICE_FEATURE_TYPES.DURATION.DECIMAL]: MultiLevelDeviceFeature
+  [DEVICE_FEATURE_TYPES.DURATION.DECIMAL]: MultiLevelDeviceFeature,
+  [DEVICE_FEATURE_TYPES.BUTTON.PUSH]: PushDeviceFeature
 };
 
 const DeviceRow = ({ children, ...props }) => {

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

@@ -16,7 +16,8 @@ const SUPPORTED_FEATURE_TYPES = [
   DEVICE_FEATURE_TYPES.HEATER.PILOT_WIRE_MODE,
   DEVICE_FEATURE_TYPES.SIREN.LMH_VOLUME,
   DEVICE_FEATURE_TYPES.SIREN.MELODY,
-  DEVICE_FEATURE_TYPES.DURATION.DECIMAL
+  DEVICE_FEATURE_TYPES.DURATION.DECIMAL,
+  DEVICE_FEATURE_TYPES.BUTTON.PUSH
 ];
 
 export default SUPPORTED_FEATURE_TYPES;

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

@@ -0,0 +1,44 @@
+import { Component } from 'preact';
+import cx from 'classnames';
+import { Text } from 'preact-i18n';
+import style from './style.css';
+
+class PushDeviceComponent extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false
+    };
+  }
+  push = async () => {
+    await this.setState({ loading: true });
+    this.props.updateValue(this.props.deviceFeature, 1);
+    setTimeout(() => {
+      this.setState({ loading: false });
+    }, 350);
+  };
+
+  render(props, { loading }) {
+    return (
+      <tr>
+        <td>
+          <i class="fe fe-circle" />
+        </td>
+        <td>{props.rowName}</td>
+        <td class="text-right">
+          <button
+            onClick={this.push}
+            type="button"
+            class={cx('btn', 'btn-outline-success', 'btn-sm', style.btnLoading, {
+              'btn-loading': loading
+            })}
+          >
+            <i class="fe fe-circle" /> <Text id="dashboard.boxes.devicesInRoom.pushButton" />
+          </button>
+        </td>
+      </tr>
+    );
+  }
+}
+
+export default PushDeviceComponent;

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

@@ -47,3 +47,9 @@ input[type='range'][class~='light-temperature']::-ms-fill-lower {
     display: none;
   }
 }
+
+.btnLoading {
+  &::after {
+    border: 2px solid #5eba00;
+  }
+}

front/src/config/i18n/de.json

@@ -298,7 +298,8 @@
         "deviceTitle": "{{name}} - {{type}}",
         "addButton": "+",
         "substractButton": "-",
-        "motionDetected": "Bewegung erkannt"
+        "motionDetected": "Bewegung erkannt",
+        "pushButton": "Schieben"
       },
       "devices": {
         "editDeviceFeaturesLabel": "Wähle die Geräte aus, die du anzeigen möchtest:",
@@ -3017,7 +3018,8 @@
     },
     "button": {
       "shortCategoryName": "Schaltfläche",
-      "click": "Schaltfläche (Klick)"
+      "click": "Schaltfläche (Klick)",
+      "push": "Druckknopf"
     },
     "pressure-sensor": {
       "shortCategoryName": "Drucksensor",

front/src/config/i18n/en.json

@@ -298,7 +298,8 @@
         "deviceTitle": "{{name}} - {{type}}",
         "addButton": "+",
         "substractButton": "-",
-        "motionDetected": "Motion detected"
+        "motionDetected": "Motion detected",
+        "pushButton": "Push"
       },
       "devices": {
         "editDeviceFeaturesLabel": "Select the devices you want to display:",
@@ -3017,7 +3018,8 @@
     },
     "button": {
       "shortCategoryName": "Button",
-      "click": "Button (click)"
+      "click": "Button (click)",
+      "push": "Push button"
     },
     "pressure-sensor": {
       "shortCategoryName": "Pressure sensor",

front/src/config/i18n/fr.json

@@ -298,7 +298,8 @@
         "deviceTitle": "{{name}} - {{type}}",
         "addButton": "+",
         "substractButton": "-",
-        "motionDetected": "Mouvement détecté"
+        "motionDetected": "Mouvement détecté",
+        "pushButton": "Appuyer"
       },
       "devices": {
         "editDeviceFeaturesLabel": "Vous pouvez modifier le nom affiché ici :",
@@ -3017,7 +3018,8 @@
     },
     "button": {
       "shortCategoryName": "Bouton",
-      "click": "Clic bouton"
+      "click": "Clic bouton",
+      "push": "Bouton poussoir"
     },
     "pressure-sensor": {
       "shortCategoryName": "Capteur de pression",

front/src/routes/integration/all/mqtt/device-page/setup/index.js

@@ -43,6 +43,12 @@ class MqttDeviceSetupPage extends Component {
       defaultValues.keep_history = false;
     }
 
+    if (featureData[1] === DEVICE_FEATURE_TYPES.BUTTON.PUSH) {
+      defaultValues.min = 1;
+      defaultValues.max = 1;
+      defaultValues.read_only = false;
+    }
+
     const device = update(this.state.device, {
       features: {
         $push: [

front/src/utils/consts.js

@@ -270,7 +270,8 @@ export const DeviceFeatureCategoriesIcon = {
     [DEVICE_FEATURE_TYPES.CUBE.ROTATION]: 'rotate-cw'
   },
   [DEVICE_FEATURE_CATEGORIES.BUTTON]: {
-    [DEVICE_FEATURE_TYPES.BUTTON.CLICK]: 'circle'
+    [DEVICE_FEATURE_TYPES.BUTTON.CLICK]: 'circle',
+    [DEVICE_FEATURE_TYPES.BUTTON.PUSH]: 'circle'
   },
   [DEVICE_FEATURE_CATEGORIES.ENERGY_SENSOR]: {
     [DEVICE_FEATURE_TYPES.ENERGY_SENSOR.BINARY]: 'power',

server/utils/constants.js

@@ -556,6 +556,7 @@ const DEVICE_FEATURE_TYPES = {
   },
   BUTTON: {
     CLICK: 'click',
+    PUSH: 'push',
   },
   SIGNAL: {
     QUALITY: 'integer',