update asset configure, add camera preset configure for beds

src/Components/Assets/AssetType/HL7Monitor.tsx

@@ -1,7 +1,6 @@
 import { SyntheticEvent, useEffect, useState } from "react";
-import { AssetData, ResolvedMiddleware } from "../AssetTypes";
+import { AssetClass, AssetData, ResolvedMiddleware } from "../AssetTypes";
 import * as Notification from "../../../Utils/Notifications.js";
-import MonitorConfigure from "../configure/MonitorConfigure";
 import Loading from "../../Common/Loading";
 import { checkIfValidIP } from "../../../Common/validation";
 import Card from "../../../CAREUI/display/Card";
@@ -13,6 +12,10 @@ import VentilatorPatientVitalsMonitor from "../../VitalsMonitor/VentilatorPatien
 import useAuthUser from "../../../Common/hooks/useAuthUser";
 import request from "../../../Utils/request/request";
 import routes from "../../../Redux/api";
+import { BedModel } from "../../Facility/models";
+import useQuery from "../../../Utils/request/useQuery";
+import { FieldLabel } from "../../Form/FormFields/FormField";
+import { BedSelect } from "../../Common/BedSelect";
 
 interface HL7MonitorProps {
   assetId: string;
@@ -151,3 +154,79 @@ const HL7Monitor = (props: HL7MonitorProps) => {
   );
 };
 export default HL7Monitor;
+
+const saveLink = async (assetId: string, bedId: string) => {
+  await request(routes.createAssetBed, {
+    body: {
+      asset: assetId,
+      bed: bedId,
+    },
+  });
+  Notification.Success({ msg: "AssetBed Link created successfully" });
+};
+const updateLink = async (
+  assetbedId: string,
+  assetId: string,
+  bed: BedModel,
+) => {
+  await request(routes.partialUpdateAssetBed, {
+    pathParams: { external_id: assetbedId },
+    body: {
+      asset: assetId,
+      bed: bed.id ?? "",
+    },
+  });
+  Notification.Success({ msg: "AssetBed Link updated successfully" });
+};
+
+function MonitorConfigure({ asset }: { asset: AssetData }) {
+  const [bed, setBed] = useState<BedModel>({});
+  const [shouldUpdateLink, setShouldUpdateLink] = useState(false);
+  const { data: assetBed } = useQuery(routes.listAssetBeds, {
+    query: { asset: asset.id },
+    onResponse: ({ res, data }) => {
+      if (res?.status === 200 && data && data.results.length > 0) {
+        setBed(data.results[0].bed_object);
+        setShouldUpdateLink(true);
+      }
+    },
+  });
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (shouldUpdateLink) {
+          updateLink(
+            assetBed?.results[0].id as string,
+            asset.id as string,
+            bed as BedModel,
+          );
+        } else {
+          saveLink(asset.id as string, bed?.id as string);
+        }
+      }}
+    >
+      <div className="flex flex-col">
+        <div className="w-full">
+          <FieldLabel className="">Bed</FieldLabel>
+          <BedSelect
+            name="bed"
+            setSelected={(selected) => setBed(selected as BedModel)}
+            selected={bed}
+            error=""
+            multiple={false}
+            location={asset?.location_object?.id}
+            facility={asset?.location_object?.facility?.id}
+            not_occupied_by_asset_type={AssetClass.HL7MONITOR}
+            className="w-full"
+          />
+        </div>
+        <Submit className="mt-6 w-full shrink-0">
+          <CareIcon icon="l-bed" className="text-lg" />
+          {shouldUpdateLink ? "Update Bed" : "Save Bed"}
+        </Submit>
+      </div>
+    </form>
+  );
+}

src/Components/Assets/AssetType/ONVIFCamera.tsx

@@ -1,9 +1,7 @@
 import { useEffect, useState } from "react";
