Added info-box

README.md

@@ -87,6 +87,9 @@ The icons may not be reused in other projects without the proper flaticon licens
 <!--
 	### **WORK IN PROGRESS**
 -->
+### **WORK IN PROGRESS**
+-   (@GermanBluefox) Corrected the device manager in `hm-rpc` and other adapters
+
 ### 7.4.19 (2025-01-26)
 -   (@GermanBluefox) Corrected file upload in File Browser and in JSON Config
 

packages/adapter-react-v5/package.json

@@ -61,10 +61,10 @@
         "@iobroker/js-controller-common-db": "^7.0.6",
         "@iobroker/socket-client": "^4.0.0",
         "@iobroker/types": "^7.0.6",
-        "@mui/icons-material": "^6.4.1",
-        "@mui/material": "^6.4.1",
-        "@sentry/browser": "^8.51.0",
-        "cronstrue": "^2.53.0",
+        "@mui/icons-material": "^6.4.3",
+        "@mui/material": "^6.4.3",
+        "@sentry/browser": "^8.54.0",
+        "cronstrue": "^2.54.0",
         "file-selector": "^2.1.2",
         "react-color": "^2.19.3",
         "react-colorful": "^5.6.1",
@@ -73,14 +73,14 @@
         "react-inlinesvg": "^4.1.8"
     },
     "devDependencies": {
-        "@babel/core": "^7.26.0",
+        "@babel/core": "^7.26.7",
         "@babel/plugin-proposal-class-properties": "^7.18.6",
         "@babel/plugin-transform-runtime": "^7.25.9",
-        "@babel/preset-env": "^7.26.0",
+        "@babel/preset-env": "^7.26.7",
         "@babel/preset-flow": "^7.25.9",
         "@babel/preset-react": "^7.26.3",
         "@iobroker/eslint-config": "^1.0.0",
-        "@types/node": "^22.10.10",
+        "@types/node": "^22.13.1",
         "@types/react": "^18.3.18",
         "@types/react-color": "^3.0.13",
         "ajv": "^8.17.1",

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

@@ -0,0 +1,167 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+import { Info, Warning, Close, Visibility, type SvgIconComponent, Check } from '@mui/icons-material';
+
+interface InfoBoxProps {
+    /** Text to display in the info box */
+    children: string | (string | React.JSX.Element | null)[] | React.JSX.Element;
+    /** The type determines the color and symbol */
+    type: 'warning' | 'info' | 'error' | 'ok';
+    /** If the Box is closeable */
+    closeable?: boolean;
+    /** Use together with `closeable: true`. You can specify in which variable in local storage the state of this info box could be stored */
+    storeId?: string;
+    /** Use together with `closeable: true`, listener called if close button clicked */
+    onClose?: (desiredState: boolean) => void;
+    /** Custom style */
+    style?: React.CSSProperties;
+    /** Icon position */
+    iconPosition?: 'top' | 'middle';
+    /** Use together with `closeable: true`. If the box is closed or not. In this case, it will be controlled from outside */
+    closed?: boolean;
+}
+
+interface InfoBoxState {
+    closed: boolean;
+}
+/**
+ * This component can be used to show important information or warnings to the user
+ */
+export default class InfoBox extends React.Component<InfoBoxProps, InfoBoxState> {
+    private readonly refTypo: React.RefObject<HTMLDivElement>;
+    private height: number;
+    private width: number;
+
+    constructor(props: InfoBoxProps) {
+        super(props);
+        this.state = {
+            closed: this.props.storeId ? window.localStorage.getItem(this.props.storeId) === 'true' : false,
+        };
+        this.height = 0;
+        this.width = 0;
+
+        this.refTypo = React.createRef();
+    }
+
+    componentDidMount(): void {
+        this.detectHeight();
+    }
+
+    onClick(): void {
+        if (this.props.storeId && this.props.closed === undefined) {
+            if (this.state.closed) {
+                window.localStorage.removeItem(this.props.storeId);
+            } else {
+                window.localStorage.setItem(this.props.storeId, 'true');
+            }
+        }
+        if (this.props.closed === undefined) {
+            this.setState({ closed: !this.state.closed }, () => {
+                // Inform about state change
+                if (this.props.onClose) {
+                    this.props.onClose(this.state.closed);
+                }
+            });
+        } else if (this.props.onClose) {
+            this.props.onClose(!this.props.closed);
+        }
+    }
+
+    detectHeight(): void {
+        const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;
+        // We must get the height of the element when it is open to make transition
+        if (this.props.closeable && !closed && this.refTypo.current) {
+            window.requestAnimationFrame(() => {
+                const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;
+                if (closed) {
+                    return;
+                }
+                if (this.refTypo.current && (!this.height || this.width !== this.refTypo.current.clientWidth)) {
+                    this.height = this.refTypo.current.clientHeight;
+                    this.width = this.refTypo.current.clientWidth;
+                    this.forceUpdate();
+                }
+            });
+        }
+    }
+
+    componentDidUpdate(): void {
+        this.detectHeight();
+    }
+
+    render(): React.ReactNode {
+        const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;
+
+        const Icon: SvgIconComponent = closed ? Visibility : Close;
+
+        return (
+            <Box
+                className="iom-info-box"
+                style={{
+                    whiteSpace: 'preserve',
+                    display: 'flex',
+                    gap: 8,
+                    alignItems: closed || this.props.iconPosition === 'top' ? 'flex-start' : 'center',
+                    borderWidth: 1,
+                    borderStyle: 'solid',
+                    padding: 4,
+                    borderRadius: 5,
+                    marginBottom: 8,
+                    maxWidth: '100%',
+                    transition: 'height 0.5s',
+                    height: this.props.closeable ? (closed ? 30 : this.height || undefined) : undefined,
+                    overflow: this.props.closeable ? 'hidden' : undefined,
+                    position: 'relative',
+                    ...this.props.style,
+                }}
+                sx={{
+                    borderColor: theme =>
+                        this.props.type === 'ok' ? theme.palette.info.main : theme.palette[this.props.type].main,
+                }}
+            >
+                {this.props.type === 'ok' ? (
+                    <Check style={{ color: '#0F0' }} />
+                ) : this.props.type === 'info' ? (
+                    <Info color="primary" />
+                ) : (
+                    <Warning color={this.props.type} />
+                )}
+                <Typography ref={this.refTypo}>{this.props.children}</Typography>
+                {this.props.closeable ? (
+                    <Icon
+                        sx={{
+                            color: theme => (theme.palette.mode === 'dark' ? 'lightgray' : 'gray'),
+                            // alignSelf: 'flex-start',
+                            cursor: 'pointer',
+                            position: 'absolute',
+                            top: 4,
+                            right: 4,
+                        }}
+                        onClick={() => this.onClick()}
+                    />
+                ) : null}
+                {/* Reserve place for button so it will not overlap the text */}
+                {this.props.closeable ? <div style={{ width: 22 }} /> : null}
+                {closed ? (
+                    <Box
+                        // This is a shadow box at the bottom of the InfoBox when it closed
+                        component="div"
+                        sx={theme => {
+                            const color = theme.palette[this.props.type === 'ok' ? 'info' : this.props.type].main;
+                            return {
+                                background: `linear-gradient(${color}00 0%, ${color}10 60%, ${color}90 100%)`,
+                            };
+                        }}
+                        style={{
+                            bottom: 0,
+                            position: 'absolute',
+                            left: 0,
+                            right: 0,
+                            height: 10,
+                        }}
+                    />
+                ) : null}
+            </Box>
+        );
+    }
+}

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

@@ -103,12 +103,22 @@ body {
 }
 `;
 
+function isIFrame(): boolean {
+    try {
+        return window.self !== window.top;
+    } catch {
+        return true;
+    }
+}
+
 export class GenericApp<
     TProps extends GenericAppProps = GenericAppProps,
     TState extends GenericAppState = GenericAppState,
 > extends Router<TProps, TState> {
     protected socket: AdminConnection;
 
+    protected isIFrame = isIFrame();
+
     protected readonly instance: number;
 
     protected readonly adapterName: string;
@@ -686,12 +696,11 @@ export class GenericApp<
      */
     onPrepareSave(settings: Record<string, any>): boolean {
         // here you can encode values
-        this.encryptedFields &&
-            this.encryptedFields.forEach(attr => {
-                if (settings[attr]) {
-                    settings[attr] = this.encrypt(settings[attr]);
-                }
-            });
+        this.encryptedFields?.forEach(attr => {
+            if (settings[attr]) {
+                settings[attr] = this.encrypt(settings[attr]);
+            }
+        });
 
         return true;
     }
@@ -705,20 +714,18 @@ export class GenericApp<
      */
     onPrepareLoad(settings: Record<string, any>, encryptedNative?: string[]): void {
         // here you can encode values
-        this.encryptedFields &&
-            this.encryptedFields.forEach(attr => {
-                if (settings[attr]) {
-                    settings[attr] = this.decrypt(settings[attr]);
-                }
-            });
-        encryptedNative &&
-            encryptedNative.forEach(attr => {
-                this.encryptedFields = this.encryptedFields || [];
-                !this.encryptedFields.includes(attr) && this.encryptedFields.push(attr);
-                if (settings[attr]) {
-                    settings[attr] = this.decrypt(settings[attr]);
-                }
-            });
+        this.encryptedFields?.forEach(attr => {
+            if (settings[attr]) {
+                settings[attr] = this.decrypt(settings[attr]);
+            }
+        });
+        encryptedNative?.forEach(attr => {
+            this.encryptedFields = this.encryptedFields || [];
+            !this.encryptedFields.includes(attr) && this.encryptedFields.push(attr);
+            if (settings[attr]) {
+                settings[attr] = this.decrypt(settings[attr]);
+            }
+        });
     }
 
     /**

packages/admin/package.json

@@ -40,10 +40,10 @@
         "json5": "^2.2.3",
         "mime": "^3.0.0",
         "passport-local": "^1.0.0",
-        "semver": "^7.6.3"
+        "semver": "^7.7.1"
     },
     "devDependencies": {
-        "@iobroker/build-tools": "^2.0.14",
+        "@iobroker/build-tools": "^2.0.15",
         "@iobroker/dm-gui-components": "file:../dm-gui-components",
         "@iobroker/json-config": "file:../jsonConfig",
         "@iobroker/legacy-testing": "^2.0.2",

packages/admin/src-admin/package.json

@@ -44,10 +44,10 @@
         "@types/ace": "^0.0.52",
         "@types/crypto-js": "^4.2.2",
         "@types/leaflet": "^1.9.16",
-        "@types/less": "^3.0.7",
-        "@types/lodash": "^4.17.14",
+        "@types/less": "^3.0.8",
+        "@types/lodash": "^4.17.15",
         "@types/mocha": "^10.0.10",
-        "@types/node": "^22.10.10",
+        "@types/node": "^22.13.1",
         "@types/react": "^18.3.18",
         "@types/react-color": "^3.0.13",
         "@types/react-dom": "^18.3.5",
@@ -71,18 +71,18 @@
         "react-ace": "^13.0.0",
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
-        "react-dnd-multi-backend": "^8.1.2",
-        "react-dnd-preview": "^8.1.2",
+        "react-dnd-multi-backend": "^9.0.0",
+        "react-dnd-preview": "^9.0.0",
         "react-dnd-touch-backend": "^16.0.1",
         "react-icons": "^5.4.0",
         "react-leaflet": "^4.2.1",
         "react-markdown": "^9.0.3",
-        "react-monaco-editor": "^0.56.2",
+        "react-monaco-editor": "^0.58.0",
         "react-qr-code": "^2.0.15",
         "react-scripts": "^5.0.1",
         "react-showdown": "^2.3.1",
         "react-sortable-hoc": "^2.0.0",
-        "semver": "^7.6.3",
+        "semver": "^7.7.1",
         "tsconfig-paths-webpack-plugin": "^4.2.0"
     },
     "resolutions": {
@@ -103,5 +103,5 @@
             }
         ]
     ],
-    "version": "7.4.18"
+    "version": "7.4.19"
 }