@iobroker/adapter-react-v5 4.13.0 → 4.13.2

package/Components/JsonConfigComponent/DeviceManager/DeviceCard.js

@@ -0,0 +1,340 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const icons_material_1 = require("@mui/icons-material");
+const Icon_1 = __importDefault(require("../../Icon"));
+const Utils_1 = __importDefault(require("../../Utils"));
+const i18n_1 = __importDefault(require("../../../i18n"));
+const DeviceActionButton_1 = __importDefault(require("./DeviceActionButton"));
+const DeviceControl_1 = __importDefault(require("./DeviceControl"));
+const DeviceStatus_1 = __importDefault(require("./DeviceStatus"));
+const JsonConfig_1 = __importDefault(require("./JsonConfig"));
+const DeviceImageUpload_1 = __importDefault(require("./DeviceImageUpload"));
+const Utils_2 = require("./Utils");
+const NoImageIcon = (props) => react_1.default.createElement("svg", { viewBox: "0 0 24 24", width: "24", height: "24", style: props.style, className: props.className },
+    react_1.default.createElement("path", { fill: "currentColor", d: "M21.9,21.9l-8.49-8.49l0,0L3.59,3.59l0,0L2.1,2.1L0.69,3.51L3,5.83V19c0,1.1,0.9,2,2,2h13.17l2.31,2.31L21.9,21.9z M5,18 l3.5-4.5l2.5,3.01L12.17,15l3,3H5z M21,18.17L5.83,3H19c1.1,0,2,0.9,2,2V18.17z" }));
+function getText(text) {
+    if (typeof text === 'object') {
+        return text[i18n_1.default.getLanguage()] || text.en;
+    }
+    return text;
+}
+/**
+ * Device Card Component
+ */
+class DeviceCard extends react_1.Component {
+    constructor(props) {
+        super(props);
+        /**
+         * Refresh the device details
+         */
+        this.refresh = () => {
+            this.setState({ details: null });
+            this.loadDetails().catch(console.error);
+        };
+        /**
+         * Copy the device ID to the clipboard
+         * @returns {void}
+         */
+        this.copyToClipboard = async () => {
+            const textToCopy = this.props.device.id;
+            Utils_1.default.copyToClipboard(textToCopy);
+            alert(`${(0, Utils_2.getTranslation)('copied')} ${textToCopy} ${(0, Utils_2.getTranslation)('toClipboard')}!`);
+        };
+        this.state = {
+            open: false,
+            details: null,
+            data: {},
+            icon: props.device.icon,
+            showControlDialog: false,
+        };
+    }
+    async fetchIcon() {
+        if (!this.props.device.icon) {
+            // try to load the icon from file storage
+            const fileName = `${this.props.device.manufacturer ? `${this.props.device.manufacturer}_` : ''}${this.props.device.model ? this.props.device.model : this.props.device.id}`;
+            try {
+                const file = await this.props.socket.readFile(this.props.instanceId.replace('system.adapter.', ''), `${fileName}.webp`, true);
+                this.setState({ icon: `data:image/${file.mimeType},${file}` });
+                // const response = await fetch(url);
+                // if (response.ok) {
+                //     const blob = await response.blob();
+                //     const reader = new FileReader();
+                //     reader.onloadend = () => {
+                //         setIcon(reader.result);
+                //     };
+                //     reader.readAsDataURL(blob);
+                // } else {
+                //     throw new Error('Response not ok');
+                // }
+            }
+            catch (error) {
+                this.state.icon && this.setState({ icon: '' });
+            }
+        }
+    }
+    componentDidMount() {
+        this.fetchIcon()
+            .catch(e => console.error(e));
+    }
+    /**
+     * Load the device details
+     */
+    async loadDetails() {
+        console.log(`Loading device details for ${this.props.device.id}... from ${this.props.instanceId}`);
+        const details = await this.props.socket.sendTo(this.props.instanceId, 'dm:deviceDetails', this.props.device.id);
+        console.log(`Got device details for ${this.props.device.id}:`, details);
+        this.setState({ details, data: (details === null || details === void 0 ? void 0 : details.data) || {} });
+    }
+    ;
+    renderDialog() {
+        if (!this.state.open || !this.state.details) {
+            return null;
+        }
+        return react_1.default.createElement(material_1.Dialog, { open: !0, maxWidth: "md", onClose: () => this.setState({ open: false }) },
+            react_1.default.createElement(material_1.DialogContent, null,
+                react_1.default.createElement(JsonConfig_1.default, { instanceId: this.props.instanceId, socket: this.props.socket, schema: this.state.details.schema, data: this.state.data, onChange: (data) => this.setState({ data }) })),
+            react_1.default.createElement(material_1.DialogActions, null,
+                react_1.default.createElement(material_1.Button, { disabled: !this.props.alive, variant: "contained", color: "primary", onClick: () => this.setState({ open: false }), autoFocus: true }, (0, Utils_2.getTranslation)('closeButtonText'))));
+    }
+    renderControlDialog() {
+        var _a;
+        if (!this.state.showControlDialog || !this.props.alive) {
+            return null;
+        }
+        const colors = { primary: '#111', secondary: '#888' };
+        return react_1.default.createElement(material_1.Dialog, { open: !0, onClose: () => this.setState({ showControlDialog: false }) },
+            react_1.default.createElement(material_1.DialogTitle, null,
+                this.props.title,
+                react_1.default.createElement(material_1.IconButton, { style: {
+                        position: 'absolute',
+                        top: 5,
+                        right: 5,
+                        zIndex: 10,
+                    }, onClick: () => this.setState({ showControlDialog: false }) },
+                    react_1.default.createElement(icons_material_1.Close, null))),
+            react_1.default.createElement(material_1.DialogContent, { style: { display: 'flex', flexDirection: 'column' } }, (_a = this.props.device.controls) === null || _a === void 0 ? void 0 : _a.map(control => react_1.default.createElement(DeviceControl_1.default, { disabled: false, key: control.id, control: control, socket: this.props.socket, colors: colors, deviceId: this.props.device.id, controlHandler: this.props.controlHandler, controlStateHandler: this.props.controlStateHandler }))));
+    }
+    renderControls() {
+        var _a, _b, _c;
+        const colors = { primary: '#111', secondary: '#888' };
+        const firstControl = (_a = this.props.device.controls) === null || _a === void 0 ? void 0 : _a[0];
+        if (((_b = this.props.device.controls) === null || _b === void 0 ? void 0 : _b.length) === 1 && firstControl && ((firstControl.type === 'icon' || firstControl.type === 'switch') && !firstControl.label)) {
+            // control can be placed in button icon
+            return react_1.default.createElement(DeviceControl_1.default, { disabled: !this.props.alive, control: firstControl, colors: colors, socket: this.props.socket, deviceId: this.props.device.id, controlHandler: this.props.controlHandler, controlStateHandler: this.props.controlStateHandler });
+        }
+        if ((_c = this.props.device.controls) === null || _c === void 0 ? void 0 : _c.length) {
+            // place button and show controls dialog
+            return react_1.default.createElement(material_1.Fab, { size: "small", disabled: !this.props.alive, onClick: () => this.setState({ showControlDialog: true }) },
+                react_1.default.createElement(icons_material_1.VideogameAsset, null));
+        }
+        return null;
+    }
+    renderActions() {
+        var _a;
+        return ((_a = this.props.device.actions) === null || _a === void 0 ? void 0 : _a.length) ? this.props.device.actions.map(a => react_1.default.createElement(DeviceActionButton_1.default, { disabled: !this.props.alive, key: a.id, deviceId: this.props.device.id, action: a, deviceHandler: this.props.deviceHandler, refresh: this.refresh })) : null;
+    }
+    renderSmall() {
+        const hasDetails = this.props.device.hasDetails;
+        const status = !this.props.device.status ? [] : Array.isArray(this.props.device.status) ? this.props.device.status : [this.props.device.status];
+        return react_1.default.createElement(material_1.Card, { sx: {
+                maxWidth: 345,
+                minWidth: 200,
+            } },
+            react_1.default.createElement(material_1.CardHeader, { sx: theme => ({
+                    backgroundColor: this.props.device.color || theme.palette.secondary.main,
+                    color: this.props.device.color ? Utils_1.default.invertColor(this.props.device.color, true) : theme.palette.secondary.contrastText,
+                    maxWidth: 345,
+                }), avatar: react_1.default.createElement("div", null,
+                    this.props.uploadImagesToInstance ? react_1.default.createElement(DeviceImageUpload_1.default, { uploadImagesToInstance: this.props.uploadImagesToInstance, deviceId: this.props.device.id, manufacturer: getText(this.props.device.manufacturer), model: getText(this.props.device.model), onImageSelect: async (imageData) => imageData && this.setState({ icon: imageData }), socket: this.props.socket }) : null,
+                    this.state.icon ? react_1.default.createElement(Icon_1.default, { src: this.state.icon }) : react_1.default.createElement(NoImageIcon, null)), action: hasDetails ? react_1.default.createElement(material_1.IconButton, { "aria-label": "settings", onClick: () => {
+                        if (!this.state.open) {
+                            this.loadDetails().catch(console.error);
+                            this.setState({ open: true });
+                        }
+                    } },
+                    react_1.default.createElement(icons_material_1.MoreVert, null)) : null, title: this.props.title, subheader: this.props.device.manufacturer ? react_1.default.createElement("span", null,
+                    react_1.default.createElement("b", { style: { marginRight: 4 } },
+                        (0, Utils_2.getTranslation)('manufacturer'),
+                        ":"),
+                    getText(this.props.device.manufacturer)) : null }),
+            react_1.default.createElement(material_1.CardContent, { style: { position: 'relative' } },
+                (status === null || status === void 0 ? void 0 : status.length) ? react_1.default.createElement("div", { style: {
+                        display: 'flex',
+                        position: 'absolute',
+                        top: -11,
+                        background: '#88888880',
+                        padding: '0 8px',
+                        borderRadius: 5,
+                        width: 'calc(100% - 46px)',
+                    } }, status.map((s, i) => react_1.default.createElement(DeviceStatus_1.default, { key: i, status: s }))) : null,
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(material_1.Typography, { variant: "body1" },
+                        react_1.default.createElement("div", { onClick: this.copyToClipboard },
+                            react_1.default.createElement("b", null, "ID:"),
+                            react_1.default.createElement("span", { style: { marginLeft: 4 } }, this.props.device.id.replace(/.*\.\d\./, ''))),
+                        this.props.device.manufacturer ? react_1.default.createElement("div", null,
+                            react_1.default.createElement("b", { style: { marginRight: 4 } },
+                                (0, Utils_2.getTranslation)('manufacturer'),
+                                ":"),
+                            getText(this.props.device.manufacturer)) : null,
+                        this.props.device.model ? react_1.default.createElement("div", null,
+                            react_1.default.createElement("b", { style: { marginRight: 4 } },
+                                (0, Utils_2.getTranslation)('model'),
+                                ":"),
+                            getText(this.props.device.model)) : null))),
+            react_1.default.createElement(material_1.CardActions, { disableSpacing: true },
+                this.renderActions(),
+                react_1.default.createElement("div", { style: { flexGrow: 1 } }),
+                this.renderControls()),
+            this.renderDialog(),
+            this.renderControlDialog());
+    }
+    renderBig() {
+        var _a;
+        const cardStyle = {
+            // backgroundColor: '#fafafa',
+            width: 300,
+            minHeight: 280,
+            margin: 10,
+            overflow: 'hidden',
+            display: 'inline-block',
+        };
+        /** @type {CSSProperties} */
+        const headerStyle = {
+            display: 'flex',
+            position: 'relative',
+            justifyContent: 'space-between',
+            minHeight: 60,
+            color: '#000',
+            padding: '0 10px 0 10px',
+            backgroundColor: '#77c7ff8c',
+            borderRadius: '4px 4px 0 0',
+        };
+        /** @type {CSSProperties} */
+        const imgAreaStyle = {
+            height: 45,
+            width: 45,
+            margin: 'auto',
+            justifyContent: 'center',
+            display: 'grid',
+        };
+        /** @type {CSSProperties} */
+        const imgStyle = {
+            zIndex: 2,
+            maxWidth: '100%',
+            maxHeight: '100%',
+        };
+        /** @type {CSSProperties} */
+        const titleStyle = {
+            color: '#333',
+            width: '100%',
+            fontSize: 16,
+            fontWeight: 'bold',
+            paddingTop: 16,
+            paddingLeft: 8,
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        };
+        /** @type {CSSProperties} */
+        const detailsButtonStyle = {
+            right: 20,
+            bottom: -20,
+            position: 'absolute',
+        };
+        /** @type {CSSProperties} */
+        const bodyStyle = {
+            height: 'calc(100% - 116px)',
+        };
+        /** @type {CSSProperties} */
+        const deviceInfoStyle = {
+            padding: '20px 16px 0 16px',
+            height: 133,
+        };
+        /** @type {CSSProperties} */
+        const statusStyle = {
+            padding: '15px 15px 0 15px',
+            height: 41,
+        };
+        const status = !this.props.device.status ? [] : Array.isArray(this.props.device.status) ? this.props.device.status : [this.props.device.status];
+        return react_1.default.createElement(material_1.Paper, { style: cardStyle, key: this.props.id },
+            react_1.default.createElement("div", { style: headerStyle },
+                react_1.default.createElement("div", { style: imgAreaStyle },
+                    this.props.uploadImagesToInstance ? react_1.default.createElement(DeviceImageUpload_1.default, { uploadImagesToInstance: this.props.uploadImagesToInstance, deviceId: this.props.device.id, manufacturer: getText(this.props.device.manufacturer), model: getText(this.props.device.model), onImageSelect: async (imageData) => imageData && this.setState({ icon: imageData }), socket: this.props.socket }) : null,
+                    react_1.default.createElement(Icon_1.default, { src: this.state.icon, style: imgStyle })),
+                react_1.default.createElement("div", { style: titleStyle }, this.props.title),
+                this.props.device.hasDetails ? react_1.default.createElement(material_1.Fab, { disabled: !this.props.alive, size: "small", style: detailsButtonStyle, onClick: () => {
+                        if (!this.state.open) {
+                            this.loadDetails().catch(console.error);
+                            this.setState({ open: true });
+                        }
+                    }, color: "primary" },
+                    react_1.default.createElement(icons_material_1.MoreVert, null)) : null),
+            react_1.default.createElement("div", { style: statusStyle }, status.map((s, i) => react_1.default.createElement(DeviceStatus_1.default, { key: i, status: s }))),
+            react_1.default.createElement("div", { style: bodyStyle },
+                react_1.default.createElement(material_1.Typography, { variant: "body1", style: deviceInfoStyle },
+                    react_1.default.createElement("div", { onClick: this.copyToClipboard },
+                        react_1.default.createElement("b", { style: { marginRight: 4 } }, "ID:"),
+                        this.props.device.id.replace(/.*\.\d\./, '')),
+                    this.props.device.manufacturer ? react_1.default.createElement("div", null,
+                        react_1.default.createElement("b", { style: { marginRight: 4 } },
+                            (0, Utils_2.getTranslation)('manufacturer'),
+                            ":"),
+                        getText(this.props.device.manufacturer)) : null,
+                    this.props.device.model ? react_1.default.createElement("div", null,
+                        react_1.default.createElement("b", { style: { marginRight: 4 } },
+                            (0, Utils_2.getTranslation)('model'),
+                            ":"),
+                        getText(this.props.device.model)) : null),
+                !!((_a = this.props.device.actions) === null || _a === void 0 ? void 0 : _a.length) && react_1.default.createElement("div", { style: {
+                        flex: 1,
+                        position: 'relative',
+                        display: 'flex',
+                        gap: 8,
+                        paddingBottom: 5,
+                        height: 34,
+                        paddingLeft: 10,
+                        paddingRight: 10,
+                    } },
+                    this.renderActions(),
+                    react_1.default.createElement("div", { style: { flexGrow: 1 } }),
+                    this.renderControls())),
+            this.renderDialog(),
+            this.renderControlDialog());
+    }
+    render() {
+        if (this.props.smallCards) {
+            return this.renderSmall();
+        }
+        return this.renderBig();
+    }
+}
+exports.default = DeviceCard;

