@iobroker/dm-gui-components 0.0.2

package/DeviceControl.js

@@ -0,0 +1,146 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const Utils_1 = require("./Utils");
+/**
+ * Device Control component
+ * @param {object} props - Parameters
+ * @param {object} props.control - Control object
+ * @param {object} props.socket - Socket object
+ * @param {object} props.controlHandler - Control handler to set the state
+ * @param {object} props.controlStateHandler - Control handler to read the state
+ * @returns {React.JSX.Element|null}
+ * @constructor
+ */
+class DeviceControl extends react_1.Component {
+    constructor(props) {
+        var _a, _b;
+        super(props);
+        this.stateHandler = async (id, state) => {
+            if (id === this.props.control.stateId && state) {
+                // request new state
+                const newState = await (this.props.controlStateHandler(this.props.deviceId, this.props.control)());
+                if ((newState === null || newState === void 0 ? void 0 : newState.ts) && 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;
+        if (((_a = props.control.state) === null || _a === void 0 ? void 0 : _a.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) && (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, { title: tooltip, onClick: () => this.sendControl(this.props.deviceId, this.props.control, true) }, icon);
+        }
+        return react_1.default.createElement(material_1.Button, { 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, { 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, { 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, { 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/DeviceImageUpload.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Connection } from '@iobroker/adapter-react-v5';
+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/DeviceImageUpload.js

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

package/DeviceList.d.ts

@@ -0,0 +1,50 @@
+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;
+    empbedded?: boolean;
+    title?: string;
+    style: React.CSSProperties;
+}
+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 language;
+    constructor(props: DeviceListProps);
+    componentDidMount(): Promise<void>;
+    componentWillUnmount(): void;
+    aliveHandler: ioBroker.StateChangeHandler;
+    /**
+    * Load devices
+    */
+    loadData(): Promise<void>;
+    getText(text: ioBroker.StringOrTranslated): string;
+    applyFilter(): void;
+    handleFilterChange(filter: string): void;
+    renderContent(): React.JSX.Element | React.JSX.Element[] | null;
+}
+export {};

package/DeviceList.js

@@ -0,0 +1,205 @@
+"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 material_1 = require("@mui/material");
+const icons_material_1 = require("@mui/icons-material");
+const adapter_react_v5_1 = require("@iobroker/adapter-react-v5");
+const DeviceCard_1 = __importDefault(require("./DeviceCard"));
+const Utils_1 = require("./Utils");
+const Communication_1 = __importDefault(require("./Communication"));
+const InstanceActionButton_1 = __importDefault(require("./InstanceActionButton"));
+const de_json_1 = __importDefault(require("./i18n/de.json"));
+const en_json_1 = __importDefault(require("./i18n/en.json"));
+const ru_json_1 = __importDefault(require("./i18n/ru.json"));
+const pt_json_1 = __importDefault(require("./i18n/pt.json"));
+const nl_json_1 = __importDefault(require("./i18n/nl.json"));
+const fr_json_1 = __importDefault(require("./i18n/fr.json"));
+const it_json_1 = __importDefault(require("./i18n/it.json"));
+const es_json_1 = __importDefault(require("./i18n/es.json"));
+const pl_json_1 = __importDefault(require("./i18n/pl.json"));
+const uk_json_1 = __importDefault(require("./i18n/uk.json"));
+const zh_cn_json_1 = __importDefault(require("./i18n/zh-cn.json"));
+/**
+ * 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
+ */
+class DeviceList extends Communication_1.default {
+    constructor(props) {
+        super(props);
+        this.aliveHandler = (id, state) => {
+            if (id === `system.adapter.${this.props.selectedInstance}.alive`) {
+                const alive = !!(state === null || state === void 0 ? void 0 : state.val);
+                if (alive !== this.state.alive) {
+                    this.setState({ alive }, () => {
+                        if (alive) {
+                            this.componentDidMount().catch(console.error);
+                        }
+                    });
+                }
+            }
+        };
+        if (!DeviceList.i18nInitialized) {
+            DeviceList.i18nInitialized = true;
+            // @ts-expect-error
+            adapter_react_v5_1.I18n.extendTranslations({
+                en: en_json_1.default,
+                de: de_json_1.default,
+                ru: ru_json_1.default,
+                pt: pt_json_1.default,
+                nl: nl_json_1.default,
+                fr: fr_json_1.default,
+                it: it_json_1.default,
+                es: es_json_1.default,
+                pl: pl_json_1.default,
+                uk: uk_json_1.default,
+                'zh-cn': zh_cn_json_1.default,
+            });
+        }
+        // @ts-ignore
+        Object.assing(this.state, {
+            devices: [],
+            filteredDevices: [],
+            filter: '',
+            instanceInfo: null,
+            loading: null,
+            alive: null,
+        });
+        this.lastPropsFilter = this.props.filter;
+        this.lastInstance = '';
+        this.filterTimeout = null;
+        this.language = adapter_react_v5_1.I18n.getLanguage();
+    }
+    async componentDidMount() {
+        if (!this.props.empbedded) {
+            try {
+                // check if instance is alive
+                const alive = await this.props.socket.getState(`system.adapter.${this.props.selectedInstance}.alive`);
+                this.props.socket.unsubscribeState(`system.adapter.${this.props.selectedInstance}.alive`, this.aliveHandler);
+                if (!alive || !alive.val) {
+                    this.setState({ alive: false });
+                    return;
+                }
+                const instanceInfo = await this.loadInstanceInfos();
+                this.setState({ alive: true, instanceInfo });
+            }
+            catch (error) {
+                console.error(error);
+                this.setState({ alive: false });
+            }
+        }
+        try {
+            await this.loadData();
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    componentWillUnmount() {
+        if (!this.props.empbedded) {
+            this.props.socket.unsubscribeState(`system.adapter.${this.props.selectedInstance}.alive`, this.aliveHandler);
+        }
+    }
+    /**
+    * Load devices
+    */
+    async loadData() {
+        this.setState({ loading: true });
+        console.log(`Loading devices for ${this.props.selectedInstance}...`);
+        const devices = await this.loadDevices();
+        if (!devices || !Array.isArray(devices)) {
+            throw new Error(`Message returned from sendTo() doesn't look like one from DeviceManagement, did you accidentally handle the message in your adapter? ${JSON.stringify(devices)}`);
+        }
+        this.setState({ devices, loading: false }, () => this.applyFilter());
+    }
+    getText(text) {
+        if (typeof text === 'object') {
+            return text[this.language] || text.en;
+        }
+        return text;
+    }
+    applyFilter() {
+        const filter = this.props.empbedded ? this.props.filter : this.state.filter;
+        // filter devices name
+        if (filter) {
+            const filteredDevices = this.state.devices.filter(device => this.getText(device.name).toLowerCase().includes(filter.toLowerCase()));
+            this.setState({ filteredDevices });
+        }
+        else {
+            this.setState({ filteredDevices: this.state.devices });
+        }
+    }
+    handleFilterChange(filter) {
+        this.setState({ filter }, () => {
+            this.filterTimeout && clearTimeout(this.filterTimeout);
+            this.filterTimeout = setTimeout(() => {
+                this.filterTimeout = null;
+                this.applyFilter();
+            }, 250);
+        });
+    }
+    renderContent() {
+        var _a, _b;
+        /** @type {object} */
+        const emptyStyle = {
+            padding: 25,
+        };
+        if (this.props.empbedded && this.lastPropsFilter !== this.props.filter) {
+            this.lastPropsFilter = this.props.filter;
+            setTimeout(() => this.applyFilter(), 50);
+        }
+        if (this.props.empbedded && this.lastInstance !== this.props.selectedInstance) {
+            this.lastInstance = this.props.selectedInstance;
+            setTimeout(() => this.loadData().catch(console.error), 50);
+        }
+        let list;
+        if (!this.props.empbedded && !this.state.alive) {
+            list = react_1.default.createElement("div", { style: emptyStyle },
+                react_1.default.createElement("span", null, (0, Utils_1.getTranslation)('instanceNotAlive')));
+        }
+        else if (!this.state.devices.length && this.props.selectedInstance) {
+            list = react_1.default.createElement("div", { style: emptyStyle },
+                react_1.default.createElement("span", null, (0, Utils_1.getTranslation)('noDevicesFoundText')));
+        }
+        else if (this.state.devices.length && !this.state.filteredDevices.length) {
+            list = react_1.default.createElement("div", { style: emptyStyle },
+                react_1.default.createElement("span", null, (0, Utils_1.getTranslation)('allDevicesFilteredOut')));
+        }
+        else {
+            list = this.state.filteredDevices.map(device => react_1.default.createElement(DeviceCard_1.default, { key: device.id, id: device.id, title: this.getText(device.name), device: device, instanceId: this.props.selectedInstance, uploadImagesToInstance: this.props.uploadImagesToInstance, deviceHandler: this.deviceHandler, controlHandler: this.controlHandler, controlStateHandler: this.controlStateHandler, socket: this.props.socket }));
+        }
+        if (this.props.empbedded) {
+            return list;
+        }
+        return react_1.default.createElement("div", { style: { width: '100%', height: '100%', overflow: 'hidden' } },
+            react_1.default.createElement(material_1.Toolbar, { variant: "dense", style: { backgroundColor: '#777', display: 'flex' } },
+                this.props.title,
+                this.state.alive && ((_b = (_a = this.state.instanceInfo) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.length) ? react_1.default.createElement("div", { style: {
+                        marginLeft: 20,
+                    } }, this.state.instanceInfo.actions.map(action => react_1.default.createElement(InstanceActionButton_1.default, { key: action.id, action: action, instanceHandler: this.instanceHandler }))) : null,
+                react_1.default.createElement("div", { style: { flexGrow: 1 } }),
+                this.state.alive ? react_1.default.createElement(material_1.TextField, { variant: "standard", style: { width: 200 }, size: "small", label: (0, Utils_1.getTranslation)('filterLabelText'), onChange: e => this.handleFilterChange(e.target.value), value: this.state.filter, autoComplete: "off", inputProps: {
+                        autoComplete: 'new-password',
+                        form: { autoComplete: 'off' },
+                    }, 
+                    // eslint-disable-next-line react/jsx-no-duplicate-props
+                    InputProps: {
+                        endAdornment: this.state.filter ? react_1.default.createElement(material_1.InputAdornment, { position: "end" },
+                            react_1.default.createElement(material_1.IconButton, { onClick: () => this.handleFilterChange(''), edge: "end" },
+                                react_1.default.createElement(icons_material_1.Clear, null))) : null,
+                    } }) : null),
+            react_1.default.createElement("div", { style: Object.assign({ width: '100%', height: 'calc(100% - 56px)', marginTop: 8, overflow: 'auto', justifyContent: 'center', alignItems: 'stretch', display: 'grid', columnGap: 8, rowGap: 8 }, this.props.style) }, list));
+    }
+}
+DeviceList.i18nInitialized = false;
+exports.default = DeviceList;

package/DeviceStatus.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface DeviceStatusProps {
+    status: any;
+}
+/**
+ * Device Status component
+ * @param {object} params - Parameters
+ * @param {object} params.status - Status object, e.g. { connection: 'connected', battery: 100, rssi: -50 }
+ * @returns {React.JSX.Element|null}
+ * @constructor
+ */
+export default function DeviceStatus(params: DeviceStatusProps): React.JSX.Element | null;
+export {};

package/DeviceStatus.js

@@ -0,0 +1,111 @@
+"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 material_1 = require("@mui/material");
+const icons_material_1 = require("@mui/icons-material");
+const Utils_1 = require("./Utils");
+/**
+ * Device Status component
+ * @param {object} params - Parameters
+ * @param {object} params.status - Status object, e.g. { connection: 'connected', battery: 100, rssi: -50 }
+ * @returns {React.JSX.Element|null}
+ * @constructor
+ */
+function DeviceStatus(params) {
+    if (!params.status) {
+        return null;
+    }
+    let status;
+    if (typeof params.status === 'string') {
+        status = {
+            connection: params.status,
+        };
+    }
+    else {
+        status = params.status;
+    }
+    /** @type {object} */
+    const iconStyleOK = {
+        fill: '#00ac00',
+    };
+    /** @type {object} */
+    const iconStyleNotOK = {
+        fill: '#ff0000',
+    };
+    /** @type {object} */
+    const iconStyleWarning = {
+        fill: '#ff9900',
+    };
+    /** @type {object} */
+    let batteryIconTooltip;
+    if (typeof status.battery === 'number') {
+        if (status.battery >= 96 && status.battery <= 100) {
+            batteryIconTooltip = react_1.default.createElement(icons_material_1.BatteryFull, { style: iconStyleOK });
+        }
+        else if (status.battery >= 90 && status.battery <= 95) {
+            batteryIconTooltip = react_1.default.createElement(icons_material_1.Battery90, { style: iconStyleOK });
+        }
+        else if (status.battery >= 80 && status.battery <= 89) {
+            batteryIconTooltip = react_1.default.createElement(icons_material_1.Battery80, { style: iconStyleOK });
+        }
+        else if (status.battery >= 60 && status.battery <= 79) {
+            batteryIconTooltip = react_1.default.createElement(icons_material_1.Battery60, { style: iconStyleOK });
+        }
+        else if (status.battery >= 50 && status.battery <= 59) {
+            batteryIconTooltip = react_1.default.createElement(icons_material_1.Battery50, { style: iconStyleOK });
+        }
+        else if (status.battery >= 30 && status.battery <= 49) {
+            batteryIconTooltip = react_1.default.createElement(icons_material_1.Battery30, { style: iconStyleOK });
+        }
+        else if (status.battery >= 20 && status.battery <= 29) {
+            batteryIconTooltip = react_1.default.createElement(icons_material_1.Battery20, { style: iconStyleNotOK });
+        }
+        else {
+            batteryIconTooltip = react_1.default.createElement(icons_material_1.BatteryAlert, { style: iconStyleNotOK });
+        }
+    }
+    return react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+        status.connection === 'connected' && react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+            react_1.default.createElement(material_1.Tooltip, { title: (0, Utils_1.getTranslation)('connectedIconTooltip') },
+                react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } },
+                    react_1.default.createElement(icons_material_1.Link, { style: iconStyleOK })))),
+        status.connection === 'disconnected' && react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+            react_1.default.createElement(material_1.Tooltip, { title: (0, Utils_1.getTranslation)('disconnectedIconTooltip') },
+                react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } },
+                    react_1.default.createElement(icons_material_1.LinkOff, { style: iconStyleNotOK })))),
+        status.rssi && react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+            react_1.default.createElement(material_1.Tooltip, { title: "RSSI" },
+                react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } },
+                    react_1.default.createElement(icons_material_1.NetworkCheck, null),
+                    react_1.default.createElement("p", { style: { fontSize: 'small', margin: 0 } }, status.rssi)))),
+        typeof status.battery === 'number' && react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+            react_1.default.createElement(material_1.Tooltip, { title: (0, Utils_1.getTranslation)('batteryTooltip') },
+                react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } },
+                    batteryIconTooltip,
+                    react_1.default.createElement("p", { style: { fontSize: 'small', margin: 0 } },
+                        status.battery,
+                        "%")))),
+        typeof status.battery === 'string' && react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+            react_1.default.createElement(material_1.Tooltip, { title: (0, Utils_1.getTranslation)('batteryTooltip') },
+                react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } },
+                    status.battery === 'charging' ? react_1.default.createElement(icons_material_1.BatteryCharging50, null) : react_1.default.createElement(icons_material_1.BatteryFull, null),
+                    status.battery !== 'charging' ? (status.battery.includes('V') || status.battery.includes('mV') ?
+                        react_1.default.createElement("p", { style: { fontSize: 'small', margin: 0 } }, status.battery) :
+                        react_1.default.createElement("p", { style: { fontSize: 'small', margin: 0 } },
+                            react_1.default.createElement("span", { style: { marginRight: 4 } }, status.battery),
+                            "mV")) : null))),
+        typeof status.battery === 'boolean' && react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+            react_1.default.createElement(material_1.Tooltip, { title: (0, Utils_1.getTranslation)('batteryTooltip') },
+                react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, status.battery ? react_1.default.createElement(icons_material_1.BatteryFull, { style: iconStyleOK }) :
+                    react_1.default.createElement(icons_material_1.BatteryAlert, { style: iconStyleNotOK })))),
+        status.warning && react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, typeof status.warning === 'string' || typeof status.warning === 'object' ?
+            react_1.default.createElement(material_1.Tooltip, { title: (0, Utils_1.getTranslation)(status.warning) },
+                react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } },
+                    react_1.default.createElement(icons_material_1.Warning, { style: iconStyleWarning }))) :
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } },
+                react_1.default.createElement(icons_material_1.Warning, { style: iconStyleWarning }))));
+}
+exports.default = DeviceStatus;

