diff --git a/src/Components/Assets/AssetType/HL7Monitor.tsx b/src/Components/Assets/AssetType/HL7Monitor.tsx index a7be23baad..cca0a7571b 100644 --- a/src/Components/Assets/AssetType/HL7Monitor.tsx +++ b/src/Components/Assets/AssetType/HL7Monitor.tsx @@ -131,12 +131,19 @@ const HL7Monitor = (props: HL7MonitorProps) => { )} {assetType === "HL7MONITOR" && ( - + )} {assetType === "VENTILATOR" && ( )} diff --git a/src/Components/Facility/CentralNursingStation.tsx b/src/Components/Facility/CentralNursingStation.tsx index 186dbbd48e..e063292cf2 100644 --- a/src/Components/Facility/CentralNursingStation.tsx +++ b/src/Components/Facility/CentralNursingStation.tsx @@ -207,7 +207,8 @@ export default function CentralNursingStation({ facilityId }: Props) { ?.start_date } key={`${props.patientAssetBed?.bed.id}-${hash}`} - {...props} + patientAssetBed={props.patientAssetBed} + socketUrl={props.socketUrl || ""} config={config} /> diff --git a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx index 1ccd6e0626..fdbf484632 100644 --- a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx +++ b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx @@ -111,6 +111,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => { meta: monitorBedData?.asset_object?.meta, }} socketUrl={hl7SocketUrl} + hideHeader={true} />
@@ -122,6 +123,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => { meta: ventilatorBedData?.asset_object?.meta, }} socketUrl={ventilatorSocketUrl} + hideHeader={true} />
@@ -157,6 +159,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => { }} socketUrl={hl7SocketUrl} config={vitals.config} + hideHeader={true} /> )} @@ -173,6 +176,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => { }} socketUrl={ventilatorSocketUrl} config={vitals.config} + hideHeader={true} /> )} diff --git a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx index d91b0c56b2..268e6c91ff 100644 --- a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx +++ b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx @@ -1,7 +1,5 @@ import { useEffect } from "react"; import useHL7VitalsMonitor from "./useHL7VitalsMonitor"; -import { Link } from "raviger"; -import { GENDER_TYPES } from "../../Common/constants"; import CareIcon from "../../CAREUI/icons/CareIcon"; import WaveformLabels from "./WaveformLabels"; import { classNames } from "../../Utils/utils"; @@ -9,6 +7,8 @@ import { IVitalsComponentProps, VitalsValueBase } from "./types"; import { triggerGoal } from "../../Integrations/Plausible"; import useAuthUser from "../../Common/hooks/useAuthUser"; import dayjs from "dayjs"; +import VitalsMonitorHeader from "./VitalsMonitorHeader"; +import VitalsMonitorFooter from "./VitalsMonitorFooter"; const minutesAgo = (timestamp: string) => { return `${dayjs().diff(dayjs(timestamp), "minute")}m ago`; @@ -18,7 +18,7 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) { const { connect, waveformCanvas, data, isOnline } = useHL7VitalsMonitor( props.config ); - const { patient, bed, asset } = props.patientAssetBed ?? {}; + const { bed, asset } = props.patientAssetBed ?? {}; const authUser = useAuthUser(); useEffect(() => { @@ -41,56 +41,8 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) { return (
- {props.patientAssetBed && ( -
-
- {patient ? ( - - {patient?.name} - - ) : ( - - - No Patient - - )} - {patient && ( - - {patient.age}y;{" "} - {GENDER_TYPES.find((g) => g.id === patient.gender)?.icon} - - )} -
-
- {asset && ( - - - {asset.name} - - )} - {bed && ( - - - - {bed.name} - - - - {bed.location_object?.name} - - - )} -
-
+ {props.hideHeader ? null : ( + )}
@@ -227,6 +179,7 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
+ {props.hideFooter ? null : } ); } diff --git a/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx index b03fe0645c..ee3f471b22 100644 --- a/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx +++ b/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx @@ -1,19 +1,18 @@ import { useEffect } from "react"; -import { Link } from "raviger"; -import { GENDER_TYPES } from "../../Common/constants"; import CareIcon from "../../CAREUI/icons/CareIcon"; import useVentilatorVitalsMonitor from "./useVentilatorVitalsMonitor"; import { IVitalsComponentProps, VitalsValueBase } from "./types"; import { classNames } from "../../Utils/utils"; import WaveformLabels from "./WaveformLabels"; import { VitalsNonWaveformContent } from "./HL7PatientVitalsMonitor"; +import VitalsMonitorHeader from "./VitalsMonitorHeader"; +import VitalsMonitorFooter from "./VitalsMonitorFooter"; export default function VentilatorPatientVitalsMonitor( props: IVitalsComponentProps ) { const { connect, waveformCanvas, data, isOnline } = useVentilatorVitalsMonitor(props.config); - const { patient, bed, asset } = props.patientAssetBed ?? {}; useEffect(() => { connect(props.socketUrl); @@ -21,62 +20,8 @@ export default function VentilatorPatientVitalsMonitor( return (
- {props.patientAssetBed && ( -
-
- {patient ? ( - - {patient?.name} - - ) : ( - - - No Patient - - )} - {patient && ( - - {patient.age}y;{" "} - {GENDER_TYPES.find((g) => g.id === patient.gender)?.icon} - - )} -
-
- {asset && ( -
- - - - {asset.name} - - -
- )} - {bed && ( -
- - - - {bed.name} - - - - {bed.location_object?.name} - - -
- )} -
-
+ {props.hideHeader ? null : ( + )}
@@ -138,6 +83,9 @@ export default function VentilatorPatientVitalsMonitor( />
+ {props.hideFooter ? null : ( + + )}
); } diff --git a/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx new file mode 100644 index 0000000000..cf56c3c5e5 --- /dev/null +++ b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx @@ -0,0 +1,77 @@ +import CareIcon from "../../CAREUI/icons/CareIcon"; +import { AssetData, assetClassProps } from "../Assets/AssetTypes"; +import ButtonV2 from "../Common/components/ButtonV2"; +import { navigate } from "raviger"; +import { useTranslation } from "react-i18next"; +import { Popover, Transition } from "@headlessui/react"; +import { Fragment } from "react"; + +interface VitalsMonitorAssetPopoverProps { + asset?: AssetData; +} + +const VitalsMonitorAssetPopover = ({ + asset, +}: VitalsMonitorAssetPopoverProps) => { + const { t } = useTranslation(); + + return ( + + + + + + +
+
+ +

{asset?.name}

+
+
+

Middleware Hostname:

+

+ {asset?.resolved_middleware?.hostname} +

+
+
+

Local IP Address:

+

+ {asset?.meta?.local_ip_address} +

+
+ + navigate( + `/facility/${asset?.location_object.facility?.id}/assets/${asset?.id}/configure` + ) + } + id="configure-asset" + data-testid="asset-configure-button" + > + + {t("configure")} + +
+
+
+
+ ); +}; + +export default VitalsMonitorAssetPopover; diff --git a/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx b/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx new file mode 100644 index 0000000000..a9598f1696 --- /dev/null +++ b/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx @@ -0,0 +1,17 @@ +import { AssetData } from "../Assets/AssetTypes"; +import VitalsMonitorAssetPopover from "./VitalsMonitorAssetPopover"; + +interface IVitalsMonitorFooterProps { + asset?: AssetData; +} + +const VitalsMonitorFooter = ({ asset }: IVitalsMonitorFooterProps) => { + return ( +
+

{asset?.name}

+ +
+ ); +}; + +export default VitalsMonitorFooter; diff --git a/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx b/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx new file mode 100644 index 0000000000..2f9df8607b --- /dev/null +++ b/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx @@ -0,0 +1,56 @@ +import { PatientAssetBed } from "../Assets/AssetTypes"; +import { Link } from "raviger"; +import CareIcon from "../../CAREUI/icons/CareIcon"; +import { GENDER_TYPES } from "../../Common/constants"; + +interface VitalsMonitorHeaderProps { + patientAssetBed?: PatientAssetBed; +} + +const VitalsMonitorHeader = ({ patientAssetBed }: VitalsMonitorHeaderProps) => { + const { patient, bed } = patientAssetBed ?? {}; + return ( +
+
+ {patient ? ( + + {patient?.name} + + ) : ( + + + No Patient + + )} + {patient && ( + + {patient.age}y;{" "} + {GENDER_TYPES.find((g) => g.id === patient.gender)?.icon} + + )} +
+
+ {bed && ( + + + + {bed.name} + + + + {bed.location_object?.name} + + + )} +
+
+ ); +}; + +export default VitalsMonitorHeader; diff --git a/src/Components/VitalsMonitor/types.ts b/src/Components/VitalsMonitor/types.ts index c73d7399b5..d6812d273d 100644 --- a/src/Components/VitalsMonitor/types.ts +++ b/src/Components/VitalsMonitor/types.ts @@ -50,4 +50,6 @@ export interface IVitalsComponentProps { patientAssetBed?: PatientAssetBed; socketUrl: string; config?: ReturnType; + hideHeader?: boolean; + hideFooter?: boolean; }