@iobroker/dm-gui-components 7.3.2 → 7.4.1

package/build/Communication.d.ts

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
-import type { Connection, ThemeName, ThemeType, IobTheme } from '@iobroker/adapter-react-v5';
-import { type ConfigItemPanel } from '@iobroker/json-config';
-import type { ActionBase, ControlBase, ControlState, DeviceInfo, InstanceDetails } from '@iobroker/dm-utils';
+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';
 declare module '@mui/material/Button' {
     interface ButtonPropsColorOverrides {
         grey: true;
@@ -20,10 +19,17 @@ export type CommunicationProps = {
     dateFormat: string;
 };
 interface CommunicationForm {
-    title?: string | null | undefined;
-    schema?: ConfigItemPanel;
+    title?: ioBroker.StringOrTranslated | null | undefined;
+    label?: ioBroker.StringOrTranslated | null | undefined;
+    noTranslation?: boolean;
+    schema: JsonFormSchema;
     data?: Record<string, any>;
+    buttons?: (ActionButton | 'apply' | 'cancel')[];
+}
+interface CommunicationFormInState extends CommunicationForm {
     handleClose?: (data?: Record<string, any>) => void;
+    originalData: string;
+    changed: boolean;
 }
 interface InputAction extends ActionBase {
     /** If it is a device action */
@@ -42,7 +48,7 @@ export type CommunicationState = {
         message: string;
         handleClose: (confirmation?: boolean) => void;
     } | null;
-    form: CommunicationForm | null;
+    form: CommunicationFormInState | null;
     progress: {
         open: boolean;
         progress: number;
@@ -63,11 +69,13 @@ interface Message {
  * Device List Component
  */
 declare class Communication<P extends CommunicationProps, S extends CommunicationState> extends Component<P, S> {
+    private responseTimeout;
     instanceHandler: (action: ActionBase) => () => void;
     deviceHandler: (deviceId: string, action: ActionBase, refresh: () => void) => () => void;
     controlHandler: (deviceId: string, control: ControlBase, state: ControlState) => () => Promise<ioBroker.State | null>;
     controlStateHandler: (deviceId: string, control: ControlBase) => () => Promise<ioBroker.State | null>;
     constructor(props: P);
+    componentWillUnmount(): void;
     loadData(): void;
     sendActionToInstance: (command: `dm:${string}`, messageToSend: Message, refresh?: () => void) => void;
     sendControlToInstance: (command: string, messageToSend: {
@@ -80,11 +88,14 @@ declare class Communication<P extends CommunicationProps, S extends Communicatio
     renderMessageDialog(): React.JSX.Element | null;
     renderConfirmDialog(): React.JSX.Element | null;
     renderSnackbar(): React.JSX.Element;
+    getOkButton(button?: ActionButton | 'apply' | 'cancel'): React.JSX.Element;
+    getCancelButton(button?: ActionButton | 'apply' | 'cancel'): React.JSX.Element;
     renderFormDialog(): React.JSX.Element | null;
     renderProgressDialog(): React.JSX.Element | null;
     renderContent(): React.JSX.Element | React.JSX.Element[] | null;
     renderSpinner(): React.JSX.Element | null;
     renderConfirmationDialog(): React.JSX.Element | null;
+    onShowInputOk(): void;
     renderInputDialog(): React.JSX.Element | null;
     render(): React.JSX.Element;
 }

package/build/Communication.js

@@ -1,12 +1,14 @@
 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 } from '@mui/icons-material';
+import { I18n, Icon, } from '@iobroker/adapter-react-v5';
 import { getTranslation } from './Utils';
 import JsonConfig from './JsonConfig';
 /**
  * Device List Component
  */
 class Communication extends Component {
+    responseTimeout = null;
     // eslint-disable-next-line react/no-unused-class-component-methods
     instanceHandler;
     // eslint-disable-next-line react/no-unused-class-component-methods
@@ -63,6 +65,12 @@ class Communication extends Component {
             this.props.registerHandler(() => this.loadData());
         }
     }
+    componentWillUnmount() {
+        if (this.responseTimeout) {
+            clearTimeout(this.responseTimeout);
+            this.responseTimeout = null;
+        }
+    }
     // eslint-disable-next-line class-methods-use-this
     loadData() {
         console.error('loadData not implemented');
@@ -70,7 +78,15 @@ class Communication extends Component {
     sendActionToInstance = (command, messageToSend, refresh) => {
         const send = async () => {
             this.setState({ showSpinner: true });
+            this.responseTimeout = setTimeout(() => {
+                this.setState({ showSpinner: false });
+                window.alert(I18n.t('ra_No response from the backend'));
+            }, 5000);
             const response = await this.props.socket.sendTo(this.props.selectedInstance, command, messageToSend);
+            if (this.responseTimeout) {
+                clearTimeout(this.responseTimeout);
+                this.responseTimeout = null;
+            }
             const type = response.type;
             console.log(`Response: ${response.type}`);
             switch (type) {
@@ -82,6 +98,7 @@ class Communication extends Component {
                                 message: response.message,
                                 handleClose: () => this.setState({ message: null }, () => this.sendActionToInstance('dm:actionProgress', { origin: response.origin }, refresh)),
                             },
+                            showSpinner: false,
                         });
                     }
                     break;
@@ -96,15 +113,28 @@ class Communication extends Component {
                                     confirm,
                                 }, refresh)),
                             },
+                            showSpinner: false,
                         });
                     }
                     break;
                 case 'form':
                     console.log('Form received');
                     if (response.form) {
+                        const data = response.form.data;
+                        const originalData = {};
+                        if (data) {
+                            Object.keys(data).forEach(key => {
+                                if (data[key] !== undefined) {
+                                    originalData[key] = data[key];
+                                }
+                            });
+                        }
+                        response.form.data = JSON.parse(JSON.stringify(originalData));
                         this.setState({
                             form: {
                                 ...response.form,
+                                changed: false,
+                                originalData: JSON.stringify(originalData),
                                 handleClose: (data) => this.setState({ form: null }, () => {
                                     console.log(`Form ${JSON.stringify(data)}`);
                                     this.sendActionToInstance('dm:actionProgress', {
@@ -113,6 +143,7 @@ class Communication extends Component {
                                     }, refresh);
                                 }),
                             },
+                            showSpinner: false,
                         });
                     }
                     break;
@@ -120,10 +151,10 @@ class Communication extends Component {
                     if (response.progress) {
                         if (this.state.progress) {
                             const progress = { ...this.state.progress, ...response.progress };
-                            this.setState({ progress });
+                            this.setState({ progress, showSpinner: false });
                         }
                         else {
-                            this.setState({ progress: response.progress });
+                            this.setState({ progress: response.progress, showSpinner: false });
                         }
                     }
                     this.sendActionToInstance('dm:actionProgress', { origin: response.origin }, refresh);
@@ -153,9 +184,11 @@ class Communication extends Component {
                     }
                     if (response.result.error) {
                         console.error(`Error: ${response.result.error.message}`);
-                        this.setState({ showToast: response.result.error.message });
+                        this.setState({ showToast: response.result.error.message, showSpinner: false });
+                    }
+                    else {
+                        this.setState({ showSpinner: false });
                     }
-                    this.setState({ showSpinner: false });
                     break;
                 default:
                     console.log(`Unknown response type: ${type}`);
@@ -216,24 +249,52 @@ class Communication extends Component {
     renderSnackbar() {
         return (React.createElement(Snackbar, { open: !!this.state.showToast, autoHideDuration: 6000, onClose: () => this.setState({ showToast: null }), message: this.state.showToast }));
     }
+    getOkButton(button) {
+        if (typeof button === 'string') {
+            button = undefined;
+        }
+        return (React.createElement(Button, { key: "apply", disabled: !this.state.form?.changed, variant: button?.variant || 'contained', color: button?.color || 'primary', onClick: () => this.state.form?.handleClose && this.state.form.handleClose(this.state.form?.data), startIcon: button?.icon ? React.createElement(Icon, { src: button?.icon }) : undefined }, getTranslation(button?.label || 'okButtonText', button?.noTranslation)));
+    }
+    getCancelButton(button) {
+        if (typeof button === 'string') {
+            button = undefined;
+        }
+        return (React.createElement(Button, { key: "cancel", variant: button?.variant || 'contained', color: button?.color || 'grey', onClick: () => this.state.form?.handleClose && this.state.form.handleClose(), startIcon: button?.icon ? React.createElement(Icon, { src: button?.icon }) : undefined }, getTranslation(button?.label || 'cancelButtonText', button?.noTranslation)));
+    }
     renderFormDialog() {
-        if (!this.state.form || !this.state.form.schema || !this.state.form.data) {
+        if (!this.state.form || !this.state.form.schema) {
             return null;
         }
+        let buttons;
+        if (this.state.form.buttons) {
+            buttons = [];
+            this.state.form.buttons.forEach((button) => {
+                if (button === 'apply' || button.type === 'apply') {
+                    buttons.push(this.getOkButton(button));
+                }
+                else {
+                    buttons.push(this.getCancelButton(button));
+                }
+            });
+        }
+        else {
+            buttons = [this.getOkButton(), this.getCancelButton()];
+        }
         return (React.createElement(Dialog, { open: !0, onClose: () => this.state.form?.handleClose && this.state.form.handleClose(), hideBackdrop: true },
-            this.state.form?.title ? React.createElement(DialogTitle, null, getTranslation(this.state.form?.title)) : null,
+            this.state.form?.title ? (React.createElement(DialogTitle, null, getTranslation(this.state.form?.label || this.state.form?.title, this.state.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.props.selectedInstance, schema: this.state.form.schema, data: this.state.form.data || {}, socket: this.props.socket, onChange: (data) => {
                         console.log('handleFormChange', { data });
-                        const form = { ...this.state.form };
+                        const form = {
+                            ...this.state.form,
+                        };
                         if (form) {
                             form.data = data;
+                            form.changed = JSON.stringify(data) !== form.originalData;
                             this.setState({ form });
                         }
                     }, themeName: this.props.themeName, themeType: this.props.themeType, theme: this.props.theme, isFloatComma: this.props.isFloatComma, dateFormat: this.props.dateFormat })),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { variant: "contained", color: "primary", onClick: () => this.state.form?.handleClose && this.state.form.handleClose(this.state.form?.data), autoFocus: true }, getTranslation('okButtonText')),
-                React.createElement(Button, { variant: "contained", color: "grey", onClick: () => this.state.form?.handleClose && this.state.form.handleClose() }, getTranslation('cancelButtonText')))));
+            React.createElement(DialogActions, null, buttons)));
     }
     renderProgressDialog() {
         if (!this.state.progress?.open) {
@@ -247,11 +308,7 @@ class Communication extends Component {
         return null;
     }
     renderSpinner() {
-        if (!this.state.showSpinner &&
-            !this.state.progress?.open &&
-            !this.state.message &&
-            !this.state.confirm &&
-            !this.state.form) {
+        if (!this.state.showSpinner) {
             return null;
         }
         return (React.createElement(Backdrop, { style: { zIndex: 1000 }, open: !0 },
@@ -282,6 +339,35 @@ class Communication extends Component {
                     }, autoFocus: true, startIcon: React.createElement(Check, null) }, getTranslation('yesButtonText')),
                 React.createElement(Button, { variant: "contained", color: "grey", onClick: () => this.setState({ showConfirmation: null }), startIcon: React.createElement(Close, null) }, getTranslation('cancelButtonText')))));
     }
+    onShowInputOk() {
+        if (!this.state.showInput) {
+            return;
+        }
+        const showInput = this.state.showInput;
+        this.setState({ showInput: null }, () => {
+            if (showInput.deviceId) {
+                this.sendActionToInstance('dm:deviceAction', {
+                    actionId: showInput.id,
+                    deviceId: showInput.deviceId,
+                    value: showInput.inputBefore?.type === 'checkbox'
+                        ? !!this.state.inputValue
+                        : showInput.inputBefore?.type === 'number'
+                            ? parseFloat(this.state.inputValue) || 0
+                            : this.state.inputValue,
+                }, showInput.refresh);
+            }
+            else {
+                this.sendActionToInstance('dm:instanceAction', {
+                    actionId: showInput.id,
+                    value: showInput.inputBefore?.type === 'checkbox'
+                        ? !!this.state.inputValue
+                        : showInput.inputBefore?.type === 'number'
+                            ? parseFloat(this.state.inputValue) || 0
+                            : this.state.inputValue,
+                });
+            }
+        });
+    }
     renderInputDialog() {
         if (!this.state.showInput || !this.state.showInput.inputBefore) {
             return null;
@@ -317,7 +403,11 @@ class Communication extends Component {
                                 React.createElement(IconButton, { size: "small", onClick: () => this.setState({ inputValue: '' }) },
                                     React.createElement(Close, null)))) : null,
                         },
-                    }, type: this.state.showInput.inputBefore.type === 'number' ? 'number' : 'text', fullWidth: true, value: this.state.inputValue, onChange: e => this.setState({ inputValue: e.target.value }) })) : null,
+                    }, type: this.state.showInput.inputBefore.type === 'number' ? 'number' : 'text', fullWidth: true, value: this.state.inputValue, onChange: e => this.setState({ inputValue: e.target.value }), onKeyUp: (e) => {
+                        if (e.key === 'Enter') {
+                            this.onShowInputOk();
+                        }
+                    } })) : null,
                 this.state.showInput.inputBefore.type === 'checkbox' ? (React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: !!this.state.inputValue, autoFocus: true, onChange: e => this.setState({ inputValue: e.target.checked }) }), label: getTranslation(this.state.showInput.inputBefore.label) })) : null,
                 this.state.showInput.inputBefore.type === 'select' ? (React.createElement(FormControl, { fullWidth: true },
                     React.createElement(InputLabel, null, getTranslation(this.state.showInput.inputBefore.label)),
@@ -326,7 +416,7 @@ class Communication extends Component {
                     React.createElement(Typography, { gutterBottom: true }, getTranslation(this.state.showInput.inputBefore.label)),
                     React.createElement(Grid2, { container: true, spacing: 2, alignItems: "center" },
                         React.createElement(Grid2, null,
-                            React.createElement(Slider, { value: typeof this.state.inputValue === 'number' ? this.state.inputValue : 0, onChange: (event, newValue) => this.setState({ inputValue: newValue }) })),
+                            React.createElement(Slider, { value: typeof this.state.inputValue === 'number' ? this.state.inputValue : 0, onChange: (_event, newValue) => this.setState({ inputValue: newValue }) })),
                         React.createElement(Grid2, null,
                             React.createElement(Input, { value: this.state.inputValue, size: "small", onChange: e => this.setState({
                                     inputValue: e.target.value === '' ? 0 : Number(e.target.value),
@@ -357,48 +447,20 @@ class Communication extends Component {
                                     type: 'number',
                                 } }))))) : null),
             React.createElement(DialogActions, null,
-                React.createElement(Button, { variant: "contained", disabled: okDisabled, color: "primary", onClick: () => {
-                        if (!this.state.showInput) {
-                            return;
-                        }
-                        const showInput = this.state.showInput;
-                        this.setState({ showInput: null }, () => {
-                            if (showInput.deviceId) {
-                                this.sendActionToInstance('dm:deviceAction', {
-                                    actionId: showInput.id,
-                                    deviceId: showInput.deviceId,
-                                    value: showInput.inputBefore?.type === 'checkbox'
-                                        ? !!this.state.inputValue
-                                        : showInput.inputBefore?.type === 'number'
-                                            ? parseFloat(this.state.inputValue) || 0
-                                            : this.state.inputValue,
-                                }, showInput.refresh);
-                            }
-                            else {
-                                this.sendActionToInstance('dm:instanceAction', {
-                                    actionId: showInput.id,
-                                    value: showInput.inputBefore?.type === 'checkbox'
-                                        ? !!this.state.inputValue
-                                        : showInput.inputBefore?.type === 'number'
-                                            ? parseFloat(this.state.inputValue) || 0
-                                            : this.state.inputValue,
-                                });
-                            }
-                        });
-                    }, startIcon: React.createElement(Check, null) }, getTranslation('yesButtonText')),
+                React.createElement(Button, { variant: "contained", disabled: okDisabled, color: "primary", onClick: () => this.onShowInputOk(), startIcon: React.createElement(Check, null) }, getTranslation('yesButtonText')),
                 React.createElement(Button, { variant: "contained", color: "grey", onClick: () => this.setState({ showInput: null }), startIcon: React.createElement(Close, null) }, getTranslation('cancelButtonText')))));
     }
     render() {
         return (React.createElement(React.Fragment, null,
             this.renderSnackbar(),
             this.renderContent(),
-            this.renderSpinner(),
             this.renderConfirmDialog(),
             this.renderMessageDialog(),
             this.renderFormDialog(),
             this.renderProgressDialog(),
             this.renderConfirmationDialog(),
-            this.renderInputDialog()));
+            this.renderInputDialog(),
+            this.renderSpinner()));
     }
 }
 export default Communication;