package/Components/JsonConfigComponent/DeviceManager/DeviceControl.d.ts

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import { ControlBase, ControlState } from '@iobroker/dm-utils/build/types/base';
+interface DeviceControlProps {
+    deviceId: string;
+    control: any;
+    socket: any;
+    controlHandler: (deviceId: string, control: ControlBase, state: ControlState) => () => Promise<ioBroker.State | null>;
+    controlStateHandler: (deviceId: string, control: ControlBase) => () => Promise<ioBroker.State | null>;
+    colors: any;
+    disabled?: boolean;
+}
+interface DeviceControlState {
+    value: any;
+    ts: number;
+}
+/**
+ * Device Control component
+ * @param {object} props - Parameters
+ * @param {object} props.control - Control object
+ * @param {object} props.socket - Socket object
+ * @param {object} props.controlHandler - Control handler to set the state
+ * @param {object} props.controlStateHandler - Control handler to read the state
+ * @returns {React.JSX.Element|null}
+ * @constructor
+ */
+export default class DeviceControl extends Component<DeviceControlProps, DeviceControlState> {
+    constructor(props: DeviceControlProps);
+    componentDidMount(): void;
+    stateHandler: (id: string, state: ioBroker.State) => Promise<void>;
+    componentWillUnmount(): void;
+    static getDerivedStateFromProps(props: DeviceControlProps, state: DeviceControlState): {
+        value: any;
+        ts: any;
+    };
+    sendControl(deviceId: string, control: ControlBase, value: ControlState): Promise<void>;
+    renderButton(): React.JSX.Element;
+    renderSwitch(): React.JSX.Element;
+    getColor(): any;
+    renderSelect(): void;
+    renderSlider(): void;
+    renderColor(): void;
+    renderIcon(): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export {};

package/Components/JsonConfigComponent/DeviceManager/DeviceControl.js

@@ -0,0 +1,146 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const Utils_1 = require("./Utils");
+/**
+ * Device Control component
+ * @param {object} props - Parameters
+ * @param {object} props.control - Control object
+ * @param {object} props.socket - Socket object
+ * @param {object} props.controlHandler - Control handler to set the state
+ * @param {object} props.controlStateHandler - Control handler to read the state
+ * @returns {React.JSX.Element|null}
+ * @constructor
+ */
+class DeviceControl extends react_1.Component {
+    constructor(props) {
+        var _a, _b;
+        super(props);
+        this.stateHandler = async (id, state) => {
+            if (id === this.props.control.stateId && state) {
+                // request new state
+                const newState = await (this.props.controlStateHandler(this.props.deviceId, this.props.control)());
+                if ((newState === null || newState === void 0 ? void 0 : newState.ts) && (!this.state.ts || newState.ts > this.state.ts)) {
+                    this.setState({
+                        value: newState.val,
+                        ts: newState.ts,
+                    });
+                }
+            }
+        };
+        this.state = {
+            value: (_a = props.control.state) === null || _a === void 0 ? void 0 : _a.val,
+            ts: (_b = props.control.state) === null || _b === void 0 ? void 0 : _b.ts,
+        };
+    }
+    componentDidMount() {
+        if (this.props.control.stateId) {
+            this.props.socket.subscribeState(this.props.control.stateId, this.stateHandler);
+        }
+    }
+    componentWillUnmount() {
+        if (this.props.control.stateId) {
+            this.props.socket.unsubscribeState(this.props.control.stateId, this.stateHandler);
+        }
+    }
+    static getDerivedStateFromProps(props, state) {
+        var _a, _b;
+        if (((_a = props.control.state) === null || _a === void 0 ? void 0 : _a.ts) && (!state.ts || ((_b = props.control.state) === null || _b === void 0 ? void 0 : _b.ts) > state.ts)) {
+            return {
+                value: props.control.state.val,
+                ts: props.control.state.ts,
+            };
+        }
+        return null;
+    }
+    async sendControl(deviceId, control, value) {
+        const result = await (this.props.controlHandler(deviceId, control, value)());
+        if ((result === null || result === void 0 ? void 0 : result.ts) && (!this.state.ts || (result === null || result === void 0 ? void 0 : result.ts) > this.state.ts)) {
+            this.setState({
+                value: result.val,
+                ts: result.ts,
+            });
+        }
+    }
+    renderButton() {
+        const tooltip = (0, Utils_1.getTranslation)(this.props.control.description);
+        const icon = (0, Utils_1.renderIcon)(this.props.control, this.props.colors, this.state.value);
+        if (!this.props.control.label) {
+            return react_1.default.createElement(material_1.Fab, { disabled: this.props.disabled, title: tooltip, onClick: () => this.sendControl(this.props.deviceId, this.props.control, true) }, icon);
+        }
+        return react_1.default.createElement(material_1.Button, { disabled: this.props.disabled, title: tooltip, onClick: () => this.sendControl(this.props.deviceId, this.props.control, true), startIcon: icon }, this.props.control.label);
+    }
+    renderSwitch() {
+        const tooltip = (0, Utils_1.getTranslation)(this.props.control.description);
+        // const icon = renderIcon(this.props.control, this.props.colors, this.state.value);
+        return react_1.default.createElement(material_1.Switch, { disabled: this.props.disabled, title: tooltip, checked: this.state.value, onChange: e => this.sendControl(this.props.deviceId, this.props.control, e.target.checked) });
+    }
+    getColor() {
+        let color;
+        if (this.state.value) {
+            color = this.props.control.colorOn || 'primary';
+        }
+        else if (this.props.control.type === 'switch') {
+            color = this.props.control.color;
+        }
+        if (color === 'primary') {
+            return this.props.colors.primary;
+        }
+        if (color === 'secondary') {
+            return this.props.colors.secondary;
+        }
+        return color;
+    }
+    renderSelect() {
+    }
+    renderSlider() {
+    }
+    renderColor() {
+    }
+    renderIcon() {
+        const tooltip = (0, Utils_1.getTranslation)(this.props.control.description);
+        const icon = (0, Utils_1.renderIcon)(this.props.control, this.props.colors, this.state.value);
+        const color = this.getColor();
+        if (!this.props.control.label) {
+            return react_1.default.createElement(material_1.Fab, { disabled: this.props.disabled, size: "small", title: tooltip, color: color === this.props.colors.primary ? 'primary' : (color === this.props.colors.secondary ? 'secondary' : undefined), style: color === this.props.colors.primary || color === this.props.colors.secondary ? undefined : { color }, onClick: () => this.sendControl(this.props.deviceId, this.props.control, !this.state.value) }, icon);
+        }
+        return react_1.default.createElement(material_1.Button, { disabled: this.props.disabled, title: tooltip, color: color === this.props.colors.primary ? 'primary' : (color === this.props.colors.secondary ? 'secondary' : undefined), style: color === this.props.colors.primary || color === this.props.colors.secondary ? undefined : { color }, onClick: () => this.sendControl(this.props.deviceId, this.props.control, !this.state.value), startIcon: icon }, this.props.control.label);
+    }
+    render() {
+        if (this.props.control.type === 'button') {
+            return this.renderButton();
+        }
+        if (this.props.control.type === 'icon') {
+            return this.renderIcon();
+        }
+        if (this.props.control.type === 'switch') {
+            return this.renderSwitch();
+        }
+        return react_1.default.createElement("div", { style: { color: 'red' } }, this.props.control.type);
+    }
+}
+exports.default = DeviceControl;

package/Components/JsonConfigComponent/DeviceManager/DeviceImageUpload.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Connection } from '@iobroker/socket-client';
+interface DeviceImageUploadProps {
+    socket: Connection;
+    manufacturer?: string;
+    model?: string;
+    deviceId: string;
+    onImageSelect: (image: string) => void;
+    uploadImagesToInstance: string;
+}
+declare function DeviceImageUpload(params: DeviceImageUploadProps): React.JSX.Element | null;
+export default DeviceImageUpload;

