@iobroker/dm-gui-components 8.0.9 → 9.0.0

package/README.md

@@ -23,6 +23,9 @@ render() {
 -->
 
 ## Changelog
+### 9.0.0 (2026-03-01)
+- (@UncleSamSwiss) Implemented v3 protocol: added support to use states and objects as values
+
 ### 8.0.9 (2026-01-28)
 - (@GermanBluefox) Analyze API version and do not show anything if version is higher than supported
 

package/build/Communication.d.ts

@@ -1,6 +1,7 @@
+import { type Connection, type IobTheme, type ThemeName, type ThemeType } from '@iobroker/adapter-react-v5';
 import React, { Component } from 'react';
-import { type Connection, type ThemeName, type ThemeType, type IobTheme } from '@iobroker/adapter-react-v5';
-import type { ActionBase, ControlBase, ControlState, DeviceInfo, InstanceDetails, JsonFormSchema, ActionButton } from '@iobroker/dm-utils';
+import type { ActionBase, ActionButton, CommunicationForm, ControlBase, ControlState, InstanceDetails, ProgressUpdate } from './protocol/api';
+import type { CommandName, LoadDevicesCallback, Message } from './protocol/DmProtocolBase';
 declare module '@mui/material/Button' {
     interface ButtonPropsColorOverrides {
         grey: true;
@@ -18,19 +19,6 @@ export type CommunicationProps = {
     isFloatComma: boolean;
     dateFormat: string;
 };
-interface CommunicationForm {
-    title?: ioBroker.StringOrTranslated | null | undefined;
-    label?: ioBroker.StringOrTranslated | null | undefined;
-    noTranslation?: boolean;
-    schema: JsonFormSchema;
-    data?: Record<string, any>;
-    buttons?: (ActionButton | 'apply' | 'cancel' | 'close')[];
-    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    /** Minimal width of the dialog */
-    minWidth?: number;
-    /** Always allow the apply button. Even when nothing was changed */
-    ignoreApplyDisabled?: boolean;
-}
 interface CommunicationFormInState extends CommunicationForm {
     handleClose?: (data?: Record<string, any>) => void;
     originalData: string;
@@ -54,31 +42,17 @@ export type CommunicationState = {
         handleClose: (confirmation?: boolean) => void;
     } | null;
     form: CommunicationFormInState | null;
-    progress: {
-        open: boolean;
-        indeterminate: boolean;
-    } | {
-        open: boolean;
-        progress: number;
-    } | null;
+    progress: ProgressUpdate | null;
     showConfirmation: InputAction | null;
     showInput: InputAction | null;
     inputValue: string | boolean | number | null;
+    selectedInstance: string;
 };
-interface Message {
-    actionId?: string;
-    deviceId?: string;
-    value?: unknown;
-    origin?: string;
-    confirm?: boolean;
-    data?: any;
-    /** Inform backend, how long the frontend will wait for an answer */
-    timeout?: number;
-}
 /**
- * Device List Component
+ * Communication Component
  */
 export default class Communication<P extends CommunicationProps, S extends CommunicationState> extends Component<P, S> {
+    private protocol;
     private responseTimeout;
     instanceHandler: (action: ActionBase) => () => void;
     deviceHandler: (deviceId: string, action: ActionBase, refresh: () => void) => () => void;
@@ -87,13 +61,13 @@ export default class Communication<P extends CommunicationProps, S extends Commu
     constructor(props: P);
     componentWillUnmount(): void;
     loadData(): void;
-    sendActionToInstance: (command: `dm:${string}`, messageToSend: Message, refresh?: () => void) => void;
-    sendControlToInstance: (command: string, messageToSend: {
+    sendActionToInstance: (command: CommandName, messageToSend: Message, refresh?: () => void) => void;
+    sendControlToInstance: (command: CommandName, messageToSend: {
         deviceId: string;
         controlId: string;
         state?: ControlState;
     }) => Promise<null | ioBroker.State>;
-    loadDevices(): Promise<DeviceInfo[]>;
+    loadDevices(callback: LoadDevicesCallback): Promise<void>;
     loadInstanceInfos(): Promise<InstanceDetails>;
     renderMessageDialog(): React.JSX.Element | null;
     renderConfirmDialog(): React.JSX.Element | null;

package/build/Communication.js

@@ -1,13 +1,18 @@
-import React, { Component } from 'react';
-import { Backdrop, Box, Button, Checkbox, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControl, FormControlLabel, Grid2, IconButton, Input, InputAdornment, InputLabel, LinearProgress, MenuItem, Select, Slider, Snackbar, TextField, Typography, } from '@mui/material';
-import { Close, Check, ContentCopy } from '@mui/icons-material';
 import { I18n, Icon, Utils, } from '@iobroker/adapter-react-v5';
-import { getTranslation } from './Utils';
+import { Check, Close, ContentCopy } from '@mui/icons-material';
+import { Backdrop, Box, Button, Checkbox, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControl, FormControlLabel, Grid2, IconButton, Input, InputAdornment, InputLabel, LinearProgress, MenuItem, Select, Slider, Snackbar, TextField, Typography, } from '@mui/material';
+import React, { Component } from 'react';
 import JsonConfig from './JsonConfig';
+import { DmProtocolV1 } from './protocol/DmProtocolV1';
+import { DmProtocolV2 } from './protocol/DmProtocolV2';
+import { DmProtocolV3 } from './protocol/DmProtocolV3';
+import { UnknownDmProtocol } from './protocol/UnknownDmProtocol';
+import { getTranslation } from './Utils';
 /**
- * Device List Component
+ * Communication Component
  */
 export default class Communication extends Component {
+    protocol = new UnknownDmProtocol();
     responseTimeout = null;
     // eslint-disable-next-line react/no-unused-class-component-methods
     instanceHandler;
@@ -29,6 +34,7 @@ export default class Communication extends Component {
             showConfirmation: null,
             showInput: null,
             inputValue: null,
+            selectedInstance: this.props.selectedInstance ?? (window.localStorage.getItem('dmSelectedInstance') || ''),
         };
         // eslint-disable-next-line react/no-unused-class-component-methods
         this.instanceHandler = action => () => {
@@ -76,39 +82,39 @@ export default class Communication extends Component {
     sendActionToInstance = (command, messageToSend, refresh) => {
         const send = async () => {
             this.setState({ showSpinner: true });
-            if (!this.props.selectedInstance) {
-                throw new Error('No instance selected');
-            }
             this.responseTimeout = setTimeout(() => {
                 this.setState({ showSpinner: false });
                 window.alert(I18n.t('ra_No response from the backend'));
             }, messageToSend.timeout || 5000);
-            const response = await this.props.socket.sendTo(this.props.selectedInstance, command, messageToSend);
+            const response = await this.protocol.sendAction(command, messageToSend);
             if (this.responseTimeout) {
                 clearTimeout(this.responseTimeout);
                 this.responseTimeout = null;
             }
             const type = response.type;
-            console.log(`Response: ${response.type}`);
-            switch (type) {
-                case 'message':
-                    console.log(`Message received: ${response.message}`);
-                    if (response.message) {
+            console.log(`Response: ${type}`);
+            switch (response.type) {
+                case 'message': {
+                    const message = getTranslation(response.message);
+                    console.log(`Message received: ${message}`);
+                    if (message) {
                         this.setState({
                             message: {
-                                message: response.message,
+                                message,
                                 handleClose: () => this.setState({ message: null }, () => this.sendActionToInstance('dm:actionProgress', { origin: response.origin }, refresh)),
                             },
                             showSpinner: false,
                         });
                     }
                     break;
-                case 'confirm':
-                    console.log(`Confirm received: ${response.confirm}`);
-                    if (response.confirm) {
+                }
+                case 'confirm': {
+                    const message = getTranslation(response.confirm);
+                    console.log(`Confirm received: ${message}`);
+                    if (message) {
                         this.setState({
                             confirm: {
-                                message: response.confirm,
+                                message: message,
                                 handleClose: (confirm) => this.setState({ confirm: null }, () => this.sendActionToInstance('dm:actionProgress', {
                                     origin: response.origin,
                                     confirm,
@@ -118,6 +124,7 @@ export default class Communication extends Component {
                         });
                     }
                     break;
+                }
                 case 'form':
                     console.log('Form received');
                     if (response.form) {
@@ -149,8 +156,12 @@ export default class Communication extends Component {
                     }
                     break;
                 case 'progress':
+                    console.log('Progress received', response.progress);
                     if (response.progress) {
-                        if (this.state.progress) {
+                        if (response.progress.open === false) {
+                            this.setState({ progress: null, showSpinner: false });
+                        }
+                        else if (this.state.progress) {
                             const progress = { ...this.state.progress, ...response.progress };
                             this.setState({ progress, showSpinner: false });
                         }
@@ -162,20 +173,20 @@ export default class Communication extends Component {
                     break;
                 case 'result':
                     console.log('Response content', response.result);
-                    if (response.result.refresh) {
-                        if (response.result.refresh === true) {
+                    if ('refresh' in response.result && response.result.refresh) {
+                        if (response.result.refresh === true || response.result.refresh === 'all') {
                             console.log('Refreshing all');
                             this.loadData();
                         }
                         else if (response.result.refresh === 'instance') {
-                            console.log(`Refreshing instance infos: ${this.props.selectedInstance}`);
+                            console.log(`Refreshing instance infos: ${this.state.selectedInstance}`);
                         }
-                        else if (response.result.refresh === 'device') {
+                        else if (response.result.refresh === 'devices') {
                             if (!refresh) {
-                                console.log('No refresh function provided to refresh "device"');
+                                console.log('No refresh function provided to refresh "devices"');
                             }
                             else {
-                                console.log(`Refreshing device infos: ${this.props.selectedInstance}`);
+                                console.log(`Refreshing device infos: ${this.state.selectedInstance}`);
                                 refresh();
                             }
                         }
@@ -183,7 +194,7 @@ export default class Communication extends Component {
                             console.log('Not refreshing anything');
                         }
                     }
-                    if (response.result.error) {
+                    if ('error' in response.result && response.result.error) {
                         console.error(`Error: ${response.result.error.message}`);
                         this.setState({ showToast: response.result.error.message, showSpinner: false });
                     }
@@ -200,15 +211,12 @@ export default class Communication extends Component {
         void send().catch(console.error);
     };
     sendControlToInstance = async (command, messageToSend) => {
-        if (!this.props.selectedInstance) {
-            throw new Error('No instance selected');
-        }
-        const response = await this.props.socket.sendTo(this.props.selectedInstance, command, messageToSend);
+        const response = await this.protocol.sendControl(command, messageToSend);
         const type = response.type;
         console.log(`Response: ${response.type}`);
         if (response.type === 'result') {
             console.log('Response content', response.result);
-            if (response.result.error) {
+            if ('error' in response.result) {
                 console.error(`Error: ${response.result.error.message}`);
                 this.setState({ showToast: response.result.error.message });
             }
@@ -222,39 +230,52 @@ export default class Communication extends Component {
         return null;
     };
     // eslint-disable-next-line react/no-unused-class-component-methods
-    loadDevices() {
-        if (!this.props.selectedInstance) {
-            throw new Error('No instance selected');
-        }
-        return this.props.socket.sendTo(this.props.selectedInstance, 'dm:listDevices');
+    loadDevices(callback) {
+        return this.protocol.loadDevices(callback);
     }
     // eslint-disable-next-line react/no-unused-class-component-methods
-    loadInstanceInfos() {
-        if (!this.props.selectedInstance) {
+    async loadInstanceInfos() {
+        if (!this.state.selectedInstance) {
             throw new Error('No instance selected');
         }
-        return this.props.socket.sendTo(this.props.selectedInstance, 'dm:instanceInfo');
+        const details = await this.props.socket.sendTo(this.state.selectedInstance, 'dm:instanceInfo');
+        console.log('Instance details of', this.state.selectedInstance, details);
+        if (details.apiVersion === 'v1') {
+            this.protocol = new DmProtocolV1(this.state.selectedInstance, this.props.socket);
+        }
+        else if (details.apiVersion === 'v2') {
+            this.protocol = new DmProtocolV2(this.state.selectedInstance, this.props.socket);
+        }
+        else if (details.apiVersion === 'v3') {
+            this.protocol = new DmProtocolV3(this.state.selectedInstance, this.props.socket);
+        }
+        else {
+            this.protocol = new UnknownDmProtocol();
+        }
+        return this.protocol.convertInstanceDetails(details);
     }
     renderMessageDialog() {
         if (!this.state.message) {
             return null;
         }
-        return (React.createElement(Dialog, { open: !0, onClose: () => this.state.message?.handleClose(), hideBackdrop: true, "aria-describedby": "message-dialog-description" },
+        const message = this.state.message;
+        return (React.createElement(Dialog, { open: !0, onClose: () => message.handleClose(), hideBackdrop: true, "aria-describedby": "message-dialog-description" },
             React.createElement(DialogContent, null,
-                React.createElement(DialogContentText, { id: "message-dialog-description" }, this.state.message?.message)),
+                React.createElement(DialogContentText, { id: "message-dialog-description" }, message.message)),
             React.createElement(DialogActions, null,
-                React.createElement(Button, { color: "primary", onClick: () => this.state.message?.handleClose(), variant: "contained", autoFocus: true }, getTranslation('okButtonText')))));
+                React.createElement(Button, { color: "primary", onClick: () => message.handleClose(), variant: "contained", autoFocus: true }, getTranslation('okButtonText')))));
     }
     renderConfirmDialog() {
         if (!this.state.confirm) {
             return null;
         }
-        return (React.createElement(Dialog, { open: !0, onClose: () => this.state.confirm?.handleClose(), hideBackdrop: true, "aria-describedby": "confirm-dialog-description" },
+        const confirm = this.state.confirm;
+        return (React.createElement(Dialog, { open: !0, onClose: () => confirm.handleClose(), hideBackdrop: true, "aria-describedby": "confirm-dialog-description" },
             React.createElement(DialogContent, null,
-                React.createElement(DialogContentText, { id: "confirm-dialog-description" }, getTranslation(this.state.confirm?.message))),
+                React.createElement(DialogContentText, { id: "confirm-dialog-description" }, getTranslation(confirm.message))),
             React.createElement(DialogActions, null,
-                React.createElement(Button, { variant: "contained", color: "primary", onClick: () => this.state.confirm?.handleClose(true), autoFocus: true }, getTranslation('yesButtonText')),
-                React.createElement(Button, { variant: "contained", color: "grey", onClick: () => this.state.confirm?.handleClose(false), autoFocus: true }, getTranslation('noButtonText')))));
+                React.createElement(Button, { variant: "contained", color: "primary", onClick: () => confirm.handleClose(true), autoFocus: true }, getTranslation('yesButtonText')),
+                React.createElement(Button, { variant: "contained", color: "grey", onClick: () => confirm.handleClose(false), autoFocus: true }, getTranslation('noButtonText')))));
     }
     renderSnackbar() {
         return (React.createElement(Snackbar, { open: !!this.state.showToast, autoHideDuration: 6_000, onClose: () => this.setState({ showToast: null }), message: this.state.showToast }));
@@ -288,13 +309,14 @@ export default class Communication extends Component {
         if (!this.state.form?.schema) {
             return null;
         }
-        if (!this.props.selectedInstance) {
+        if (!this.state.selectedInstance) {
             throw new Error('No instance selected');
         }
+        const form = this.state.form;
         let buttons;
-        if (this.state.form.buttons) {
+        if (form.buttons) {
             buttons = [];
-            this.state.form.buttons.forEach((button) => {
+            form.buttons.forEach((button) => {
                 if (typeof button === 'object' && button.type === 'copyToClipboard') {
                     buttons.push(React.createElement(Button, { key: "copyToClipboard", variant: button.variant || 'outlined', color: button.color === 'primary'
                             ? 'primary'
@@ -306,8 +328,8 @@ export default class Communication extends Component {
                                 : undefined,
                             ...(button.style || undefined),
                         }, onClick: () => {
-                            if (button.copyToClipboardAttr && this.state.form.data) {
-                                const val = this.state.form.data[button.copyToClipboardAttr];
+                            if (button.copyToClipboardAttr && form.data) {
+                                const val = form.data[button.copyToClipboardAttr];
                                 if (typeof val === 'string') {
                                     Utils.copyToClipboard(val);
                                 }
@@ -316,8 +338,8 @@ export default class Communication extends Component {
                                 }
                                 window.alert(I18n.t('copied'));
                             }
-                            else if (this.state.form?.data) {
-                                Utils.copyToClipboard(JSON.stringify(this.state.form.data, null, 2));
+                            else if (form.data) {
+                                Utils.copyToClipboard(JSON.stringify(form.data, null, 2));
                                 window.alert(I18n.t('copied'));
                             }
                             else {
@@ -336,18 +358,15 @@ export default class Communication extends Component {
         else {
             buttons = [this.getOkButton(), this.getCancelButton()];
         }
-        return (React.createElement(Dialog, { open: !0, onClose: () => this.state.form.handleClose?.(), hideBackdrop: true, fullWidth: true, sx: {
+        return (React.createElement(Dialog, { onClose: () => form.handleClose?.(), hideBackdrop: true, fullWidth: true, open: true, sx: {
                 '& .MuiDialog-paper': {
-                    minWidth: this.state.form.minWidth || undefined,
+                    minWidth: form.minWidth || undefined,
                 },
-            }, maxWidth: this.state.form.maxWidth || 'md' },
-            this.state.form?.title ? (React.createElement(DialogTitle, null, getTranslation(this.state.form?.label || this.state.form?.title, this.state.form.noTranslation))) : null,
+            }, maxWidth: form.maxWidth || 'md' },
+            form.title ? (React.createElement(DialogTitle, null, getTranslation(form.label || form.title, form.noTranslation))) : null,
             React.createElement(DialogContent, null,
-                React.createElement(JsonConfig, { instanceId: this.props.selectedInstance, schema: this.state.form.schema, data: this.state.form.data || {}, socket: this.props.socket, onChange: (data) => {
+                React.createElement(JsonConfig, { instanceId: this.state.selectedInstance, schema: form.schema, data: form.data || {}, socket: this.props.socket, onChange: (data) => {
                         console.log('handleFormChange', { data });
-                        const form = {
-                            ...this.state.form,
-                        };
                         if (form) {
                             form.data = data;
                             form.changed = JSON.stringify(data) !== form.originalData;
@@ -357,10 +376,14 @@ export default class Communication extends Component {
             React.createElement(DialogActions, null, buttons)));
     }
     renderProgressDialog() {
-        if (!this.state.progress?.open) {
+        if (!this.state.progress) {
             return null;
         }
-        return (React.createElement(Dialog, { open: !0, onClose: () => { }, hideBackdrop: true }, this.state.progress.indeterminate ? (React.createElement(LinearProgress, { variant: "indeterminate" })) : (React.createElement(LinearProgress, { variant: "determinate", value: this.state.progress.progress || 0 }))));
+        return (React.createElement(Dialog, { onClose: () => { }, hideBackdrop: true, open: true },
+            this.state.progress.title && React.createElement(DialogTitle, null, getTranslation(this.state.progress.title)),
+            React.createElement(DialogContent, null,
+                this.state.progress.label && (React.createElement(DialogContentText, null, getTranslation(this.state.progress.label))),
+                React.createElement(LinearProgress, { variant: this.state.progress.indeterminate ? 'indeterminate' : 'determinate', value: this.state.progress.value }))));
     }
     // eslint-disable-next-line class-methods-use-this
     renderContent() {
@@ -370,14 +393,14 @@ export default class Communication extends Component {
         if (!this.state.showSpinner) {
             return null;
         }
-        return (React.createElement(Backdrop, { style: { zIndex: 1000 }, open: !0 },
+        return (React.createElement(Backdrop, { style: { zIndex: 1000 }, open: true },
             React.createElement(CircularProgress, null)));
     }
     renderConfirmationDialog() {
         if (!this.state.showConfirmation) {
             return null;
         }
-        return (React.createElement(Dialog, { open: !0, onClose: () => this.setState({ showConfirmation: null }) },
+        return (React.createElement(Dialog, { onClose: () => this.setState({ showConfirmation: null }), open: true },
             React.createElement(DialogTitle, null, getTranslation(this.state.showConfirmation.confirmation === true
                 ? getTranslation('areYouSureText')
                 : getTranslation(this.state.showConfirmation.confirmation))),
@@ -453,7 +476,7 @@ export default class Communication extends Component {
                 okDisabled = !this.state.inputValue;
             }
         }
-        return (React.createElement(Dialog, { open: !0, onClose: () => this.setState({ showInput: null }) },
+        return (React.createElement(Dialog, { onClose: () => this.setState({ showInput: null }), open: true },
             React.createElement(DialogTitle, null, getTranslation('pleaseEnterValueText')),
             React.createElement(DialogContent, null,
                 this.state.showInput.inputBefore.type === 'text' ||