diff --git a/src/assets/images/ecg_heart.png b/src/assets/images/ecg_heart.png index 2528cea..53d501a 100644 Binary files a/src/assets/images/ecg_heart.png and b/src/assets/images/ecg_heart.png differ diff --git a/src/assets/images/ecg_heart_blue.png b/src/assets/images/ecg_heart_blue.png new file mode 100644 index 0000000..2528cea Binary files /dev/null and b/src/assets/images/ecg_heart_blue.png differ diff --git a/src/locales/en/common.json b/src/locales/en/common.json index 66fc5c2..95f1c70 100644 --- a/src/locales/en/common.json +++ b/src/locales/en/common.json @@ -5,7 +5,11 @@ "created_on": "Created on: {{- date}}", "started_on": "Started on: {{- date}}", "stopped_on": "Stopped on: {{- date}}", - "stop_deployment": "Stop deployment", "export_data": "Export Data", - "last_uploaded": "Last Uploaded: {{- date}}" + "last_uploaded": "Last Uploaded: {{- date}}", + "cancel": "Cancel", + "deploy": "Deploy", + "last_data_zero": "Last data: Today", + "last_data_one": "Last data: {{count}} day ago", + "last_data_other": "Last data: {{count}} days ago" } diff --git a/src/locales/en/deployment.json b/src/locales/en/deployment.json index 377e842..58f7e98 100644 --- a/src/locales/en/deployment.json +++ b/src/locales/en/deployment.json @@ -6,7 +6,12 @@ }, "devices_card": { "title": "Devices", - "description": "Select the master device in order to deploy." + "description": "Select the master device in order to deploy.", + "device_deployment": { + "description": "The device will be permanently deployed. You can not undo this action.", + "title": "Deployment of a Master Device", + "submit": "I'm sure I want to deploy it" + } }, "informed_consents_card": { "title": "Informed Consents", @@ -15,5 +20,13 @@ "data_card": { "title": "Data", "description": "See an overview of the collected data for each participant master device." - } + }, + "stop_deployment": { + "title": "Stop deployment", + "description": "The deployment will be permanently stopped and will no longer be running.", + "alert": "You can not undo this action.", + "confirm": "I'm sure I want to stop it", + "stop": "Stop" + }, + "page_description": "\"See the detailed data of the Deployment. Select the participant for further individual data." } diff --git a/src/pages/Deployment/BasicInfo/index.tsx b/src/pages/Deployment/BasicInfo/index.tsx index 897a8c3..30291f1 100644 --- a/src/pages/Deployment/BasicInfo/index.tsx +++ b/src/pages/Deployment/BasicInfo/index.tsx @@ -52,12 +52,11 @@ const BasicInfo = () => { open: openStopConfirmationModal, onClose: () => setOpenStopConfirmationModal(false), onConfirm: handleStopDeployment, - title: "Stop deployment", - description: - "The deployment will be permanently stopped and will no longer be running.", - boldText: "You can not undo this action.", - checkboxLabel: "I'm sure I want to stop it", - actionButtonLabel: "Stop", + title: t("deployment:stop_deployment.title"), + description: t("deployment:stop_deployment.description"), + boldText: t("deployment:stop_deployment.alert"), + checkboxLabel: t("deployment:stop_deployment.confirm"), + actionButtonLabel: t("deployment:stop_deployment.stop"), }; const generateExport = useCreateSummary(); @@ -123,7 +122,7 @@ const BasicInfo = () => { onClick={() => setOpenStopConfirmationModal(true)} > - {t("common:stop_deployment")} + {t("deployment:stop_deployment.title")} )} diff --git a/src/pages/Deployment/Devices/index.tsx b/src/pages/Deployment/Devices/index.tsx index 37360e8..f50923c 100644 --- a/src/pages/Deployment/Devices/index.tsx +++ b/src/pages/Deployment/Devices/index.tsx @@ -9,7 +9,7 @@ import { Checkbox, Modal, Stack, Typography } from "@mui/material"; import { useEffect, useState } from "react"; import { useParams } from "react-router-dom"; import CarpAccordion from "@Components/CarpAccordion"; -import { t } from "i18next"; +import { useTranslation } from "react-i18next"; import { useStudyDetails } from "@Utils/queries/studies"; import { getDeviceIcon } from "@Utils/utility"; import { CarpServiceError } from "@carp-dk/client"; @@ -32,6 +32,7 @@ import LoadingSkeleton from "../LoadingSkeleton"; const Devices = () => { const { id: studyId, deploymentId } = useParams(); + const { t } = useTranslation(); const { data: study, @@ -148,18 +149,19 @@ const Devices = () => { aria-describedby="modal-modal-description" > - Deployment of a Master Device + + {t("deployment:devices_card.device_deployment.title")} + - The device will be permanently deployed. You can not undo this - action. + {t("deployment:devices_card.device_deployment.description")} setAllowDeploy(!allowDeploy)} /> - I'm sure I want to deploy it + {t("deployment:devices_card.device_deployment.submit")} @@ -169,7 +171,7 @@ const Devices = () => { setAllowDeploy(false); }} > - Cancel + {t("common:cancel")} { onClick={() => onConfirm()} disabled={!allowDeploy} > - Deploy + {t("common:deploy")} @@ -190,20 +192,23 @@ const Devices = () => { + onClick={() => { + if (primaryDevice.status === "Deployed") return; setModalState({ open: true, roleName: primaryDevice.name, deviceId: v4(), - }) - } - sx={{ - "&:hover": { - backgroundColor: "#ededed", - borderRadius: "100px", - cursor: "pointer", - }, + }); }} + sx={ + primaryDevice.status !== "Deployed" && { + "&:hover": { + backgroundColor: "#ededed", + borderRadius: "100px", + cursor: "pointer", + }, + } + } justifyContent="center" > diff --git a/src/pages/Deployment/index.tsx b/src/pages/Deployment/index.tsx index 4e094b2..93b5ce9 100644 --- a/src/pages/Deployment/index.tsx +++ b/src/pages/Deployment/index.tsx @@ -4,11 +4,14 @@ import BasicInfo from "./BasicInfo"; import Participants from "./Participants"; import InformedConsentCard from "./InformedConsentCard"; import Devices from "./Devices"; +import { useTranslation } from "react-i18next"; const Deployment = () => { + const { t } = useTranslation(); + const sectionName = ["Deployments", "Deployment"]; - const description = - "See the detailed data of the Deployment. Select the participant for further individual data."; + const description = t("deployment:page_description"); + return ( diff --git a/src/pages/Deployments/DeploymentCard/index.tsx b/src/pages/Deployments/DeploymentCard/index.tsx index 3829029..36fc1f1 100644 --- a/src/pages/Deployments/DeploymentCard/index.tsx +++ b/src/pages/Deployments/DeploymentCard/index.tsx @@ -116,7 +116,12 @@ const DeploymentCard = ({ onClick={(event) => handleCardToggle(event)} open={isCardOpen} > - + @@ -164,7 +169,11 @@ export const DeploymentSkeletonCard = () => { /> {}} open={false}> - + diff --git a/src/pages/Deployments/ParticipantRecord/index.tsx b/src/pages/Deployments/ParticipantRecord/index.tsx index 1ef05b8..3c65a80 100644 --- a/src/pages/Deployments/ParticipantRecord/index.tsx +++ b/src/pages/Deployments/ParticipantRecord/index.tsx @@ -24,6 +24,7 @@ import { StyledContainer, StyledStatusDot, } from "./styles"; +import { useTranslation } from "react-i18next"; type Props = { participantData: ParticipantData; @@ -36,6 +37,8 @@ const ParticipantRecord = ({ participantStatus, deviceStatusList, }: Props) => { + const { t } = useTranslation(); + const participantRole = participantStatus.assignedParticipantRoles.roleNames[0]; const participantDeviceRoleName = @@ -49,13 +52,10 @@ const ParticipantRecord = ({ const lastDataUpload = useMemo(() => { const lastData = participantData.dateOfLastDataUpload; if (!lastData) { - return "Last data: Today"; + return ""; } const elapsedDays = calculateDaysPassedFromDate(lastData.toString()); - if (elapsedDays === 0) { - return "Last data: Today"; - } - return `Last data: ${elapsedDays} day${elapsedDays > 1 ? "s" : ""} ago`; + return t("common:last_data", { count: elapsedDays }); }, [participantData.dateOfLastDataUpload]); return ( diff --git a/src/pages/Participant/ParticipantDataCard/index.tsx b/src/pages/Participant/ParticipantDataCard/index.tsx index 5487508..0f6dc7a 100644 --- a/src/pages/Participant/ParticipantDataCard/index.tsx +++ b/src/pages/Participant/ParticipantDataCard/index.tsx @@ -59,12 +59,13 @@ const ParticipantDataCard = () => { } = useGetParticipantData(deploymentId); const [participant, setParticipant] = useState(null); - const initalValues = participantData?.roles - ? (participantData?.roles as any as Array) - .filter((v) => v) - .map((v) => v.data.values.toArray().filter((value) => value)) - .flat() - : participantData?.common.values.toArray().filter((v) => v); + const initalValues = + (participantData?.roles as any as Array).length !== 0 + ? (participantData?.roles as any as Array) + .filter((v) => v) + .map((v) => v.data.values.toArray().filter((value) => value)) + .flat() + : participantData?.common.values.toArray().filter((v) => v); useEffect(() => { if (participantGroupStatus) { setParticipant( diff --git a/src/pages/StudyOverview/Overview/DeploymentsInProgress/index.tsx b/src/pages/StudyOverview/Overview/DeploymentsInProgress/index.tsx index 14815bb..9aafaea 100644 --- a/src/pages/StudyOverview/Overview/DeploymentsInProgress/index.tsx +++ b/src/pages/StudyOverview/Overview/DeploymentsInProgress/index.tsx @@ -139,12 +139,12 @@ const DeploymentsInProgress = () => { - {g.devices.map((d) => ( + {g.devices.map((d, idx) => ( diff --git a/src/utils/utility.tsx b/src/utils/utility.tsx index f8c2faf..3fc0e1a 100644 --- a/src/utils/utility.tsx +++ b/src/utils/utility.tsx @@ -1,4 +1,5 @@ import ecgHeartIcon from "@Assets/images/ecg_heart.png"; +import ecgHeartIconBlue from "@Assets/images/ecg_heart_blue.png"; import { Day, Record } from "@Components/RecentDataChart"; import { customPalette as palette } from "@Utils/theme"; import carpCommon from "@cachet/carp-common"; @@ -113,7 +114,14 @@ export const getDeviceIcon = (deviceType: string, isBlue?: boolean) => { /> ); case "dk.cachet.carp.common.application.devices.MovesenseDevice": - return ( + return isBlue ? ( + heart icon + ) : ( heart icon ); case "dk.cachet.carp.common.application.devices.Smartphone":