Dashbaord CO with colored badge

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';

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;

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;

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'
+  }
+};
+
+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;

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;

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;

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;