From 9eaab6d4cc01e0b63546a4133e50e35e68c64f56 Mon Sep 17 00:00:00 2001
From: atrovato <1839717+atrovato@users.noreply.github.com>
Date: Wed, 16 Mar 2022 23:05:00 +0100
Subject: [PATCH 1/2] Dashboard badge value

---
 .../boxs/device-in-room/DeviceRow.jsx         |  2 +-
 .../device-features/SensorDeviceFeature.jsx   | 67 -------------------
 .../sensor-value/BadgeNumberDeviceValue.jsx   | 47 +++++++++++++
 .../sensor-value/BinaryDeviceValue.jsx        |  4 +-
 .../sensor-value/IconBinaryDeviceValue.jsx    | 23 +++++++
 .../sensor-value/LastSeenDeviceValue.jsx      | 15 +++++
 .../sensor-value/RawDeviceValue.jsx           | 15 +++++
 .../sensor-value/SensorDeviceFeature.jsx      | 52 ++++++++++++++
 8 files changed, 155 insertions(+), 70 deletions(-)
 delete mode 100644 front/src/components/boxs/device-in-room/device-features/SensorDeviceFeature.jsx
 create mode 100644 front/src/components/boxs/device-in-room/device-features/sensor-value/BadgeNumberDeviceValue.jsx
 create mode 100644 front/src/components/boxs/device-in-room/device-features/sensor-value/IconBinaryDeviceValue.jsx
 create mode 100644 front/src/components/boxs/device-in-room/device-features/sensor-value/LastSeenDeviceValue.jsx
 create mode 100644 front/src/components/boxs/device-in-room/device-features/sensor-value/RawDeviceValue.jsx
 create mode 100644 front/src/components/boxs/device-in-room/device-features/sensor-value/SensorDeviceFeature.jsx

diff --git a/front/src/components/boxs/device-in-room/DeviceRow.jsx b/front/src/components/boxs/device-in-room/DeviceRow.jsx
index 824ac7dc6b..6b82c03c56 100644
--- a/front/src/components/boxs/device-in-room/DeviceRow.jsx
+++ b/front/src/components/boxs/device-in-room/DeviceRow.jsx
@@ -3,7 +3,7 @@ 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 SensorDeviceFeature from './device-features/sensor-value/SensorDeviceFeature';
 import LightTemperatureDeviceFeature from './device-features/LightTemperatureDeviceFeature';
 import MultiLevelDeviceFeature from './device-features/MultiLevelDeviceFeature';
 import NumberDeviceFeature from './device-features/NumberDeviceFeature';
