Skip to content

Commit

Permalink
hide device in consultation page if not configured (#5779)
Browse files Browse the repository at this point in the history 
* hide device if not configured

* reponsive
  • Loading branch information
@rithviknishad
rithviknishad authored Jun 24, 2023
1 parent 6bb9c75 commit f404134
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 106 deletions.
194 changes: 89 additions & 105 deletions src/Components/Facility/ConsultationDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,55 @@ export const ConsultationDetails = (props: any) => {
}
};

const [hl7SocketUrl, setHL7SocketUrl] = useState<string>();
const [ventilatorSocketUrl, setVentilatorSocketUrl] = useState<string>();

useEffect(() => {
if (
!consultationData.facility ||
!consultationData.current_bed?.bed_object.id
)
return;

const fetchData = async () => {
const [facilityRes, assetBedRes] = await Promise.all([
dispatch(getPermittedFacility(consultationData.facility as any)),
dispatch(
listAssetBeds({
facility: consultationData.facility as any,
bed: consultationData.current_bed?.bed_object.id,
})
),
]);

const { middleware_address } = facilityRes.data as FacilityModel;
const assetBeds = assetBedRes.data.results as AssetBedModel[];

const hl7Meta = assetBeds.find(
(i) => i.asset_object.asset_class === AssetClass.HL7MONITOR
)?.asset_object?.meta;
const hl7Middleware = hl7Meta?.middleware_hostname || middleware_address;
if (hl7Middleware && hl7Meta?.local_ip_address) {
setHL7SocketUrl(
`wss://${hl7Middleware}/observations/${hl7Meta.local_ip_address}`
);
}

const ventilatorMeta = assetBeds.find(
(i) => i.asset_object.asset_class === AssetClass.VENTILATOR
)?.asset_object?.meta;
const ventilatorMiddleware =
ventilatorMeta?.middleware_hostname || middleware_address;
if (ventilatorMiddleware && ventilatorMeta?.local_ip_address) {
setVentilatorSocketUrl(
`wss://${ventilatorMiddleware}/observations/${ventilatorMeta?.local_ip_address}`
);
}
};

fetchData();
}, [consultationData]);

