Fix #1295 : Remove horizontal scroll-bar on device in room box + make relative time change in live

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

@@ -1,10 +1,6 @@
 import { Text } from 'preact-i18n';
 import get from 'get-value';
-import cx from 'classnames';
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-
-dayjs.extend(relativeTime);
+import RelativeTime from '../../../device/RelativeTime';
 
 import { DEVICE_FEATURE_CATEGORIES } from '../../../../../../server/utils/constants';
 
@@ -29,15 +25,17 @@ const SensorDeviceType = ({ children, ...props }) => (
     </td>
     <td>{props.deviceFeature.name}</td>
     {SPECIAL_SENSORS.indexOf(props.deviceFeature.category) === -1 && (
-      <td class={cx('text-right', { 'text-nowrap': props.deviceFeature.last_value !== null })}>
-        {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>
-        )}
+      <td class="text-right">
+        <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 && (
@@ -47,12 +45,13 @@ const SensorDeviceType = ({ children, ...props }) => (
       </td>
     )}
     {LAST_SEEN_SENSORS.includes(props.deviceFeature.category) && (
-      <td class={cx('text-right', { 'text-nowrap': props.deviceFeature.last_value_changed })}>
-        {!props.deviceFeature.last_value_changed && <Text id="dashboard.boxes.devicesInRoom.noValue" />}
-        {props.deviceFeature.last_value_changed &&
-          dayjs(props.deviceFeature.last_value_changed)
-            .locale(props.user.language)
-            .fromNow()}
+      <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>

front/src/components/boxs/user-presence/UserPresence.jsx

@@ -151,9 +151,23 @@ class UserPresenceComponent extends Component {
       });
     }
   };
-
+  refreshRelativeTime = () => {
+    if (this.state.usersWithPresence && this.state.usersWithPresence.length > 0) {
+      const usersWithPresence = this.state.usersWithPresence.map(user => {
+        user.last_house_changed_relative_to_now = dayjs(user.last_house_changed)
+          .locale(this.props.user.language)
+          .fromNow();
+        return user;
+      });
+      this.setState({ usersWithPresence });
+    }
+  };
   componentDidMount() {
     this.getUsersWithPresence();
+    // refresh every minute the relative time
+    this.interval = setInterval(() => {
+      this.refreshRelativeTime();
+    }, 60 * 1000);
     this.props.session.dispatcher.addListener(WEBSOCKET_MESSAGE_TYPES.USER_PRESENCE.BACK_HOME, this.userChanged);
     this.props.session.dispatcher.addListener(WEBSOCKET_MESSAGE_TYPES.USER_PRESENCE.LEFT_HOME, this.userChanged);
   }
@@ -166,6 +180,7 @@ class UserPresenceComponent extends Component {
   }
 
   componentWillUnmount() {
+    clearInterval(this.interval);
     this.props.session.dispatcher.removeListener(WEBSOCKET_MESSAGE_TYPES.USER_PRESENCE.BACK_HOME, this.userChanged);
     this.props.session.dispatcher.removeListener(WEBSOCKET_MESSAGE_TYPES.USER_PRESENCE.LEFT_HOME, this.userChanged);
   }

front/src/components/device/RelativeTime.jsx

@@ -0,0 +1,51 @@
+import { Component } from 'preact';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+dayjs.extend(relativeTime);
+
+class RelativeTime extends Component {
+  refreshTimeDisplay = () => {
+    if (this.props.datetime && this.props.language) {
+      const relativeTime = dayjs(this.props.datetime)
+        .locale(this.props.language)
+        .fromNow();
+      this.setState({
+        relativeTime
+      });
+    }
+  };
+
+  constructor(props) {
+    super(props);
+    this.props;
+    this.state = {
+      relativeTime: ''
+    };
+  }
+
+  componentDidMount() {
+    this.refreshTimeDisplay();
+    this.interval = setInterval(() => {
+      this.refreshTimeDisplay();
+    }, 60 * 1000);
+  }
+
+  componentDidUpdate(previousProps) {
+    const dateTimeChanged = previousProps.datetime !== this.props.datetime;
+    const languageChanged = previousProps.language !== this.props.language;
+    if (dateTimeChanged || languageChanged) {
+      this.refreshTimeDisplay();
+    }
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  render(props, { relativeTime }) {
+    return relativeTime;
+  }
+}
+
+export default RelativeTime;