From 12cb0f58e87b81256228f1bb3c39baf98c6b9393 Mon Sep 17 00:00:00 2001 From: Pierre-Gilles Leymarie Date: Mon, 13 Sep 2021 14:27:36 +0800 Subject: [PATCH 1/4] Fix #1295 : Remove horizontal scroll-bar on device in room box + make time change in live --- .../device-features/SensorDeviceFeature.jsx | 17 +++---- front/src/components/device/RelativeTime.jsx | 51 +++++++++++++++++++ 2 files changed, 57 insertions(+), 11 deletions(-) create mode 100644 front/src/components/device/RelativeTime.jsx 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 index db37c55a4b..20694eab9a 100644 --- a/front/src/components/boxs/device-in-room/device-features/SensorDeviceFeature.jsx +++ b/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,7 +25,7 @@ const SensorDeviceType = ({ children, ...props }) => ( {props.deviceFeature.name} {SPECIAL_SENSORS.indexOf(props.deviceFeature.category) === -1 && ( - + {props.deviceFeature.last_value !== null && props.deviceFeature.last_value} {props.deviceFeature.last_value === null && } {props.deviceFeature.last_value !== null && ( @@ -47,12 +43,11 @@ const SensorDeviceType = ({ children, ...props }) => ( )} {LAST_SEEN_SENSORS.includes(props.deviceFeature.category) && ( - + {!props.deviceFeature.last_value_changed && } - {props.deviceFeature.last_value_changed && - dayjs(props.deviceFeature.last_value_changed) - .locale(props.user.language) - .fromNow()} + {props.deviceFeature.last_value_changed && ( + + )} )} diff --git a/front/src/components/device/RelativeTime.jsx b/front/src/components/device/RelativeTime.jsx new file mode 100644 index 0000000000..deae23353c --- /dev/null +++ b/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; From bc8f29b0f74f19f50e9742f88a17ba321e287a88 Mon Sep 17 00:00:00 2001 From: Pierre-Gilles Leymarie Date: Mon, 13 Sep 2021 15:05:26 +0800 Subject: [PATCH 2/4] Improve design of SensorDeviceFeature --- .../device-features/SensorDeviceFeature.jsx | 30 ++++++++++++------- front/src/components/device/RelativeTime.jsx | 2 +- 2 files changed, 20 insertions(+), 12 deletions(-) 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 index 20694eab9a..87e27b1a0d 100644 --- a/front/src/components/boxs/device-in-room/device-features/SensorDeviceFeature.jsx +++ b/front/src/components/boxs/device-in-room/device-features/SensorDeviceFeature.jsx @@ -26,14 +26,18 @@ const SensorDeviceType = ({ children, ...props }) => ( {props.deviceFeature.name} {SPECIAL_SENSORS.indexOf(props.deviceFeature.category) === -1 && ( - {props.deviceFeature.last_value !== null && props.deviceFeature.last_value} - {props.deviceFeature.last_value === null && } - {props.deviceFeature.last_value !== null && ( - - {' '} - +
+ {props.deviceFeature.last_value !== null && props.deviceFeature.last_value} + + {props.deviceFeature.last_value === null && } - )} + {props.deviceFeature.last_value !== null && ( + + {' '} + + + )} +
)} {props.deviceFeature.category === DEVICE_FEATURE_CATEGORIES.OPENING_SENSOR && ( @@ -44,10 +48,14 @@ const SensorDeviceType = ({ children, ...props }) => ( )} {LAST_SEEN_SENSORS.includes(props.deviceFeature.category) && ( - {!props.deviceFeature.last_value_changed && } - {props.deviceFeature.last_value_changed && ( - - )} +
+ {!props.deviceFeature.last_value_changed && } + {props.deviceFeature.last_value_changed && ( + + + + )} +
)} diff --git a/front/src/components/device/RelativeTime.jsx b/front/src/components/device/RelativeTime.jsx index deae23353c..7a9bca0bae 100644 --- a/front/src/components/device/RelativeTime.jsx +++ b/front/src/components/device/RelativeTime.jsx @@ -44,7 +44,7 @@ class RelativeTime extends Component { } render(props, { relativeTime }) { - return
{relativeTime}
; + return relativeTime; } } From d2d8f7813e2ba43da10af33b8843307438b7a696 Mon Sep 17 00:00:00 2001 From: Pierre-Gilles Leymarie Date: Mon, 13 Sep 2021 15:05:44 +0800 Subject: [PATCH 3/4] UserPresence box should refresh time every minute as well --- .../boxs/user-presence/UserPresence.jsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/front/src/components/boxs/user-presence/UserPresence.jsx b/front/src/components/boxs/user-presence/UserPresence.jsx index 23ec25db9d..6d76fb11c3 100644 --- a/front/src/components/boxs/user-presence/UserPresence.jsx +++ b/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); } From ac2f22e4e13f7b308b3ffb096ea549919855f44d Mon Sep 17 00:00:00 2001 From: Pierre-Gilles Leymarie Date: Mon, 13 Sep 2021 15:09:58 +0800 Subject: [PATCH 4/4] Remove badge on device in room box --- .../device-features/SensorDeviceFeature.jsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) 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 index 87e27b1a0d..9cff7a5a71 100644 --- a/front/src/components/boxs/device-in-room/device-features/SensorDeviceFeature.jsx +++ b/front/src/components/boxs/device-in-room/device-features/SensorDeviceFeature.jsx @@ -28,9 +28,7 @@ const SensorDeviceType = ({ children, ...props }) => (
{props.deviceFeature.last_value !== null && props.deviceFeature.last_value} - - {props.deviceFeature.last_value === null && } - + {props.deviceFeature.last_value === null && } {props.deviceFeature.last_value !== null && ( {' '} @@ -51,9 +49,7 @@ const SensorDeviceType = ({ children, ...props }) => (
{!props.deviceFeature.last_value_changed && } {props.deviceFeature.last_value_changed && ( - - - + )}