const fetchData = useCallback(
async (status: statusType) => {
setIsLoading(true);
Expand Down Expand Up @@ -443,15 +492,50 @@ export const ConsultationDetails = (props: any) => {
</div>
{tab === "UPDATES" && (
<div className="flex flex-col gap-2">
{!consultationData.discharge_date && (
<section className="bg-white shadow-sm rounded-md flex items-stretch w-full flex-col lg:flex-row overflow-hidden">
<VitalsCard consultation={consultationData} />
</section>
)}
{!consultationData.discharge_date &&
hl7SocketUrl &&
ventilatorSocketUrl && (
<section className="bg-white shadow-sm rounded-md flex items-stretch w-full flex-col lg:flex-row overflow-hidden">
<div className="flex flex-col lg:flex-row bg-slate-800 gap-1 justify-between rounded mx-auto">
<div className="flex-1 min-h-[400px]">
<HL7PatientVitalsMonitor socketUrl={hl7SocketUrl} />
</div>
<div className="flex-1 min-h-[400px]">
<VentilatorPatientVitalsMonitor
socketUrl={ventilatorSocketUrl}
/>
</div>
</div>
</section>
)}
<div className="flex xl:flex-row flex-col">
<div className="xl:w-2/3 w-full">
<PageTitle title="Info" hideBack={true} breadcrumbs={false} />
<div className="grid lg:grid-cols-2 gap-4 mt-4">
{!consultationData.discharge_date &&
((hl7SocketUrl && !ventilatorSocketUrl) ||
(!hl7SocketUrl && ventilatorSocketUrl)) && (
<section className="lg:col-span-2 bg-white shadow-sm rounded-md flex items-stretch w-full flex-col lg:flex-row overflow-hidden">
{(hl7SocketUrl || ventilatorSocketUrl) && (
<div className="flex flex-col lg:flex-row bg-slate-800 gap-1 justify-between rounded mx-auto">
{hl7SocketUrl && (
<div className="flex-1 min-h-[400px]">
<HL7PatientVitalsMonitor
socketUrl={hl7SocketUrl}
/>
</div>
)}
{ventilatorSocketUrl && (
<div className="flex-1 min-h-[400px]">
<VentilatorPatientVitalsMonitor
socketUrl={ventilatorSocketUrl}
/>
</div>
)}
</div>
)}
</section>
)}
{consultationData.discharge_date && (
<div
className={`bg-white overflow-hidden shadow rounded-lg gap-4 ${
Expand Down Expand Up @@ -1147,103 +1231,3 @@ export const ConsultationDetails = (props: any) => {
</div>
);
};

const VitalsCard = ({ consultation }: { consultation: ConsultationModel }) => {
const dispatch = useDispatch<any>();
const [loading, setLoading] = useState(false);
const [hl7SocketUrl, setHL7SocketUrl] = useState<string>();
const [ventilatorSocketUrl, setVentilatorSocketUrl] = useState<string>();

useEffect(() => {
if (!consultation.facility || !consultation.current_bed?.bed_object.id)
return;

const fetchData = async () => {
setLoading(true);

const [facilityRes, assetBedRes] = await Promise.all([
dispatch(getPermittedFacility(consultation.facility as any)),
dispatch(
listAssetBeds({
facility: consultation.facility as any,
bed: consultation.current_bed?.bed_object.id,
})
),
]);

const { middleware_address } = facilityRes.data as FacilityModel;
const assetBeds = assetBedRes.data.results as AssetBedModel[];

const hl7Meta = assetBeds.find(
(i) => i.asset_object.asset_class === AssetClass.HL7MONITOR
)?.asset_object?.meta;
const hl7Middleware = hl7Meta?.middleware_hostname || middleware_address;
if (hl7Middleware && hl7Meta?.local_ip_address) {
setHL7SocketUrl(
`wss://${hl7Middleware}/observations/${hl7Meta.local_ip_address}`
);
}

const ventilatorMeta = assetBeds.find(
(i) => i.asset_object.asset_class === AssetClass.VENTILATOR
)?.asset_object?.meta;
const ventilatorMiddleware =
ventilatorMeta?.middleware_hostname || middleware_address;
if (ventilatorMiddleware && ventilatorMeta?.local_ip_address) {
setVentilatorSocketUrl(
`wss://${ventilatorMiddleware}/observations/${ventilatorMeta?.local_ip_address}`
);
}

setLoading(false);
};

fetchData();
}, [consultation]);

if (loading) {
return (
<div className="bg-black flex w-full h-full max-h-[400px] justify-center items-center text-center gap-4 rounded">
<Loading />
</div>
);
}

if (!hl7SocketUrl && !ventilatorSocketUrl) {
return (
<span className="sr-only">
No HL7 Monitor or Ventilator configured for this patient
</span>
);
}

return (
<div className="flex flex-col lg:flex-row w-full bg-slate-800 gap-1 justify-between min-h-[400px] rounded">
<div className="flex-1">
{hl7SocketUrl ? (
<HL7PatientVitalsMonitor socketUrl={hl7SocketUrl} />
) : (
<VitalsDeviceNotConfigured device="HL7 Monitor" />
)}
</div>
<div className="flex-1">
{ventilatorSocketUrl ? (
<VentilatorPatientVitalsMonitor socketUrl={ventilatorSocketUrl} />
) : (
<VitalsDeviceNotConfigured device="Ventilator" />
)}
</div>
</div>
);
};

const VitalsDeviceNotConfigured = ({ device }: { device: string }) => {
return (
<div className="hidden lg:flex flex-col gap-4 bg-black w-full h-full items-center justify-center text-center text-gray-700">
<CareIcon className="care-l-sync-exclamation text-4xl text-gray-600" />
<span className="font-medium text-xl text-gray-700">
No {device} configured for this bed
</span>
</div>
);
};
2 changes: 1 addition & 1 deletion src/Components/Patient/PatientRegister.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ import { MaterialUiPickersDate } from "@material-ui/pickers/typings/date";
import InsuranceDetailsBuilder from "../HCX/InsuranceDetailsBuilder";
import { HCXPolicyModel } from "../HCX/models";
import HCXPolicyValidator from "../HCX/validators";
import { FieldError } from "../Form/Fi1eldValidators";
import { FieldError } from "../Form/FieldValidators";
import useAppHistory from "../../Common/hooks/useAppHistory";
import DialogModal from "../Common/Dialog";
import { DraftSection, useAutoSaveReducer } from "../../Utils/AutoSave";
Expand Down

0 comments on commit f404134

Please sign in to comment.