1241: Fixed issues with screen status

Author: tuj

CHANGELOG.md

@@ -5,6 +5,8 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- [#281](https://github.com/os2display/display-admin-client/pull/281)
+  - Fixed screen status bugs.
 - [#274](https://github.com/os2display/display-admin-client/pull/274)
   - Added screen status to screen list.
   - Refactored screen status on screen edit.

src/components/screen/screen-status.jsx

@@ -124,28 +124,70 @@ function ScreenStatus({ screen, handleInput = () => {}, mode = "default" }) {
       );
     }
 
+    if (
+      status.releaseTimestamp === null ||
+      status.releaseVersion === null ||
+      status.latestRequestDateTime === null
+    ) {
+      return (
+        <FontAwesomeIcon
+          icon={faInfoCircle}
+          className="text-warning"
+          title={t("no-info")}
+        />
+      );
+    }
+
     const latestRequest = dayjs(status.latestRequestDateTime);
-    const inOneHour = dayjs().add(1, "hours");
+    const oneHourAgo = dayjs().subtract(1, "hours");
+
+    if (status?.clientMeta?.tokenExpired) {
+      return (
+        <FontAwesomeIcon
+          icon={faExclamationCircle}
+          className="text-danger"
+          title={t("token-expired")}
+        />
+      );
+    }
 
-    if (status?.clientMeta?.tokenExpired || latestRequest > inOneHour) {
+    if (latestRequest < oneHourAgo) {
       return (
-        <FontAwesomeIcon icon={faExclamationCircle} className="text-danger" />
+        <FontAwesomeIcon
+          icon={faExclamationCircle}
+          className="text-danger"
+          title={t("no-communication-since", {
+            ts: latestRequest.format("D/M YYYY HH:mm"),
+          })}
+        />
       );
     }
 
     if (clientRelease) {
       if (status?.releaseVersion !== clientRelease?.releaseVersion) {
-        return <FontAwesomeIcon icon={faInfoCircle} className="text-warning" />;
+        return (
+          <FontAwesomeIcon
+            icon={faInfoCircle}
+            className="text-warning"
+            title={t("release-warning")}
+          />
+        );
       }
 
       if (status?.releaseTimestamp !== clientRelease?.releaseTimestamp) {
-        return <FontAwesomeIcon icon={faInfoCircle} className="text-warning" />;
+        return (
+          <FontAwesomeIcon
+            icon={faInfoCircle}
+            className="text-warning"
+            title={t("release-warning")}
+          />
+        );
       }
     }
 
     return (
       <div>
-        <FontAwesomeIcon icon={faCheckCircle} className="text-success" />
+        <FontAwesomeIcon icon={faCheckCircle} className="text-success" title={t('ok')} />
       </div>
     );
   }
@@ -209,14 +251,14 @@ function ScreenStatus({ screen, handleInput = () => {}, mode = "default" }) {
                 {status?.latestRequestDateTime && (
                   <li>
                     {t("latest-request")}:{" "}
-                    {dayjs(status?.latestRequestDateTime).format(
+                    {dayjs(status.latestRequestDateTime).format(
                       "D/M YYYY HH:mm"
                     )}
                   </li>
                 )}
                 {status?.releaseVersion && (
                   <li>
-                    {t("release-version")}: {status?.releaseVersion}
+                    {t("release-version")}: {status.releaseVersion}
                     {notRunningLatestRelease && (
                       <>
                         {" "}
@@ -228,7 +270,7 @@ function ScreenStatus({ screen, handleInput = () => {}, mode = "default" }) {
                 {status?.releaseTimestamp && (
                   <li>
                     {t("release-timestamp")}:{" "}
-                    {dayjs(status?.releaseTimestamp * 1000).format(
+                    {dayjs(status.releaseTimestamp * 1000).format(
                       "D/M YYYY HH:mm"
                     )}
                     {notRunningLatestRelease && (

src/components/screen/util/campaign-icon.jsx

@@ -19,7 +19,7 @@ import {
  * @param {number} props.delay Delay the fetch.
  * @returns {object} The campaign icon.
  */
-function CampaignIcon({ id, delay }) {
+function CampaignIcon({ id, delay = 1000 }) {
   const { t } = useTranslation("common", { keyPrefix: "campaign-icon" });
   const dispatch = useDispatch();
   const [isOverriddenByCampaign, setIsOverriddenByCampaign] = useState(null);
@@ -103,10 +103,6 @@ function CampaignIcon({ id, delay }) {
     : t("not-overridden-by-campaign");
 }
 
-CampaignIcon.defaultProps = {
-  delay: 1000,
-};
-
 CampaignIcon.propTypes = {
   id: PropTypes.string.isRequired,
   delay: PropTypes.number,

src/components/util/list/list.jsx

@@ -227,11 +227,11 @@ function List({
       switch (screenStatusParam) {
         case "active":
           setExists({ screenUser: true });
-          setScreenUserLatestRequest({ after: anHourAgo.valueOf() });
+          setScreenUserLatestRequest({ after: anHourAgo.toISOString() });
           break;
         case "inactive":
           setExists({ screenUser: true });
-          setScreenUserLatestRequest({ before: anHourAgo.valueOf() });
+          setScreenUserLatestRequest({ before: anHourAgo.toISOString() });
           break;
         case "not-connected":
           setExists({ screenUser: false });

src/translations/da/common.json

@@ -80,7 +80,10 @@
     "latest-release-timestamp": "Seneste udgivelsestidspunkt",
     "latest-request-warning": "Skærmen har ikke kommunikeret i mere end en time.",
     "release-warning": "Skærmen kører ikke seneste udgivelse.",
-    "newest": "Nyeste"
+    "newest": "Nyeste",
+    "no-info": "Endnu ikke aktiv",
+    "no-communication-since": "Inaktiv siden: {{ts}}",
+    "ok": "Aktiv"
   },
   "screen-list": {
     "columns": {
@@ -118,7 +121,7 @@
     },
     "roles": {
       "ROLE_USER": "Bruger",
-      "ROLE_SCREEN":  "Skærm",
+      "ROLE_SCREEN": "Skærm",
       "ROLE_EDITOR": "Redaktør",
       "ROLE_EXTERNAL_USER": "Ekstern bruger",
       "ROLE_EXTERNAL_USER_ADMIN": "Ekstern brugeradministrator",
@@ -380,7 +383,7 @@
       "published": "Udgivet",
       "number-of-slides": "Slides tilknyttede"
     },
-    "more-playlists":"Hent flere spillelister",
+    "more-playlists": "Hent flere spillelister",
     "edit-playlists-help-text": "Hvis du vil redigere en spilleliste, åbnes dette i en ny fane.",
     "remove-from-list": "Fjern fra liste",
     "info-modal": {