FE: new option add device from channel or device type (#77)

* added iobroker component lib * new option add device from channel or device
ioBroker · Aug 8, 2024 · c60b364 · c60b364
1 parent 64c06a5
commit c60b364
Show file tree

Hide file tree

Showing 14 changed files with 82 additions and 20 deletions.
diff --git a/src-admin/src/App.tsx b/src-admin/src/App.tsx
@@ -130,21 +130,26 @@ class App extends GenericApp<GenericAppProps, AppState> {
         window.alert = text => this.showToast(text);
     }
 
-    refreshBackendSubscription() {
+    async refreshBackendSubscription(): Promise<void> {
         this.refreshTimer && clearTimeout(this.refreshTimer);
         this.refreshTimer = setTimeout(() => {
             this.refreshTimer = null;
             this.refreshBackendSubscription();
         }, 60_000);
 
-        this.socket.subscribeOnInstance(`matter.${this.instance}`, 'gui', null, this.onBackendUpdates).then(result => {
-            if (result && typeof result === 'object' && result.accepted === false) {
-                console.error('Subscribe is not accepted');
-                this.setState({ backendRunning: !!result.accepted });
-            } else if (!this.state.backendRunning) {
-                this.setState({ backendRunning: true });
-            }
-        });
+        const result = await this.socket.subscribeOnInstance(
+            `matter.${this.instance}`,
+            'gui',
+            null,
+            this.onBackendUpdates,
+        );
+
+        if (result && typeof result === 'object' && result.accepted === false) {
+            console.error('Subscribe is not accepted');
+            this.setState({ backendRunning: !!result.accepted });
+        } else if (!this.state.backendRunning) {
+            this.setState({ backendRunning: true });
+        }
     }
 
     async onConnectionReady() {
@@ -227,7 +232,7 @@ class App extends GenericApp<GenericAppProps, AppState> {
             this.setState({ nodeStates });
         } else if (update.command === 'stopped') {
             // indication, that backend stopped
-            setTimeout(() => this.refreshBackendSubscription(), 5000);
+            setTimeout(() => this.refreshBackendSubscription(), 5_000);
         } else {
             this.controllerMessageHandler && this.controllerMessageHandler(update);
         }

diff --git a/src-admin/src/Tabs/Bridges.tsx b/src-admin/src/Tabs/Bridges.tsx
@@ -7,6 +7,7 @@ import {
     AutoMode,
     Close,
     Delete,
+    DeviceHub,
     DomainDisabled,
     Edit,
     FormatListBulleted,
@@ -190,7 +191,7 @@ interface BridgesState extends BridgesAndDevicesState {
     } | null;
     addDeviceDialog: {
         bridgeIndex: number;
-        noAutoDetect: boolean;
+        detectionType: 'state' | 'device' | 'auto';
         name: string;
         devices: BridgeDeviceDescription[];
     } | null;
@@ -734,12 +735,14 @@ export class Bridges extends BridgesAndDevices<BridgesProps, BridgesState> {
             return null;
         }
 
-        if (this.state.addDeviceDialog.noAutoDetect) {
+        const { addDeviceDialog } = this.state;
+
+        if (addDeviceDialog.detectionType !== 'auto') {
             this.bridgeIndex = this.state.addDeviceDialog.bridgeIndex;
             return (
                 <SelectID
                     dialogName="matter"
-                    types={['device', 'channel', 'state']}
+                    types={addDeviceDialog.detectionType === 'device' ? ['device', 'channel'] : ['state']}
                     themeType={this.props.themeType}
                     socket={this.props.socket}
                     theme={this.props.theme}
@@ -820,7 +823,7 @@ export class Bridges extends BridgesAndDevices<BridgesProps, BridgesState> {
                             this.setState({
                                 addDevicePreDialog: { open: false },
                                 addDeviceDialog: {
-                                    noAutoDetect: false,
+                                    detectionType: 'auto',
                                     name: getText(this.state.addDevicePreDialog.bridge.name),
                                     bridgeIndex: this.state.addDevicePreDialog.bridge.bridgeIndex,
                                     devices: this.state.addDevicePreDialog.bridge.devices,
@@ -843,7 +846,7 @@ export class Bridges extends BridgesAndDevices<BridgesProps, BridgesState> {
                             this.setState({
                                 addDevicePreDialog: { open: false },
                                 addDeviceDialog: {
-                                    noAutoDetect: true,
+                                    detectionType: 'state',
                                     name: getText(this.state.addDevicePreDialog.bridge.name),
                                     bridgeIndex: this.state.addDevicePreDialog.bridge.bridgeIndex,
                                     devices: this.state.addDevicePreDialog.bridge.devices,
@@ -857,6 +860,29 @@ export class Bridges extends BridgesAndDevices<BridgesProps, BridgesState> {
                     >
                         {I18n.t('Add device from one state')}
                     </Button>
+                    <Button
+                        onClick={() => {
+                            if (!this.state.addDevicePreDialog.open) {
+                                return;
+                            }
+
+                            this.setState({
+                                addDevicePreDialog: { open: false },
+                                addDeviceDialog: {
+                                    detectionType: 'device',
+                                    name: getText(this.state.addDevicePreDialog.bridge.name),
+                                    bridgeIndex: this.state.addDevicePreDialog.bridge.bridgeIndex,
+                                    devices: this.state.addDevicePreDialog.bridge.devices,
+                                },
+                            });
+                        }}
+                        startIcon={<DeviceHub />}
+                        color="primary"
+                        variant="contained"
+                        sx={{ justifyContent: 'flex-start' }}
+                    >
+                        {I18n.t('Add device from channel or device')}
+                    </Button>
                 </DialogContent>
             </Dialog>
         );

diff --git a/src-admin/src/Tabs/Devices.tsx b/src-admin/src/Tabs/Devices.tsx
@@ -7,6 +7,7 @@ import {
     AutoMode,
     Close,
     Delete,
+    DeviceHub,
     DomainDisabled,
     Edit,
     FormatListBulleted,
@@ -94,7 +95,7 @@ interface DevicesState extends BridgesAndDevicesState {
     addDevicePreDialog: boolean;
     addDeviceDialog: {
         devices: DeviceDescription[];
-        noAutoDetect: boolean;
+        detectionType: 'state' | 'device' | 'auto';
     } | null;
     addCustomDeviceDialog: {
         oid: string;
@@ -698,7 +699,7 @@ class Devices extends BridgesAndDevices<DevicesProps, DevicesState> {
                                 addDevicePreDialog: false,
                                 addDeviceDialog: {
                                     devices: this.props.matter.devices,
-                                    noAutoDetect: false,
+                                    detectionType: 'auto',
                                 },
                             });
                         }}
@@ -715,7 +716,7 @@ class Devices extends BridgesAndDevices<DevicesProps, DevicesState> {
                                 addDevicePreDialog: false,
                                 addDeviceDialog: {
                                     devices: this.props.matter.devices,
-                                    noAutoDetect: true,
+                                    detectionType: 'state',
                                 },
                             });
                         }}
@@ -726,6 +727,23 @@ class Devices extends BridgesAndDevices<DevicesProps, DevicesState> {
                     >
                         {I18n.t('Add device from one state')}
                     </Button>
+                    <Button
+                        onClick={() => {
+                            this.setState({
+                                addDevicePreDialog: false,
+                                addDeviceDialog: {
+                                    devices: this.props.matter.devices,
+                                    detectionType: 'device',
+                                },
+                            });
+                        }}
+                        startIcon={<DeviceHub />}
+                        color="primary"
+                        variant="contained"
+                        sx={{ justifyContent: 'flex-start' }}
+                    >
+                        {I18n.t('Add device from channel or device')}
+                    </Button>
                 </DialogContent>
             </Dialog>
         );
@@ -736,10 +754,12 @@ class Devices extends BridgesAndDevices<DevicesProps, DevicesState> {
             return null;
         }
 
-        if (this.state.addDeviceDialog.noAutoDetect) {
+        const { addDeviceDialog } = this.state;
+
+        if (addDeviceDialog.detectionType !== 'auto') {
             return (
                 <SelectID
-                    types={['device', 'channel', 'state']}
+                    types={addDeviceDialog.detectionType === 'device' ? ['device', 'channel'] : ['state']}
                     dialogName="matter"
                     themeType={this.props.themeType}
                     socket={this.props.socket}

diff --git a/src-admin/src/i18n/de.json b/src-admin/src/i18n/de.json
@@ -5,6 +5,7 @@
   "Add %s device(s)": "%s Gerät(e) hinzufügen",
   "Add bridge": "Bridge hinzufügen",
   "Add device": "Gerät hinzufügen",
+  "Add device from channel or device": "Gerät aus Kanal oder Gerät hinzufügen",
   "Add device from one state": "Gerät aus einem State hinzufügen",
   "Add device with auto-detection": "Gerät mit automatischer Erkennung hinzufügen",
   "Add devices": "Geräte hinzufügen",

diff --git a/src-admin/src/i18n/en.json b/src-admin/src/i18n/en.json
@@ -5,6 +5,7 @@
   "Add %s device(s)": "Add %s device(s)",
   "Add bridge": "Add bridge",
   "Add device": "Add device",
+  "Add device from channel or device": "Add device from channel or device",
   "Add device from one state": "Add device from one state",
   "Add device with auto-detection": "Add device with auto-detection",
   "Add devices": "Add devices",

diff --git a/src-admin/src/i18n/es.json b/src-admin/src/i18n/es.json
@@ -5,6 +5,7 @@
   "Add %s device(s)": "Agregar %s dispositivo(s)",
   "Add bridge": "Agregar puente",
   "Add device": "Añadir dispositivo",
+  "Add device from channel or device": "Agregar dispositivo desde canal o dispositivo",
   "Add device from one state": "Agregar dispositivo desde un estado",
   "Add device with auto-detection": "Agregar dispositivo con detección automática",
   "Add devices": "Agregar dispositivos",

diff --git a/src-admin/src/i18n/fr.json b/src-admin/src/i18n/fr.json
@@ -5,6 +5,7 @@
   "Add %s device(s)": "Ajouter %s périphérique(s)",
   "Add bridge": "Ajouter un pont",
   "Add device": "Ajouter un appareil",
+  "Add device from channel or device": "Ajouter un appareil à partir d'un canal ou d'un appareil",
   "Add device from one state": "Ajouter un appareil à partir d'un état",
   "Add device with auto-detection": "Ajouter un appareil avec détection automatique",
   "Add devices": "Ajouter des appareils",

diff --git a/src-admin/src/i18n/it.json b/src-admin/src/i18n/it.json
@@ -5,6 +5,7 @@
   "Add %s device(s)": "Aggiungi %s dispositivo/i",
   "Add bridge": "Aggiungi ponte",
   "Add device": "Aggiungi dispositivo",
+  "Add device from channel or device": "Aggiungi dispositivo dal canale o dal dispositivo",
   "Add device from one state": "Aggiungi dispositivo da uno stato",
   "Add device with auto-detection": "Aggiungi dispositivo con rilevamento automatico",
   "Add devices": "Aggiungi dispositivi",

diff --git a/src-admin/src/i18n/nl.json b/src-admin/src/i18n/nl.json
@@ -5,6 +5,7 @@
   "Add %s device(s)": "%s apparaat(en) toevoegen",
   "Add bridge": "Brug toevoegen",
   "Add device": "Voeg toestel toe",
+  "Add device from channel or device": "Apparaat toevoegen vanaf kanaal of apparaat",
   "Add device from one state": "Voeg apparaat toe vanuit één staat",
   "Add device with auto-detection": "Apparaat toevoegen met automatische detectie",
   "Add devices": "Apparaten toevoegen",

diff --git a/src-admin/src/i18n/pl.json b/src-admin/src/i18n/pl.json
@@ -5,6 +5,7 @@
   "Add %s device(s)": "Dodaj %s urządzeń",
   "Add bridge": "Dodaj most",
   "Add device": "Dodaj urządzenie",
+  "Add device from channel or device": "Dodaj urządzenie z kanału lub urządzenia",
   "Add device from one state": "Dodaj urządzenie z jednego stanu",
   "Add device with auto-detection": "Dodaj urządzenie z funkcją automatycznego wykrywania",
   "Add devices": "Dodaj urządzenia",

diff --git a/src-admin/src/i18n/pt.json b/src-admin/src/i18n/pt.json
@@ -5,6 +5,7 @@
   "Add %s device(s)": "Adicionar %s dispositivos",
   "Add bridge": "Adicionar ponte",
   "Add device": "Adicionar Dispositivo",
+  "Add device from channel or device": "Adicionar dispositivo do canal ou dispositivo",
   "Add device from one state": "Adicionar dispositivo de um estado",
   "Add device with auto-detection": "Adicionar dispositivo com detecção automática",
   "Add devices": "Adicionar dispositivos",

diff --git a/src-admin/src/i18n/ru.json b/src-admin/src/i18n/ru.json
@@ -5,6 +5,7 @@
   "Add %s device(s)": "Добавить устройство(а) %s",
   "Add bridge": "Добавить мост",
   "Add device": "Добавить устройство",
+  "Add device from channel or device": "Добавить устройство из канала или устройства",
   "Add device from one state": "Добавить устройство из одного штата",
   "Add device with auto-detection": "Добавить устройство с автоопределением",
   "Add devices": "Добавить устройства",

diff --git a/src-admin/src/i18n/uk.json b/src-admin/src/i18n/uk.json
@@ -5,6 +5,7 @@
   "Add %s device(s)": "Додати %s пристроїв",
   "Add bridge": "Додайте міст",
   "Add device": "Додайте пристрій",
+  "Add device from channel or device": "Додати пристрій із каналу або пристрою",
   "Add device from one state": "Додати пристрій з одного стану",
   "Add device with auto-detection": "Додати пристрій з автовизначенням",
   "Add devices": "Додайте пристрої",

diff --git a/src-admin/src/i18n/zh-cn.json b/src-admin/src/i18n/zh-cn.json
@@ -5,6 +5,7 @@
   "Add %s device(s)": "添加 %s 台设备",
   "Add bridge": "添加桥接",
   "Add device": "添加设备",
+  "Add device from channel or device": "从频道或设备添加设备",
   "Add device from one state": "从一种状态添加设备",
   "Add device with auto-detection": "添加自动检测设备",
   "Add devices": "添加设备",