Corrected adapter-react-v5

README.md

@@ -87,6 +87,12 @@ The icons may not be reused in other projects without the proper flaticon licens
 <!--
 	### **WORK IN PROGRESS**
 -->
+### **WORK IN PROGRESS**
+
+-   (@oweitman) Implemented better table view
+-   (@GermanBluefox) Extended DM with device type
+-   (@GermanBluefox) Showed the tabs in JSONConfig on narrow displays as menu 
+
 ### 7.4.14 (2025-01-15)
 
 -   (@GermanBluefox) Extended DM with device type

packages/adapter-react-v5/src/Components/ObjectBrowser.tsx

@@ -1630,7 +1630,11 @@ function buildTree(
             const common = obj.common;
             const role = common?.role;
             if (role && !info.roles.find(it => it.role === role)) {
-                info.roles.push({ role, type: common.type });
+                if (typeof role !== 'string') {
+                    console.warn(`Invalid role type "${typeof role}" in "${obj._id}"`);
+                } else {
+                    info.roles.push({ role, type: common.type });
+                }
             } else if (id.startsWith('enum.rooms.')) {
                 info.roomEnums.push(id);
                 info.enums.push(id);

packages/adapter-react-v5/src/GenericApp.tsx

@@ -43,7 +43,7 @@ declare global {
         SocketClient: any;
         adapterName: undefined | string;
         socketUrl: undefined | string;
-        oldAlert: any;
+        iobOldAlert: any;
         changed: boolean;
         $iframeDialog: {
             close?: () => void;
@@ -272,13 +272,15 @@ export class GenericApp<
 
         this.alertDialogRendered = false;
 
-        window.oldAlert = window.alert;
+        if (!window.iobOldAlert) {
+            window.iobOldAlert = window.alert;
+        }
         window.alert = message => {
             if (!this.alertDialogRendered) {
-                window.oldAlert(message);
+                window.iobOldAlert(message);
                 return;
             }
-            if (message && message.toString().toLowerCase().includes('error')) {
+            if (message?.toString().toLowerCase().includes('error')) {
                 console.error(message);
                 this.showAlert(message.toString(), 'error');
             } else {
@@ -468,6 +470,13 @@ export class GenericApp<
     componentWillUnmount(): void {
         window.removeEventListener('resize', this.onResize, true);
         window.removeEventListener('message', this.onReceiveMessage, false);
+
+        // restore window.alert
+        if (window.iobOldAlert) {
+            window.alert = window.iobOldAlert;
+            delete window.iobOldAlert;
+        }
+
         super.componentWillUnmount();
     }
 

packages/adapter-react-v5/src/i18n/de.json

@@ -3,6 +3,7 @@
     "ra_%s object(s) processed": "%s Objekt(e) verarbeitet",
     "ra_%s was imported": "%s wurde importiert",
     "ra_Accept license": "Lizenz akzeptieren",
+    "ra_Actions": "Aktionen",
     "ra_Add new child object to selected parent": "Dem ausgewählten übergeordneten Objekt ein neues untergeordnetes Objekt hinzufügen",
     "ra_Add objects tree from JSON file": "Objektbaum aus JSON-Datei hinzufügen",
     "ra_Add row": "Zeile hinzufügen",
@@ -89,6 +90,7 @@
     "ra_Fallback custom certificates": "Benutzerdefinierte Fallback-Zertifikate",
     "ra_File is too big. Max %sk allowed. Try use SVG.": "Datei ist zu groß. Max %sk erlaubt. Versuchen Sie, SVG zu verwenden.",
     "ra_Filter": "Filter",
+    "ra_Filter and Data Actions": "Filter- und Datenaktionen",
     "ra_Filter files": "Dateien filtern",
     "ra_Folder name": "Ordnernamen",
     "ra_Folder → Channel → State": "Ordner → Kanal → Zustand",

packages/adapter-react-v5/src/i18n/en.json

@@ -3,6 +3,7 @@
     "ra_%s object(s) processed": "%s object(s) processed",
     "ra_%s was imported": "%s was imported",
     "ra_Accept license": "Accept license",
+    "ra_Actions": "Actions",
     "ra_Add new child object to selected parent": "Add new child object to selected parent",
     "ra_Add objects tree from JSON file": "Add objects tree from JSON file",
     "ra_Add row": "Add row",
@@ -89,6 +90,7 @@
     "ra_Fallback custom certificates": "Fallback custom certificates",
     "ra_File is too big. Max %sk allowed. Try use SVG.": "File is too big. Max %sk allowed. Try use SVG.",
     "ra_Filter": "Filter",
+    "ra_Filter and Data Actions": "Filter and Data Actions",
     "ra_Filter files": "Filter files",
     "ra_Folder name": "Folder name",
     "ra_Folder → Channel → State": "Folder → Channel → State",

packages/adapter-react-v5/src/i18n/es.json

@@ -3,6 +3,7 @@
     "ra_%s object(s) processed": "%s objeto(s) procesados",
     "ra_%s was imported": "%s fue importado",
     "ra_Accept license": "Aceptar licencia",
+    "ra_Actions": "Comportamiento",
     "ra_Add new child object to selected parent": "Agregar nuevo objeto hijo al padre seleccionado",
     "ra_Add objects tree from JSON file": "Agregar árbol de objetos desde el archivo JSON",
     "ra_Add row": "Añadir fila",
@@ -89,6 +90,7 @@
     "ra_Fallback custom certificates": "Certificados personalizados alternativos",
     "ra_File is too big. Max %sk allowed. Try use SVG.": "El archivo es demasiado grande. Máximo de %sk permitido. Intenta usar SVG.",
     "ra_Filter": "Filtrar",
+    "ra_Filter and Data Actions": "Acciones de filtrado y datos",
     "ra_Filter files": "Filtrar archivos",
     "ra_Folder name": "Nombre de la carpeta",
     "ra_Folder → Channel → State": "Carpeta → Canal → Estado",

packages/adapter-react-v5/src/i18n/fr.json

@@ -3,6 +3,7 @@
     "ra_%s object(s) processed": "%s objet(s) traité(s)",
     "ra_%s was imported": "%s a été importé",
     "ra_Accept license": "Accepter la licence",
+    "ra_Actions": "Actes",
     "ra_Add new child object to selected parent": "Ajouter un nouvel objet enfant au parent sélectionné",
     "ra_Add objects tree from JSON file": "Ajouter une arborescence d'objets à partir d'un fichier JSON",
     "ra_Add row": "Ajouter une rangée",
@@ -89,6 +90,7 @@
     "ra_Fallback custom certificates": "Certificats personnalisés de secours",
     "ra_File is too big. Max %sk allowed. Try use SVG.": "Le fichier est trop volumineux. Max %sk autorisé. Essayez d'utiliser SVG.",
     "ra_Filter": "Filtre",
+    "ra_Filter and Data Actions": "Actions sur les filtres et les données",
     "ra_Filter files": "Filtrer les fichiers",
     "ra_Folder name": "Nom de dossier",
     "ra_Folder → Channel → State": "Dossier → Chaîne → État",

packages/adapter-react-v5/src/i18n/it.json

@@ -3,6 +3,7 @@
     "ra_%s object(s) processed": "%s oggetti elaborati",
     "ra_%s was imported": "%s è stato importato",
     "ra_Accept license": "Accetta licenza",
+    "ra_Actions": "Azioni",
     "ra_Add new child object to selected parent": "Aggiungi un nuovo oggetto figlio al genitore selezionato",
     "ra_Add objects tree from JSON file": "Aggiungi l'albero degli oggetti dal file JSON",
     "ra_Add row": "Aggiungi riga",
@@ -89,6 +90,7 @@
     "ra_Fallback custom certificates": "Certificati personalizzati di fallback",
     "ra_File is too big. Max %sk allowed. Try use SVG.": "Il file è troppo grande. Max %sk consentito. Prova a usare SVG.",
     "ra_Filter": "Filtro",
+    "ra_Filter and Data Actions": "Azioni sui filtri e sui dati",
     "ra_Filter files": "Filtra i file",
     "ra_Folder name": "Nome della cartella",
     "ra_Folder → Channel → State": "Cartella → Canale → Stato",

packages/adapter-react-v5/src/i18n/nl.json

@@ -3,6 +3,7 @@
     "ra_%s object(s) processed": "%s object(en) verwerkt",
     "ra_%s was imported": "%s is geïmporteerd",
     "ra_Accept license": "Accepteer licentie",
+    "ra_Actions": "Acties",
     "ra_Add new child object to selected parent": "Voeg een nieuw kindobject toe aan het geselecteerde bovenliggende object",
     "ra_Add objects tree from JSON file": "Objectenboom toevoegen vanuit JSON-bestand",
     "ra_Add row": "Voeg een rij toe",
@@ -89,6 +90,7 @@
     "ra_Fallback custom certificates": "Fallback aangepaste certificaten",
     "ra_File is too big. Max %sk allowed. Try use SVG.": "Bestand is te groot. Max. %sk toegestaan. Probeer SVG te gebruiken.",
     "ra_Filter": "Filter",
+    "ra_Filter and Data Actions": "Filter- en gegevensacties",
     "ra_Filter files": "Bestanden filteren",
     "ra_Folder name": "Naam van de map",
     "ra_Folder → Channel → State": "Map → Kanaal → Staat",

packages/adapter-react-v5/src/i18n/pl.json

@@ -3,6 +3,7 @@
     "ra_%s object(s) processed": "Przetworzono %s obiektów",
     "ra_%s was imported": "%s został zaimportowany",
     "ra_Accept license": "Zaakceptuj licencję",
+    "ra_Actions": "Akcje",
     "ra_Add new child object to selected parent": "Dodaj nowy obiekt potomny do wybranego rodzica",
     "ra_Add objects tree from JSON file": "Dodaj drzewo obiektów z pliku JSON",
     "ra_Add row": "Dodaj wiersz",
@@ -89,6 +90,7 @@
     "ra_Fallback custom certificates": "Niestandardowe certyfikaty zastępcze",
     "ra_File is too big. Max %sk allowed. Try use SVG.": "Plik jest za duży. Maksymalna dozwolona liczba %sk. Spróbuj użyć SVG.",
     "ra_Filter": "Filtr",
+    "ra_Filter and Data Actions": "Akcje filtrów i danych",
     "ra_Filter files": "Filtruj pliki",
     "ra_Folder name": "Nazwa folderu",
     "ra_Folder → Channel → State": "Folder → Kanał → Stan",

packages/adapter-react-v5/src/i18n/pt.json

@@ -3,6 +3,7 @@
     "ra_%s object(s) processed": "%s objeto(s) processado(s)",
     "ra_%s was imported": "%s foi importado",
     "ra_Accept license": "Aceitar licença",
+    "ra_Actions": "Ações",
     "ra_Add new child object to selected parent": "Adicionar novo objeto filho ao pai selecionado",
     "ra_Add objects tree from JSON file": "Adicionar árvore de objetos do arquivo JSON",
     "ra_Add row": "Adicionar linha",
@@ -89,6 +90,7 @@
     "ra_Fallback custom certificates": "Certificados personalizados alternativos",
     "ra_File is too big. Max %sk allowed. Try use SVG.": "O arquivo é muito grande. Max %sk permitido. Tente usar SVG.",
     "ra_Filter": "Filtro",
+    "ra_Filter and Data Actions": "Ações de filtro e dados",
     "ra_Filter files": "Filtrar arquivos",
     "ra_Folder name": "Nome da pasta",
     "ra_Folder → Channel → State": "Pasta → Canal → Estado",

packages/adapter-react-v5/src/i18n/ru.json

@@ -3,6 +3,7 @@
     "ra_%s object(s) processed": "Объектов обработано: %s",
     "ra_%s was imported": "%s был импортирован",
     "ra_Accept license": "Принять лицензию",
+    "ra_Actions": "Действия",
     "ra_Add new child object to selected parent": "Добавить новый дочерний объект к выбранному родительскому объекту",
     "ra_Add objects tree from JSON file": "Добавить дерево объектов из файла JSON",
     "ra_Add row": "Добавить ряд",
@@ -89,6 +90,7 @@
     "ra_Fallback custom certificates": "Резервные пользовательские сертификаты",
     "ra_File is too big. Max %sk allowed. Try use SVG.": "Файл слишком большой. Разрешено максимальное количество %sk. Попробуйте использовать SVG.",
     "ra_Filter": "Фильтр",
+    "ra_Filter and Data Actions": "Фильтрация и действия с данными",
     "ra_Filter files": "Фильтровать файлы",
     "ra_Folder name": "Имя папки",
     "ra_Folder → Channel → State": "Папка → Канал → Состояние",

packages/adapter-react-v5/src/i18n/uk.json

@@ -3,6 +3,7 @@
     "ra_%s object(s) processed": "Оброблено %s об’єктів",
     "ra_%s was imported": "%s було імпортовано",
     "ra_Accept license": "Прийняти ліцензію",
+    "ra_Actions": "Дії",
     "ra_Add new child object to selected parent": "Додати новий дочірній об’єкт до вибраного батьківського",
     "ra_Add objects tree from JSON file": "Додайте дерево об’єктів із файлу JSON",
     "ra_Add row": "Додати рядок",
@@ -89,6 +90,7 @@
     "ra_Fallback custom certificates": "Запасні спеціальні сертифікати",
     "ra_File is too big. Max %sk allowed. Try use SVG.": "Файл завеликий. Максимально дозволено %sk. Спробуйте використовувати SVG.",
     "ra_Filter": "фільтр",
+    "ra_Filter and Data Actions": "Фільтр і дії з даними",
     "ra_Filter files": "Фільтр файлів",
     "ra_Folder name": "Назва папки",
     "ra_Folder → Channel → State": "Папка → Канал → Стан",

packages/adapter-react-v5/src/i18n/zh-cn.json

@@ -3,6 +3,7 @@
     "ra_%s object(s) processed": "已处理%s个对象",
     "ra_%s was imported": "对象已导入",
     "ra_Accept license": "接受许可",
+    "ra_Actions": "操作",
     "ra_Add new child object to selected parent": "将新的子对象添加到选定的父对象",
     "ra_Add objects tree from JSON file": "从JSON文件添加对象树",
     "ra_Add row": "添加行",
@@ -89,6 +90,7 @@
     "ra_Fallback custom certificates": "后备自定义证书",
     "ra_File is too big. Max %sk allowed. Try use SVG.": "文件太大。允许的最大字节%s数。尝试使用 SVG。",
     "ra_Filter": "筛选",
+    "ra_Filter and Data Actions": "过滤和数据操作",
     "ra_Filter files": "过滤文件",
     "ra_Folder name": "文件夹名称",
     "ra_Folder → Channel → State": "文件夹→频道→状态",

packages/adapter-react-v5/src/types.d.ts

@@ -31,7 +31,7 @@ export interface ConnectionProps {
     /** Automatically subscribe to logging. */
     autoSubscribeLog?: boolean;
     /** The protocol to use for the socket.io connection. */
-    protocol?: string;
+    protocol?: 'http:' | 'https:';
     /** The host name to use for the socket.io connection. */
     host?: string;
     /** The port to use for the socket.io connection. */

packages/admin/src-admin/package.json

@@ -103,5 +103,5 @@
             }
         ]
     ],
-    "version": "7.4.13"
+    "version": "7.4.14"
 }

packages/admin/src-admin/src/App.tsx

@@ -2787,21 +2787,20 @@ class App extends Router<AppProps, AppState> {
 
                 {this.state.drawerState !== DrawerStates.opened &&
                     !this.state.expertMode &&
-                    window.innerWidth > 400 && (
+                    window.innerWidth > 450 && (
                         <Grid
                             container
                             style={{
-                                ...(this.state.drawerState !== DrawerStates.opened ? styles.avatarVisible : undefined),
                                 ...styles.avatarNotVisible,
+                                ...(this.state.drawerState !== DrawerStates.opened ? styles.avatarVisible : undefined),
                             }}
                             spacing={1}
                             alignItems="center"
                         >
-                            {(!this.state.user || this.props.width === 'xs' || this.props.width === 'sm') && (
+                            {!this.state.user ? (
                                 <Box
                                     component="div"
                                     style={styles.wrapperName}
-                                    sx={{ display: { md: 'inline-block', xs: 'none' } }}
                                 >
                                     <Typography>admin</Typography>
                                     {!this.adminGuiConfig.icon && this.state.versionAdmin && (
@@ -2815,7 +2814,7 @@ class App extends Router<AppProps, AppState> {
                                         </Typography>
                                     )}
                                 </Box>
-                            )}
+                            ) : null}
                             <Grid>
                                 <a
                                     href="/#easy"

packages/admin/src-admin/src/components/Adapters/AdapterGeneric.tsx

@@ -503,7 +503,8 @@ export default abstract class AdapterGeneric<
 
     renderInstalledVersion(isRow?: boolean): JSX.Element | null {
         const installed = this.props.context.installed[this.props.adapterName];
-        const installedFrom = this.props.context.adapters[`system.adapter.${this.props.adapterName}`]?.common?.installedFrom;
+        const installedFrom =
+            this.props.context.adapters[`system.adapter.${this.props.adapterName}`]?.common?.installedFrom;
         const { adapterName } = this.props;
 
         if (isRow) {
@@ -528,7 +529,7 @@ export default abstract class AdapterGeneric<
                     {installedFrom && !installedFrom.startsWith(`iobroker.${adapterName}@`) && (
                         <Grid2 container>
                             <Tooltip
-                                title={this.props.context.t('Non-NPM-Version: ') + installedFrom}
+                                title={`${this.props.context.t('Non-NPM-Version')}: ${installedFrom}`}
                                 slotProps={{ popper: { sx: this.styles.tooltip } }}
                             >
                                 <GitHubIcon
@@ -551,7 +552,7 @@ export default abstract class AdapterGeneric<
                 <div style={this.styles.cardContentFlex}>
                     {installedFrom && !installedFrom.startsWith(`iobroker.${adapterName}@`) && (
                         <Tooltip
-                            title={this.props.context.t('Non-NPM-Version: ') + installedFrom}
+                            title={`${this.props.context.t('Non-NPM-Version')}: ${installedFrom}`}
                             slotProps={{ popper: { sx: this.styles.tooltip } }}
                         >
                             <GitHubIcon

packages/admin/src-admin/src/components/HostSelectors.tsx

@@ -43,7 +43,6 @@ const styles: Record<string, any> = {
         height: 30,
         margin: 'auto 0',
         position: 'relative',
-        marginRight: 10,
         borderRadius: 3,
         background: '#FFFFFF',
         padding: 2,
@@ -61,6 +60,7 @@ const styles: Record<string, any> = {
         '@media screen and (max-width: 710px)': {
             display: 'none',
         },
+        marginLeft: '8px',
     },
     width: {
         width: '100%',

packages/admin/src-admin/src/components/Instances/InstanceGeneric.tsx

@@ -1368,7 +1368,7 @@ export default abstract class InstanceGeneric<
         return (
             <InstanceInfo
                 icon={<ImportExportIcon />}
-                tooltip={this.props.context.t('events')}
+                // tooltip={this.props.context.t('events')}
             >
                 <div style={this.styles.displayFlex}>
                     <Tooltip

packages/admin/src-admin/src/i18n/de.json

@@ -742,6 +742,7 @@
     "Node.js update failed: %s": "Node.js-Aktualisierung fehlgeschlagen: %s",
     "Node.js update successful, restarting controller now!": "Node.js-Update erfolgreich, Controller wird jetzt neu gestartet!",
     "Node.js upgrade": "Node.js-Upgrade",
+    "Non-NPM-Version": "Nicht-NPM-Version",
     "Non-allowed duplicate entry \"%s\" in column \"%s\"": "Unzulässiger doppelter Eintrag „%s“ in Spalte „%s“",
     "None": "Keiner",
     "Norfolk Island": "Norfolk Island",
@@ -1628,4 +1629,4 @@
     "write operation": "schreiben",
     "wrongPassword": "Benutzername oder Passwort sind falsch",
     "yesterday": "gestern"
-}
+}

packages/admin/src-admin/src/i18n/en.json

@@ -742,6 +742,7 @@
     "Node.js update failed: %s": "Node.js update failed: %s",
     "Node.js update successful, restarting controller now!": "Node.js update successful, restarting controller now!",
     "Node.js upgrade": "Node.js upgrade",
+    "Non-NPM-Version": "Non-NPM-Version",
     "Non-allowed duplicate entry \"%s\" in column \"%s\"": "Non-allowed duplicate entry \"%s\" in column \"%s\"",
     "None": "None",
     "Norfolk Island": "Norfolk Island",

packages/admin/src-admin/src/i18n/es.json

@@ -742,6 +742,7 @@
     "Node.js update failed: %s": "Error en la actualización de Node.js: %s",
     "Node.js update successful, restarting controller now!": "Actualización de Node.js exitosa, reiniciando el controlador ahora.",
     "Node.js upgrade": "Actualización de Node.js",
+    "Non-NPM-Version": "Versión no NPM",
     "Non-allowed duplicate entry \"%s\" in column \"%s\"": "Entrada duplicada no permitida \"%s\" en la columna \"%s\"",
     "None": "Ninguno",
     "Norfolk Island": "Isla de Norfolk",

packages/admin/src-admin/src/i18n/fr.json

@@ -742,6 +742,7 @@
     "Node.js update failed: %s": "Échec de la mise à jour de Node.js : %s",
     "Node.js update successful, restarting controller now!": "Mise à jour de Node.js réussie, redémarrage du contrôleur maintenant !",
     "Node.js upgrade": "Mise à niveau de Node.js",
+    "Non-NPM-Version": "Version non NPM",
     "Non-allowed duplicate entry \"%s\" in column \"%s\"": "Entrée en double non autorisée \"%s\" dans la colonne \"%s\"",
     "None": "Aucun",
     "Norfolk Island": "L'ile de Norfolk",