Implementation of "click on status", "enable/disable"

src-admin/src/Tabs/Bridges.tsx

@@ -880,6 +880,7 @@ export class Bridges extends BridgesAndDevices<BridgesProps, BridgesState> {
             this.bridgeIndex = this.state.addDeviceDialog.bridgeIndex;
             return (
                 <SelectID
+                    imagePrefix="../.."
                     dialogName="matter"
                     types={addDeviceDialog.detectionType === 'device' ? ['device', 'channel'] : ['state']}
                     themeType={this.props.themeType}

src-admin/src/Tabs/Devices.tsx

@@ -591,6 +591,7 @@ class Devices extends BridgesAndDevices<DevicesProps, DevicesState> {
         if (addDeviceDialog.detectionType !== 'auto') {
             return (
                 <SelectID
+                    imagePrefix="../.."
                     types={addDeviceDialog.detectionType === 'device' ? ['device', 'channel'] : ['state']}
                     dialogName="matter"
                     themeType={this.props.themeType}

src-admin/src/components/QrCodeDialog.tsx

@@ -75,7 +75,9 @@ export default class QrCodeDialog extends Component<QrCodeDialogProps, QrCodeDia
     render(): React.JSX.Element {
         const qrCodeError = !!this.state.qrCode && !this.state.qrCode.startsWith('MT:');
         const manualCodeError =
-            !!this.state.manualCode && this.state.manualCode.length !== 11 && this.state.manualCode.length !== 21;
+            !!this.state.manualCode &&
+            this.state.manualCode.replace(/[-\s]/g, '').length !== 11 &&
+            this.state.manualCode.replace(/[-\s]/g, '').length !== 21;
 
         return (
             <Dialog

src/lib/DeviceManagement.ts

@@ -19,6 +19,12 @@ import { logEndpoint } from '../matter/EndpointStructureInspector';
 import { inspect } from 'util';
 import { convertDataToJsonConfig } from './JsonConfigUtils';
 
+export const ACTIONS = {
+    STATUS: 'status',
+    DISABLE: 'disable',
+    ENABLE: 'enable',
+};
+
 function strToBool(str: string): boolean | null {
     if (str === 'true') {
         return true;
@@ -124,42 +130,59 @@ class MatterAdapterDeviceManagement extends DeviceManagement<MatterAdapter> {
         const status: DeviceStatus = ioNode.node.isConnected ? 'connected' : 'disconnected';
         const id = ioNode.nodeId;
         const details = ioNode.details;
+        // TODO: Read here the valid enabled status
+        const isEnabled = true;
 
         let actions: (DeviceAction<'adapter'> | null)[] = [
+            {
+                // This is a special action when the user clicks on the status icon
+                id: ACTIONS.STATUS,
+                handler: (_ignored, context) => this.#handleOnStatusNode(ioNode, context),
+            },
+            isEnabled
+                ? {
+                      // This is a special action when the user clicks on the status icon
+                      id: ACTIONS.DISABLE,
+                      handler: (_ignored, context) => this.#handleEnableNode(ioNode, context, false),
+                  }
+                : {
+                      id: ACTIONS.ENABLE,
+                      handler: (_ignored, context) => this.#handleEnableNode(ioNode, context, true),
+                  },
             {
                 id: 'deleteNode',
                 icon: 'delete',
                 description: this.#adapter.getText('Unpair this node'),
-                handler: (id, context) => this.#handleDeleteNode(ioNode, context),
+                handler: (_ignored, context) => this.#handleDeleteNode(ioNode, context),
             },
             {
                 id: 'renameNode',
                 icon: 'edit',
                 description: this.#adapter.getText('Rename this node'),
-                handler: (id, context) => this.#handleRenameNode(ioNode, context),
+                handler: (_ignored, context) => this.#handleRenameNode(ioNode, context),
             },
-            // this command is not available if device is offline
+            // this command is not available if a device is offline
             ioNode.node.isConnected
                 ? {
                       id: 'pairingCodeNode',
                       icon: 'qrcode',
                       description: this.#adapter.getText('Generate new pairing code'),
-                      handler: (id, context) => this.#handlePairingCode(ioNode, context),
+                      handler: (_ignored, context) => this.#handlePairingCode(ioNode, context),
                   }
                 : null,
             ioNode.node.isConnected
                 ? {
                       id: 'configureNode',
                       icon: 'settings',
                       description: this.#adapter.getText('Configure this node'),
-                      handler: (id, context) => this.#handleConfigureNode(ioNode, context),
+                      handler: (_ignored, context) => this.#handleConfigureNode(ioNode, context),
                   }
                 : null,
             {
                 id: 'logNodeDebug',
                 icon: 'lines',
                 description: this.#adapter.getText('Output Debug details this node'),
-                handler: (id, context) => this.#handleLogDebugNode(ioNode, context),
+                handler: (_ignored, context) => this.#handleLogDebugNode(ioNode, context),
             },
         ];
 
@@ -191,7 +214,7 @@ class MatterAdapterDeviceManagement extends DeviceManagement<MatterAdapter> {
             res.push(deviceInfo);
             deviceCount++;
         }
-        // define the icon depends on number of sub-devices
+        // define the icon depends on the number of sub-devices
         node.icon = ioNode.hasAggregatorEndpoint ? 'hub5' : deviceCount > 1 ? 'hub3' : 'node';
 
         return res;
@@ -246,6 +269,48 @@ class MatterAdapterDeviceManagement extends DeviceManagement<MatterAdapter> {
         return data;
     }
 
+    #handleEnableNode(
+        node: GeneralMatterNode,
+        context: ActionContext,
+        enable: boolean,
+    ): Promise<{ refresh: DeviceRefresh }> {
+        // TODO
+        this.#adapter.log.info(`${enable ? 'Enable' : 'Disable'} node ${node.nodeId}`);
+
+        return Promise.resolve({ refresh: false });
+    }
+
+    async #handleOnStatusNode(node: GeneralMatterNode, context: ActionContext): Promise<{ refresh: DeviceRefresh }> {
+        // This is only an example how to react on clicking on Status
+        await context.showForm(
+            {
+                type: 'panel',
+                items: {
+                    connected: {
+                        type: 'checkbox',
+                        label: this.#adapter.getText('Connected'),
+                        sm: 12,
+                        readOnly: true,
+                        default: node.node.isConnected,
+                    },
+                },
+            },
+            {
+                data: {},
+                maxWidth: 'md',
+                title: this.#adapter.getText('Status of Node'),
+                buttons: [
+                    {
+                        type: 'cancel',
+                        label: this.#adapter.getText('Close'),
+                    },
+                ],
+            },
+        );
+
+        return { refresh: false };
+    }
+
     async #handleDeleteNode(node: GeneralMatterNode, context: ActionContext): Promise<{ refresh: DeviceRefresh }> {
         this.adapter.log.info(`Delete node ${node.nodeId}`);
         if (!(await context.showConfirmation(this.#adapter.t('Are you sure?')))) {
@@ -273,7 +338,7 @@ class MatterAdapterDeviceManagement extends DeviceManagement<MatterAdapter> {
             },
         });
 
-        // Start an interval that normally covers 30s and with each update the number gets slower increased for the percentage
+        // Start an interval that normally covers 30 seconds, and with each update the number gets slower increased for the percentage
         let errorHappened = false;
         try {
             await node.remove();