package/Components/JsonConfigComponent/DeviceManager/DeviceImageUpload.js

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+function DeviceImageUpload(params) {
+    const { socket, manufacturer, model, deviceId, onImageSelect, uploadImagesToInstance, } = params;
+    const handleImageUpload = async (event) => {
+        const target = event.target;
+        const files = target.files;
+        if (!files || files.length === 0) {
+            return;
+        }
+        const file = files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = async (e) => {
+                if (!e.target || !e.target.result) {
+                    return;
+                }
+                const img = new Image();
+                img.src = e.target.result;
+                img.onload = async () => {
+                    const maxWidth = 50;
+                    const maxHeight = 50;
+                    let width = img.width;
+                    let height = img.height;
+                    if (width > height) {
+                        if (width > maxWidth) {
+                            height *= maxWidth / width;
+                            width = maxWidth;
+                        }
+                    }
+                    else if (height > maxHeight) {
+                        width *= maxHeight / height;
+                        height = maxHeight;
+                    }
+                    const canvas = document.createElement('canvas');
+                    const ctx = canvas.getContext('2d');
+                    if (ctx) {
+                        canvas.width = width;
+                        canvas.height = height;
+                        ctx.drawImage(img, 0, 0, width, height);
+                        const resizedImage = canvas.toDataURL('image/webp');
+                        // Build the file name from a manufacturer and model, if not available, use device id
+                        const fileName = `${manufacturer ? `${manufacturer}_` : ''}${model || deviceId}`;
+                        const base64Data = resizedImage.replace(/^data:image\/webp;base64,/, '');
+                        const response = await socket.writeFile64(uploadImagesToInstance, fileName, base64Data);
+                        console.log(`saveImage response: ${JSON.stringify(response)}`);
+                        onImageSelect && onImageSelect(resizedImage);
+                    }
+                };
+            };
+            reader.readAsDataURL(file);
+        }
+    };
+    const imageUploadButtonStyle = {
+        // make the button invisible but still clickable
+        opacity: 0,
+        position: 'absolute',
+        width: '45px',
+        height: '45px',
+        zIndex: 3,
+    };
+    return react_1.default.createElement("div", null,
+        react_1.default.createElement("input", { style: imageUploadButtonStyle, type: "file", accept: "image/*", onChange: handleImageUpload }));
+}
+exports.default = DeviceImageUpload;