-import { AssetData, ResolvedMiddleware } from "../AssetTypes";
+import { ResolvedMiddleware } from "../AssetTypes";
 import * as Notification from "../../../Utils/Notifications.js";
-import { BedModel } from "../../Facility/models";
 import { getCameraConfig } from "../../../Utils/transformUtils";
-import CameraConfigure from "../configure/CameraConfigure";
 import Loading from "../../Common/Loading";
 import { checkIfValidIP } from "../../../Common/validation";
 import TextFormField from "../../Form/FormFields/TextFormField";
@@ -14,9 +12,9 @@ import useAuthUser from "../../../Common/hooks/useAuthUser";
 import request from "../../../Utils/request/request";
 import routes from "../../../Redux/api";
 import useQuery from "../../../Utils/request/useQuery";
-
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 import useOperateCamera from "../../CameraFeed/useOperateCamera";
+import CameraFeed from "../../CameraFeed/CameraFeed";
 
 interface Props {
   assetId: string;
@@ -36,17 +34,12 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [streamUuid, setStreamUuid] = useState("");
-  const [bed, setBed] = useState<BedModel>({});
-  const [newPreset, setNewPreset] = useState("");
-  const [loadingAddPreset, setLoadingAddPreset] = useState(false);
   const [loadingSetConfiguration, setLoadingSetConfiguration] = useState(false);
   const { data: facility, loading } = useQuery(routes.getPermittedFacility, {
     pathParams: { id: facilityId },
   });
   const authUser = useAuthUser();
 
-  const { operate } = useOperateCamera(assetId ?? "", true);
-
   useEffect(() => {
     if (asset) {
       setAssetType(asset?.asset_class);
@@ -90,49 +83,18 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
     }
   };
 
-  const addPreset = async (e: SyntheticEvent) => {
-    e.preventDefault();
-    const data = {
-      bed_id: bed.id,
-      preset_name: newPreset,
-    };
-    try {
-      setLoadingAddPreset(true);
-
-      const { data: presetData } = await operate({ type: "get_status" });
+  const { operate, key } = useOperateCamera(asset.id);
 
-      const { res } = await request(routes.createAssetBed, {
-        body: {
-          meta: { ...data, ...presetData },
-          asset: assetId,
-          bed: bed?.id as string,
-        },
-      });
-      if (res?.status === 201) {
-        Notification.Success({
-          msg: "Preset Added Successfully",
-        });
-        setBed({});
-        setNewPreset("");
-      } else {
-        Notification.Error({
-          msg: "Something went wrong..!",
-        });
-      }
-    } catch (e) {
-      Notification.Error({
-        msg: "Something went wrong..!",
-      });
-    }
-    setLoadingAddPreset(false);
-  };
   if (isLoading || loading || !facility) return <Loading />;
 
   return (
-    <div className="space-y-6">
+    <div className="flex w-full flex-col gap-4 p-4 pr-0 md:flex-row md:items-start">
       {["DistrictAdmin", "StateAdmin"].includes(authUser.user_type) && (
-        <form className="rounded bg-white p-8 shadow" onSubmit={handleSubmit}>
-          <div className="grid grid-cols-1 gap-x-4 lg:grid-cols-2">
+        <form
+          className="w-full max-w-xs rounded-lg bg-white p-4 shadow"
+          onSubmit={handleSubmit}
+        >
+          <div className="flex flex-col">
             <TextFormField
               name="middleware_hostname"
               label={
@@ -201,15 +163,9 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
       )}
 
       {assetType === "ONVIF" ? (
-        <CameraConfigure
-          asset={asset as AssetData}
-          bed={bed}
-          setBed={setBed}
-          newPreset={newPreset}
-          setNewPreset={setNewPreset}
-          addPreset={addPreset}
-          isLoading={loadingAddPreset}
-        />
+        <div className="w-full overflow-hidden rounded-lg bg-white shadow">
+          <CameraFeed asset={asset} key={key} operate={operate} />
+        </div>
       ) : null}
     </div>
   );