+
+ {icon}
+ {" "}
+ {message}
+
+
+ {!screenBound && (
+ <>
+ {
+ setBindKey(target?.value);
+ }}
+ name="bindKey"
+ value={bindKey}
+ label={t("bindkey-label")}
+ className="mb-3"
+ />
+
+
+ )}
+
+ {screenBound && (
+ <>
+ {showScreenStatus && (
+
+ {status?.latestRequestDateTime && (
+ -
+ {t("latest-request")}:{" "}
+ {dayjs(status?.latestRequestDateTime).format(
+ "D/M YYYY HH:mm"
+ )}
+
+ )}
+ {status?.releaseVersion && (
+ -
+ {t("release-version")}: {status?.releaseVersion}
+ {notRunningLatestRelease && (
+ <>
+ {" "}
+ ({t("newest")}: {clientRelease?.releaseVersion})
+
+ )}
+
+ )}
+ {status?.releaseTimestamp && (
+ -
+ {t("release-timestamp")}:{" "}
+ {dayjs(status?.releaseTimestamp * 1000).format(
+ "D/M YYYY HH:mm"
+ )}
+ {notRunningLatestRelease && (
+ <>
+ {" "}({t("newest")}:{" "}
+ {clientRelease?.releaseTimestamp &&
+ dayjs(clientRelease?.releaseTimestamp * 1000).format(
+ "D/M YYYY HH:mm"
+ )}
+ )
+
+ )}
+
+ )}
+
+ )}
+
+
+
+ )}
+
+ );
+ };
+
+ return <>{getStatusAlert()};
+}
+
+ScreenStatus.propTypes = {
+ screen: PropTypes.shape({
+ "@id": PropTypes.string.isRequired,
+ screenUser: PropTypes.string,
+ status: PropTypes.shape({
+ releaseVersion: PropTypes.string,
+ releaseTimestamp: PropTypes.number,
+ latestRequestDateTime: PropTypes.string,
+ clientMeta: PropTypes.shape({
+ ip: PropTypes.string,
+ host: PropTypes.string,
+ userAgent: PropTypes.string,
+ tokenExpired: PropTypes.bool,
+ }),
+ }),
+ }).isRequired,
+ mode: PropTypes.string,
+ handleInput: PropTypes.func,
+};
+
+export default ScreenStatus;
diff --git a/src/components/screen-list/campaign-icon.jsx b/src/components/screen/util/campaign-icon.jsx
similarity index 57%
rename from src/components/screen-list/campaign-icon.jsx
rename to src/components/screen/util/campaign-icon.jsx
index 4ea8a018..145bef7a 100644
--- a/src/components/screen-list/campaign-icon.jsx
+++ b/src/components/screen/util/campaign-icon.jsx
@@ -1,30 +1,38 @@
import { React, useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
import { useDispatch } from "react-redux";
import PropTypes from "prop-types";
-import idFromUrl from "../util/helpers/id-from-url";
-import calculateIsPublished from "../util/helpers/calculate-is-published";
+import { useTranslation } from "react-i18next";
+import Spinner from "react-bootstrap/Spinner";
+import idFromUrl from "../../util/helpers/id-from-url";
+import calculateIsPublished from "../../util/helpers/calculate-is-published";
import {
api,
useGetV2ScreensByIdCampaignsQuery,
useGetV2ScreensByIdScreenGroupsQuery,
-} from "../../redux/api/api.generated.ts";
+} from "../../../redux/api/api.generated.ts";
/**
* An icon to show if the screen has an active campaign.
*
* @param {object} props - The props.
* @param {string} props.id The id of the screen.
+ * @param {number} props.delay Delay the fetch.
* @returns {object} The campaign icon.
*/
-function CampaignIcon({ id }) {
+function CampaignIcon({ id, delay }) {
+ const { t } = useTranslation("common", { keyPrefix: "campaign-icon" });
const dispatch = useDispatch();
- const [isOverriddenByCampaign, setIsOverriddenByCampaign] = useState(false);
+ const [isOverriddenByCampaign, setIsOverriddenByCampaign] = useState(null);
const [screenCampaignsChecked, setScreenCampaignsChecked] = useState(false);
const [allCampaigns, setAllCampaigns] = useState([]);
- const { data: campaigns } = useGetV2ScreensByIdCampaignsQuery({ id });
- const { data: groups } = useGetV2ScreensByIdScreenGroupsQuery({ id });
+ const [getData, setGetData] = useState(false);
+
+ const { data: campaigns, isLoading } = useGetV2ScreensByIdCampaignsQuery(
+ { id },
+ { skip: !getData }
+ );
+ const { data: groups, isLoading: isLoadingScreenGroups } =
+ useGetV2ScreensByIdScreenGroupsQuery({ id }, { skip: !getData });
useEffect(() => {
if (campaigns) {
@@ -65,16 +73,43 @@ function CampaignIcon({ id }) {
}
}, [allCampaigns]);
- return (
-