package/InstanceActionButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface InstanceActionButtonProps {
+    action: any;
+    instanceHandler: (action: any) => () => void;
+}
+export default function InstanceActionButton(params: InstanceActionButtonProps): React.JSX.Element | null;
+export {};

package/InstanceActionButton.js

@@ -0,0 +1,16 @@
+"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_1 = __importDefault(require("./TooltipButton"));
+const Utils_1 = require("./Utils");
+function InstanceActionButton(params) {
+    const { action, instanceHandler } = params;
+    const tooltip = (0, Utils_1.getTranslation)((action === null || action === void 0 ? void 0 : action.description) ? action.description : '');
+    const title = (0, Utils_1.getTranslation)((action === null || action === void 0 ? void 0 : action.title) ? action.title : '');
+    const icon = (0, Utils_1.renderIcon)(action);
+    return react_1.default.createElement(TooltipButton_1.default, { tooltip: tooltip, label: title, disabled: action.disabled, Icon: icon, onClick: instanceHandler(action) });
+}
+exports.default = InstanceActionButton;

package/JsonConfig.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Connection } from '@iobroker/adapter-react-v5';
+interface JsonConfigProps {
+    instanceId: string;
+    socket: Connection;
+    schema: Record<string, any>;
+    data: Record<string, any>;
+    onChange: (data: Record<string, any>) => void;
+}
+export default function JsonConfig(props: JsonConfigProps): React.JSX.Element | null;
+export {};