Show always placeholder: https://github.com/ioBroker/ioBroker.matter/… (#336)

* Show always placeholder: #297

* Show error as dialog: #329

* Translate some error messages

* Translate some error messages

* Fix linter

* UPdated DM package

Author: GermanBluefox

src-admin/package-lock.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@foxriver76/iob-component-lib": "^0.2.0",
-        "@iobroker/adapter-react-v5": "^7.4.15",
-        "@iobroker/dm-gui-components": "^7.4.15",
+        "@iobroker/adapter-react-v5": "^7.4.16",
+        "@iobroker/dm-gui-components": "^7.4.16",
         "@iobroker/type-detector": "^4.1.1",
         "@types/react-dom": "^18.3.5",
         "@types/uuid": "^10.0.0",

src-admin/package.json

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import { Add, Bluetooth, BluetoothDisabled, Close, Save, Search } from '@mui/icons-material';
+import { Add, Bluetooth, BluetoothDisabled, Close, Save, Search, Warning } from '@mui/icons-material';
 
 import {
     Backdrop,
@@ -15,7 +15,14 @@ import {
     Typography,
 } from '@mui/material';
 
-import { type AdminConnection, type IobTheme, type ThemeName, type ThemeType, I18n } from '@iobroker/adapter-react-v5';
+import {
+    type AdminConnection,
+    type IobTheme,
+    type ThemeName,
+    type ThemeType,
+    I18n,
+    DialogMessage,
+} from '@iobroker/adapter-react-v5';
 import DeviceManager from '@iobroker/dm-gui-components';
 
 import type { CommissionableDevice, GUIMessage, MatterConfig } from '../types';
@@ -114,6 +121,7 @@ interface ComponentState {
     /* increase this number to reload the devices */
     triggerControllerLoad: number;
     discoveryRunning: boolean;
+    errorText: string;
 }
 
 class Controller extends Component<ComponentProps, ComponentState> {
@@ -134,6 +142,7 @@ class Controller extends Component<ComponentProps, ComponentState> {
             bleDialogOpen: false,
             triggerControllerLoad: 0,
             discoveryRunning: false,
+            errorText: '',
         };
     }
 
@@ -536,7 +545,9 @@ class Controller extends Component<ComponentProps, ComponentState> {
                         this.setState({ backendProcessingActive: false });
 
                         if (result.error || !result.result) {
-                            window.alert(`Cannot pair device: ${result.error || 'Unknown error'}`);
+                            this.setState({
+                                errorText: `${I18n.t('Cannot pair device')}: ${I18n.t(result.error) || I18n.t('Unknown error')}`,
+                            });
                         } else {
                             window.alert(I18n.t('Connected'));
                             this.refDeviceManager.current?.loadData();
@@ -609,6 +620,27 @@ class Controller extends Component<ComponentProps, ComponentState> {
         );
     }
 
+    renderShowErrorDialog(): React.JSX.Element | null {
+        if (!this.state.errorText) {
+            return null;
+        }
+        let errorText = this.state.errorText;
+        if (this.state.errorText.includes('Unknown command')) {
+            errorText = errorText.replace('Unknown command', I18n.t('Unknown command'));
+        } else if (this.state.errorText.includes('Error while executing command')) {
+            errorText = errorText.replace('Error while executing command', I18n.t('Error while executing command'));
+        }
+
+        return (
+            <DialogMessage
+                icon={<Warning style={{ color: this.props.themeType === 'dark' ? '#ff3434' : '#b60000' }} />}
+                text={errorText}
+                title={I18n.t('Error')}
+                onClose={() => this.setState({ errorText: '' })}
+            />
+        );
+    }
+
     render(): React.JSX.Element {
         if (!this.props.alive && this.state.showDiscoveryDialog) {
             setTimeout(() => this.setState({ showDiscoveryDialog: false }), 100);
@@ -628,6 +660,7 @@ class Controller extends Component<ComponentProps, ComponentState> {
                 {this.renderShowDiscoveredDevices()}
                 {this.renderQrCodeDialog()}
                 {this.renderBleDialog()}
+                {this.renderShowErrorDialog()}
                 <div>
                     {I18n.t('Off')}
                     <Switch

src-admin/src/Tabs/Controller.tsx

@@ -259,6 +259,9 @@ class Options extends Component<OptionsProps, OptionsState> {
                         onChange={e => this.props.onChange('controllerFabricLabel', e.target.value)}
                         margin="normal"
                         slotProps={{
+                            inputLabel: {
+                                shrink: true,
+                            },
                             htmlInput: {
                                 maxLength: 32,
                             },

src-admin/src/Tabs/Options.tsx

@@ -35,6 +35,7 @@
     "Brightness by ON": "Helligkeit durch EIN",
     "Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.": "Lokales QR-Code-Scannen ist nicht möglich, da ioBroker Admin ohne HTTPS verwendet wird.\nBitte verwenden Sie den ioBroker Cloud QR-Code-Scanner über die Schaltfläche unten oder aktivieren Sie HTTPS für den ioBroker Admin.",
     "Cancel": "Abbrechen",
+    "Cannot pair device": "Gerät kann nicht gekoppelt werden",
     "Close": "Schließen",
     "Cloud Account": "Cloud-Konto",
     "Code must start with \"MT:\"": "Der Code muss mit „MT:“ beginnen.",
@@ -49,6 +50,8 @@
     "Controller Settings": "Controller-Einstellungen",
     "Controller and Device Factory Reset": "Controller und Geräte auf Werkseinstellungen zurücksetzen",
     "Controller fabric label": "Controller-Fabric-Label",
+    "Controller is not activated.": "Controller ist nicht aktiviert.",
+    "Controller is not initialized.": "Controller ist nicht initialisiert.",
     "Copied to clipboard": "In die Zwischenablage kopiert",
     "Default bridge": "Standard-Bridge",
     "Default bridge (Alexa-compatible)": "Standard-Bridge (Alexa-kompatibel, verwendet Port 5540)",
@@ -77,6 +80,8 @@
     "Enable device": "Gerät aktivieren",
     "Enable enhanced debug logging for the Matter protocol": "Erweitertes Debug-Logging für das Matter-Protokoll aktivieren (nur sichtbar mit der Protokollebene „Debug“)",
     "Enable/disable bridge": "Bridge aktivieren/deaktivieren",
+    "Error": "Fehler",
+    "Error while executing command": "Fehler beim Ausführen des Befehls",
     "Expand all": "Alle erweitern",
     "Expose ioBroker devices as Matter bridge": "ioBroker-Geräte als Matter-Bridge verfügbar machen",
     "Following object IDs was not added because already exists": "Folgende Objekt-IDs wurden nicht hinzugefügt, da sie bereits vorhanden sind",
@@ -161,6 +166,8 @@
     "Sync credentials with %s": "Anmeldeinformationen mit %s synchronisieren",
     "The label set here is used as Label when ioBroker connects to a device as controller and might be shown by other Controllers in their overviews about other connected ecosystems.": "Das hier festgelegte Label wird als Label verwendet, wenn ioBroker als Controller eine Verbindung zu einem Gerät herstellt und kann von anderen Controllern in ihren Übersichten über andere verbundene Ökosysteme angezeigt werden.",
     "This cannot be undone!": "Das kann nicht rückgängig gemacht werden!",
+    "This device can only be paired using BLE but BLE is disabled. Please use the ioBroker Visu App to pair this device or enable the Host BLE.": "Dieses Gerät kann nur über BLE gekoppelt werden, aber BLE ist deaktiviert. Bitte verwenden Sie die ioBroker Visu App, um dieses Gerät zu koppeln oder Host-BLE zu aktivieren.",
+    "This device is already paired to this Controller! You can not pair it again.": "Dieses Gerät ist bereits mit diesem Controller gekoppelt! Sie können es nicht erneut koppeln.",
     "This device/bridge is linked to some ecosystem. If it is deleted here, you must manually remove it from your ecosystem!": "Dieses Gerät/diese Bridge ist mit einem Ökosystem verknüpft. Wenn es/sie hier gelöscht wird, müssen Sie es/sie manuell aus Ihrem Ökosystem entfernen!",
     "This entry is being modified actually": "Dieser Eintrag wird gerade geändert",
     "This object ID is already added": "Diese Objekt-ID wurde bereits hinzugefügt",
@@ -170,6 +177,8 @@
     "To commission/connect matter devices with ioBroker controller use better ioBroker.visu app:": "Um Matter-Geräte mit ioBroker-Controller in Betrieb zu nehmen/zu verbinden, verwenden Sie besser die ioBroker.visu-App:",
     "To make all this work, the following requirements should be considered": "Damit das alles funktioniert, sollten die folgenden Anforderungen beachtet werden",
     "To use a Matter bridge or device options with more than 5 devices please enter valid ioBroker.pro Cloud credentials with at least an active Assistant license.": "Um eine Matter-Bridge oder Geräteoptionen mit mehr als 5 Geräten zu verwenden, geben Sie bitte gültige ioBroker.pro-Cloud-Anmeldeinformationen mit mindestens einer aktiven Assistant-Lizenz ein.",
+    "Unknown command": "Unbekannter Befehl",
+    "Unknown error": "Unbekannter Fehler",
     "Unselect all rooms": "Alle Räume abwählen",
     "Use last value for ON": "Bei ON den letzten Wert verwenden",
     "Value": "Wert",

src-admin/src/i18n/de.json

@@ -35,6 +35,7 @@
     "Brightness by ON": "Brightness by ON",
     "Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.": "Local QR code scanning is not possible because ioBroker Admin is used without HTTPS.\nPlease use the ioBroker Cloud QR code scanner using the button below or activate HTTPS for the ioBroker Admin.",
     "Cancel": "Cancel",
+    "Cannot pair device": "Cannot pair device",
     "Close": "Close",
     "Cloud Account": "Cloud Account",
     "Code must start with \"MT:\"": "Code must start with \"MT:\"",
@@ -49,6 +50,8 @@
     "Controller Settings": "Controller Settings",
     "Controller and Device Factory Reset": "Controller and Devices Factory Reset",
     "Controller fabric label": "Controller fabric label",
+    "Controller is not activated.": "Controller is not activated.",
+    "Controller is not initialized.": "Controller is not initialized.",
     "Copied to clipboard": "Copied to clipboard",
     "Default bridge": "Default bridge",
     "Default bridge (Alexa-compatible)": "Default bridge (Alexa-compatible, uses Port 5540)",
@@ -77,6 +80,8 @@
     "Enable device": "Enable device",
     "Enable enhanced debug logging for the Matter protocol": "Enable enhanced debug logging for the Matter protocol (only visible with \"debug\" log level)",
     "Enable/disable bridge": "Enable/disable bridge",
+    "Error": "Error",
+    "Error while executing command": "Error while executing command",
     "Expand all": "Expand all",
     "Expose ioBroker devices as Matter bridge": "Expose ioBroker devices as Matter bridge",
     "Following object IDs was not added because already exists": "Following object IDs was not added because already exists",
@@ -161,6 +166,8 @@
     "Sync credentials with %s": "Sync credentials with %s",
     "The label set here is used as Label when ioBroker connects to a device as controller and might be shown by other Controllers in their overviews about other connected ecosystems.": "The label set here is used as label when ioBroker connects to a device as controller and might be shown by other Controllers in their overviews about other connected ecosystems.",
     "This cannot be undone!": "This cannot be undone!",
+    "This device can only be paired using BLE but BLE is disabled. Please use the ioBroker Visu App to pair this device or enable the Host BLE.": "This device can only be paired using BLE but BLE is disabled. Please use the ioBroker Visu App to pair this device or enable the Host BLE.",
+    "This device is already paired to this Controller! You can not pair it again.": "This device is already paired to this Controller! You can not pair it again.",
     "This device/bridge is linked to some ecosystem. If it is deleted here, you must manually remove it from your ecosystem!": "This device/bridge is linked to some ecosystem. If it is deleted here, you must manually remove it from your ecosystem!",
     "This entry is being modified actually": "This entry is being modified actually",
     "This object ID is already added": "This object ID is already added",
@@ -170,6 +177,8 @@
     "To commission/connect matter devices with ioBroker controller use better ioBroker.visu app:": "To commission/connect matter devices with ioBroker controller use better ioBroker.visu app:",
     "To make all this work, the following requirements should be considered": "To make all this work, the following requirements should be considered",
     "To use a Matter bridge or device options with more than 5 devices please enter valid ioBroker.pro Cloud credentials with at least an active Assistant license.": "To use a Matter bridge or device options with more than 5 devices please enter valid ioBroker.pro Cloud credentials with at least an active Assistant license.",
+    "Unknown command": "Unknown command",
+    "Unknown error": "Unknown error",
     "Unselect all rooms": "Unselect all rooms",
     "Use last value for ON": "Use the last value by ON",
     "Value": "Value",

src-admin/src/i18n/en.json

@@ -35,6 +35,7 @@
     "Brightness by ON": "Brillo por ON",
     "Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.": "No es posible escanear códigos QR locales porque ioBroker Admin se utiliza sin HTTPS.\nUtilice el escáner de códigos QR de ioBroker Cloud mediante el botón que aparece a continuación o active HTTPS para ioBroker Admin.",
     "Cancel": "Cancelar",
+    "Cannot pair device": "No se puede emparejar el dispositivo",
     "Close": "Cerca",
     "Cloud Account": "Cuenta en la nube",
     "Code must start with \"MT:\"": "El código debe comenzar con \"MT:\"",
@@ -49,6 +50,8 @@
     "Controller Settings": "Configuración del controlador",
     "Controller and Device Factory Reset": "Restablecimiento de fábrica del controlador y los dispositivos",
     "Controller fabric label": "Etiqueta de tela del controlador",
+    "Controller is not activated.": "El controlador no está activado.",
+    "Controller is not initialized.": "El controlador no está inicializado.",
     "Copied to clipboard": "Copiado al portapapeles",
     "Default bridge": "Puente predeterminado",
     "Default bridge (Alexa-compatible)": "Puente predeterminado (compatible con Alexa, utiliza el puerto 5540)",
@@ -77,6 +80,8 @@
     "Enable device": "Habilitar dispositivo",
     "Enable enhanced debug logging for the Matter protocol": "Habilitar el registro de depuración mejorado para el protocolo Matter (solo visible con el nivel de registro \"depuración\")",
     "Enable/disable bridge": "Activar/desactivar puente",
+    "Error": "Error",
+    "Error while executing command": "Error al ejecutar el comando",
     "Expand all": "Expandir todo",
     "Expose ioBroker devices as Matter bridge": "Exponer dispositivos ioBroker como puente Matter",
     "Following object IDs was not added because already exists": "Los siguientes ID de objeto no se agregaron porque ya existían",
@@ -161,6 +166,8 @@
     "Sync credentials with %s": "Sincronizar credenciales con %s",
     "The label set here is used as Label when ioBroker connects to a device as controller and might be shown by other Controllers in their overviews about other connected ecosystems.": "El conjunto de etiquetas aquí se utiliza como etiqueta cuando ioBroker se conecta a un dispositivo como controlador y otros controladores pueden mostrarlo en sus descripciones generales sobre otros ecosistemas conectados.",
     "This cannot be undone!": "¡Esto no se puede deshacer!",
+    "This device can only be paired using BLE but BLE is disabled. Please use the ioBroker Visu App to pair this device or enable the Host BLE.": "Este dispositivo solo se puede emparejar mediante Bluetooth BLE, pero Bluetooth BLE está deshabilitado. Utilice la aplicación ioBroker Visu para emparejar este dispositivo o habilitar Bluetooth BLE del host.",
+    "This device is already paired to this Controller! You can not pair it again.": "¡Este dispositivo ya está emparejado con este controlador! No puedes volver a emparejarlo.",
     "This device/bridge is linked to some ecosystem. If it is deleted here, you must manually remove it from your ecosystem!": "Este dispositivo/puente está vinculado a algún ecosistema. Si se elimina aquí, deberás eliminarlo manualmente de tu ecosistema.",
     "This entry is being modified actually": "Esta entrada está siendo modificada actualmente",
     "This object ID is already added": "Este ID de objeto ya está agregado",
@@ -170,6 +177,8 @@
     "To commission/connect matter devices with ioBroker controller use better ioBroker.visu app:": "Para poner en funcionamiento o conectar dispositivos con el controlador ioBroker, utilice la mejor aplicación ioBroker.visu:",
     "To make all this work, the following requirements should be considered": "Para que todo esto funcione se deben tener en cuenta los siguientes requisitos",
     "To use a Matter bridge or device options with more than 5 devices please enter valid ioBroker.pro Cloud credentials with at least an active Assistant license.": "Para utilizar un puente Matter u opciones de dispositivo con más de 5 dispositivos, ingrese credenciales válidas de ioBroker.pro Cloud con al menos una licencia de Asistente activa.",
+    "Unknown command": "Comando desconocido",
+    "Unknown error": "Error desconocido",
     "Unselect all rooms": "Deseleccionar todas las habitaciones",
     "Use last value for ON": "Utilice el último valor de ON",
     "Value": "Valor",