From c89014d13850c99a8acf95c2f5ad6c9bd01f1e15 Mon Sep 17 00:00:00 2001 From: Daniel Jakab Date: Mon, 4 Nov 2024 14:45:45 +0100 Subject: [PATCH] Fix movsense icon, add translation key for deployment(s) page strings --- src/assets/images/ecg_heart.png | Bin 627 -> 1045 bytes src/assets/images/ecg_heart_blue.png | Bin 0 -> 627 bytes src/locales/en/common.json | 8 +++- src/locales/en/deployment.json | 17 +++++++- src/pages/Deployment/BasicInfo/index.tsx | 13 +++--- src/pages/Deployment/Devices/index.tsx | 37 ++++++++++-------- src/pages/Deployment/index.tsx | 7 +++- .../Deployments/DeploymentCard/index.tsx | 13 +++++- .../Deployments/ParticipantRecord/index.tsx | 10 ++--- .../Participant/ParticipantDataCard/index.tsx | 13 +++--- .../Overview/DeploymentsInProgress/index.tsx | 4 +- src/utils/utility.tsx | 10 ++++- 12 files changed, 87 insertions(+), 45 deletions(-) create mode 100644 src/assets/images/ecg_heart_blue.png diff --git a/src/assets/images/ecg_heart.png b/src/assets/images/ecg_heart.png index 2528ceadb806858c28691287eeef5b65ad3f9b55..53d501a882af886686d307758e2269d8b50ec95d 100644 GIT binary patch literal 1045 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzmUKs7M+SzC{oH>NSwWJ?9znhg z3{`3j3=J&|48MRv4KElNN(~qoUL`OvSj}Ky5HFasE6@fg(UKbBnda-upao=eFt9QT zF)#yJj6lf1D8&FW4aj2fVw8rngBUfSYM2-p+A|qgplYIkGzd%pVvrsP&AfmSVd4TN zxN3z3%m_9}+rE9xX+Vmzz$3Dlfk8|agc&`9R6YPri_8p(D2ed(u}aR*)k{ptPfFFR z$SnZrVz8;O0y1+`OA-|-a&z*EttxDlz$&bOY>=?Nk^)#sNw%$0gl~X?bAC~(f|;Iy zo`I4bmx6+VO;JjkRgjAtR6CGotCUevQedU8UtV6WS8lAAUzDzIXlZGwZ(yWvWTXpJ zp<7&;SCUwvn^&w1F$89gOKNd)QD#9&W`3Rm$lS!F{L&IzB_)tWZ~$>KW+6%?4_<0f}1q7iFdbZ3dZdXJ`Xfi6REI$3`DyIg(=_J_U;cy=up0 zqYn=@J1)t%hwQ*Wp62P|7!twxHY7Lju!D#W4^vlju|r@3ivy!8<55S|hGu6*At4bF z_TJ`43U3bWJv00G-KS2M{+&9PbN~9jezhq_laBpix#XYFc}X~;k$nU2w2#ag8{HO# zWLN(`qMh*6&a`CPre-3YcG-(F&efDowFX{{Q_;SA8)tFnle&P=H`MHY1 z@t(f&4^%7Hm`bSfCJ2k4< z)%kwEdEoKt9WRXv+jqMybTZf6(fnA&qV=hfp6HEcmHXM}mALr!^*))o>Y%w57vDd- zBQ;x6xYlbtc@;aq{kq$U`+Jy8uW=+r&HlV=<&pGe*+V;w&h{i*&HcP=xkbuiIhB8E zJ_Vh-US!x>aLL`RTJYn~_tW7@g=aREn@pRrfjODG$kM)Qvy{P?4$tYQWtY0kq*lHZ wbdSAPe#CRyYvmmi_A?c6pPMoN!2Wp$%;R^t+W|`Kp00i_>zopr0POT#6951J delta 585 zcmV-P0=E5?2=fGxB$4nGe*ghTVEVFfW^_*H~uPyq!KJ`*q{6|_{q3h)ld5;D*P zf-Rn82yy(8WF{3kGalR0lis!bbOlWK@37RK=2Z!A?{#{r0b-Fte@k@l(%qxWMSJ@? z65nV!V61Kws}-<$vWTE?OHXB_)4`NjR!^V&7D6W0#GdYU^a6HTW%ThJeub9K_r0tS zWnD}Kl~EB<0pYSgn@yOD4*cl~-1Y8H1CMmSemG-H4mCILHHRCb0+`stxM6%RS-|GG zETS@O5whBGXEC4ze~0QUCZO+|6kVJE6|{HOAlSa~m?B$<3*fo_{UhA(s=nMlQtu`N zVlFNq7;GsE$Yh4`#d>H!8u)Ln;%{q@Tx-_V4wi<)SZF$a@D%BjtI=rf)8<~voa1xG z!=KnVeNfln{j8=8EC)s8K`wQH4_Pm5-@fv+WmpooV)-=?f2%3skFkSASvPwLyM;%) zA$@r{KgPwDmn}evXt~r?PY@9I^Y9eBf);U&_O3J9$`fN%ph!4E$wc}i$ykz5v*hUl zGDV<@##!j+Vc}JgGr5F8N9ym8_A9E{$98sd35O1!PA?&n3aj?ldcFFApWQwp)E-Ank@4knHl^gKlJcK&JdsNB?l)Q-v6LRnc Xz+}J6L$(V|00000NkvXXu0mjfG>s1- diff --git a/src/assets/images/ecg_heart_blue.png b/src/assets/images/ecg_heart_blue.png new file mode 100644 index 0000000000000000000000000000000000000000..2528ceadb806858c28691287eeef5b65ad3f9b55 GIT binary patch literal 627 zcmV-(0*w8MP)H!8u)Ln;%{q@Tx-_V4wi<)SZF$a@D%BjtI=rf)8<~voa1xG!=KnVeNfln z{j8=8EC)s8K`wQH4_Pm5-@fv+WmpooV)-=?t101+v4cffH+u=Yg-5#~eR(-Q#>JMG zEkKEAxztrp5D@qC@D#j)7IBUCt~1)o6Ju4NNH{{tMEWDiSdvh)0{xr9MS>hF;DE2`PYc6M?JhYp`kFCmf&tM=FA68#EDoWm0M%)`Kdw3sC~7homA zJh`0!BN2AV?FD3tuum>2z!vYmhlQ0J@Zvm#I>LKY$_JFZi3t;O@CCqRzsp0m3rzq3 N002ovPDHLkV1l^85<&m~ literal 0 HcmV?d00001 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":