diff --git a/front/src/components/boxs/device-in-room/device-features/SensorDeviceFeature.jsx b/front/src/components/boxs/device-in-room/device-features/SensorDeviceFeature.jsx
deleted file mode 100644
index 3f124e5d1b..0000000000
--- a/front/src/components/boxs/device-in-room/device-features/SensorDeviceFeature.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { Text } from 'preact-i18n';
-import get from 'get-value';
-
-import RelativeTime from '../../../device/RelativeTime';
-
-import { DEVICE_FEATURE_CATEGORIES, DEVICE_FEATURE_TYPES } from '../../../../../../server/utils/constants';
-
-const SPECIAL_SENSORS = [
-  DEVICE_FEATURE_CATEGORIES.OPENING_SENSOR,
-  DEVICE_FEATURE_CATEGORIES.MOTION_SENSOR,
-  DEVICE_FEATURE_CATEGORIES.PRESENCE_SENSOR
-];
-const LAST_SEEN_SENSORS = [DEVICE_FEATURE_CATEGORIES.MOTION_SENSOR, DEVICE_FEATURE_CATEGORIES.PRESENCE_SENSOR];
-
-import { DeviceFeatureCategoriesIcon } from '../../../../utils/consts';
-import BinaryDeviceValue from './sensor-value/BinaryDeviceValue';
-
-const SensorDeviceType = ({ children, ...props }) => (
-  <tr>
-    <td>
-      <i
-        class={`mr-2 fe fe-${get(
-          DeviceFeatureCategoriesIcon,
-          `${props.deviceFeature.category}.${props.deviceFeature.type}`
-        )}`}
-      />
-    </td>
-    <td>{props.deviceFeature.name}</td>
-    {SPECIAL_SENSORS.indexOf(props.deviceFeature.category) === -1 && (
-      <td class="text-right">
-        {DEVICE_FEATURE_TYPES.SENSOR.BINARY === props.deviceFeature.type && (
-          <BinaryDeviceValue feature={props.deviceFeature} />
-        )}
-        {DEVICE_FEATURE_TYPES.SENSOR.BINARY !== props.deviceFeature.type && (
-          <div>
-            {props.deviceFeature.last_value !== null && props.deviceFeature.last_value}
-            {props.deviceFeature.last_value === null && <Text id="dashboard.boxes.devicesInRoom.noValue" />}
-            {props.deviceFeature.last_value !== null && (
-              <span>
-                {' '}
-                <Text id={`deviceFeatureUnitShort.${props.deviceFeature.unit}`} />
-              </span>
-            )}
-          </div>
-        )}
-      </td>
-    )}
-    {props.deviceFeature.category === DEVICE_FEATURE_CATEGORIES.OPENING_SENSOR && (
-      <td class="text-right">
-        {props.deviceFeature.last_value === 1 && <i class="fe fe-shield" />}
-        {props.deviceFeature.last_value === 0 && <i class="fe fe-shield-off" />}
-      </td>
-    )}
-    {LAST_SEEN_SENSORS.includes(props.deviceFeature.category) && (
-      <td class="text-right">
-        <div>
-          {!props.deviceFeature.last_value_changed && <Text id="dashboard.boxes.devicesInRoom.noValue" />}
-          {props.deviceFeature.last_value_changed && (
-            <RelativeTime datetime={props.deviceFeature.last_value_changed} language={props.user.language} />
-          )}
-        </div>
-      </td>
-    )}
-  </tr>
-);
-
-export default SensorDeviceType;
diff --git a/front/src/components/boxs/device-in-room/device-features/sensor-value/BadgeNumberDeviceValue.jsx b/front/src/components/boxs/device-in-room/device-features/sensor-value/BadgeNumberDeviceValue.jsx
new file mode 100644
index 0000000000..4b656b1b8f
--- /dev/null
+++ b/front/src/components/boxs/device-in-room/device-features/sensor-value/BadgeNumberDeviceValue.jsx
@@ -0,0 +1,47 @@
+import { Text } from 'preact-i18n';
+import cx from 'classnames';
+
+import { DEVICE_FEATURE_CATEGORIES } from '../../../../../../../server/utils/constants';
+import RawDeviceValue from './RawDeviceValue';
+
+const colorLowAsGreen = (value, safeLimit, warnLimit) => {
+  if (value < safeLimit) {
+    return 'success';
+  } else if (value < warnLimit) {
+    return 'warning';
+  }
+
+  return 'danger';
+};
+
+const BADGE_CATEGORIES = {
+  [DEVICE_FEATURE_CATEGORIES.CO2_SENSOR]: value => colorLowAsGreen(value, 50, 80)
+};
+
+const BadgeNumberDeviceValue = props => {
+  const { category, last_value: lastValue = null, unit } = props.deviceFeature;
+
+  const colorMethod = BADGE_CATEGORIES[category];
+  if (!colorMethod) {
+    return <RawDeviceValue {...props} />;
+  }
+
+  const value = lastValue === null ? -1 : lastValue;
+  const valued = value !== -1;
+
+  const colorClass = `bg-${valued ? colorMethod(value) : 'secondary'}`;
+
+  return (
+    <span class={cx('badge', colorClass)}>
+      {!valued && <Text id="dashboard.boxes.devicesInRoom.noValue" />}
+      {valued && (
+        <span>
+          {`${lastValue} `}
+          <Text id={`deviceFeatureUnitShort.${unit}`} />
+        </span>
+      )}
+    </span>
+  );
+};
+
+export default BadgeNumberDeviceValue;
diff --git a/front/src/components/boxs/device-in-room/device-features/sensor-value/BinaryDeviceValue.jsx b/front/src/components/boxs/device-in-room/device-features/sensor-value/BinaryDeviceValue.jsx
index 2aa56cecf8..0e8d5fe748 100644
--- a/front/src/components/boxs/device-in-room/device-features/sensor-value/BinaryDeviceValue.jsx
+++ b/front/src/components/boxs/device-in-room/device-features/sensor-value/BinaryDeviceValue.jsx
@@ -5,8 +5,8 @@ import { DEVICE_FEATURE_CATEGORIES } from '../../../../../../../server/utils/con
 
 const DANGER_ON_VALUE_SENSORS = [DEVICE_FEATURE_CATEGORIES.CO_SENSOR];
 
