@iobroker/dm-gui-components 0.0.2

package/Communication.d.ts

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import { Connection } from '@iobroker/adapter-react-v5';
+import { ActionBase, ControlBase, ControlState } from '@iobroker/dm-utils/build/types/base';
+export type CommunicationProps = {
+    socket: Connection;
+    selectedInstance: string;
+};
+interface CommunicationForm {
+    title?: string | null | undefined;
+    schema?: Record<string, any>;
+    data?: Record<string, any>;
+    handleClose?: (data?: Record<string, any>) => void;
+}
+export type CommunicationState = {
+    showSpinner: boolean;
+    showToast: string | null;
+    message: {
+        message: string;
+        handleClose: () => void;
+    } | null;
+    confirm: {
+        message: string;
+        handleClose: (confirmation?: boolean) => void;
+    } | null;
+    form: CommunicationForm | null;
+    progress: {
+        open: boolean;
+        progress: number;
+    } | null;
+};
+/**
+ * Device List Component
+ * @param {object} params - Component parameters
+ * @param {object} params.socket - socket object
+ * @param {string} params.selectedInstance - Selected instance
+ * @returns {*[]} - Array of device cards
+ */
+declare abstract class Communication<P extends CommunicationProps, S extends CommunicationState> extends Component<P, S> {
+    instanceHandler: (action: ActionBase<'api'>) => () => void;
+    deviceHandler: (deviceId: string, action: ActionBase<'api'>, refresh: () => void) => () => void;
+    controlHandler: (deviceId: string, control: ControlBase, state: ControlState) => () => Promise<ioBroker.State | null>;
+    controlStateHandler: (deviceId: string, control: ControlBase) => () => Promise<ioBroker.State | null>;
+    constructor(props: P);
+    abstract loadData(): Promise<void>;
+    sendActionToInstance: (command: string, messageToSend: any, refresh?: () => void) => void;
+    sendControlToInstance: (command: string, messageToSend: {
+        deviceId: string;
+        controlId: string;
+        state?: ControlState;
+    }) => Promise<ioBroker.State>;
+    loadDevices(): Promise<any>;
+    loadInstanceInfos(): Promise<any>;
+    renderMessageDialog(): React.JSX.Element | null;
+    renderConfirmDialog(): React.JSX.Element;
+    renderSnackbar(): React.JSX.Element;
+    renderFormDialog(): React.JSX.Element;
+    renderProgressDialog(): React.JSX.Element;
+    renderContent(): React.JSX.Element | React.JSX.Element[] | null;
+    renderSpinner(): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export default Communication;

package/Communication.js

@@ -0,0 +1,257 @@
+"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 Utils_1 = require("./Utils");
+const JsonConfig_1 = __importDefault(require("./JsonConfig"));
+/**
+ * Device List Component
+ * @param {object} params - Component parameters
+ * @param {object} params.socket - socket object
+ * @param {string} params.selectedInstance - Selected instance
+ * @returns {*[]} - Array of device cards
+ */
+class Communication extends react_1.Component {
+    constructor(props) {
+        super(props);
+        this.sendActionToInstance = (command, messageToSend, refresh) => {
+            const send = async () => {
+                this.setState({ showSpinner: true });
+                /** @type {object} */
+                const response = await this.props.socket.sendTo(this.props.selectedInstance, command, messageToSend);
+                /** @type {string} */
+                const type = response.type;
+                console.log(`Response: ${response.type}`);
+                switch (type) {
+                    case 'message':
+                        console.log(`Message received: ${response.message}`);
+                        if (response.message) {
+                            this.setState({
+                                message: {
+                                    message: response.message,
+                                    handleClose: () => this.setState({ message: null }, () => this.sendActionToInstance('dm:actionProgress', { origin: response.origin })),
+                                },
+                            });
+                        }
+                        break;
+                    case 'confirm':
+                        console.log(`Confirm received: ${response.confirm}`);
+                        if (response.confirm) {
+                            this.setState({
+                                confirm: {
+                                    message: response.confirm,
+                                    handleClose: (confirm) => this.setState({ confirm: null }, () => this.sendActionToInstance('dm:actionProgress', {
+                                        origin: response.origin,
+                                        confirm,
+                                    })),
+                                },
+                            });
+                        }
+                        break;
+                    case 'form':
+                        console.log('Form received');
+                        if (response.form) {
+                            this.setState({
+                                form: Object.assign(Object.assign({}, response.form), { handleClose: (data) => this.setState({ form: null }, () => {
+                                        console.log(`Form ${JSON.stringify(data)}`);
+                                        this.sendActionToInstance('dm:actionProgress', {
+                                            origin: response.origin,
+                                            data,
+                                        });
+                                    }) }),
+                            });
+                        }
+                        break;
+                    case 'progress':
+                        if (response.progress) {
+                            if (this.state.progress) {
+                                const progress = Object.assign(Object.assign({}, this.state.progress), response.progress);
+                                this.setState({ progress });
+                            }
+                            else {
+                                this.setState({ progress: response.progress });
+                            }
+                        }
+                        this.sendActionToInstance('dm:actionProgress', { origin: response.origin });
+                        break;
+                    case 'result':
+                        console.log('Response content', response.result);
+                        if (response.result.refresh) {
+                            if (response.result.refresh === true) {
+                                this.loadData().catch(console.error);
+                                console.log('Refreshing all');
+                            }
+                            else if (response.result.refresh === 'instance') {
+                                console.log(`Refreshing instance infos: ${this.props.selectedInstance}`);
+                            }
+                            else if (response.result.refresh === 'device') {
+                                if (refresh) {
+                                    console.log(`Refreshing device infos: ${this.props.selectedInstance}`);
+                                    refresh();
+                                }
+                            }
+                            else {
+                                console.log('Not refreshing anything');
+                            }
+                        }
+                        if (response.result.error) {
+                            console.error(`Error: ${response.result.error}`);
+                            this.setState({ showToast: response.result.error.message });
+                        }
+                        this.setState({ showSpinner: false });
+                        break;
+                    default:
+                        console.log(`Unknown response type: ${type}`);
+                        this.setState({ showSpinner: false });
+                        break;
+                }
+            };
+            send().catch(console.error);
+        };
+        this.sendControlToInstance = async (command, messageToSend) => {
+            const response = await this.props.socket.sendTo(this.props.selectedInstance, command, messageToSend);
+            const type = response.type;
+            console.log(`Response: ${response.type}`);
+            if (response.type === 'result') {
+                console.log('Response content', response.result);
+                if (response.result.error) {
+                    console.error(`Error: ${response.result.error}`);
+                    this.setState({ showToast: response.result.error.message });
+                }
+                else if (response.result.state !== undefined) {
+                    return response.result.state;
+                }
+            }
+            else {
+                console.warn('Unexpected response type', type);
+            }
+            return null;
+        };
+        // @ts-expect-error
+        this.state = {
+            showSpinner: false,
+            showToast: null,
+            message: null,
+            confirm: null,
+            form: null,
+            progress: null,
+        };
+        this.instanceHandler = action => () => this.sendActionToInstance('dm:instanceAction', { actionId: action.id });
+        this.deviceHandler = (deviceId, action, refresh) => () => this.sendActionToInstance('dm:deviceAction', { deviceId, actionId: action.id }, refresh);
+        this.controlHandler = (deviceId, control, state) => () => this.sendControlToInstance('dm:deviceControl', { deviceId, controlId: control.id, state });
+        this.controlStateHandler = (deviceId, control) => () => this.sendControlToInstance('dm:deviceControlState', { deviceId, controlId: control.id });
+    }
+    loadDevices() {
+        return this.props.socket.sendTo(this.props.selectedInstance, 'dm:listDevices');
+    }
+    loadInstanceInfos() {
+        return this.props.socket.sendTo(this.props.selectedInstance, 'dm:instanceInfo');
+    }
+    renderMessageDialog() {
+        var _a;
+        if (!this.state.message) {
+            return null;
+        }
+        return react_1.default.createElement(material_1.Dialog, { open: !0, onClose: () => { var _a; return (_a = this.state.message) === null || _a === void 0 ? void 0 : _a.handleClose(); }, hideBackdrop: true, "aria-describedby": "message-dialog-description" },
+            react_1.default.createElement(material_1.DialogContent, null,
+                react_1.default.createElement(material_1.DialogContentText, { id: "message-dialog-description" }, (_a = this.state.message) === null || _a === void 0 ? void 0 : _a.message)),
+            react_1.default.createElement(material_1.DialogActions, null,
+                react_1.default.createElement(material_1.Button, { onClick: () => { var _a; return (_a = this.state.message) === null || _a === void 0 ? void 0 : _a.handleClose(); }, autoFocus: true }, (0, Utils_1.getTranslation)('okButtonText'))));
+    }
+    renderConfirmDialog() {
+        var _a;
+        if (!this.state.confirm) {
+            return null;
+        }
+        // @ts-ignore
+        return react_1.default.createElement(material_1.Dialog, { open: !0, onClose: () => { var _a; return (_a = this.state.confirm) === null || _a === void 0 ? void 0 : _a.handleClose(); }, hideBackdrop: true, "aria-describedby": "confirm-dialog-description" },
+            react_1.default.createElement(material_1.DialogContent, null,
+                react_1.default.createElement(material_1.DialogContentText, { id: "confirm-dialog-description" }, (0, Utils_1.getTranslation)((_a = this.state.confirm) === null || _a === void 0 ? void 0 : _a.message))),
+            react_1.default.createElement(material_1.DialogActions, null,
+                react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", onClick: () => { var _a; return (_a = this.state.confirm) === null || _a === void 0 ? void 0 : _a.handleClose(true); }, autoFocus: true }, (0, Utils_1.getTranslation)('yesButtonText')),
+                react_1.default.createElement(material_1.Button, { variant: "contained", 
+                    // @ts-expect-error
+                    color: "grey", onClick: () => { var _a; return (_a = this.state.confirm) === null || _a === void 0 ? void 0 : _a.handleClose(false); }, autoFocus: true, hideBackdrop: true }, (0, Utils_1.getTranslation)('noButtonText'))));
+    }
+    renderSnackbar() {
+        return react_1.default.createElement(material_1.Snackbar, { open: !!this.state.showToast, autoHideDuration: 6000, onClose: () => this.setState({ showToast: null }), message: this.state.showToast });
+    }
+    renderFormDialog() {
+        var _a, _b;
+        if (!this.state.form || !this.state.form.schema || !this.state.form.data) {
+            return null;
+        }
+        return react_1.default.createElement(material_1.Dialog, { open: !0, onClose: () => { var _a; return ((_a = this.state.form) === null || _a === void 0 ? void 0 : _a.handleClose) && this.state.form.handleClose(); }, hideBackdrop: true },
+            ((_a = this.state.form) === null || _a === void 0 ? void 0 : _a.title) ? react_1.default.createElement(material_1.DialogTitle, null, (0, Utils_1.getTranslation)((_b = this.state.form) === null || _b === void 0 ? void 0 : _b.title)) : null,
+            react_1.default.createElement(material_1.DialogContent, null,
+                react_1.default.createElement(JsonConfig_1.default, { instanceId: this.props.selectedInstance, schema: this.state.form.schema, data: this.state.form.data, socket: this.props.socket, onChange: (data) => {
+                        console.log('handleFormChange', { data });
+                        const form = Object.assign({}, this.state.form);
+                        if (form) {
+                            form.data = data;
+                            this.setState({ form });
+                        }
+                    } })),
+            react_1.default.createElement(material_1.DialogActions, null,
+                react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", onClick: () => { var _a, _b; return ((_a = this.state.form) === null || _a === void 0 ? void 0 : _a.handleClose) && this.state.form.handleClose((_b = this.state.form) === null || _b === void 0 ? void 0 : _b.data); }, autoFocus: true }, (0, Utils_1.getTranslation)('okButtonText')),
+                react_1.default.createElement(material_1.Button, { variant: "contained", 
+                    // @ts-expect-error
+                    color: "grey", onClick: () => { var _a; return ((_a = this.state.form) === null || _a === void 0 ? void 0 : _a.handleClose) && this.state.form.handleClose(); }, hideBackdrop: true }, (0, Utils_1.getTranslation)('cancelButtonText'))));
+    }
+    renderProgressDialog() {
+        var _a, _b;
+        if (!((_a = this.state.progress) === null || _a === void 0 ? void 0 : _a.open)) {
+            return null;
+        }
+        return react_1.default.createElement(material_1.Dialog, { open: !0, onClose: () => { }, hideBackdrop: true },
+            react_1.default.createElement(material_1.LinearProgress, { variant: "determinate", value: ((_b = this.state.progress) === null || _b === void 0 ? void 0 : _b.progress) || 0 }));
+    }
+    renderContent() {
+        return null;
+    }
+    renderSpinner() {
+        var _a;
+        if (!this.state.showSpinner && !((_a = this.state.progress) === null || _a === void 0 ? void 0 : _a.open) && !this.state.message && !this.state.confirm && !this.state.form) {
+            return null;
+        }
+        return react_1.default.createElement(material_1.Backdrop, { style: { zIndex: 1000 }, open: !0 },
+            react_1.default.createElement(material_1.CircularProgress, null));
+    }
+    render() {
+        return react_1.default.createElement(react_1.default.Fragment, null,
+            this.renderSnackbar(),
+            this.renderContent(),
+            this.renderSpinner(),
+            this.renderConfirmDialog(),
+            this.renderMessageDialog(),
+            this.renderFormDialog(),
+            this.renderProgressDialog());
+    }
+}
+exports.default = Communication;

package/DeviceActionButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ActionBase } from "@iobroker/dm-utils/build/types/base";
+interface DeviceActionButtonProps {
+    deviceId: string;
+    action: any;
+    refresh: () => void;
+    deviceHandler: (deviceId: string, action: ActionBase<'api'>, refresh: () => void) => () => void;
+}
+export default function DeviceActionButton(props: DeviceActionButtonProps): React.JSX.Element;
+export {};

