Skip to content

Commit

Permalink
Split camera access key input fields (#4727)
Browse files Browse the repository at this point in the history 
* fix #4724

* fix layout
  • Loading branch information
@rithviknishad @rabilrbl
rithviknishad authored and rabilrbl committed Feb 6, 2023
1 parent 2f8e562 commit ad20bc0
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 79 deletions.
140 changes: 63 additions & 77 deletions src/Components/Assets/AssetType/ONVIFCamera.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { useEffect, useState } from "react";
import { Card, CardContent } from "@material-ui/core";
import { AssetData } from "../AssetTypes";
import { useDispatch } from "react-redux";
import {
Expand Down Expand Up @@ -33,7 +32,9 @@ const ONVIFCamera = (props: ONVIFCameraProps) => {
useState("");
const [cameraAddress, setCameraAddress] = useState("");
const [ipadrdress_error, setIpAddress_error] = useState("");
const [cameraAccessKey, setCameraAccessKey] = useState("");
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [streamUuid, setStreamUuid] = useState("");
const [bed, setBed] = useState<BedModel>({});
const [newPreset, setNewPreset] = useState("");
const [refreshPresetsHash, setRefreshPresetsHash] = useState(
Expand All @@ -54,10 +55,15 @@ const ONVIFCamera = (props: ONVIFCameraProps) => {
}, [dispatch, facilityId]);

useEffect(() => {
setAssetType(asset?.asset_class);
setMiddlewareHostname(asset?.meta?.middleware_hostname);
setCameraAddress(asset?.meta?.local_ip_address);
setCameraAccessKey(asset?.meta?.camera_access_key);
if (asset) {
setAssetType(asset?.asset_class);
const cameraConfig = getCameraConfig(asset);
setMiddlewareHostname(cameraConfig.middleware_hostname);
setCameraAddress(cameraConfig.hostname);
setUsername(cameraConfig.username);
setPassword(cameraConfig.password);
setStreamUuid(cameraConfig.accessKey);
}
setIsLoading(false);
}, [asset]);

Expand All @@ -70,7 +76,7 @@ const ONVIFCamera = (props: ONVIFCameraProps) => {
asset_type: "CAMERA",
middleware_hostname: middlewareHostname, // TODO: remove this infavour of facility.middleware_address
local_ip_address: cameraAddress,
camera_access_key: cameraAccessKey,
camera_access_key: `${username}:${password}:${streamUuid}`,
},
};
const res: any = await Promise.resolve(
Expand Down Expand Up @@ -128,78 +134,58 @@ const ONVIFCamera = (props: ONVIFCameraProps) => {
});
}
};

if (isLoading) return <Loading />;
return (
<div>
<Card>
<CardContent>
<form onSubmit={handleSubmit}>
<CardContent>
<div className="mt-2 grid gap-4 grid-cols-1 lg:grid-cols-2 col-span-1">
<div>
<label id="middleware-hostname">
Hospital Middleware Hostname
</label>
<TextFormField
name="middleware-hostname"
id="middleware-hostname"
type="text"
autoComplete="off"
value={middlewareHostname}
onChange={(e) => setMiddlewareHostname(e.value)}
className="mt-2"
/>
</div>
<div>
<label id="camera-addess">Local IP Address</label>
<TextFormField
name="camera-access-addess"
id="camera-access-addess"
type="text"
autoComplete="new-addess"
value={cameraAddress}
onChange={(e) => setCameraAddress(e.value)}
className="mt-2"
error={ipadrdress_error}
/>
</div>
<div>
<label id="camera-access-key">
Camera Access Key{" "}
<button className="tooltip">
<span className="tooltip-text tooltip-right">
<span className="text-sm font-semibold">
Camera Access Key format: username:password:uuid
</span>
</span>
<button className="rounded">
<i className="fa-solid fa-circle-question"></i>
</button>
</button>
</label>
<TextFormField
name="camera-access-key"
id="camera-access-key"
type="password"
autoComplete="new-password" // Chrome ignores autocomplete=off for password fields
value={cameraAccessKey}
onChange={(e) => setCameraAccessKey(e.value)}
className="mt-2"
/>
</div>
</div>

<div className="flex justify-between mt-4">
<Submit
className="w-full md:w-auto ml-auto"
onClick={handleSubmit}
label="Set Configuration"
/>
</div>
</CardContent>
</form>
</CardContent>
</Card>
return (
<div className="space-y-6">
<form className="bg-white rounded shadow p-8" onSubmit={handleSubmit}>
<div className="grid gap-x-4 grid-cols-1 lg:grid-cols-2">
<TextFormField
name="middleware_hostname"
label="Hospital Middleware Hostname"
autoComplete="off"
value={middlewareHostname}
onChange={({ value }) => setMiddlewareHostname(value)}
/>
<TextFormField
name="camera_address"
label="Local IP Address"
autoComplete="off"
value={cameraAddress}
onChange={({ value }) => setCameraAddress(value)}
error={ipadrdress_error}
/>
<TextFormField
name="username"
label="Username"
autoComplete="off"
value={username}
onChange={({ value }) => setUsername(value)}
/>
<TextFormField
name="password"
label="Password"
autoComplete="off"
type="password"
value={password}
onChange={({ value }) => setPassword(value)}
/>
<TextFormField
name="stream_uuid"
label="Stream UUID"
autoComplete="off"
value={streamUuid}
type="password"
className="tracking-widest"
labelClassName="tracking-normal"
onChange={({ value }) => setStreamUuid(value)}
/>
</div>
<div className="flex justify-end">
<Submit className="w-full md:w-auto" label="Set Configuration" />
</div>
</form>

{assetType === "ONVIF" ? (
<CameraConfigure
Expand Down
5 changes: 3 additions & 2 deletions src/Utils/transformUtils.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { AssetData } from "../Components/Assets/AssetTypes";

export const getCameraConfig = (asset: AssetData) => {
const { meta }: any = asset;
const { meta } = asset;
return {
middleware_hostname: meta.middleware_hostname,
middleware_hostname: meta?.middleware_hostname,
id: asset?.id,
hostname: meta?.local_ip_address,
username: meta?.camera_access_key?.split(":")[0],
Expand Down

0 comments on commit ad20bc0

Please sign in to comment.