Dashboard MQTT display the feature name Fixes #787

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

@@ -1,3 +1,5 @@
+import { getDeviceName } from './utils';
+
 const BinaryDeviceType = ({ children, ...props }) => {
   function updateValue() {
     props.updateValue(
@@ -16,7 +18,7 @@ const BinaryDeviceType = ({ children, ...props }) => {
       <td>
         <i class="fe fe-toggle-right" />
       </td>
-      <td>{props.device.name}</td>
+      <td>{getDeviceName(props.device, props.deviceFeature)}</td>
       <td class="text-right">
         <label class="custom-switch">
           <input

front/src/components/boxs/device-in-room/device-features/utils.js

@@ -0,0 +1,12 @@
+import get from 'get-value';
+
+const DISPLAY_FEATURE_NAME_SERVICES = ['mqtt'];
+
+export const getDeviceName = (device, feature) => {
+  const service = get(device, 'service.name');
+  if (service && DISPLAY_FEATURE_NAME_SERVICES.includes(service)) {
+    return feature.name;
+  }
+
+  return device.name;
+};

front/src/config/demo.json

@@ -111,7 +111,8 @@
         },
         {
           "type": "devices-in-room",
-          "room": "living-room"
+          "room": "living-room",
+          "device_features": ["main-lamp-binary", "tv-lamp-binary", "mqtt-living-room-switch", "mqtt-living-room-temp"]
         }
       ],
       [
@@ -224,8 +225,8 @@
         "selector": "tv-lamp",
         "features": [
           {
-            "name": "TV Lamp",
-            "selector": "main-lamp-binary",
+            "name": "TV Lamp feature",
+            "selector": "tv-lamp-binary",
             "category": "light",
             "type": "binary",
             "min": 0,
@@ -253,6 +254,39 @@
             "last_value_changed": "2019-02-12 07:49:07.556 +00:00"
           }
         ]
+      },
+      {
+        "id": "81d637d2-b7f5-4cc3-a39e-2270fd069ee2",
+        "selector": "mqtt-living-room",
+        "name": "MQTT device",
+        "service": {
+          "name": "mqtt"
+        },
+        "features": [
+          {
+            "name": "Main Plug",
+            "selector": "mqtt-living-room-switch",
+            "category": "switch",
+            "type": "binary",
+            "min": 0,
+            "max": 1,
+            "read_only": false,
+            "last_value": 1,
+            "last_value_changed": "2019-02-12 07:49:07.556 +00:00"
+          },
+          {
+            "name": "Window Temp",
+            "selector": "mqtt-living-room-temp",
+            "category": "temperature-sensor",
+            "type": "decimal",
+            "unit": "celsius",
+            "min": -200,
+            "max": 200,
+            "read_only": true,
+            "last_value": 27,
+            "last_value_changed": "2019-02-12 07:49:07.556 +00:00"
+          }
+        ]
       }
     ]
   },

server/lib/room/room.getBySelector.js

@@ -18,6 +18,7 @@ const DEVICE_FEATURES_ATTRIBUTES = [
   'last_value',
   'last_value_changed',
 ];
+const SERVICE_ATTRIBUTES = ['name'];
 
 /**
  * @description Get a room by selector
@@ -34,11 +35,18 @@ async function getBySelector(selector, options) {
       model: db.Device,
       as: 'devices',
       attributes: DEVICE_ATTRIBUTES,
-      include: {
-        model: db.DeviceFeature,
-        as: 'features',
-        attributes: DEVICE_FEATURES_ATTRIBUTES,
-      },
+      include: [
+        {
+          model: db.DeviceFeature,
+          as: 'features',
+          attributes: DEVICE_FEATURES_ATTRIBUTES,
+        },
+        {
+          model: db.Service,
+          as: 'service',
+          attributes: SERVICE_ATTRIBUTES,
+        },
+      ],
     });
   }
   const room = await db.Room.findOne({

server/test/controllers/room/room.test.js

@@ -82,6 +82,18 @@ describe('GET /api/v1/room/:room_selector', () => {
         });
       });
   });
+  it('should get a room by selector with expanded devices', async () => {
+    await authenticatedRequest
+      .get('/api/v1/room/test-room?expand=devices')
+      .expect('Content-Type', /json/)
+      .expect(200)
+      .then((res) => {
+        expect(res.body).to.have.property('devices');
+        res.body.devices.forEach((device) => {
+          expect(device).to.have.property('service');
+        });
+      });
+  });
 });
 
 describe('GET /api/v1/room', () => {