@iobroker/adapter-react-v5 4.8.1 → 4.9.1

package/Components/JsonConfigComponent/DeviceManager/DeviceCard.js

@@ -1,340 +0,0 @@
-"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

@@ -1,45 +0,0 @@
-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

@@ -1,146 +0,0 @@
-"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

@@ -1,12 +0,0 @@
-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

@@ -1,69 +0,0 @@
-"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

@@ -1,51 +0,0 @@
-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 {};