@iobroker/dm-gui-components 0.0.4 → 0.0.5

package/Communication.d.ts

@@ -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

@@ -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

@@ -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

@@ -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

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

package/DeviceCard.js

@@ -120,11 +120,11 @@ class DeviceCard extends react_1.Component {
             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, { variant: "contained", color: "primary", onClick: () => this.setState({ open: false }), autoFocus: true }, (0, Utils_1.getTranslation)('closeButtonText'))));
+                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'))));
     }
     renderControlDialog() {
         var _a;
-        if (!this.state.showControlDialog) {
+        if (!this.state.showControlDialog || !this.props.alive) {
             return null;
         }
         const colors = { primary: '#111', secondary: '#888' };
@@ -138,7 +138,7 @@ class DeviceCard extends react_1.Component {
                         zIndex: 10,
                     }, onClick: () => this.setState({ showControlDialog: false }) },
                     react_1.default.createElement(icons_material_1.Close, null))),
-            react_1.default.createElement(material_1.DialogContent, null, (_a = this.props.device.controls) === null || _a === void 0 ? void 0 : _a.map(control => react_1.default.createElement(DeviceControl_1.default, { key: control.id, control: control, socket: this.props.socket, colors: colors, deviceId: this.props.device.id, controlHandler: this.props.controlHandler, controlStateHandler: this.props.controlStateHandler }))));
+            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;
@@ -146,18 +146,18 @@ class DeviceCard extends react_1.Component {
         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, { control: firstControl, colors: colors, socket: this.props.socket, deviceId: this.props.device.id, controlHandler: this.props.controlHandler, controlStateHandler: this.props.controlStateHandler });
+            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", onClick: () => this.setState({ showControlDialog: true }) },
+            return react_1.default.createElement(material_1.Fab, { size: "small", disabled: !this.props.alive, onClick: () => this.setState({ showControlDialog: true }) },
                 react_1.default.createElement(icons_material_1.VideogameAsset, null));
         }
         return null;
     }
     renderActions() {
         var _a;
-        return ((_a = this.props.device.actions) === null || _a === void 0 ? void 0 : _a.length) ? this.props.device.actions.map(a => react_1.default.createElement(DeviceActionButton_1.default, { key: a.id, deviceId: this.props.device.id, action: a, deviceHandler: this.props.deviceHandler, refresh: this.refresh })) : null;
+        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;
@@ -288,7 +288,7 @@ class DeviceCard extends react_1.Component {
                     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, { size: "small", style: detailsButtonStyle, onClick: () => {
+                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 });
@@ -299,20 +299,17 @@ class DeviceCard extends react_1.Component {
             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", null, "ID:"),
-                        " ",
+                        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", 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", null,
+                        react_1.default.createElement("b", { style: { marginRight: 4 } },
                             (0, Utils_1.getTranslation)('model'),
                             ":"),
-                        " ",
                         getText(this.props.device.model)) : null),
                 !!((_a = this.props.device.actions) === null || _a === void 0 ? void 0 : _a.length) && react_1.default.createElement("div", { style: {
                         flex: 1,
@@ -323,7 +320,10 @@ class DeviceCard extends react_1.Component {
                         height: 34,
                         paddingLeft: 10,
                         paddingRight: 10,
-                    } }, this.renderActions())),
+                    } },
+                    this.renderActions(),
+                    react_1.default.createElement("div", { style: { flexGrow: 1 } }),
+                    this.renderControls())),
             this.renderDialog(),
             this.renderControlDialog());
     }

package/DeviceControl.d.ts

@@ -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

@@ -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

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

package/DeviceList.js

@@ -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

@@ -20,6 +20,9 @@ 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
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iobroker/dm-gui-components",
-  "version": "0.0.4",
+  "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",