GladysAssistant · Pierre-Gilles · Nov 12, 2021 · Nov 9, 2021
diff --git a/front/src/components/device/UpdateDeviceForm.jsx b/front/src/components/device/UpdateDeviceForm.jsx
@@ -1,8 +1,8 @@
 import { Component } from 'preact';
 import { Text, Localizer } from 'preact-i18n';
-import { DeviceFeatureCategoriesIcon } from '../../utils/consts';
-import get from 'get-value';
+
 import { DEVICE_POLL_FREQUENCIES } from '../../../../server/utils/constants';
+import DeviceFeatures from './view/DeviceFeatures';
 
 const maxWidth = {
   maxWidth: '400px'
@@ -83,19 +83,7 @@ class UpdateDeviceForm extends Component {
           <label class="form-label">
             <Text id="editDeviceForm.featuresLabel" />
           </label>
-          <div class="tags">
-            {props.device &&
-              props.device.features &&
-              props.device.features.map(feature => (
-                <span class="tag">
-                  <Text id={`deviceFeatureCategory.${feature.category}.${feature.type}`} />
-                  <div class="tag-addon">
-                    <i class={`fe fe-${get(DeviceFeatureCategoriesIcon, `${feature.category}.${feature.type}`)}`} />
-                  </div>
-                </span>
-              ))}
-            {(!props.device.features || props.device.features.length === 0) && <Text id="editDeviceForm.noFeatures" />}
-          </div>
+          <DeviceFeatures features={props.device.features} />
         </div>
       </div>
     );

diff --git a/front/src/components/device/view/BatteryLevelFeature.jsx b/front/src/components/device/view/BatteryLevelFeature.jsx
@@ -0,0 +1,19 @@
+import cx from 'classnames';
+import { Text } from 'preact-i18n';
+
+const BatteryLevelFeature = ({ batteryLevel }) => (
+  <div
+    class={cx('tag', {
+      'tag-green': batteryLevel >= 25,
+      'tag-warning': batteryLevel < 25 && batteryLevel >= 10,
+      'tag-danger': batteryLevel < 10
+    })}
+  >
+    <Text id="global.percentValue" fields={{ value: batteryLevel }} />
+    <span class="tag-addon">
+      <i class="fe fe-battery" />
+    </span>
+  </div>
+);
+
+export default BatteryLevelFeature;
diff --git a/front/src/components/device/view/DeviceFeature.jsx b/front/src/components/device/view/DeviceFeature.jsx
@@ -0,0 +1,15 @@
+import get from 'get-value';
+import { Text } from 'preact-i18n';
+
+import { DeviceFeatureCategoriesIcon } from '../../../utils/consts';
+
+const DeviceFeature = ({ feature }) => (
+  <span class="tag">
+    <Text id={`deviceFeatureCategory.${feature.category}.${feature.type}`} />
+    <div class="tag-addon">
+      <i class={`fe fe-${get(DeviceFeatureCategoriesIcon, `${feature.category}.${feature.type}`)}`} />
+    </div>
+  </span>
+);
+
+export default DeviceFeature;
diff --git a/front/src/components/device/view/DeviceFeatures.jsx b/front/src/components/device/view/DeviceFeatures.jsx
@@ -0,0 +1,23 @@
+import { Text } from 'preact-i18n';
+
+import DeviceFeature from './DeviceFeature';
+
+const DeviceFeatures = ({ features = [] }) => {
+  if (features.length > 0) {
+    return (
+      <div class="tags device-features">
+        {features.map(feature => (
+          <DeviceFeature feature={feature} />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div class="font-italic device-features">
+      <Text id="device.noFeatures" />
+    </div>
+  );
+};
+
+export default DeviceFeatures;
diff --git a/front/src/config/demo.js b/front/src/config/demo.js
@@ -1918,6 +1918,7 @@ const data = {
       external_id: 'bluetooth:0011223341',
       service_id: 'a810b8db-6d04-4697-bed3-c4b72c996279',
       selector: 'bluetooth-0011223341',
+      features: [],
       params: [
         {
           name: 'loaded',
@@ -1930,6 +1931,7 @@ const data = {
       model: 'smlc9',
       external_id: 'bluetooth:0011223342',
       selector: 'bluetooth-0011223342',
+      features: [],
       params: [
         {
           name: 'loaded',
@@ -1988,6 +1990,7 @@ const data = {
     name: 'BLE Device 1',
     external_id: 'bluetooth:0011223341',
     selector: 'bluetooth-0011223341',
+    features: [],
     params: [
       {
         name: 'loaded',
@@ -2000,6 +2003,7 @@ const data = {
     model: 'smlc9',
     external_id: 'bluetooth:0011223342',
     selector: 'bluetooth-0011223342',
+    features: [],
     params: [
       {
         name: 'loaded',

diff --git a/front/src/config/i18n/en.json b/front/src/config/i18n/en.json
@@ -41,6 +41,9 @@
     "event": "Event",
     "noEventsInRange": "There are no events in this range."
   },
+  "device": {
+    "noFeatures": "No features"
+  },
   "login": {
     "title": "Gladys Assistant",
     "welcome": "Welcome",
@@ -433,7 +436,6 @@
         "noNameLabel": "No name",
         "roomLabel": "Room",
         "featuresLabel": "Features",
-        "noFeatures": "No features",
         "search": "Search devices",
         "connectButton": "Connect/Reconnect",
         "scanButton": "Scan network",
@@ -553,7 +555,6 @@
         "nameLabel": "Name",
         "roomLabel": "Room",
         "featuresLabel": "Features",
-        "noFeatures": "No features",
         "saveButton": "Save",
         "deleteButton": "Delete",
         "editButton": "Edit",
@@ -575,7 +576,6 @@
         "createDeviceInGladys": "Connect in Gladys",
         "features": "Features",
         "params": "Params",
-        "noFeatures": "No features",
         "nodeId": "Node",
         "zwaveNotConfiguredError": "Z-wave is not configured. Please select the USB port where you Z-Wave key is plugged in settings.",
         "createDeviceError": "There was an error while creating this device in Gladys.",
@@ -645,7 +645,6 @@
         "externalIdLabel": "External ID",
         "roomLabel": "Room",
         "featuresLabel": "Features",
-        "noFeatures": "No features",
         "saveButton": "Save",
         "deleteButton": "Delete",
         "returnButton": "Return back",
@@ -714,8 +713,7 @@
         "featuresLabel": "Features",
         "saveButton": "Save",
         "deleteButton": "Delete",
-        "editButton": "Edit details",
-        "noFeatures": "No features"
+        "editButton": "Edit details"
       },
       "setup": {
         "title": "Xiaomi devices not in Gladys",
@@ -812,7 +810,6 @@
         "title": "Bluetooth Devices",
         "search": "Search devices",
         "noDevices": "No Bluetooth devices added yet.",
-        "noFeatures": "No features",
         "nameLabel": "Name",
         "namePlaceholder": "Enter device name",
         "roomLabel": "Room",
@@ -821,7 +818,6 @@
         "modelLabel": "Model",
         "presenceSensorLabel": "Use this device as presence sensor",
         "featuresLabel": "Features",
-        "noFeatureDiscovered": "No features discovered.",
         "featureNamePlaceholder": "Enter feature name",
         "saveButton": "Save",
         "deleteButton": "Delete",
@@ -1717,7 +1713,6 @@
     "roomLabel": "Room",
     "featuresLabel": "Features",
     "featureCategoryLabel": "Category",
-    "noFeatures": "No features",
     "namePlaceholder": "Enter name",
     "externalIdLabel": "External ID",
     "externalIdPlaceholder": "Enter external ID",

diff --git a/front/src/config/i18n/fr.json b/front/src/config/i18n/fr.json
@@ -41,6 +41,9 @@
     "event": "événement",
     "noEventsInRange": "Aucuns évènements trouvés dans cette période."
   },
+  "device": {
+    "noFeatures": "Aucune fonctionnalité"
+  },
   "login": {
     "title": "Gladys Assistant",
     "welcome": "Bienvenue",
@@ -381,7 +384,6 @@
         "title": "Appareils Bluetooth",
         "search": "Chercher un appareil",
         "noDevices": "Aucun appareil Bluetooth n'a encore été ajouté.",
-        "noFeatures": "Aucune fonctionnalité",
         "nameLabel": "Nom de l'appareil",
         "namePlaceholder": "Entrez le nom de votre appareil",
         "roomLabel": "Pièce",
@@ -390,7 +392,6 @@
         "modelLabel": "Modèle",
         "presenceSensorLabel": "Utiliser cet appareil comme un détecteur de présence",
         "featuresLabel": "Fonctionnalités",
-        "noFeatureDiscovered": "Aucune fonctionnalité détectée.",
         "featureNamePlaceholder": "Nom de la fonctionnalité",
         "saveButton": "Sauvegarder",
         "deleteButton": "Supprimer",
@@ -560,7 +561,6 @@
         "noNameLabel": "Pas de nom",
         "roomLabel": "Pièce",
         "featuresLabel": "Fonctionnalités",
-        "noFeatures": "Aucune fonctionnalité",
         "search": "Recherche d'appareils",
         "connectButton": "Connecter/Reconnecter",
         "scanButton": "Recherche sur le réseau",
@@ -680,7 +680,6 @@
         "nameLabel": "Nom",
         "roomLabel": "Pièce",
         "featuresLabel": "Fonctionnalités",
-        "noFeatures": "Pas de fonctionnalités",
         "saveButton": "Sauvegarder",
         "deleteButton": "Supprimer",
         "editButton": "Editer",
@@ -702,7 +701,6 @@
         "createDeviceInGladys": "Connecter dans Gladys",
         "features": "Fonctionnalités",
         "params": "Paramètre",
-        "noFeatures": "Aucune fonctionnalité",
         "nodeId": "Noeud",
         "zwaveNotConfiguredError": "Ce service Z-wave n'est pas configuré. Veuillez sélectionner le port USB où votre clé Z-Wave est branchée dans les paramètres.",
         "createDeviceError": "Une erreur s'est produite lors de la création de cet appareil dans Gladys.",
@@ -772,7 +770,6 @@
         "externalIdLabel": "ID externe",
         "roomLabel": "Pièce",
         "featuresLabel": "Fonctionnalités",
-        "noFeatures": "Aucune fonctionnalité",
         "saveButton": "Sauvegarder",
         "deleteButton": "Supprimer",
         "returnButton": "Retour",
@@ -841,8 +838,7 @@
         "featuresLabel": "Fonctionnalités",
         "saveButton": "Sauvegarder",
         "deleteButton": "Supprimer",
-        "editButton": "Editer les détails",
-        "noFeatures": "Aucune fonctionnalité"
+        "editButton": "Editer les détails"
       },
       "setup": {
         "title": "Aucun appareil Xiaomi dans Gladys",
@@ -1717,7 +1713,6 @@
     "roomLabel": "Pièce",
     "featuresLabel": "Fonctionnalités",
     "featureCategoryLabel": "Catégorie",
-    "noFeatures": "Aucune fonctionnalité",
     "namePlaceholder": "Entrez un nom",
     "externalIdLabel": "ID externe",
     "externalIdPlaceholder": "Entrez une ID externe",

diff --git a/front/src/routes/integration/all/bluetooth/device-page/BluetoothDevice.jsx b/front/src/routes/integration/all/bluetooth/device-page/BluetoothDevice.jsx
@@ -5,9 +5,9 @@ import get from 'get-value';
 import { Link } from 'preact-router';
 
 import { DEVICE_FEATURE_CATEGORIES } from '../../../../../../../server/utils/constants';
-import { RequestStatus, DeviceFeatureCategoriesIcon } from '../../../../../utils/consts';
-
-import style from '../style.css';
+import { RequestStatus } from '../../../../../utils/consts';
+import BatteryLevelFeature from '../../../../../components/device/view/BatteryLevelFeature';
+import DeviceFeatures from '../../../../../components/device/view/DeviceFeatures';
 
 class BluetoothDevice extends Component {
   refreshDeviceProperty = () => {
@@ -62,12 +62,7 @@ class BluetoothDevice extends Component {
             {device.name}
             {batteryLevel && (
               <div class="page-options d-flex">
-                <div class="tag tag-green">
-                  <Text id="global.percentValue" fields={{ value: batteryLevel }} />
-                  <span class="tag-addon">
-                    <i class="fe fe-battery" />
-                  </span>
-                </div>
+                <BatteryLevelFeature batteryLevel={batteryLevel} />
               </div>
             )}
           </div>
@@ -117,25 +112,7 @@ class BluetoothDevice extends Component {
                   <label>
                     <Text id="integration.bluetooth.device.featuresLabel" />
                   </label>
-                  {device.features && (
-                    <div class="tags">
-                      {device.features.map(feature => (
-                        <span class="tag">
-                          <Text id={`deviceFeatureCategory.${feature.category}.${feature.type}`} />
-                          <div class="tag-addon">
-                            <i
-                              class={`fe fe-${get(DeviceFeatureCategoriesIcon, `${feature.category}.${feature.type}`)}`}
-                            />
-                          </div>
-                        </span>
-                      ))}
-                    </div>
-                  )}
-                  {(!device.features || device.features.length === 0) && (
-                    <div class={cx('text-center', 'font-italic', 'mt-3', style.featureListBody)}>
-                      <Text id="integration.bluetooth.device.noFeatureDiscovered" />
-                    </div>
-                  )}
+                  <DeviceFeatures features={device.features} />
                 </div>
                 <div class="form-group">
                   <button onClick={this.saveDevice} class="btn btn-success mr-2">

diff --git a/front/src/routes/integration/all/bluetooth/setup-page/BluetoothPeripheralFeatures.jsx b/front/src/routes/integration/all/bluetooth/setup-page/BluetoothPeripheralFeatures.jsx
@@ -1,7 +1,6 @@
 import { Text } from 'preact-i18n';
-import get from 'get-value';
 
-import { DeviceFeatureCategoriesIcon } from '../../../../../utils/consts';
+import DeviceFeatures from '../../../../../components/device/view/DeviceFeatures';
 
 const BluetoothPeripheralFeatures = ({ children, device }) => {
   const { features = [] } = device;
@@ -11,26 +10,7 @@ const BluetoothPeripheralFeatures = ({ children, device }) => {
       <label class="form-label">
         <Text id="integration.bluetooth.device.featuresLabel" />
       </label>
-      <div>
-        {features.length === 0 && (
-          <div class="text-center font-italic">
-            <Text id="integration.bluetooth.device.noFeatureDiscovered" />
-          </div>
-        )}
-        {features.length > 0 &&
-          (children || (
-            <div class="tags">
-              {features.map(feature => (
-                <span class="tag">
-                  <Text id={`deviceFeatureCategory.${feature.category}.${feature.type}`} />
-                  <div class="tag-addon">
-                    <i class={`fe fe-${get(DeviceFeatureCategoriesIcon, `${feature.category}.${feature.type}`)}`} />
-                  </div>
-                </span>
-              ))}
-            </div>
-          ))}
-      </div>
+      <div>{children || <DeviceFeatures features={features} />}</div>
     </div>
   );
 };

diff --git a/front/src/routes/integration/all/bluetooth/style.css b/front/src/routes/integration/all/bluetooth/style.css
@@ -6,7 +6,3 @@
 .bluetoothListBody {
   min-height: 200px;
 }
-
-.featureListBody {
-  min-height: 50px;
-}