package/DeviceActionButton.js

@@ -0,0 +1,15 @@
+"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"));
+const TooltipButton_js_1 = __importDefault(require("./TooltipButton.js"));
+const Utils_js_1 = require("./Utils.js");
+function DeviceActionButton(props) {
+    const { deviceId, action, refresh, deviceHandler, } = props;
+    const tooltip = (0, Utils_js_1.getTranslation)(action.description);
+    const icon = (0, Utils_js_1.renderIcon)(action);
+    return react_1.default.createElement(TooltipButton_js_1.default, { label: action.label || (icon ? null : action.id), tooltip: tooltip, disabled: action.disabled, Icon: icon, onClick: deviceHandler(deviceId, action, refresh) });
+}
+exports.default = DeviceActionButton;

package/DeviceCard.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Connection } from '@iobroker/adapter-react-v5';
+import { DeviceInfo } from '@iobroker/dm-utils';
+import { ActionBase, ControlBase, ControlState } from '@iobroker/dm-utils/build/types/base';
+interface DeviceCardProps {
+    title?: string;
+    id: string;
+    device: DeviceInfo;
+    instanceId: string;
+    socket: Connection;
+    uploadImagesToInstance?: string;
+    deviceHandler: (deviceId: string, action: ActionBase<'api'>, refresh: () => void) => () => void;
+    controlHandler: (deviceId: string, control: ControlBase, state: ControlState) => () => Promise<ioBroker.State | null>;
+    controlStateHandler: (deviceId: string, control: ControlBase) => () => Promise<ioBroker.State | null>;
+}
+/**
+ * Device Card Component
+ */
+export default function DeviceCard(params: DeviceCardProps): React.JSX.Element;
+export {};

