adds frontend DeviceConnection component

frontend/src/App.css

@@ -8,7 +8,7 @@ input.instantUpdate {
 
 .numberComponentButton {
   padding: 0.15em 6px !important;
-  font-size: 0.70rem !important;
+  font-size: 0.7rem !important;
 }
 .navbarOffset {
   padding-top: 60px !important;
@@ -17,13 +17,15 @@ input.instantUpdate {
   position: fixed !important;
   padding: 5px;
 }
-.debugToast, .infoToast {
+.debugToast,
+.infoToast {
   background-color: rgba(114, 214, 253, 0.5) !important;
 }
 .warningToast {
   background-color: rgba(255, 181, 44, 0.603) !important;
 }
-.errorToast, .criticalToast {
+.errorToast,
+.criticalToast {
   background-color: rgba(216, 41, 18, 0.678) !important;
 }
 .buttonComponent {
@@ -35,8 +37,29 @@ input.instantUpdate {
   margin-right: 10px !important;
 }
 .numberComponent {
-    float: left !important;
-    margin-right: 10px !important;
-    width: 270px !important;
+  float: left !important;
+  margin-right: 10px !important;
+  width: 270px !important;
+}
+.dataServiceComponent {
+  position: relative;
+  z-index: 1;
+}
+.deviceConnectionComponent {
+  position: relative;
+  z-index: 1;
+}
+.overlayContent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(128, 128, 128, 0.5);
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column; /* Stack children vertically */
+  border-radius: var(--bs-card-inner-border-radius);
 }
-

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