-const BinaryDeviceValue = ({ feature }) => {
-  const { category, last_value: lastValue = null } = feature;
+const BinaryDeviceValue = ({ deviceFeature }) => {
+  const { category, last_value: lastValue = null } = deviceFeature;
   const reverseColors = DANGER_ON_VALUE_SENSORS.includes(category);
 
   const value = lastValue === null ? -1 : lastValue;
diff --git a/front/src/components/boxs/device-in-room/device-features/sensor-value/IconBinaryDeviceValue.jsx b/front/src/components/boxs/device-in-room/device-features/sensor-value/IconBinaryDeviceValue.jsx
new file mode 100644
index 0000000000..2db1f49885
--- /dev/null
+++ b/front/src/components/boxs/device-in-room/device-features/sensor-value/IconBinaryDeviceValue.jsx
@@ -0,0 +1,23 @@
+import get from 'get-value';
+
+import { DEVICE_FEATURE_CATEGORIES } from '../../../../../../../server/utils/constants';
+
+const ICON_MAP = {
+  [DEVICE_FEATURE_CATEGORIES.OPENING_SENSOR]: {
+    0: 'shield-off',
+    1: 'shield-on'
+  }
+};
+
+const IconBinaryDeviceValue = ({ deviceFeature }) => {
+  const { category, last_value: lastValue = null } = deviceFeature;
+  const icon = get(ICON_MAP, `${category}.${lastValue}`);
+
+  if (icon) {
+    return <i class={`fe fe-${icon}`} />;
+  }
+
+  return null;
+};
+
+export default IconBinaryDeviceValue;
diff --git a/front/src/components/boxs/device-in-room/device-features/sensor-value/LastSeenDeviceValue.jsx b/front/src/components/boxs/device-in-room/device-features/sensor-value/LastSeenDeviceValue.jsx
new file mode 100644
index 0000000000..09e01e0110
--- /dev/null
+++ b/front/src/components/boxs/device-in-room/device-features/sensor-value/LastSeenDeviceValue.jsx
@@ -0,0 +1,15 @@
+import { Text } from 'preact-i18n';
+
+import RelativeTime from '../../../../device/RelativeTime';
+
+const LastSeenDeviceValue = ({ deviceFeature, user }) => {
+  const { last_value_changed: lastValueChanged } = deviceFeature;
+
+  if (lastValueChanged) {
+    return <RelativeTime datetime={lastValueChanged} language={user.language} />;
+  }
+
+  return <Text id="dashboard.boxes.devicesInRoom.noValue" />;
+};
+
+export default LastSeenDeviceValue;
diff --git a/front/src/components/boxs/device-in-room/device-features/sensor-value/RawDeviceValue.jsx b/front/src/components/boxs/device-in-room/device-features/sensor-value/RawDeviceValue.jsx
new file mode 100644
index 0000000000..63cbe9f5e8
--- /dev/null
+++ b/front/src/components/boxs/device-in-room/device-features/sensor-value/RawDeviceValue.jsx
@@ -0,0 +1,15 @@
+import { Text } from 'preact-i18n';
+
+const RawDeviceValue = ({ deviceFeature }) => (
+  <div>
+    {deviceFeature.last_value === null && <Text id="dashboard.boxes.devicesInRoom.noValue" />}
+    {deviceFeature.last_value !== null && (
+      <span>
+        {`${deviceFeature.last_value} `}
+        <Text id={`deviceFeatureUnitShort.${deviceFeature.unit}`} />
+      </span>
+    )}
+  </div>
+);
+
+export default RawDeviceValue;
diff --git a/front/src/components/boxs/device-in-room/device-features/sensor-value/SensorDeviceFeature.jsx b/front/src/components/boxs/device-in-room/device-features/sensor-value/SensorDeviceFeature.jsx
new file mode 100644
index 0000000000..b4ec8f8a43
--- /dev/null
+++ b/front/src/components/boxs/device-in-room/device-features/sensor-value/SensorDeviceFeature.jsx
@@ -0,0 +1,52 @@
+import { createElement } from 'preact';
+import get from 'get-value';
+
+import { DEVICE_FEATURE_CATEGORIES, DEVICE_FEATURE_TYPES } from '../../../../../../../server/utils/constants';
+import { DeviceFeatureCategoriesIcon } from '../../../../../utils/consts';
+
+import BinaryDeviceValue from './BinaryDeviceValue';
+import LastSeenDeviceValue from './LastSeenDeviceValue';
+import BadgeNumberDeviceValue from './BadgeNumberDeviceValue';
+import IconBinaryDeviceValue from './IconBinaryDeviceValue';
+
+const DISPLAY_BY_FEATURE_CATEGORY = {
+  [DEVICE_FEATURE_CATEGORIES.MOTION_SENSOR]: LastSeenDeviceValue,
+  [DEVICE_FEATURE_CATEGORIES.PRESENCE_SENSOR]: LastSeenDeviceValue,
+  [DEVICE_FEATURE_CATEGORIES.OPENING_SENSOR]: IconBinaryDeviceValue
+};
+
+const DISPLAY_BY_FEATURE_TYPE = {
+  [DEVICE_FEATURE_TYPES.SENSOR.BINARY]: BinaryDeviceValue
+};
+
+const SensorDeviceType = ({ children, ...props }) => {
+  const { deviceFeature: feature } = props;
+  const { category, type } = feature;
+
+  let elementType = DISPLAY_BY_FEATURE_CATEGORY[category];
+
+  if (!elementType) {
+    elementType = DISPLAY_BY_FEATURE_TYPE[type];
+  }
+
+  if (!elementType) {
+    elementType = BadgeNumberDeviceValue;
+  }
+
+  return (
+    <tr>
+      <td>
+        <i
+          class={`mr-2 fe fe-${get(
+            DeviceFeatureCategoriesIcon,
+            `${props.deviceFeature.category}.${props.deviceFeature.type}`
+          )}`}
+        />
+      </td>
+      <td>{props.deviceFeature.name}</td>
+      <td class="text-right">{createElement(elementType, props)}</td>
+    </tr>
+  );
+};
+
+export default SensorDeviceType;

From bc61cd95e579e716d6b15dc8bc35673818c201e0 Mon Sep 17 00:00:00 2001
From: atrovato <1839717+atrovato@users.noreply.github.com>
Date: Fri, 18 Mar 2022 20:34:42 +0100
Subject: [PATCH 2/2] Fix open icon

---
 .../device-features/sensor-value/IconBinaryDeviceValue.jsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/components/boxs/device-in-room/device-features/sensor-value/IconBinaryDeviceValue.jsx b/front/src/components/boxs/device-in-room/device-features/sensor-value/IconBinaryDeviceValue.jsx
index 2db1f49885..aa738ba9c6 100644
--- a/front/src/components/boxs/device-in-room/device-features/sensor-value/IconBinaryDeviceValue.jsx
+++ b/front/src/components/boxs/device-in-room/device-features/sensor-value/IconBinaryDeviceValue.jsx
@@ -5,7 +5,7 @@ import { DEVICE_FEATURE_CATEGORIES } from '../../../../../../../server/utils/con
 const ICON_MAP = {
   [DEVICE_FEATURE_CATEGORIES.OPENING_SENSOR]: {
     0: 'shield-off',
-    1: 'shield-on'
+    1: 'shield'
   }
 };