Preparation for showing the device type in controller (#308)

* Preparation for showing the device type in controller * Showed the device name in paring dialog * Changed description of secure camera access: #222 * Changed description of secure camera access: #222 * Changed description of secure camera access: #222 * Added back the label description: #297 * Changed appearance of bridges: #307 * Added sync of file vendorIDs.ts between front-end and back-end
ioBroker · Jan 14, 2025 · 230a706 · 230a706
1 parent 6db1f45
commit 230a706
Show file tree

Hide file tree

Showing 22 changed files with 1,007 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -238,6 +238,9 @@ TBD
 -->
 
 ## Changelog
+### **WORK IN PROGRESS**
+* (@GermanBluefox) Showed the device name in paring dialog  
+
 ### 0.3.6 (2025-01-13)
 * (@GermanBluefox) Fixed GUI errors
 * (@GermanBluefox/@Apollon77) Added possibility to enable/disable controlled nodes

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
   "dependencies": {
     "@iobroker/adapter-core": "^3.2.3",
     "@iobroker/i18n": "^0.3.1",
-    "@iobroker/dm-utils": "^1.0.5",
+    "@iobroker/dm-utils": "^1.0.6",
     "@iobroker/type-detector": "^4.1.1",
     "@matter/main": "0.12.0-alpha.0-20250113-e619723a5",
     "@matter/nodejs": "0.12.0-alpha.0-20250113-e619723a5",

diff --git a/src-admin/package-lock.json b/src-admin/package-lock.json
diff --git a/src-admin/package.json b/src-admin/package.json
@@ -18,7 +18,7 @@
         "react-dom": "^18.3.1",
         "react-icons": "^5.4.0",
         "react-qr-code": "^2.0.15",
-        "uuid": "^11.0.3"
+        "uuid": "^11.0.5"
     },
     "scripts": {
         "start": "vite --host",

diff --git a/src-admin/src/Tabs/Controller.tsx b/src-admin/src/Tabs/Controller.tsx
@@ -527,6 +527,11 @@ class Controller extends Component<ComponentProps, ComponentState> {
 
         return (
             <QrCodeDialog
+                name={
+                    typeof this.state.showQrCodeDialog !== 'boolean'
+                        ? `${this.state.showQrCodeDialog.DN} / ${getVendorName(this.state.showQrCodeDialog.V)}`
+                        : undefined
+                }
                 onClose={async (manualCode?: string, qrCode?: string): Promise<void> => {
                     if (manualCode || qrCode) {
                         const device: CommissionableDevice | null =

diff --git a/src-admin/src/Tabs/Options.tsx b/src-admin/src/Tabs/Options.tsx
@@ -234,8 +234,8 @@ class Options extends Component<OptionsProps, OptionsState> {
                                             fontWeight: it.uuid === '_' ? 'bold' : undefined,
                                         }}
                                     >
-                                        {it.uuid}
-                                        <span style={styles.address}>{it.name}</span>
+                                        {it.name}
+                                        <span style={styles.address}>{it.uuid}</span>
                                     </span>
                                 </MenuItem>
                             ))}
@@ -245,6 +245,11 @@ class Options extends Component<OptionsProps, OptionsState> {
 
                 <div style={{ marginTop: 50 }}>
                     <Typography sx={styles.header}>{I18n.t('Controller Settings')}</Typography>
+                    <InfoBox type="info">
+                        {I18n.t(
+                            '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.',
+                        )}
+                    </InfoBox>
                     <TextField
                         variant="standard"
                         label={I18n.t('Controller fabric label')}
@@ -253,6 +258,9 @@ class Options extends Component<OptionsProps, OptionsState> {
                         onChange={e => this.props.onChange('controllerFabricLabel', e.target.value)}
                         margin="normal"
                         slotProps={{
+                            htmlInput: {
+                                maxLength: 32,
+                            },
                             input: {
                                 endAdornment: this.props.native.controllerFabricLabel ? (
                                     <IconButton
@@ -264,7 +272,10 @@ class Options extends Component<OptionsProps, OptionsState> {
                                 ) : null,
                             },
                         }}
-                        style={styles.input}
+                        style={{
+                            ...styles.input,
+                            maxWidth: 350,
+                        }}
                     />
                 </div>
 

diff --git a/src-admin/src/components/QrCodeDialog.tsx b/src-admin/src/components/QrCodeDialog.tsx
@@ -12,6 +12,7 @@ import InfoBox from './InfoBox';
 interface QrCodeDialogProps {
     onClose: (manualCode?: string, qrCode?: string) => void;
     themeType: ThemeType;
+    name?: string;
 }
 
 interface QrCodeDialogState {
@@ -86,7 +87,11 @@ export default class QrCodeDialog extends Component<QrCodeDialogProps, QrCodeDia
                 maxWidth="lg"
                 fullWidth
             >
-                <DialogTitle>{I18n.t('Add device by pairing code or QR Code')}</DialogTitle>
+                <DialogTitle>
+                    {this.props.name
+                        ? I18n.t('Add device "%s" by pairing code or QR Code', this.props.name)
+                        : I18n.t('Add device by pairing code or QR Code')}
+                </DialogTitle>
                 <DialogContent>
                     <div style={{ marginBottom: 10 }}>{I18n.t('Add via QR Code')}</div>
                     <InfoBox
@@ -206,7 +211,13 @@ export default class QrCodeDialog extends Component<QrCodeDialogProps, QrCodeDia
                             }}
                         >
                             <div>{I18n.t('QR Code scan is not possible')}:</div>
-                            <div>{this.state.qrError}</div>
+                            <div>
+                                {this.state.qrError
+                                    ? this.state.qrError
+                                          .split('\n')
+                                          .map((part: string, i: number): React.JSX.Element => <p key={i}>{part}</p>)
+                                    : null}
+                            </div>
                         </div>
                     ) : null}
                     {!this.state.manualCode && this.state.hideQrCode && !this.state.iframe ? (

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 \"%s\" by pairing code or QR Code": "Gerät „%s“ per Pairing-Code oder QR-Code hinzufügen",
     "Add device by pairing code or QR Code": "Gerät per Pairing-Code oder QR-Code 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",
@@ -32,7 +33,7 @@
     "Bridge is not commissioned. Show QR Code got commissioning": "Brücke ist nicht in Betrieb genommen. QR-Code anzeigen wurde in Betrieb genommen",
     "Bridges": "Bridges",
     "Brightness by ON": "Helligkeit durch EIN",
-    "Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.": "Der Kamerazugriff ist nur in einem sicheren Kontext zulässig. Verwenden Sie HTTPS oder localhost anstelle von HTTP.",
+    "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",
     "Close": "Schließen",
     "Cloud Account": "Cloud-Konto",

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 \"%s\" by pairing code or QR Code": "Add device \"%s\" by pairing code or QR Code",
     "Add device by pairing code or QR Code": "Add device by pairing code or QR Code",
     "Add device from channel or device": "Add device from channel or device",
     "Add device from one state": "Add device from one state",
@@ -32,7 +33,7 @@
     "Bridge is not commissioned. Show QR Code got commissioning": "Bridge is not commissioned. Show QR Code got commissioning",
     "Bridges": "Bridges",
     "Brightness by ON": "Brightness by ON",
-    "Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.": "Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.",
+    "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",
     "Close": "Close",
     "Cloud Account": "Cloud Account",

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 \"%s\" by pairing code or QR Code": "Agregue el dispositivo \"%s\" mediante el código de emparejamiento o el código QR",
     "Add device by pairing code or QR Code": "Añadir dispositivo mediante código de emparejamiento o código QR",
     "Add device from channel or device": "Agregar dispositivo desde canal o dispositivo",
     "Add device from one state": "Agregar dispositivo desde un estado",
@@ -32,7 +33,7 @@
     "Bridge is not commissioned. Show QR Code got commissioning": "El puente no está en servicio. Mostrar código QR puesto en marcha",
     "Bridges": "Puentes",
     "Brightness by ON": "Brillo por ON",
-    "Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.": "El acceso a la cámara solo está permitido en un contexto seguro. Utilice HTTPS o localhost en lugar de HTTP.",
+    "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",
     "Close": "Cerca",
     "Cloud Account": "Cuenta en la nube",

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 \"%s\" by pairing code or QR Code": "Ajoutez l'appareil « %s » par code d'association ou code QR",
     "Add device by pairing code or QR Code": "Ajouter un appareil par code d'association ou code QR",
     "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",
@@ -32,7 +33,7 @@
     "Bridge is not commissioned. Show QR Code got commissioning": "Le pont n'est pas mis en service. Afficher le code QR mis en service",
     "Bridges": "Des ponts",
     "Brightness by ON": "Luminosité par ON",
-    "Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.": "L'accès à la caméra n'est autorisé que dans un contexte sécurisé. Utilisez HTTPS ou localhost plutôt que HTTP.",
+    "Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.": "La numérisation locale du code QR n'est pas possible car ioBroker Admin est utilisé sans HTTPS.\nVeuillez utiliser le scanner de code QR ioBroker Cloud à l'aide du bouton ci-dessous ou activer HTTPS pour ioBroker Admin.",
     "Cancel": "Annuler",
     "Close": "Fermer",
     "Cloud Account": "Compte Cloud",

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 \"%s\" by pairing code or QR Code": "Aggiungi il dispositivo \"%s\" tramite codice di associazione o codice QR",
     "Add device by pairing code or QR Code": "Aggiungi dispositivo tramite codice di associazione o codice QR",
     "Add device from channel or device": "Aggiungi dispositivo dal canale o dal dispositivo",
     "Add device from one state": "Aggiungi dispositivo da uno stato",
@@ -32,7 +33,7 @@
     "Bridge is not commissioned. Show QR Code got commissioning": "Il ponte non è commissionato. Mostra il codice QR ha ricevuto la messa in servizio",
     "Bridges": "Ponti",
     "Brightness by ON": "Luminosità attivata",
-    "Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.": "L'accesso alla telecamera è consentito solo in un contesto sicuro. Utilizzare HTTPS o localhost anziché HTTP.",
+    "Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.": "La scansione del codice QR locale non è possibile perché ioBroker Admin viene utilizzato senza HTTPS. Utilizza lo scanner del codice QR Cloud di ioBroker tramite il pulsante qui sotto o attiva HTTPS per ioBroker Admin.",
     "Cancel": "Annulla",
     "Close": "Vicino",
     "Cloud Account": "Conto cloud",

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 \"%s\" by pairing code or QR Code": "Voeg apparaat \"%s\" toe via koppelingscode of QR-code",
     "Add device by pairing code or QR Code": "Apparaat toevoegen via koppelingscode of QR-code",
     "Add device from channel or device": "Apparaat toevoegen vanaf kanaal of apparaat",
     "Add device from one state": "Voeg apparaat toe vanuit één staat",
@@ -32,7 +33,7 @@
     "Bridge is not commissioned. Show QR Code got commissioning": "Brug is niet in gebruik genomen. QR-code weergeven kreeg inbedrijfstelling",
     "Bridges": "Bruggen",
     "Brightness by ON": "Helderheid door AAN",
-    "Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.": "Toegang tot de camera is alleen toegestaan in een veilige context. Gebruik HTTPS of localhost in plaats van HTTP.",
+    "Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.": "Lokale QR-codescanning is niet mogelijk omdat ioBroker Admin zonder HTTPS wordt gebruikt.\nGebruik de ioBroker Cloud QR-codescanner met behulp van de onderstaande knop of activeer HTTPS voor de ioBroker Admin.",
     "Cancel": "Annuleren",
     "Close": "Dichtbij",
     "Cloud Account": "Cloud-account",

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 \"%s\" by pairing code or QR Code": "Dodaj urządzenie „%s” za pomocą kodu parowania lub kodu QR",
     "Add device by pairing code or QR Code": "Dodaj urządzenie za pomocą kodu parowania lub kodu QR",
     "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",
@@ -32,7 +33,7 @@
     "Bridge is not commissioned. Show QR Code got commissioning": "Most nie jest oddany do użytku. Pokaż kod QR, który został uruchomiony",
     "Bridges": "Mosty",
     "Brightness by ON": "Jasność po włączeniu",
-    "Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.": "Dostęp do kamery jest dozwolony tylko w bezpiecznym kontekście. Użyj HTTPS lub localhost zamiast HTTP.",
+    "Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.": "Skanowanie lokalnego kodu QR nie jest możliwe, ponieważ ioBroker Admin jest używany bez HTTPS.\nProszę użyć skanera kodów QR ioBroker Cloud za pomocą poniższego przycisku lub aktywować HTTPS dla ioBroker Admin.",
     "Cancel": "Anulować",
     "Close": "Zamknąć",
     "Cloud Account": "Konto w chmurze",

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 \"%s\" by pairing code or QR Code": "Adicione o dispositivo \"%s\" por código de pareamento ou QR Code",
     "Add device by pairing code or QR Code": "Adicionar dispositivo por código de pareamento ou QR Code",
     "Add device from channel or device": "Adicionar dispositivo do canal ou dispositivo",
     "Add device from one state": "Adicionar dispositivo de um estado",
@@ -32,7 +33,7 @@
     "Bridge is not commissioned. Show QR Code got commissioning": "A ponte não está comissionada. Mostrar QR Code foi comissionado",
     "Bridges": "Pontes",
     "Brightness by ON": "Brilho por ON",
-    "Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.": "O acesso à câmera só é permitido em contexto seguro. Use HTTPS ou localhost em vez de HTTP.",
+    "Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.": "A digitalização de código QR local não é possível porque o ioBroker Admin é usado sem HTTPS.\nUse o scanner de código QR do ioBroker Cloud usando o botão abaixo ou ative o HTTPS para o ioBroker Admin.",
     "Cancel": "Cancelar",
     "Close": "Fechar",
     "Cloud Account": "Conta na nuvem",