package/DeviceCard.js

@@ -0,0 +1,208 @@
+"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 adapter_react_v5_1 = require("@iobroker/adapter-react-v5");
+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_1 = 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[adapter_react_v5_1.I18n.getLanguage()] || text.en;
+    }
+    return text;
+}
+/**
+ * Device Card Component
+ */
+function DeviceCard(params) {
+    var _a, _b, _c, _d;
+    const { title, device, instanceId, socket, deviceHandler, uploadImagesToInstance, controlHandler, controlStateHandler, } = params;
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [details, setDetails] = (0, react_1.useState)(null);
+    const [data, setData] = (0, react_1.useState)({});
+    const [icon, setIcon] = (0, react_1.useState)(device.icon);
+    const [showControlDialog, setShowControlDialog] = (0, react_1.useState)(false);
+    // const [uploadedImage, setUploadedImage] = useState(null);
+    const hasDetails = device.hasDetails;
+    const status = !device.status ? [] : Array.isArray(device.status) ? device.status : [device.status];
+    const colors = { primary: '#111', secondary: '#888' };
+    (0, react_1.useEffect)(() => {
+        async function fetchIcon() {
+            if (!device.icon) {
+                // try to load the icon from file storage
+                const fileName = `${device.manufacturer ? `${device.manufacturer}_` : ''}${device.model ? device.model : device.id}`;
+                try {
+                    const file = await socket.readFile(instanceId.replace('system.adapter.', ''), `${fileName}.webp`, true);
+                    setIcon(`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) {
+                    setIcon('');
+                }
+            }
+        }
+        fetchIcon()
+            .catch(e => console.error(e));
+    }, [device, instanceId]);
+    /**
+     * Load the device details
+     */
+    const loadDetails = async () => {
+        console.log(`Loading device details for ${device.id}... from ${instanceId}`);
+        const result = await socket.sendTo(instanceId, 'dm:deviceDetails', device.id);
+        console.log(`Got device details for ${device.id}:`, result);
+        setDetails(result);
+    };
+    /**
+     * Refresh the device details
+     */
+    const refresh = () => {
+        setDetails(null);
+        loadDetails().catch(console.error);
+    };
+    /**
+     * Open the modal
+     */
+    const openModal = () => {
+        if (!open) {
+            loadDetails().catch(console.error);
+            setOpen(true);
+        }
+    };
+    /**
+     * Close the modal
+     */
+    const handleClose = () => setOpen(false);
+    const handleImageClick = async (imageData) => imageData && setIcon(imageData);
+    /**
+     * Copy the device ID to the clipboard
+     * @returns {void}
+     */
+    const copyToClipboard = async () => {
+        const textToCopy = device.id;
+        adapter_react_v5_1.Utils.copyToClipboard(textToCopy);
+        alert(`${(0, Utils_1.getTranslation)('copied')} ${textToCopy} ${(0, Utils_1.getTranslation)('toClipboard')}!`);
+    };
+    react_1.default.useEffect(() => setData((details === null || details === void 0 ? void 0 : details.data) || {}), [details]);
+    const renderedDialog = open && details ? react_1.default.createElement(material_1.Dialog, { open: !0, maxWidth: "md", onClose: handleClose },
+        react_1.default.createElement(material_1.DialogContent, null,
+            react_1.default.createElement(JsonConfig_1.default, { instanceId: instanceId, socket: socket, schema: details.schema, data: data, onChange: setData })),
+        react_1.default.createElement(material_1.DialogActions, null,
+            react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", onClick: handleClose, autoFocus: true }, (0, Utils_1.getTranslation)('closeButtonText')))) : null;
+    let renderedControls;
+    let controlDialog;
+    const firstControl = (_a = device.controls) === null || _a === void 0 ? void 0 : _a[0];
+    if (((_b = 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
+        renderedControls = react_1.default.createElement(DeviceControl_1.default, { control: firstControl, colors: colors, socket: socket, deviceId: device.id, controlHandler: controlHandler, controlStateHandler: controlStateHandler });
+    }
+    else if ((_c = device.controls) === null || _c === void 0 ? void 0 : _c.length) {
+        // place button and show controls dialog
+        renderedControls = react_1.default.createElement(material_1.Fab, { size: "small", onClick: () => setShowControlDialog(true) },
+            react_1.default.createElement(icons_material_1.VideogameAsset, null));
+        if (showControlDialog) {
+            controlDialog = react_1.default.createElement(material_1.Dialog, { open: !0, onClose: () => setShowControlDialog(false) },
+                react_1.default.createElement(material_1.DialogTitle, null,
+                    title,
+                    react_1.default.createElement(material_1.IconButton, { style: {
+                            position: 'absolute',
+                            top: 5,
+                            right: 5,
+                            zIndex: 10,
+                        }, onClick: () => setShowControlDialog(false) },
+                        react_1.default.createElement(icons_material_1.Close, null))),
+                react_1.default.createElement(material_1.DialogContent, null, device.controls.map(control => react_1.default.createElement(DeviceControl_1.default, { key: control.id, control: control, socket: socket, colors: colors, deviceId: device.id, controlHandler: controlHandler, controlStateHandler: controlStateHandler }))));
+        }
+    }
+    const renderedActions = ((_d = device.actions) === null || _d === void 0 ? void 0 : _d.length) ? device.actions.map(a => react_1.default.createElement(DeviceActionButton_1.default, { key: a.id, deviceId: device.id, action: a, deviceHandler: deviceHandler, refresh: refresh })) : null;
+    return react_1.default.createElement(material_1.Card, { sx: {
+            maxWidth: 345,
+            minWidth: 200,
+        } },
+        react_1.default.createElement(material_1.CardHeader, { sx: theme => ({
+                backgroundColor: device.color || theme.palette.secondary.main,
+                color: device.color ? adapter_react_v5_1.Utils.invertColor(device.color, true) : theme.palette.secondary.contrastText,
+            }), avatar: react_1.default.createElement("div", null,
+                uploadImagesToInstance ? react_1.default.createElement(DeviceImageUpload_1.default, { uploadImagesToInstance: uploadImagesToInstance, deviceId: device.id, manufacturer: getText(device.manufacturer), model: getText(device.model), onImageSelect: handleImageClick, socket: socket }) : null,
+                icon ? react_1.default.createElement(adapter_react_v5_1.Icon, { src: icon }) : react_1.default.createElement(NoImageIcon, null)), action: hasDetails ? react_1.default.createElement(material_1.IconButton, { "aria-label": "settings", onClick: openModal },
+                react_1.default.createElement(icons_material_1.MoreVert, null)) : null, title: title, subheader: device.manufacturer ? react_1.default.createElement("span", null,
+                react_1.default.createElement("b", { style: { marginRight: 4 } },
+                    (0, Utils_1.getTranslation)('manufacturer'),
+                    ":"),
+                getText(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: copyToClipboard },
+                        react_1.default.createElement("b", null, "ID:"),
+                        react_1.default.createElement("span", { style: { marginLeft: 4 } }, device.id.replace(/.*\.\d\./, ''))),
+                    device.manufacturer ? react_1.default.createElement("div", null,
+                        react_1.default.createElement("b", { style: { marginRight: 4 } },
+                            (0, Utils_1.getTranslation)('manufacturer'),
+                            ":"),
+                        getText(device.manufacturer)) : null,
+                    device.model ? react_1.default.createElement("div", null,
+                        react_1.default.createElement("b", { style: { marginRight: 4 } },
+                            (0, Utils_1.getTranslation)('model'),
+                            ":"),
+                        getText(device.model)) : null))),
+        react_1.default.createElement(material_1.CardActions, { disableSpacing: true },
+            renderedActions,
+            react_1.default.createElement("div", { style: { flexGrow: 1 } }),
+            renderedControls),
+        renderedDialog,
+        controlDialog);
+}
+exports.default = DeviceCard;

package/DeviceControl.d.ts

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