adds frontend DeviceConnection component

frontend/src/components/DeviceConnection.tsx

@@ -0,0 +1,66 @@
+import { useContext } from 'react';
+import React from 'react';
+import { getIdFromFullAccessPath } from '../utils/stringUtils';
+import { LevelName } from './NotificationsComponent';
+import { WebSettingsContext } from '../WebSettings';
+import { DataServiceComponent, DataServiceJSON } from './DataServiceComponent';
+import { MethodComponent } from './MethodComponent';
+
+type DeviceConnectionProps = {
+  name: string;
+  props: DataServiceJSON;
+  parentPath?: string;
+  isInstantUpdate: boolean;
+  addNotification: (message: string, levelname?: LevelName) => void;
+};
+
+export const DeviceConnectionComponent = React.memo(
+  ({
+    name,
+    props,
+    parentPath = '',
+    isInstantUpdate,
+    addNotification
+  }: DeviceConnectionProps) => {
+    const { available, connect, ...updatedProps } = props;
+    const availableVal = available.value;
+
+    console.log(connect);
+    let fullAccessPath = parentPath;
+    if (name) {
+      fullAccessPath = [parentPath, name].filter((element) => element).join('.');
+    }
+    const id = getIdFromFullAccessPath(fullAccessPath);
+
+    const webSettings = useContext(WebSettingsContext);
+    let displayName = fullAccessPath;
+
+    if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
+      displayName = webSettings[fullAccessPath].displayName;
+    }
+
+    return (
+      <div className={`deviceConnectionComponent ${displayName}`} id={id}>
+        {!availableVal && (
+          <div className="overlayContent">
+            <div>This device is currently not available!</div>
+            <MethodComponent
+              name="connect"
+              parentPath={fullAccessPath}
+              parameters={connect.parameters}
+              docString={connect.doc}
+              addNotification={addNotification}
+            />
+          </div>
+        )}
+        <DataServiceComponent
+          name={name}
+          props={updatedProps}
+          parentPath={parentPath}
+          isInstantUpdate={isInstantUpdate}
+          addNotification={addNotification}
+        />
+      </div>
+    );
+  }
+);

frontend/src/components/GenericComponent.tsx

@@ -8,6 +8,7 @@ import { AsyncMethodComponent } from './AsyncMethodComponent';
 import { StringComponent } from './StringComponent';
 import { ListComponent } from './ListComponent';
 import { DataServiceComponent, DataServiceJSON } from './DataServiceComponent';
+import { DeviceConnectionComponent } from './DeviceConnection';
 import { ImageComponent } from './ImageComponent';
 import { ColouredEnumComponent } from './ColouredEnumComponent';
 import { LevelName } from './NotificationsComponent';
@@ -21,6 +22,7 @@ type AttributeType =
   | 'list'
   | 'method'
   | 'DataService'
+  | 'DeviceConnection'
   | 'Enum'
   | 'NumberSlider'
   | 'Image'
@@ -161,6 +163,16 @@ export const GenericComponent = React.memo(
           addNotification={addNotification}
         />
       );
+    } else if (attribute.type === 'DeviceConnection') {
+      return (
+        <DeviceConnectionComponent
+          name={name}
+          props={attribute.value as DataServiceJSON}
+          parentPath={parentPath}
+          isInstantUpdate={isInstantUpdate}
+          addNotification={addNotification}
+        />
+      );
     } else if (attribute.type === 'list') {
       return (
         <ListComponent