Refactor dashboard devices-in-room box (#1138)

GladysAssistant · Apr 23, 2021 · 22dc3e9 · 22dc3e9
1 parent 4cf4752
commit 22dc3e9
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 115 deletions.
diff --git a/front/src/components/boxs/device-in-room/DeviceRow.jsx b/front/src/components/boxs/device-in-room/DeviceRow.jsx
@@ -1,75 +1,32 @@
+import { createElement } from 'preact';
+import { DEVICE_FEATURE_TYPES } from '../../../../../server/utils/constants';
+
 import BinaryDeviceFeature from './device-features/BinaryDeviceFeature';
 import ColorDeviceFeature from './device-features/ColorDeviceFeature';
 import SensorDeviceFeature from './device-features/SensorDeviceFeature';
-import MultilevelDeviceFeature from './device-features/MultiLevelDeviceFeature';
-import BrightnessDeviceFeature from './device-features/BrightnessDeviceFeature';
+import MultiLevelDeviceFeature from './device-features/MultiLevelDeviceFeature';
+
+const ROW_TYPE_BY_FEATURE_TYPE = {
+  [DEVICE_FEATURE_TYPES.LIGHT.BINARY]: BinaryDeviceFeature,
+  [DEVICE_FEATURE_TYPES.LIGHT.COLOR]: ColorDeviceFeature,
+  [DEVICE_FEATURE_TYPES.SWITCH.DIMMER]: MultiLevelDeviceFeature,
+  [DEVICE_FEATURE_TYPES.LIGHT.BRIGHTNESS]: MultiLevelDeviceFeature
+};
 
 const DeviceRow = ({ children, ...props }) => {
   // if device is a sensor, we display the sensor deviceFeature
   if (props.deviceFeature.read_only) {
     return <SensorDeviceFeature user={props.user} deviceFeature={props.deviceFeature} />;
   }
 
-  // else, it's not a sensor
-  // if it's a binary
-  if (props.deviceFeature.type === 'binary') {
-    return (
-      <BinaryDeviceFeature
-        x={props.x}
-        y={props.y}
-        device={props.device}
-        deviceFeature={props.deviceFeature}
-        roomIndex={props.roomIndex}
-        deviceIndex={props.deviceIndex}
-        deviceFeatureIndex={props.deviceFeatureIndex}
-        updateValue={props.updateValue}
-      />
-    );
-  }
-  if (props.deviceFeature.type === 'color') {
-    return (
-      <ColorDeviceFeature
-        x={props.x}
-        y={props.y}
-        device={props.device}
-        deviceFeature={props.deviceFeature}
-        roomIndex={props.roomIndex}
-        deviceIndex={props.deviceIndex}
-        deviceFeatureIndex={props.deviceFeatureIndex}
-        updateValue={props.updateValue}
-      />
-    );
-  }
-  if (props.deviceFeature.type === 'dimmer') {
-    return (
-      <MultilevelDeviceFeature
-        x={props.x}
-        y={props.y}
-        device={props.device}
-        deviceFeature={props.deviceFeature}
-        roomIndex={props.roomIndex}
-        deviceIndex={props.deviceIndex}
-        deviceFeatureIndex={props.deviceFeatureIndex}
-        updateValue={props.updateValue}
-      />
-    );
-  }
-  if (props.deviceFeature.type === 'brightness') {
-    return (
-      <BrightnessDeviceFeature
-        x={props.x}
-        y={props.y}
-        device={props.device}
-        deviceFeature={props.deviceFeature}
-        roomIndex={props.roomIndex}
-        deviceIndex={props.deviceIndex}
-        deviceFeatureIndex={props.deviceFeatureIndex}
-        updateValue={props.updateValue}
-      />
-    );
+  const elementType = ROW_TYPE_BY_FEATURE_TYPE[props.deviceFeature.type];
+
+  if (!elementType) {
+    // if no related components, we return nothing
+    return null;
   }
-  // if not, we return nothing
-  return null;
+
+  return createElement(elementType, props);
 };
 
 export default DeviceRow;
diff --git a/front/src/components/boxs/device-in-room/device-features/BrightnessDeviceFeature.jsx b/front/src/components/boxs/device-in-room/device-features/BrightnessDeviceFeature.jsx
diff --git a/front/src/components/boxs/device-in-room/device-features/MultiLevelDeviceFeature.jsx b/front/src/components/boxs/device-in-room/device-features/MultiLevelDeviceFeature.jsx
@@ -1,4 +1,7 @@
-import { Text } from 'preact-i18n';
+import get from 'get-value';
+
+import { getDeviceName } from './utils';
+import { DeviceFeatureCategoriesIcon } from '../../../../utils/consts';
 
 const MultiLevelDeviceType = ({ children, ...props }) => {
   function updateValue(e) {
@@ -17,17 +20,15 @@ const MultiLevelDeviceType = ({ children, ...props }) => {
   return (
     <tr>
       <td>
-        <i class="fe fe-toggle-right" />
+        <i
+          class={`fe fe-${get(
+            DeviceFeatureCategoriesIcon,
+            `${props.deviceFeature.category}.${props.deviceFeature.type}`,
+            { default: 'arrow-right' }
+          )}`}
+        />
       </td>
-      {props.deviceFeature.deviceFeatureName && <td>{props.deviceFeature.deviceFeatureName}</td>}
-      {!props.deviceFeature.deviceFeatureName && (
-        <td>
-          <Text
-            id="dashboard.boxes.devicesInRoom.deviceTitle"
-            fields={{ name: props.deviceFeature.name, type: props.deviceFeature.type }}
-          />
-        </td>
-      )}
+      <td>{getDeviceName(props.device, props.deviceFeature)}</td>
 
       <td class="text-right" style="padding-top: 0px; padding-bottom: 0px">
         <div class="col">

diff --git a/front/src/config/demo.json b/front/src/config/demo.json
@@ -126,6 +126,7 @@
             "tv-lamp-color",
             "tv-lamp-brightness",
             "mqtt-living-room-switch",
+            "mqtt-living-room-dimmer",
             "mqtt-living-room-temp"
           ]
         }
@@ -337,6 +338,17 @@
             "last_value": 1,
             "last_value_changed": "2019-02-12 07:49:07.556 +00:00"
           },
+          {
+            "name": "Main Dimmer",
+            "selector": "mqtt-living-room-dimmer",
+            "category": "switch",
+            "type": "dimmer",
+            "min": 0,
+            "max": 100,
+            "read_only": false,
+            "last_value": 17,
+            "last_value_changed": "2019-02-12 07:49:07.556 +00:00"
+          },
           {
             "name": "Window Temp",
             "selector": "mqtt-living-room-temp",