@iobroker/json-config 1.0.0 → 1.0.2

package/build/JsonConfigComponent/DeviceManager/DeviceCard.js

@@ -0,0 +1,308 @@
+import React, { Component } from 'react';
+import { Button, Typography, Dialog, DialogActions, DialogContent, IconButton, Fab, DialogTitle, Card, CardActions, CardHeader, CardContent, Paper, } from '@mui/material';
+import { MoreVert as MoreVertIcon, VideogameAsset as ControlIcon, Close as CloseIcon, } from '@mui/icons-material';
+import Utils from '@/Utils';
+import I18n from '@/JsonConfigComponent/wrapper/i18n';
+import { Icon } from '@iobroker/adapter-react-v5';
+import DeviceActionButton from './DeviceActionButton';
+import DeviceControlComponent from './DeviceControl';
+import DeviceStatus from './DeviceStatus';
+import JsonConfig from './JsonConfig';
+import DeviceImageUpload from './DeviceImageUpload';
+import { getTranslation } from './Utils';
+const NoImageIcon = (props) => React.createElement("svg", { viewBox: "0 0 24 24", width: "24", height: "24", style: props.style, className: props.className },
+    React.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.getLanguage()] || text.en;
+    }
+    return text;
+}
+/**
+ * Device Card Component
+ */
+class DeviceCard extends Component {
+    constructor(props) {
+        super(props);
+        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?.data || {} });
+    }
+    /**
+     * Refresh the device details
+     */
+    refresh = () => {
+        this.setState({ details: null });
+        this.loadDetails().catch(console.error);
+    };
+    /**
+     * Copy the device ID to the clipboard
+     * @returns {void}
+     */
+    copyToClipboard = async () => {
+        const textToCopy = this.props.device.id;
+        Utils.copyToClipboard(textToCopy);
+        alert(`${getTranslation('copied')} ${textToCopy} ${getTranslation('toClipboard')}!`);
+    };
+    renderDialog() {
+        if (!this.state.open || !this.state.details) {
+            return null;
+        }
+        return React.createElement(Dialog, { open: !0, maxWidth: "md", onClose: () => this.setState({ open: false }) },
+            React.createElement(DialogContent, null,
+                React.createElement(JsonConfig, { instanceId: this.props.instanceId, socket: this.props.socket, schema: this.state.details.schema, data: this.state.data, onChange: (data) => this.setState({ data }) })),
+            React.createElement(DialogActions, null,
+                React.createElement(Button, { disabled: !this.props.alive, variant: "contained", color: "primary", onClick: () => this.setState({ open: false }), autoFocus: true }, getTranslation('closeButtonText'))));
+    }
+    renderControlDialog() {
+        if (!this.state.showControlDialog || !this.props.alive) {
+            return null;
+        }
+        const colors = { primary: '#111', secondary: '#888' };
+        return React.createElement(Dialog, { open: !0, onClose: () => this.setState({ showControlDialog: false }) },
+            React.createElement(DialogTitle, null,
+                this.props.title,
+                React.createElement(IconButton, { style: {
+                        position: 'absolute',
+                        top: 5,
+                        right: 5,
+                        zIndex: 10,
+                    }, onClick: () => this.setState({ showControlDialog: false }) },
+                    React.createElement(CloseIcon, null))),
+            React.createElement(DialogContent, { style: { display: 'flex', flexDirection: 'column' } }, this.props.device.controls?.map(control => React.createElement(DeviceControlComponent, { 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() {
+        const colors = { primary: '#111', secondary: '#888' };
+        const firstControl = this.props.device.controls?.[0];
+        if (this.props.device.controls?.length === 1 && firstControl && ((firstControl.type === 'icon' || firstControl.type === 'switch') && !firstControl.label)) {
+            // control can be placed in button icon
+            return React.createElement(DeviceControlComponent, { 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 (this.props.device.controls?.length) {
+            // place button and show controls dialog
+            return React.createElement(Fab, { size: "small", disabled: !this.props.alive, onClick: () => this.setState({ showControlDialog: true }) },
+                React.createElement(ControlIcon, null));
+        }
+        return null;
+    }
+    renderActions() {
+        return this.props.device.actions?.length ? this.props.device.actions.map(a => React.createElement(DeviceActionButton, { 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.createElement(Card, { sx: {
+                maxWidth: 345,
+                minWidth: 200,
+            } },
+            React.createElement(CardHeader, { sx: theme => ({
+                    backgroundColor: this.props.device.color || theme.palette.secondary.main,
+                    color: this.props.device.color ? Utils.invertColor(this.props.device.color, true) : theme.palette.secondary.contrastText,
+                    maxWidth: 345,
+                }), avatar: React.createElement("div", null,
+                    this.props.uploadImagesToInstance ? React.createElement(DeviceImageUpload, { 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.createElement(Icon, { src: this.state.icon }) : React.createElement(NoImageIcon, null)), action: hasDetails ? React.createElement(IconButton, { "aria-label": "settings", onClick: () => {
+                        if (!this.state.open) {
+                            this.loadDetails().catch(console.error);
+                            this.setState({ open: true });
+                        }
+                    } },
+                    React.createElement(MoreVertIcon, null)) : null, title: this.props.title, subheader: this.props.device.manufacturer ? React.createElement("span", null,
+                    React.createElement("b", { style: { marginRight: 4 } },
+                        getTranslation('manufacturer'),
+                        ":"),
+                    getText(this.props.device.manufacturer)) : null }),
+            React.createElement(CardContent, { style: { position: 'relative' } },
+                status?.length ? React.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.createElement(DeviceStatus, { key: i, status: s }))) : null,
+                React.createElement("div", null,
+                    React.createElement(Typography, { variant: "body1" },
+                        React.createElement("div", { onClick: this.copyToClipboard },
+                            React.createElement("b", null, "ID:"),
+                            React.createElement("span", { style: { marginLeft: 4 } }, this.props.device.id.replace(/.*\.\d\./, ''))),
+                        this.props.device.manufacturer ? React.createElement("div", null,
+                            React.createElement("b", { style: { marginRight: 4 } },
+                                getTranslation('manufacturer'),
+                                ":"),
+                            getText(this.props.device.manufacturer)) : null,
+                        this.props.device.model ? React.createElement("div", null,
+                            React.createElement("b", { style: { marginRight: 4 } },
+                                getTranslation('model'),
+                                ":"),
+                            getText(this.props.device.model)) : null))),
+            React.createElement(CardActions, { disableSpacing: true },
+                this.renderActions(),
+                React.createElement("div", { style: { flexGrow: 1 } }),
+                this.renderControls()),
+            this.renderDialog(),
+            this.renderControlDialog());
+    }
+    renderBig() {
+        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.createElement(Paper, { style: cardStyle, key: this.props.id },
+            React.createElement("div", { style: headerStyle },
+                React.createElement("div", { style: imgAreaStyle },
+                    this.props.uploadImagesToInstance ? React.createElement(DeviceImageUpload, { 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.createElement(Icon, { src: this.state.icon, style: imgStyle })),
+                React.createElement("div", { style: titleStyle }, this.props.title),
+                this.props.device.hasDetails ? React.createElement(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.createElement(MoreVertIcon, null)) : null),
+            React.createElement("div", { style: statusStyle }, status.map((s, i) => React.createElement(DeviceStatus, { key: i, status: s }))),
+            React.createElement("div", { style: bodyStyle },
+                React.createElement(Typography, { variant: "body1", style: deviceInfoStyle },
+                    React.createElement("div", { onClick: this.copyToClipboard },
+                        React.createElement("b", { style: { marginRight: 4 } }, "ID:"),
+                        this.props.device.id.replace(/.*\.\d\./, '')),
+                    this.props.device.manufacturer ? React.createElement("div", null,
+                        React.createElement("b", { style: { marginRight: 4 } },
+                            getTranslation('manufacturer'),
+                            ":"),
+                        getText(this.props.device.manufacturer)) : null,
+                    this.props.device.model ? React.createElement("div", null,
+                        React.createElement("b", { style: { marginRight: 4 } },
+                            getTranslation('model'),
+                            ":"),
+                        getText(this.props.device.model)) : null),
+                !!this.props.device.actions?.length && React.createElement("div", { style: {
+                        flex: 1,
+                        position: 'relative',
+                        display: 'flex',
+                        gap: 8,
+                        paddingBottom: 5,
+                        height: 34,
+                        paddingLeft: 10,
+                        paddingRight: 10,
+                    } },
+                    this.renderActions(),
+                    React.createElement("div", { style: { flexGrow: 1 } }),
+                    this.renderControls())),
+            this.renderDialog(),
+            this.renderControlDialog());
+    }
+    render() {
+        if (this.props.smallCards) {
+            return this.renderSmall();
+        }
+        return this.renderBig();
+    }
+}
+export default DeviceCard;
+//# sourceMappingURL=DeviceCard.js.map

package/build/JsonConfigComponent/DeviceManager/DeviceCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceCard.js","sourceRoot":"./src/","sources":["JsonConfigComponent/DeviceManager/DeviceCard.tsx"],"names":[],"mappings":"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"}

package/build/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/build/JsonConfigComponent/DeviceManager/DeviceControl.js

@@ -0,0 +1,119 @@
+import React, { Component } from 'react';
+import { Button, Fab, Switch, } from '@mui/material';
+import { renderIcon, getTranslation } from './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
+ */
+export default class DeviceControl extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: props.control.state?.val,
+            ts: props.control.state?.ts,
+        };
+    }
+    componentDidMount() {
+        if (this.props.control.stateId) {
+            this.props.socket.subscribeState(this.props.control.stateId, this.stateHandler);
+        }
+    }
+    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?.ts && (!this.state.ts || newState.ts > this.state.ts)) {
+                this.setState({
+                    value: newState.val,
+                    ts: newState.ts,
+                });
+            }
+        }
+    };
+    componentWillUnmount() {
+        if (this.props.control.stateId) {
+            this.props.socket.unsubscribeState(this.props.control.stateId, this.stateHandler);
+        }
+    }
+    static getDerivedStateFromProps(props, state) {
+        if (props.control.state?.ts && (!state.ts || props.control.state?.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?.ts && (!this.state.ts || result?.ts > this.state.ts)) {
+            this.setState({
+                value: result.val,
+                ts: result.ts,
+            });
+        }
+    }
+    renderButton() {
+        const tooltip = getTranslation(this.props.control.description);
+        const icon = renderIcon(this.props.control, this.props.colors, this.state.value);
+        if (!this.props.control.label) {
+            return React.createElement(Fab, { disabled: this.props.disabled, title: tooltip, onClick: () => this.sendControl(this.props.deviceId, this.props.control, true) }, icon);
+        }
+        return React.createElement(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 = getTranslation(this.props.control.description);
+        // const icon = renderIcon(this.props.control, this.props.colors, this.state.value);
+        return React.createElement(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 = getTranslation(this.props.control.description);
+        const icon = renderIcon(this.props.control, this.props.colors, this.state.value);
+        const color = this.getColor();
+        if (!this.props.control.label) {
+            return React.createElement(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.createElement(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.createElement("div", { style: { color: 'red' } }, this.props.control.type);
+    }
+}
+//# sourceMappingURL=DeviceControl.js.map

package/build/JsonConfigComponent/DeviceManager/DeviceControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceControl.js","sourceRoot":"./src/","sources":["JsonConfigComponent/DeviceManager/DeviceControl.tsx"],"names":[],"mappings":"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"}

package/build/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/build/JsonConfigComponent/DeviceManager/DeviceImageUpload.js

@@ -0,0 +1,65 @@
+import React from '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.createElement("div", null,
+        React.createElement("input", { style: imageUploadButtonStyle, type: "file", accept: "image/*", onChange: handleImageUpload }));
+}
+export default DeviceImageUpload;
+//# sourceMappingURL=DeviceImageUpload.js.map

package/build/JsonConfigComponent/DeviceManager/DeviceImageUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceImageUpload.js","sourceRoot":"./src/","sources":["JsonConfigComponent/DeviceManager/DeviceImageUpload.tsx"],"names":[],"mappings":"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"}

package/build/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 {};