package/Components/JsonConfigComponent/DeviceManager/DeviceList.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { DeviceInfo, InstanceDetails } from '@iobroker/dm-utils';
+import Communication, { CommunicationProps, CommunicationState } from './Communication';
+interface DeviceListProps extends CommunicationProps {
+    uploadImagesToInstance?: string;
+    filter?: string;
+    embedded?: boolean;
+    title?: string;
+    style?: React.CSSProperties;
+    smallCards?: boolean;
+}
+interface DeviceListState extends CommunicationState {
+    devices: DeviceInfo[];
+    filteredDevices: DeviceInfo[];
+    filter: string;
+    instanceInfo: InstanceDetails;
+    loading: boolean;
+    alive: boolean | null;
+}
+/**
+ * Device List Component
+ * @param {object} params - Component parameters
+ * @param {object} params.socket - socket object
+ * @param {string} params.selectedInstance - Selected instance
+ * @param {string} params.uploadImagesToInstance - Instance to upload images to
+ * @param {string} params.filter - Filter
+ * @param {string} params.empbedded - true if this list used with multiple instances and false if only with one
+ * @param {string} params.title - Title in appbar (only in non-embedded mode)
+ * @param {string} params.style - Style of devices list
+ * @returns {*[]} - Array of device cards
+ */
+export default class DeviceList extends Communication<DeviceListProps, DeviceListState> {
+    static i18nInitialized: boolean;
+    private lastPropsFilter;
+    private lastInstance;
+    private filterTimeout;
+    private readonly language;
+    constructor(props: DeviceListProps);
+    componentDidMount(): Promise<void>;
+    componentWillUnmount(): void;
+    aliveHandler: ioBroker.StateChangeHandler;
+    /**
+    * Load devices
+    */
+    loadData(): void;
+    getText(text: ioBroker.StringOrTranslated): string;
+    applyFilter(): void;
+    handleFilterChange(filter: string): void;
+    renderContent(): React.JSX.Element | React.JSX.Element[] | null;
+}
+export {};