Controls 250124 (#2923)

ioBroker · Jan 25, 2025 · e378a85 · e378a85
1 parent c854d42
commit e378a85
Show file tree

Hide file tree

Showing 20 changed files with 444 additions and 62 deletions.
diff --git a/README.md b/README.md
@@ -87,6 +87,10 @@ The icons may not be reused in other projects without the proper flaticon licens
 <!--
 	### **WORK IN PROGRESS**
 -->
+### **WORK IN PROGRESS**
+-   (@GermanBluefox) Changes are only for device manager.
+-   (@GermanBluefox) Do not show values longer than 40 chars in Object Browser
+
 ### 7.4.17 (2025-01-24)
 -   (@GermanBluefox) Fixing Tabs in JSON Config
 -   (@GermanBluefox) Added support of `ifInstallDependencies` flag in adapter

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
         "@alcalzone/release-script-plugin-license": "^3.7.0",
         "@alcalzone/release-script-plugin-lerna": "^3.7.0",
         "@iobroker/types": "^7.0.6",
-        "@iobroker/dm-utils": "^1.0.7",
+        "@iobroker/dm-utils": "^1.0.9",
         "lerna": "^8.1.9"
     },
     "scripts": {

diff --git a/packages/adapter-react-v5/src/Components/ObjectBrowser.tsx b/packages/adapter-react-v5/src/Components/ObjectBrowser.tsx
@@ -1,5 +1,5 @@
 /**
- * Copyright 2020-2024, Denis Haev <[email protected]>
+ * Copyright 2020-2025, Denis Haev <[email protected]>
  *
  * MIT License
  *
@@ -2068,6 +2068,10 @@ function formatValue(options: FormatValueOptions): {
         }
     }
 
+    if (valText.v?.length > 40) {
+        valText.v = `${valText.v.substring(0, 40)}...`;
+    }
+
     if (isCommon?.unit) {
         valText.u = isCommon.unit;
     }
@@ -2082,7 +2086,11 @@ function formatValue(options: FormatValueOptions): {
           }[]
         | undefined;
     if (options.full) {
-        valFull = [{ t: texts.value, v }];
+        if (typeof v === 'string' && v.length > 100) {
+            valFull = [{ t: texts.value, v: `${v.substring(0, 100)}...` }];
+        } else {
+            valFull = [{ t: texts.value, v }];
+        }
 
         if (state) {
             if (state.ack !== undefined && state.ack !== null) {

diff --git a/packages/admin/src-admin/package.json b/packages/admin/src-admin/package.json
@@ -36,7 +36,7 @@
         "@foxriver76/iob-component-lib": "^0.2.0",
         "@honkhonk/vite-plugin-svgr": "^1.1.0",
         "@iobroker/admin-component-easy-access": "^1.0.11",
-        "@iobroker/dm-utils": "^1.0.7",
+        "@iobroker/dm-utils": "^1.0.9",
         "@iobroker/socket-client": "^4.0.0",
         "@originjs/vite-plugin-commonjs": "^1.0.3",
         "@react-leaflet/core": "^2.1.0",
@@ -103,5 +103,5 @@
             }
         ]
     ],
-    "version": "7.4.16"
+    "version": "7.4.17"
 }
diff --git a/packages/dm-gui-components/package.json b/packages/dm-gui-components/package.json
@@ -53,6 +53,6 @@
     },
     "devDependencies": {
         "@craco/craco": "^7.1.0",
-        "@iobroker/dm-utils": "^1.0.7"
+        "@iobroker/dm-utils": "^1.0.9"
     }
 }
diff --git a/packages/dm-gui-components/src/Communication.tsx b/packages/dm-gui-components/src/Communication.tsx
@@ -27,7 +27,7 @@ import {
     Typography,
 } from '@mui/material';
 
-import { Close, Check } from '@mui/icons-material';
+import { Close, Check, ContentCopy } from '@mui/icons-material';
 
 import {
     type Connection,
@@ -37,6 +37,7 @@ import {
     type IobTheme,
     I18n,
     Icon,
+    Utils,
 } from '@iobroker/adapter-react-v5';
 import type {
     ActionBase,
@@ -80,6 +81,8 @@ interface CommunicationForm {
     data?: Record<string, any>;
     buttons?: (ActionButton | 'apply' | 'cancel' | 'close')[];
     maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Minimal width of the dialog */
+    minWidth?: number;
 }
 
 interface CommunicationFormInState extends CommunicationForm {
@@ -529,7 +532,16 @@ class Communication<P extends CommunicationProps, S extends CommunicationState>
                 key="apply"
                 disabled={!this.state.form?.changed}
                 variant={button?.variant || 'contained'}
-                color={button?.color || 'primary'}
+                color={
+                    button?.color === 'primary' ? 'primary' : button?.color === 'secondary' ? 'secondary' : 'primary'
+                }
+                style={{
+                    backgroundColor:
+                        button?.color && button?.color !== 'primary' && button?.color !== 'secondary'
+                            ? button?.color
+                            : undefined,
+                    ...(button?.style || undefined),
+                }}
                 onClick={() => this.state.form?.handleClose && this.state.form.handleClose(this.state.form?.data)}
                 startIcon={button?.icon ? <Icon src={button?.icon} /> : undefined}
             >
@@ -548,7 +560,14 @@ class Communication<P extends CommunicationProps, S extends CommunicationState>
             <Button
                 key="cancel"
                 variant={button?.variant || 'contained'}
-                color={button?.color || 'grey'}
+                color={button?.color === 'primary' ? 'primary' : button?.color === 'secondary' ? 'secondary' : 'grey'}
+                style={{
+                    backgroundColor:
+                        button?.color && button?.color !== 'primary' && button?.color !== 'secondary'
+                            ? button?.color
+                            : undefined,
+                    ...(button?.style || undefined),
+                }}
                 onClick={() => this.state.form?.handleClose && this.state.form.handleClose()}
                 startIcon={isClose ? <Close /> : button?.icon ? <Icon src={button?.icon} /> : undefined}
             >
@@ -565,7 +584,47 @@ class Communication<P extends CommunicationProps, S extends CommunicationState>
         if (this.state.form.buttons) {
             buttons = [];
             this.state.form.buttons.forEach((button: ActionButton | 'apply' | 'cancel' | 'close'): void => {
-                if (button === 'apply' || (button as ActionButton).type === 'apply') {
+                if (typeof button === 'object' && button.type === 'copyToClipboard') {
+                    buttons.push(
+                        <Button
+                            key="copyToClipboard"
+                            variant={button.variant || 'outlined'}
+                            color={
+                                button.color === 'primary'
+                                    ? 'primary'
+                                    : button.color === 'secondary'
+                                      ? 'secondary'
+                                      : undefined
+                            }
+                            style={{
+                                backgroundColor:
+                                    button.color && button.color !== 'primary' && button.color !== 'secondary'
+                                        ? button.color
+                                        : undefined,
+                                ...(button.style || undefined),
+                            }}
+                            onClick={() => {
+                                if (button.copyToClipboardAttr && this.state.form!.data) {
+                                    const val = this.state.form!.data[button.copyToClipboardAttr];
+                                    if (typeof val === 'string') {
+                                        Utils.copyToClipboard(val);
+                                    } else {
+                                        Utils.copyToClipboard(JSON.stringify(val, null, 2));
+                                    }
+                                    window.alert(I18n.t('copied'));
+                                } else if (this.state.form?.data) {
+                                    Utils.copyToClipboard(JSON.stringify(this.state.form.data, null, 2));
+                                    window.alert(I18n.t('copied'));
+                                } else {
+                                    window.alert(I18n.t('nothingToCopy'));
+                                }
+                            }}
+                            startIcon={button?.icon ? <Icon src={button?.icon} /> : <ContentCopy />}
+                        >
+                            {getTranslation(button?.label || 'ctcButtonText', button?.noTranslation)}
+                        </Button>,
+                    );
+                } else if (button === 'apply' || (button as ActionButton).type === 'apply') {
                     buttons.push(this.getOkButton(button));
                 } else {
                     buttons.push(this.getCancelButton(button));
@@ -574,12 +633,18 @@ class Communication<P extends CommunicationProps, S extends CommunicationState>
         } else {
             buttons = [this.getOkButton(), this.getCancelButton()];
         }
+
         return (
             <Dialog
                 open={!0}
-                onClose={() => this.state.form?.handleClose && this.state.form.handleClose()}
+                onClose={() => this.state.form!.handleClose && this.state.form!.handleClose()}
                 hideBackdrop
                 fullWidth
+                sx={{
+                    '& .MuiDialog-paper': {
+                        minWidth: this.state.form.minWidth || undefined,
+                    },
+                }}
                 maxWidth={this.state.form.maxWidth || 'md'}
             >
                 {this.state.form?.title ? (

diff --git a/packages/dm-gui-components/src/DeviceCard.tsx b/packages/dm-gui-components/src/DeviceCard.tsx
@@ -412,22 +412,7 @@ class DeviceCard extends Component<DeviceCardProps, DeviceCardState> {
                 }}
             >
                 <CardHeader
-                    sx={theme => ({
-                        backgroundColor:
-                            this.props.device.color === 'primary'
-                                ? theme.palette.primary.main
-                                : this.props.device.color === 'secondary'
-                                  ? theme.palette.secondary.main
-                                  : this.props.device.color || theme.palette.secondary.main,
-                        color:
-                            this.props.device.headerTextColor ||
-                            (this.props.device.color &&
-                            this.props.device.color !== 'primary' &&
-                            this.props.device.color !== 'secondary'
-                                ? Utils.invertColor(this.props.device.color, true)
-                                : theme.palette.secondary.contrastText),
-                        maxWidth: 345,
-                    })}
+                    sx={(theme: IobTheme): React.CSSProperties => this.getCardHeaderStyle(theme, 345)}
                     avatar={
                         <div>
                             {this.props.uploadImagesToInstance ? (
@@ -538,6 +523,43 @@ class DeviceCard extends Component<DeviceCardProps, DeviceCardState> {
         );
     }
 
+    getCardHeaderStyle(theme: IobTheme, maxWidth?: number): React.CSSProperties {
+        const backgroundColor =
+            this.props.device.backgroundColor === 'primary'
+                ? theme.palette.primary.main
+                : this.props.device.backgroundColor === 'secondary'
+                  ? theme.palette.secondary.main
+                  : this.props.device.backgroundColor || theme.palette.secondary.main;
+        let color;
+        if (
+            this.props.device.color &&
+            this.props.device.color !== 'primary' &&
+            this.props.device.color !== 'secondary'
+        ) {
+            // Color was directly defined
+            color = this.props.device.color;
+        } else if (this.props.device.color === 'primary') {
+            color = theme.palette.primary.main;
+        } else if (this.props.device.color === 'secondary') {
+            color = theme.palette.secondary.main;
+        } else {
+            // Color was not defined
+            if (this.props.device.backgroundColor === 'primary') {
+                color = theme.palette.primary.contrastText;
+            } else if (this.props.device.backgroundColor === 'secondary' || !this.props.device.backgroundColor) {
+                color = theme.palette.secondary.contrastText;
+            } else {
+                color = Utils.invertColor(backgroundColor, true);
+            }
+        }
+
+        return {
+            backgroundColor,
+            color,
+            maxWidth,
+        };
+    }
+
     renderBig(): JSX.Element {
         const status = !this.props.device.status
             ? []
@@ -562,22 +584,7 @@ class DeviceCard extends Component<DeviceCardProps, DeviceCardState> {
                 key={this.props.id}
             >
                 <Box
-                    sx={theme => ({
-                        backgroundColor:
-                            this.props.device.color === 'primary'
-                                ? theme.palette.primary.main
-                                : this.props.device.color === 'secondary'
-                                  ? theme.palette.secondary.main
-                                  : this.props.device.color || theme.palette.secondary.main,
-                        color:
-                            this.props.device.headerTextColor ||
-                            (this.props.device.color &&
-                            this.props.device.color !== 'primary' &&
-                            this.props.device.color !== 'secondary'
-                                ? Utils.invertColor(this.props.device.color, true)
-                                : theme.palette.secondary.contrastText),
-                        maxWidth: 345,
-                    })}
+                    sx={(theme: IobTheme): React.CSSProperties => this.getCardHeaderStyle(theme)}
                     style={styles.headerStyle}
                 >
                     <div style={styles.imgAreaStyle}>