npm - @iobroker/dm-gui-components - Versions diffs - 0.0.3 → 0.0.5 - Mend

@iobroker/dm-gui-components 0.0.3 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/Communication.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ import { ActionBase, ControlBase, ControlState } from '@iobroker/dm-utils/build/
 export type CommunicationProps = {
     socket: Connection;
     selectedInstance: string;
+    registerHandler?: (handler: null | ((command: string) => void)) => void;
 };
 interface CommunicationForm {
     title?: string | null | undefined;
@@ -35,13 +36,13 @@ export type CommunicationState = {
  * @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> {
+declare 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>;
+    loadData(): Promise<void>;
     sendActionToInstance: (command: string, messageToSend: any, refresh?: () => void) => void;
     sendControlToInstance: (command: string, messageToSend: {
         deviceId: string;

package/Communication.js CHANGED Viewed

@@ -162,14 +162,25 @@ class Communication extends react_1.Component {
             form: null,
             progress: null,
         };
+        // eslint-disable-next-line react/no-unused-class-component-methods
         this.instanceHandler = action => () => this.sendActionToInstance('dm:instanceAction', { actionId: action.id });
+        // eslint-disable-next-line react/no-unused-class-component-methods
         this.deviceHandler = (deviceId, action, refresh) => () => this.sendActionToInstance('dm:deviceAction', { deviceId, actionId: action.id }, refresh);
+        // eslint-disable-next-line react/no-unused-class-component-methods
         this.controlHandler = (deviceId, control, state) => () => this.sendControlToInstance('dm:deviceControl', { deviceId, controlId: control.id, state });
+        // eslint-disable-next-line react/no-unused-class-component-methods
         this.controlStateHandler = (deviceId, control) => () => this.sendControlToInstance('dm:deviceControlState', { deviceId, controlId: control.id });
+        this.props.registerHandler && this.props.registerHandler(() => this.loadData());
     }
+    // eslint-disable-next-line class-methods-use-this
+    loadData() {
+        return Promise.resolve();
+    }
+    // eslint-disable-next-line react/no-unused-class-component-methods
     loadDevices() {
         return this.props.socket.sendTo(this.props.selectedInstance, 'dm:listDevices');
     }
+    // eslint-disable-next-line react/no-unused-class-component-methods
     loadInstanceInfos() {
         return this.props.socket.sendTo(this.props.selectedInstance, 'dm:instanceInfo');
     }
@@ -189,7 +200,6 @@ class Communication extends react_1.Component {
         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))),
@@ -232,6 +242,7 @@ class Communication extends react_1.Component {
         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 }));
     }
+    // eslint-disable-next-line class-methods-use-this
     renderContent() {
         return null;
     }

package/DeviceActionButton.d.ts CHANGED Viewed

@@ -5,6 +5,7 @@ interface DeviceActionButtonProps {
     action: any;
     refresh: () => void;
     deviceHandler: (deviceId: string, action: ActionBase<'api'>, refresh: () => void) => () => void;
+    disabled?: boolean;
 }
 export default function DeviceActionButton(props: DeviceActionButtonProps): React.JSX.Element;
 export {};

package/DeviceActionButton.js CHANGED Viewed

@@ -7,9 +7,9 @@ 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 { deviceId, action, refresh, deviceHandler, disabled, } = 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) });
+    return react_1.default.createElement(TooltipButton_js_1.default, { label: action.label || (icon ? null : action.id), tooltip: tooltip, disabled: disabled || action.disabled, Icon: icon, onClick: deviceHandler(deviceId, action, refresh) });
 }
 exports.default = DeviceActionButton;

