pydase/frontend/src/components/DeviceConnection.tsx
2024-07-08 08:30:55 +02:00

57 lines
1.6 KiB
TypeScript

import React from "react";
import { LevelName } from "./NotificationsComponent";
import { DataServiceComponent, DataServiceJSON } from "./DataServiceComponent";
import { MethodComponent } from "./MethodComponent";
interface DeviceConnectionProps {
fullAccessPath: string;
props: DataServiceJSON;
isInstantUpdate: boolean;
addNotification: (message: string, levelname?: LevelName) => void;
displayName: string;
id: string;
}
export const DeviceConnectionComponent = React.memo(
({
fullAccessPath,
props,
isInstantUpdate,
addNotification,
displayName,
id,
}: DeviceConnectionProps) => {
const { connected, connect, ...updatedProps } = props;
const connectedVal = connected.value;
return (
<div className="deviceConnectionComponent" id={id}>
{!connectedVal && (
<div className="overlayContent">
<div>
{displayName != "" ? displayName : "Device"} is currently not available!
</div>
<MethodComponent
fullAccessPath={`${fullAccessPath}.connect`}
docString={connect.doc}
addNotification={addNotification}
displayName={"reconnect"}
id={id + "-connect"}
render={true}
/>
</div>
)}
<DataServiceComponent
props={updatedProps}
isInstantUpdate={isInstantUpdate}
addNotification={addNotification}
displayName={displayName}
id={id}
/>
</div>
);
},
);
DeviceConnectionComponent.displayName = "DeviceConnectionComponent";