package/DeviceCard.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { Connection } from '@iobroker/adapter-react-v5';
-import { DeviceInfo } from '@iobroker/dm-utils';
+import { DeviceDetails, DeviceInfo } from '@iobroker/dm-utils';
 import { ActionBase, ControlBase, ControlState } from '@iobroker/dm-utils/build/types/base';
 interface DeviceCardProps {
     title?: string;
@@ -12,9 +12,42 @@ interface DeviceCardProps {
     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>;
+    smallCards?: boolean;
+    alive: boolean;
+}
+interface DeviceCardState {
+    open: boolean;
+    details: DeviceDetails | null;
+    data: Record<string, any>;
+    icon: string | undefined;
+    showControlDialog: boolean;
 }
 /**
  * Device Card Component
  */
-export default function DeviceCard(params: DeviceCardProps): React.JSX.Element;
-export {};
+declare class DeviceCard extends Component<DeviceCardProps, DeviceCardState> {
+    constructor(props: DeviceCardProps);
+    fetchIcon(): Promise<void>;
+    componentDidMount(): void;
+    /**
+     * Load the device details
+     */
+    loadDetails(): Promise<void>;
+    /**
+     * Refresh the device details
+     */
+    refresh: () => void;
+    /**
+     * Copy the device ID to the clipboard
+     * @returns {void}
+     */
+    copyToClipboard: () => Promise<void>;
+    renderDialog(): React.JSX.Element;
+    renderControlDialog(): React.JSX.Element;
+    renderControls(): React.JSX.Element;
+    renderActions(): React.JSX.Element[];
+    renderSmall(): React.JSX.Element;
+    renderBig(): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export default DeviceCard;

package/DeviceCard.js CHANGED Viewed

@@ -47,162 +47,291 @@ function getText(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('');
-                }
+class DeviceCard extends react_1.Component {
+    constructor(props) {
+        super(props);
+        /**
+         * Refresh the device details
+         */
+        this.refresh = () => {
+            this.setState({ details: null });
+            this.loadDetails().catch(console.error);
+        };
+        /**
+         * Copy the device ID to the clipboard
+         * @returns {void}
+         */
+        this.copyToClipboard = async () => {
+            const textToCopy = this.props.device.id;
+            adapter_react_v5_1.Utils.copyToClipboard(textToCopy);
+            alert(`${(0, Utils_1.getTranslation)('copied')} ${textToCopy} ${(0, Utils_1.getTranslation)('toClipboard')}!`);
+        };
+        this.state = {
+            open: false,
+            details: null,
+            data: {},
+            icon: props.device.icon,
+            showControlDialog: false,
+        };
+    }
+    async fetchIcon() {
+        if (!this.props.device.icon) {
+            // try to load the icon from file storage
+            const fileName = `${this.props.device.manufacturer ? `${this.props.device.manufacturer}_` : ''}${this.props.device.model ? this.props.device.model : this.props.device.id}`;
+            try {
+                const file = await this.props.socket.readFile(this.props.instanceId.replace('system.adapter.', ''), `${fileName}.webp`, true);
+                this.setState({ icon: `data:image/${file.mimeType},${file}` });
+                // const response = await fetch(url);
+                // if (response.ok) {
+                //     const blob = await response.blob();
+                //     const reader = new FileReader();
+                //     reader.onloadend = () => {
+                //         setIcon(reader.result);
+                //     };
+                //     reader.readAsDataURL(blob);
+                // } else {
+                //     throw new Error('Response not ok');
+                // }
+            }
+            catch (error) {
+                this.state.icon && this.setState({ icon: '' });
             }
         }
-        fetchIcon()
+    }
+    componentDidMount() {
+        this.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);
+    async loadDetails() {
+        console.log(`Loading device details for ${this.props.device.id}... from ${this.props.instanceId}`);
+        const details = await this.props.socket.sendTo(this.props.instanceId, 'dm:deviceDetails', this.props.device.id);
+        console.log(`Got device details for ${this.props.device.id}:`, details);
+        this.setState({ details, data: (details === null || details === void 0 ? void 0 : details.data) || {} });
+    }
+    ;
+    renderDialog() {
+        if (!this.state.open || !this.state.details) {
+            return null;
         }
-    };
-    /**
-     * 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 });
+        return react_1.default.createElement(material_1.Dialog, { open: !0, maxWidth: "md", onClose: () => this.setState({ open: false }) },
+            react_1.default.createElement(material_1.DialogContent, null,
+                react_1.default.createElement(JsonConfig_1.default, { instanceId: this.props.instanceId, socket: this.props.socket, schema: this.state.details.schema, data: this.state.data, onChange: (data) => this.setState({ data }) })),
+            react_1.default.createElement(material_1.DialogActions, null,
+                react_1.default.createElement(material_1.Button, { disabled: !this.props.alive, variant: "contained", color: "primary", onClick: () => this.setState({ open: false }), autoFocus: true }, (0, Utils_1.getTranslation)('closeButtonText'))));
     }
-    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 }))));
+    renderControlDialog() {
+        var _a;
+        if (!this.state.showControlDialog || !this.props.alive) {
+            return null;
+        }
+        const colors = { primary: '#111', secondary: '#888' };
+        return react_1.default.createElement(material_1.Dialog, { open: !0, onClose: () => this.setState({ showControlDialog: false }) },
+            react_1.default.createElement(material_1.DialogTitle, null,
+                this.props.title,
+                react_1.default.createElement(material_1.IconButton, { style: {
+                        position: 'absolute',
+                        top: 5,
+                        right: 5,
+                        zIndex: 10,
+                    }, onClick: () => this.setState({ showControlDialog: false }) },
+                    react_1.default.createElement(icons_material_1.Close, null))),
+            react_1.default.createElement(material_1.DialogContent, { style: { display: 'flex', flexDirection: 'column' } }, (_a = this.props.device.controls) === null || _a === void 0 ? void 0 : _a.map(control => react_1.default.createElement(DeviceControl_1.default, { disabled: false, key: control.id, control: control, socket: this.props.socket, colors: colors, deviceId: this.props.device.id, controlHandler: this.props.controlHandler, controlStateHandler: this.props.controlStateHandler }))));
+    }
+    renderControls() {
+        var _a, _b, _c;
+        const colors = { primary: '#111', secondary: '#888' };
+        const firstControl = (_a = this.props.device.controls) === null || _a === void 0 ? void 0 : _a[0];
+        if (((_b = this.props.device.controls) === null || _b === void 0 ? void 0 : _b.length) === 1 && firstControl && ((firstControl.type === 'icon' || firstControl.type === 'switch') && !firstControl.label)) {
+            // control can be placed in button icon
+            return react_1.default.createElement(DeviceControl_1.default, { disabled: !this.props.alive, control: firstControl, colors: colors, socket: this.props.socket, deviceId: this.props.device.id, controlHandler: this.props.controlHandler, controlStateHandler: this.props.controlStateHandler });
+        }
+        if ((_c = this.props.device.controls) === null || _c === void 0 ? void 0 : _c.length) {
+            // place button and show controls dialog
+            return react_1.default.createElement(material_1.Fab, { size: "small", disabled: !this.props.alive, onClick: () => this.setState({ showControlDialog: true }) },
+                react_1.default.createElement(icons_material_1.VideogameAsset, null));
         }
+        return null;
     }
-    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,
+    renderActions() {
+        var _a;
+        return ((_a = this.props.device.actions) === null || _a === void 0 ? void 0 : _a.length) ? this.props.device.actions.map(a => react_1.default.createElement(DeviceActionButton_1.default, { disabled: !this.props.alive, key: a.id, deviceId: this.props.device.id, action: a, deviceHandler: this.props.deviceHandler, refresh: this.refresh })) : null;
+    }
+    renderSmall() {
+        const hasDetails = this.props.device.hasDetails;
+        const status = !this.props.device.status ? [] : Array.isArray(this.props.device.status) ? this.props.device.status : [this.props.device.status];
+        return react_1.default.createElement(material_1.Card, { sx: {
+                maxWidth: 345,
+                minWidth: 200,
+            } },
+            react_1.default.createElement(material_1.CardHeader, { sx: theme => ({
+                    backgroundColor: this.props.device.color || theme.palette.secondary.main,
+                    color: this.props.device.color ? adapter_react_v5_1.Utils.invertColor(this.props.device.color, true) : theme.palette.secondary.contrastText,
+                    maxWidth: 345,
+                }), avatar: react_1.default.createElement("div", null,
+                    this.props.uploadImagesToInstance ? react_1.default.createElement(DeviceImageUpload_1.default, { uploadImagesToInstance: this.props.uploadImagesToInstance, deviceId: this.props.device.id, manufacturer: getText(this.props.device.manufacturer), model: getText(this.props.device.model), onImageSelect: async (imageData) => imageData && this.setState({ icon: imageData }), socket: this.props.socket }) : null,
+                    this.state.icon ? react_1.default.createElement(adapter_react_v5_1.Icon, { src: this.state.icon }) : react_1.default.createElement(NoImageIcon, null)), action: hasDetails ? react_1.default.createElement(material_1.IconButton, { "aria-label": "settings", onClick: () => {
+                        if (!this.state.open) {
+                            this.loadDetails().catch(console.error);
+                            this.setState({ open: true });
+                        }
+                    } },
+                    react_1.default.createElement(icons_material_1.MoreVert, null)) : null, title: this.props.title, subheader: this.props.device.manufacturer ? react_1.default.createElement("span", null,
+                    react_1.default.createElement("b", { style: { marginRight: 4 } },
+                        (0, Utils_1.getTranslation)('manufacturer'),
+                        ":"),
+                    getText(this.props.device.manufacturer)) : null }),
+            react_1.default.createElement(material_1.CardContent, { style: { position: 'relative' } },
+                (status === null || status === void 0 ? void 0 : status.length) ? react_1.default.createElement("div", { style: {
+                        display: 'flex',
+                        position: 'absolute',
+                        top: -11,
+                        background: '#88888880',
+                        padding: '0 8px',
+                        borderRadius: 5,
+                        width: 'calc(100% - 46px)',
+                    } }, status.map((s, i) => react_1.default.createElement(DeviceStatus_1.default, { key: i, status: s }))) : null,
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(material_1.Typography, { variant: "body1" },
+                        react_1.default.createElement("div", { onClick: this.copyToClipboard },
+                            react_1.default.createElement("b", null, "ID:"),
+                            react_1.default.createElement("span", { style: { marginLeft: 4 } }, this.props.device.id.replace(/.*\.\d\./, ''))),
+                        this.props.device.manufacturer ? react_1.default.createElement("div", null,
+                            react_1.default.createElement("b", { style: { marginRight: 4 } },
+                                (0, Utils_1.getTranslation)('manufacturer'),
+                                ":"),
+                            getText(this.props.device.manufacturer)) : null,
+                        this.props.device.model ? react_1.default.createElement("div", null,
+                            react_1.default.createElement("b", { style: { marginRight: 4 } },
+                                (0, Utils_1.getTranslation)('model'),
+                                ":"),
+                            getText(this.props.device.model)) : null))),
+            react_1.default.createElement(material_1.CardActions, { disableSpacing: true },
+                this.renderActions(),
+                react_1.default.createElement("div", { style: { flexGrow: 1 } }),
+                this.renderControls()),
+            this.renderDialog(),
+            this.renderControlDialog());
+    }
+    renderBig() {
+        var _a;
+        const cardStyle = {
+            // backgroundColor: '#fafafa',
+            width: 300,
+            minHeight: 280,
+            margin: 10,
+            overflow: 'hidden',
+        };
+        /** @type {CSSProperties} */
+        const headerStyle = {
+            display: 'flex',
+            position: 'relative',
+            justifyContent: 'space-between',
+            minHeight: 60,
+            color: '#000',
+            padding: '0 10px 0 10px',
+            backgroundColor: '#77c7ff8c',
+            borderRadius: '4px 4px 0 0',
+        };
+        /** @type {CSSProperties} */
+        const imgAreaStyle = {
+            height: 45,
+            width: 45,
+            margin: 'auto',
+            justifyContent: 'center',
+            display: 'grid',
+        };
+        /** @type {CSSProperties} */
+        const imgStyle = {
+            zIndex: 2,
+            maxWidth: '100%',
+            maxHeight: '100%',
+        };
+        /** @type {CSSProperties} */
+        const titleStyle = {
+            color: '#333',
+            width: '100%',
+            fontSize: 16,
+            fontWeight: 'bold',
+            paddingTop: 16,
+            paddingLeft: 8,
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        };
+        /** @type {CSSProperties} */
+        const detailsButtonStyle = {
+            right: 20,
+            bottom: -20,
+            position: 'absolute',
+        };
+        /** @type {CSSProperties} */
+        const bodyStyle = {
+            height: 'calc(100% - 116px)',
+        };
+        /** @type {CSSProperties} */
+        const deviceInfoStyle = {
+            padding: '20px 16px 0 16px',
+            height: 133,
+        };
+        /** @type {CSSProperties} */
+        const statusStyle = {
+            padding: '15px 15px 0 15px',
+            height: 41,
+        };
+        const status = !this.props.device.status ? [] : Array.isArray(this.props.device.status) ? this.props.device.status : [this.props.device.status];
+        return react_1.default.createElement(material_1.Paper, { style: cardStyle, key: this.props.id },
+            react_1.default.createElement("div", { style: headerStyle },
+                react_1.default.createElement("div", { style: imgAreaStyle },
+                    this.props.uploadImagesToInstance ? react_1.default.createElement(DeviceImageUpload_1.default, { uploadImagesToInstance: this.props.uploadImagesToInstance, deviceId: this.props.device.id, manufacturer: getText(this.props.device.manufacturer), model: getText(this.props.device.model), onImageSelect: async (imageData) => imageData && this.setState({ icon: imageData }), socket: this.props.socket }) : null,
+                    react_1.default.createElement(adapter_react_v5_1.Icon, { src: this.state.icon, style: imgStyle })),
+                react_1.default.createElement("div", { style: titleStyle }, this.props.title),
+                this.props.device.hasDetails ? react_1.default.createElement(material_1.Fab, { disabled: !this.props.alive, size: "small", style: detailsButtonStyle, onClick: () => {
+                        if (!this.state.open) {
+                            this.loadDetails().catch(console.error);
+                            this.setState({ open: true });
+                        }
+                    }, color: "primary" },
+                    react_1.default.createElement(icons_material_1.MoreVert, null)) : null),
+            react_1.default.createElement("div", { style: statusStyle }, status.map((s, i) => react_1.default.createElement(DeviceStatus_1.default, { key: i, status: s }))),
+            react_1.default.createElement("div", { style: bodyStyle },
+                react_1.default.createElement(material_1.Typography, { variant: "body1", style: deviceInfoStyle },
+                    react_1.default.createElement("div", { onClick: this.copyToClipboard },
+                        react_1.default.createElement("b", { style: { marginRight: 4 } }, "ID:"),
+                        this.props.device.id.replace(/.*\.\d\./, '')),
+                    this.props.device.manufacturer ? react_1.default.createElement("div", null,
                         react_1.default.createElement("b", { style: { marginRight: 4 } },
                             (0, Utils_1.getTranslation)('manufacturer'),
                             ":"),
-                        getText(device.manufacturer)) : null,
-                    device.model ? react_1.default.createElement("div", null,
+                        getText(this.props.device.manufacturer)) : null,
+                    this.props.device.model ? react_1.default.createElement("div", null,
                         react_1.default.createElement("b", { style: { marginRight: 4 } },
                             (0, Utils_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);
+                        getText(this.props.device.model)) : null),
+                !!((_a = this.props.device.actions) === null || _a === void 0 ? void 0 : _a.length) && react_1.default.createElement("div", { style: {
+                        flex: 1,
+                        position: 'relative',
+                        display: 'flex',
+                        gap: 8,
+                        paddingBottom: 5,
+                        height: 34,
+                        paddingLeft: 10,
+                        paddingRight: 10,
+                    } },
+                    this.renderActions(),
+                    react_1.default.createElement("div", { style: { flexGrow: 1 } }),
+                    this.renderControls())),
+            this.renderDialog(),
+            this.renderControlDialog());
+    }
+    render() {
+        if (this.props.smallCards) {
+            return this.renderSmall();
+        }
+        return this.renderBig();
+    }
 }
 exports.default = DeviceCard;

package/DeviceControl.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@ interface DeviceControlProps {
     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;

package/DeviceControl.js CHANGED Viewed

@@ -44,7 +44,7 @@ class DeviceControl extends react_1.Component {
             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) {
+                if ((newState === null || newState === void 0 ? void 0 : newState.ts) && (!this.state.ts || newState.ts > this.state.ts)) {
                     this.setState({
                         value: newState.val,
                         ts: newState.ts,
@@ -68,8 +68,8 @@ class DeviceControl extends react_1.Component {
         }
     }
     static getDerivedStateFromProps(props, state) {
-        var _a;
-        if (((_a = props.control.state) === null || _a === void 0 ? void 0 : _a.ts) > state.ts) {
+        var _a, _b;
+        if (((_a = props.control.state) === null || _a === void 0 ? void 0 : _a.ts) && (!state.ts || ((_b = props.control.state) === null || _b === void 0 ? void 0 : _b.ts) > state.ts)) {
             return {
                 value: props.control.state.val,
                 ts: props.control.state.ts,
@@ -79,7 +79,7 @@ class DeviceControl extends react_1.Component {
     }
     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) {
+        if ((result === null || result === void 0 ? void 0 : result.ts) && (!this.state.ts || (result === null || result === void 0 ? void 0 : result.ts) > this.state.ts)) {
             this.setState({
                 value: result.val,
                 ts: result.ts,
@@ -90,14 +90,14 @@ class DeviceControl extends react_1.Component {
         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.Fab, { disabled: this.props.disabled, title: tooltip, onClick: () => this.sendControl(this.props.deviceId, this.props.control, true) }, icon);
         }
-        return react_1.default.createElement(material_1.Button, { title: tooltip, onClick: () => this.sendControl(this.props.deviceId, this.props.control, true), startIcon: icon }, this.props.control.label);
+        return react_1.default.createElement(material_1.Button, { disabled: this.props.disabled, title: tooltip, onClick: () => this.sendControl(this.props.deviceId, this.props.control, true), startIcon: icon }, this.props.control.label);
     }
     renderSwitch() {
         const tooltip = (0, Utils_1.getTranslation)(this.props.control.description);
         // const icon = renderIcon(this.props.control, this.props.colors, this.state.value);
-        return react_1.default.createElement(material_1.Switch, { title: tooltip, checked: this.state.value, onChange: e => this.sendControl(this.props.deviceId, this.props.control, e.target.checked) });
+        return react_1.default.createElement(material_1.Switch, { disabled: this.props.disabled, title: tooltip, checked: this.state.value, onChange: e => this.sendControl(this.props.deviceId, this.props.control, e.target.checked) });
     }
     getColor() {
         let color;
@@ -126,9 +126,9 @@ class DeviceControl extends react_1.Component {
         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.Fab, { disabled: this.props.disabled, size: "small", title: tooltip, color: color === this.props.colors.primary ? 'primary' : (color === this.props.colors.secondary ? 'secondary' : undefined), style: color === this.props.colors.primary || color === this.props.colors.secondary ? undefined : { color }, onClick: () => this.sendControl(this.props.deviceId, this.props.control, !this.state.value) }, icon);
         }
-        return react_1.default.createElement(material_1.Button, { 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);
+        return react_1.default.createElement(material_1.Button, { disabled: this.props.disabled, title: tooltip, color: color === this.props.colors.primary ? 'primary' : (color === this.props.colors.secondary ? 'secondary' : undefined), style: color === this.props.colors.primary || color === this.props.colors.secondary ? undefined : { color }, onClick: () => this.sendControl(this.props.deviceId, this.props.control, !this.state.value), startIcon: icon }, this.props.control.label);
     }
     render() {
         if (this.props.control.type === 'button') {

package/DeviceList.d.ts CHANGED Viewed

@@ -6,7 +6,8 @@ interface DeviceListProps extends CommunicationProps {
     filter?: string;
     embedded?: boolean;
     title?: string;
-    style: React.CSSProperties;
+    style?: React.CSSProperties;
+    smallCards?: boolean;
 }
 interface DeviceListState extends CommunicationState {
     devices: DeviceInfo[];

package/DeviceList.js CHANGED Viewed

@@ -66,7 +66,6 @@ class DeviceList extends Communication_1.default {
                 'zh-cn': zh_cn_json_1.default,
             });
         }
-        // @ts-ignore
         Object.assign(this.state, {
             devices: [],
             filteredDevices: [],
@@ -76,39 +75,51 @@ class DeviceList extends Communication_1.default {
             alive: null,
         });
         this.lastPropsFilter = this.props.filter;
-        this.lastInstance = '';
+        this.lastInstance = this.props.selectedInstance;
         this.filterTimeout = null;
         this.language = adapter_react_v5_1.I18n.getLanguage();
     }
     async componentDidMount() {
-        if (!this.props.embedded) {
+        let alive = false;
+        if (this.state.alive === null) {
             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 stateAlive = await this.props.socket.getState(`system.adapter.${this.props.selectedInstance}.alive`);
+                if (stateAlive === null || stateAlive === void 0 ? void 0 : stateAlive.val) {
+                    alive = true;
                 }
-                const instanceInfo = await this.loadInstanceInfos();
-                this.setState({ alive: true, instanceInfo });
             }
             catch (error) {
                 console.error(error);
-                this.setState({ alive: false });
             }
+            this.setState({ alive }, () => this.props.socket.subscribeState(`system.adapter.${this.props.selectedInstance}.alive`, this.aliveHandler));
+            if (!alive) {
+                return;
+            }
+        }
+        else {
+            alive = this.state.alive;
         }
-        try {
-            await this.loadData();
+        if (!this.props.embedded && alive) {
+            try {
+                const instanceInfo = await this.loadInstanceInfos();
+                this.setState({ instanceInfo });
+            }
+            catch (error) {
+                console.error(error);
+            }
         }
-        catch (error) {
-            console.error(error);
+        if (alive) {
+            try {
+                await this.loadData();
+            }
+            catch (error) {
+                console.error(error);
+            }
         }
     }
     componentWillUnmount() {
-        if (!this.props.embedded) {
-            this.props.socket.unsubscribeState(`system.adapter.${this.props.selectedInstance}.alive`, this.aliveHandler);
-        }
+        this.props.socket.unsubscribeState(`system.adapter.${this.props.selectedInstance}.alive`, this.aliveHandler);
     }
     /**
     * Load devices
@@ -176,7 +187,7 @@ class DeviceList extends Communication_1.default {
                 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 }));
+            list = this.state.filteredDevices.map(device => react_1.default.createElement(DeviceCard_1.default, { alive: !!this.state.alive, 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.embedded) {
             return list;

package/README.md CHANGED Viewed

@@ -20,6 +20,12 @@ render() {
 -->
 ## Changelog
+### 0.0.5 (2023-12-14)
+* (bluefox) Added alive flag
+### 0.0.4 (2023-12-12)
+* (bluefox) return the style of big cards
 ### 0.0.3 (2023-12-12)
 * (bluefox) initial commit

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@iobroker/dm-gui-components",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "ReactJS components to develop admin interface for ioBroker device manager.",
   "author": {
     "name": "Jey Cee",
@@ -36,8 +36,8 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@iobroker/adapter-react-v5": "^4.7.13",
-    "@types/react": "^18.2.43",
+    "@iobroker/adapter-react-v5": "^4.7.15",
+    "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.17",
     "eslint": "^8.55.0",
     "eslint-config-airbnb": "^19.0.4",