@iobroker/adapter-react-v5 0.0.2 → 0.1.0

package/Components/ObjectBrowser.js

@@ -13,6 +13,10 @@ var _copyToClipboard = _interopRequireDefault(require("./copy-to-clipboard"));
 
 var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
+var _styles = require("@mui/material/styles");
+
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
+
 var _reactInlinesvg = _interopRequireDefault(require("react-inlinesvg"));
 
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
@@ -119,6 +123,10 @@ var _LooksOne = _interopRequireDefault(require("@mui/icons-material/LooksOne"));
 
 var _RoomService = _interopRequireDefault(require("@mui/icons-material/RoomService"));
 
+var _Error = _interopRequireDefault(require("@mui/icons-material/Error"));
+
+var _WifiOff = _interopRequireDefault(require("@mui/icons-material/WifiOff"));
+
 var _IconExpert = _interopRequireDefault(require("../icons/IconExpert"));
 
 var _IconAdapter = _interopRequireDefault(require("../icons/IconAdapter"));
@@ -163,18 +171,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
@@ -205,12 +201,37 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function useWidth() {
+  var theme = (0, _styles.useTheme)();
+
+  var keys = _toConsumableArray(theme.breakpoints.keys).reverse();
+
+  return keys.reduce(function (output, key) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var matches = (0, _useMediaQuery["default"])(theme.breakpoints.up(key));
+    return !output && matches ? key : output;
+  }, null) || 'xs';
+} // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
+
+
 var withWidth = function withWidth() {
   return function (WrappedComponent) {
     return function (props) {
+      var width = useWidth();
       return /*#__PURE__*/_react["default"].createElement(WrappedComponent, _extends({}, props, {
-        width: "xs"
+        width: width
       }));
     };
   };
@@ -222,6 +243,12 @@ var ITEM_LEVEL = 16;
 var SMALL_BUTTON_SIZE = 20;
 var COLOR_NAME_SYSTEM = '#ff6d69';
 var COLOR_NAME_SYSTEM_ADAPTER = '#5773ff';
+var COLOR_NAME_ERROR_DARK = '#ff413c';
+var COLOR_NAME_ERROR_LIGHT = '#86211f';
+var COLOR_NAME_CONNECTED_DARK = '#57ff45';
+var COLOR_NAME_CONNECTED_LIGHT = '#098c04';
+var COLOR_NAME_DISCONNECTED_DARK = '#f3ad11';
+var COLOR_NAME_DISCONNECTED_LIGHT = '#6c5008';
 
 var styles = function styles(theme) {
   return {
@@ -318,7 +345,7 @@ var styles = function styles(theme) {
       paddingTop: 0,
       //theme.spacing(1),
       paddingLeft: 0,
-      width: "calc(100% - ".concat(theme.spacing(1), ")"),
+      width: "calc(100% - ".concat(theme.spacing(1), "px)"),
       height: "calc(100% - 38px)",
       overflow: 'auto'
     },
@@ -330,7 +357,7 @@ var styles = function styles(theme) {
       userSelect: 'none',
       width: '100%',
       '&:hover': {
-        background: "".concat(theme.palette.primary.main, " !important"),
+        background: "".concat(theme.palette.mode === 'dark' ? theme.palette.primary.dark : theme.palette.primary.light, " !important"),
         color: _Utils["default"].invertColor(theme.palette.primary.main, true)
       },
       whiteSpace: 'nowrap',
@@ -431,7 +458,14 @@ var styles = function styles(theme) {
       fontSize: 14,
       marginLeft: 5,
       overflow: 'hidden',
-      textOverflow: 'ellipsis'
+      textOverflow: 'ellipsis',
+      position: 'relative',
+      '& .copyButton': {
+        display: 'none'
+      },
+      '&:hover .copyButton': {
+        display: 'block'
+      }
     },
     cellIdAlias: {
       fontStyle: 'italic',
@@ -523,6 +557,9 @@ var styles = function styles(theme) {
         display: 'block'
       }
     },
+    cellValueFile: {
+      color: '#2837b9'
+    },
     cellValueTooltipTitle: {
       fontStyle: 'italic',
       width: 100,
@@ -642,7 +679,7 @@ var styles = function styles(theme) {
       opacity: 0.5
     },
     itemSelected: {
-      background: "".concat(theme.palette.mode === 'dark' ? theme.palette.primary.light : theme.palette.primary.dark, " !important"),
+      background: "".concat(theme.palette.primary.main, " !important"),
       color: "".concat(_Utils["default"].invertColor(theme.palette.primary.main, true), " !important")
     },
     header: {
@@ -758,6 +795,30 @@ var styles = function styles(theme) {
       right: 0,
       borderRadius: 20,
       backgroundColor: theme.palette.background["default"]
+    },
+    iconDeviceConnected: {
+      color: theme.palette.mode === 'dark' ? COLOR_NAME_CONNECTED_DARK : COLOR_NAME_CONNECTED_LIGHT,
+      opacity: 0.8,
+      position: 'absolute',
+      top: 4,
+      right: 32,
+      width: 20
+    },
+    iconDeviceDisconnected: {
+      color: theme.palette.mode === 'dark' ? COLOR_NAME_DISCONNECTED_DARK : COLOR_NAME_DISCONNECTED_LIGHT,
+      opacity: 0.8,
+      position: 'absolute',
+      top: 4,
+      right: 32,
+      width: 20
+    },
+    iconDeviceError: {
+      color: theme.palette.mode === 'dark' ? COLOR_NAME_ERROR_DARK : COLOR_NAME_ERROR_LIGHT,
+      opacity: 0.8,
+      position: 'absolute',
+      top: 4,
+      right: 50,
+      width: 20
     }
   };
 };
@@ -1395,17 +1456,51 @@ function formatValue(id, state, obj, texts, dateFormat, isFloatComma) {
 
   var isCommon = obj.common;
   var valText = {};
-  var v = !state || state.val === null ? '(null)' : state.val === undefined ? '[undef]' : state.val;
+  var v = isCommon && isCommon.type === 'file' ? '[file]' : !state || state.val === null ? '(null)' : state.val === undefined ? '[undef]' : state.val;
 
   var type = _typeof(v);
 
   if (isCommon && isCommon.role && typeof isCommon.role === 'string' && isCommon.role.match(/^value\.time|^date/)) {
-    if (typeof v === 'string' && v.length === 13) {
-      // warning, this solution only works till Nov 20 2286 18:46:39CET
-      v = parseInt(v, 10);
-    }
+    if (v && typeof v === 'string') {
+      if (v.length === 13) {
+        // (length of "1647597254924") warning, this solution only works till Nov 20 2286 18:46:39CET
+        v = new Date(parseInt(v, 10)).toString();
+      } else if (v.length === 10) {
+        // YYYY.MM.DD
+        var parts = v.split(/[-.]/);
+
+        if (parts.length === 3) {
+          if (parts[0].length === 4) {
+            // YYYY.MM.DD
+            v = new Date(parseInt(parts[0], 10), parseInt(parts[1], 10) + 1, parseInt(parts[2], 10));
+          } else if (parts[0].length === 4) {
+            // DD.MM.YYYY
+            v = new Date(parseInt(parts[2], 10), parseInt(parts[1], 10) + 1, parseInt(parts[0], 10));
+          }
+        } else {
+          v = new Date(v).toString(); // Let the browser convert it somehow
+        }
+      } else if (v.length === 8) {
+        // YY.MM.DD
+        var _parts2 = v.split(/[-.]/);
 
-    v = v ? new Date(v).toString() : v;
+        if (_parts2.length === 3) {
+          v = new Date(parseInt(_parts2[0], 10), parseInt(_parts2[1], 10) + 1, parseInt(_parts2[2], 10));
+        } else {
+          v = new Date(v).toString(); // Let the browser convert it somehow
+        }
+      } else {
+        v = new Date(v).toString(); // Let the browser convert it somehow
+      }
+    } else {
+      if (v === null || v === 'null') {
+        v = 'null';
+      } else if (v === undefined) {
+        v = 'undefined';
+      } else {
+        v = v ? new Date(v).toString() : v;
+      }
+    }
   } else {
     if (type === 'number') {
       v = Math.round(v * 100000000) / 100000000; // remove 4.00000000000000001
@@ -1518,7 +1613,7 @@ function getSelectIdIcon(objects, id, imagePrefix) {
     // if not BASE64
     if (!aIcon.startsWith('data:image/')) {
       if (aIcon.includes('.')) {
-        src = imagePrefix + '/adapter/' + objects[_id_].common.name + '/' + aIcon;
+        src = "".concat(imagePrefix, "/adapter/").concat(objects[_id_].common.name, "/").concat(aIcon);
       } else if (aIcon && aIcon.length < 3) {
         return aIcon; // utf-8
       } else {
@@ -1547,7 +1642,7 @@ function getSelectIdIcon(objects, id, imagePrefix) {
             var instance;
 
             if (objects[id].type === 'instance' || objects[id].type === 'adapter') {
-              src = imagePrefix + '/adapter/' + common.name + '/' + cIcon;
+              src = "".concat(imagePrefix, "/adapter/").concat(common.name, "/").concat(cIcon);
             } else if (id && id.startsWith('system.adapter.')) {
               instance = id.split('.', 3);
 
@@ -1557,7 +1652,7 @@ function getSelectIdIcon(objects, id, imagePrefix) {
                 instance[2] += '/' + cIcon;
               }
 
-              src = imagePrefix + '/adapter/' + instance[2];
+              src = "".concat(imagePrefix, "/adapter/").concat(instance[2]);
             } else {
               instance = id.split('.', 2);
 
@@ -1567,7 +1662,7 @@ function getSelectIdIcon(objects, id, imagePrefix) {
                 instance[0] += '/' + cIcon;
               }
 
-              src = imagePrefix + '/adapter/' + instance[0];
+              src = "".concat(imagePrefix, "/adapter/").concat(instance[0]);
             }
           } else if (aIcon && aIcon.length < 3) {
             return aIcon; // utf-8
@@ -1827,8 +1922,6 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
             return;
           }
 
-          ;
-
           if (event.id.startsWith('system.adapter.') && event.obj && event.obj.type === 'adapter') {
             var columnsForAdmin = JSON.parse(JSON.stringify(_this.state.columnsForAdmin));
 
@@ -2540,6 +2633,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       scrollBarWidth: 16,
       customDialog: customDialog,
       editObjectDialog: '',
+      viewFileDialog: '',
       enumDialog: null,
       roleDialog: null,
       modalEmptyId: null,
@@ -2590,6 +2684,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       // State changed from
       ownerGroup: props.t('ra_Owner group'),
       ownerUser: props.t('ra_Owner user'),
+      deviceError: props.t('ra_Error'),
+      deviceDisconnected: props.t('ra_Disconnected'),
+      deviceConnected: props.t('ra_Connected'),
       aclOwner_read_object: props.t('ra_aclOwner_read_object'),
       aclOwner_read_state: props.t('ra_aclOwner_read_state'),
       aclOwner_write_object: props.t('ra_aclOwner_write_object'),
@@ -3257,7 +3354,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "checkUnsubscribes",
     value: function checkUnsubscribes() {
-      // Remove unused subscribed
+      // Remove unused subscriptions
       for (var i = this.subscribes.length - 1; i >= 0; i--) {
         !this.recordStates.includes(this.subscribes[i]) && this.unsubscribe(this.subscribes[i]);
       }
@@ -4258,7 +4355,8 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
     function renderColumnButtons(id, item, classes) {
       var _this27 = this,
           _item$children2,
-          _item$data$obj$common;
+          _item$data$obj$common,
+          _item$data$obj$common3;
 
       if (!item.data.obj) {
         return this.props.onObjectDelete || this.props.objectEditOfAccessControl ? /*#__PURE__*/_react["default"].createElement("div", {
@@ -4334,7 +4432,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         title: this.texts.deleteObject
       }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], {
         className: classes.cellButtonsButtonIcon
-      })) : null, this.props.objectCustomDialog && this.info.hasSomeCustoms && item.data.obj.type === 'state' ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      })) : null, this.props.objectCustomDialog && this.info.hasSomeCustoms && item.data.obj.type === 'state' && ((_item$data$obj$common3 = item.data.obj.common) === null || _item$data$obj$common3 === void 0 ? void 0 : _item$data$obj$common3.type) !== 'file' ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         className: _Utils["default"].clsx(classes.cellButtonsButton, item.data.hasCustoms && classes.cellButtonsButtonWithCustoms),
         key: "custom",
         size: "small",
@@ -4423,15 +4521,20 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderColumnValue",
     value: function renderColumnValue(id, item, classes) {
-      var _this29 = this;
+      var _item$data$obj$common4,
+          _this29 = this;
 
       if (!item.data.obj || !this.states) {
         return null;
       }
 
-      if (!this.states[id]) {
+      if (((_item$data$obj$common4 = item.data.obj.common) === null || _item$data$obj$common4 === void 0 ? void 0 : _item$data$obj$common4.type) === 'file') {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: _Utils["default"].clsx(classes.cellValueText, classes.cellValueFile)
+        }, "[file]");
+      } else if (!this.states[id]) {
         if (item.data.obj.type === 'state') {
-          this.recordStates.push(id);
+          !this.recordStates.includes(id) && this.recordStates.push(id);
           this.states[id] = {
             val: null
           };
@@ -4440,7 +4543,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
 
         return null;
       } else {
-        this.recordStates.push(id);
+        !this.recordStates.includes(id) && this.recordStates.push(id);
       }
 
       var state = this.states[id];
@@ -5020,22 +5123,13 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
     value: function renderLeaf(item, isExpanded, classes, counter) {
       var _item$data$obj,
           _this37 = this,
-          _item$data$obj2,
-          _item$data$obj2$commo,
-          _item$data$obj3,
-          _item$data$obj4,
-          _item$data$obj5,
-          _item$data$obj6,
-          _item$data$obj6$commo,
-          _item$data$obj6$commo2,
-          _item$data$obj7,
-          _item$data$obj7$commo,
-          _item$data$obj7$commo2,
+          _common$alias,
+          _common$alias2,
           _item$data,
-          _item$data$obj8,
-          _item$data$obj8$commo,
+          _item$data$common,
           _this$states$id2,
           _item$data2,
+          _item$data3,
           _this$states$id3,
           _this$states$id4,
           _this$states$id5;
@@ -5086,6 +5180,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       }
 
       var obj = item.data.obj;
+      var common = obj === null || obj === void 0 ? void 0 : obj.common;
 
       var typeImg = obj && obj.type && ITEM_IMAGES[obj.type] || /*#__PURE__*/_react["default"].createElement("div", {
         className: "itemIcon"
@@ -5114,7 +5209,12 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         className: classes.checkBox,
         checked: this.state.selected.includes(id)
       }) : null;
-      var valueEditable = !this.props.notEditable && itemType === 'state' && (this.props.expertMode || ((_item$data$obj2 = item.data.obj) === null || _item$data$obj2 === void 0 ? void 0 : (_item$data$obj2$commo = _item$data$obj2.common) === null || _item$data$obj2$commo === void 0 ? void 0 : _item$data$obj2$commo.write) !== false);
+      var valueEditable = !this.props.notEditable && itemType === 'state' && (this.props.expertMode || (common === null || common === void 0 ? void 0 : common.write) !== false);
+
+      if (this.props.objectBrowserViewFile && (common === null || common === void 0 ? void 0 : common.type) === 'file') {
+        valueEditable = true;
+      }
+
       var enumEditable = !this.props.notEditable && this.objects[id] && (this.props.expertMode || itemType === 'state' || itemType === 'channel' || itemType === 'device');
       var checkVisibleObjectType = this.state.statesView && (itemType === 'state' || itemType === 'channel' || itemType === 'device');
       var newValue = '';
@@ -5139,56 +5239,59 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         }
       }
 
-      ((_item$data$obj3 = item.data.obj) === null || _item$data$obj3 === void 0 ? void 0 : _item$data$obj3.from) && newValueTitle.push(this.texts.objectChangedFrom + ' ' + item.data.obj.from.replace(/^system\.adapter\.|^system\./, ''));
-      ((_item$data$obj4 = item.data.obj) === null || _item$data$obj4 === void 0 ? void 0 : _item$data$obj4.user) && newValueTitle.push(this.texts.objectChangedBy + ' ' + item.data.obj.user.replace(/^system\.user\./, ''));
-      ((_item$data$obj5 = item.data.obj) === null || _item$data$obj5 === void 0 ? void 0 : _item$data$obj5.ts) && newValueTitle.push(this.texts.objectChangedByUser + ' ' + _Utils["default"].formatDate(new Date(item.data.obj.ts), this.props.dateFormat));
-      var readWriteAlias = _typeof((_item$data$obj6 = item.data.obj) === null || _item$data$obj6 === void 0 ? void 0 : (_item$data$obj6$commo = _item$data$obj6.common) === null || _item$data$obj6$commo === void 0 ? void 0 : (_item$data$obj6$commo2 = _item$data$obj6$commo.alias) === null || _item$data$obj6$commo2 === void 0 ? void 0 : _item$data$obj6$commo2.id) === 'object';
-      var alias = id.startsWith('alias.') && (_item$data$obj7 = item.data.obj) !== null && _item$data$obj7 !== void 0 && (_item$data$obj7$commo = _item$data$obj7.common) !== null && _item$data$obj7$commo !== void 0 && (_item$data$obj7$commo2 = _item$data$obj7$commo.alias) !== null && _item$data$obj7$commo2 !== void 0 && _item$data$obj7$commo2.id ? readWriteAlias ? /*#__PURE__*/_react["default"].createElement("div", {
+      if (obj) {
+        obj.from && newValueTitle.push(this.texts.objectChangedFrom + ' ' + obj.from.replace(/^system\.adapter\.|^system\./, ''));
+        obj.user && newValueTitle.push(this.texts.objectChangedBy + ' ' + obj.user.replace(/^system\.user\./, ''));
+        obj.ts && newValueTitle.push(this.texts.objectChangedByUser + ' ' + _Utils["default"].formatDate(new Date(obj.ts), this.props.dateFormat));
+      }
+
+      var readWriteAlias = _typeof(common === null || common === void 0 ? void 0 : (_common$alias = common.alias) === null || _common$alias === void 0 ? void 0 : _common$alias.id) === 'object';
+      var alias = id.startsWith('alias.') && common !== null && common !== void 0 && (_common$alias2 = common.alias) !== null && _common$alias2 !== void 0 && _common$alias2.id ? readWriteAlias ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.cellIdAliasReadWriteDiv
-      }, item.data.obj.common.alias.id.read ? /*#__PURE__*/_react["default"].createElement("div", {
+      }, obj.common.alias.id.read ? /*#__PURE__*/_react["default"].createElement("div", {
         onClick: function onClick(e) {
           e.stopPropagation();
           e.preventDefault();
 
-          _this37.onSelect(item.data.obj.common.alias.id.read);
+          _this37.onSelect(obj.common.alias.id.read);
 
           setTimeout(function () {
             _this37.expandAllSelected(function () {
-              return _this37.scrollToItem(item.data.obj.common.alias.id.read);
+              return _this37.scrollToItem(obj.common.alias.id.read);
             });
           }, 100);
         },
         className: _Utils["default"].clsx(classes.cellIdAlias, classes.cellIdAliasReadWrite)
-      }, "\u2190", item.data.obj.common.alias.id.read) : null, item.data.obj.common.alias.id.write ? /*#__PURE__*/_react["default"].createElement("div", {
+      }, "\u2190", obj.common.alias.id.read) : null, obj.common.alias.id.write ? /*#__PURE__*/_react["default"].createElement("div", {
         onClick: function onClick(e) {
           e.stopPropagation();
           e.preventDefault();
 
-          _this37.onSelect(item.data.obj.common.alias.id.write);
+          _this37.onSelect(obj.common.alias.id.write);
 
           setTimeout(function () {
             _this37.expandAllSelected(function () {
-              return _this37.scrollToItem(item.data.obj.common.alias.id.write);
+              return _this37.scrollToItem(obj.common.alias.id.write);
             });
           }, 100);
         },
         className: _Utils["default"].clsx(classes.cellIdAlias, classes.cellIdAliasReadWrite)
-      }, "\u2192", item.data.obj.common.alias.id.write) : null) : /*#__PURE__*/_react["default"].createElement("div", {
+      }, "\u2192", obj.common.alias.id.write) : null) : /*#__PURE__*/_react["default"].createElement("div", {
         onClick: function onClick(e) {
           e.stopPropagation();
           e.preventDefault();
 
-          _this37.onSelect(item.data.obj.common.alias.id);
+          _this37.onSelect(obj.common.alias.id);
 
           setTimeout(function () {
             _this37.expandAllSelected(function () {
-              return _this37.scrollToItem(item.data.obj.common.alias.id);
+              return _this37.scrollToItem(obj.common.alias.id);
             });
           }, 100);
         },
         className: _Utils["default"].clsx(classes.cellIdAlias, classes.cellIdAliasAlone)
-      }, "\u2192", item.data.obj.common.alias.id) : null;
-      var checkColor = (_item$data = item.data) === null || _item$data === void 0 ? void 0 : (_item$data$obj8 = _item$data.obj) === null || _item$data$obj8 === void 0 ? void 0 : (_item$data$obj8$commo = _item$data$obj8.common) === null || _item$data$obj8$commo === void 0 ? void 0 : _item$data$obj8$commo.color;
+      }, "\u2192", obj.common.alias.id) : null;
+      var checkColor = (_item$data = item.data) === null || _item$data === void 0 ? void 0 : (_item$data$common = _item$data.common) === null || _item$data$common === void 0 ? void 0 : _item$data$common.color;
       var invertBackground = 'none';
 
       if (checkColor && !this.state.selected.includes(id)) {
@@ -5199,6 +5302,111 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         checkColor = 'inherit';
       }
 
+      var icons = [];
+
+      if (common !== null && common !== void 0 && common.statusStates) {
+        var ids = {};
+        Object.keys(common.statusStates).forEach(function (name) {
+          var _id = common.statusStates[name];
+
+          if (_id.split('.').length < 3) {
+            _id = id + '.' + _id;
+          }
+
+          ids[name] = _id;
+
+          if (!_this37.states[_id]) {
+            var _this37$objects$_id;
+
+            if (((_this37$objects$_id = _this37.objects[_id]) === null || _this37$objects$_id === void 0 ? void 0 : _this37$objects$_id.type) === 'state') {
+              !_this37.recordStates.includes(_id) && _this37.recordStates.push(_id);
+              _this37.states[_id] = {
+                val: null
+              };
+
+              _this37.subscribe(_id);
+            }
+          } else {
+            !_this37.recordStates.includes(_id) && _this37.recordStates.push(_id);
+          }
+        }); // calculate color
+        // errorId has priority
+
+        var colorSet = false;
+
+        if (common.statusStates.errorId && this.states[ids.errorId] && this.states[ids.errorId].val) {
+          checkColor = this.props.themeType === 'dark' ? COLOR_NAME_ERROR_DARK : COLOR_NAME_ERROR_LIGHT;
+          colorSet = true;
+          icons.push( /*#__PURE__*/_react["default"].createElement(_Error["default"], {
+            key: "error",
+            title: this.texts.deviceError,
+            className: this.props.classes.iconDeviceError
+          }));
+        }
+
+        if (ids.onlineId && this.states[ids.onlineId] && this.states[ids.onlineId].val !== null) {
+          if (!colorSet) {
+            if (this.states[ids.onlineId].val) {
+              checkColor = this.props.themeType === 'dark' ? COLOR_NAME_CONNECTED_DARK : COLOR_NAME_CONNECTED_LIGHT;
+              icons.push( /*#__PURE__*/_react["default"].createElement(_Wifi["default"], {
+                key: "conn",
+                title: this.texts.deviceError,
+                className: this.props.classes.iconDeviceConnected
+              }));
+            } else {
+              checkColor = this.props.themeType === 'dark' ? COLOR_NAME_DISCONNECTED_DARK : COLOR_NAME_DISCONNECTED_LIGHT;
+              icons.push( /*#__PURE__*/_react["default"].createElement(_WifiOff["default"], {
+                key: "disc",
+                title: this.texts.deviceError,
+                className: this.props.classes.iconDeviceDisconnected
+              }));
+            }
+          } else if (this.states[ids.onlineId].val) {
+            icons.push( /*#__PURE__*/_react["default"].createElement(_Wifi["default"], {
+              key: "conn",
+              title: this.texts.deviceError,
+              className: this.props.classes.iconDeviceConnected
+            }));
+          } else {
+            icons.push( /*#__PURE__*/_react["default"].createElement(_WifiOff["default"], {
+              key: "disc",
+              title: this.texts.deviceError,
+              className: this.props.classes.iconDeviceDisconnected
+            }));
+          }
+        } else if (ids.offlineId && this.states[ids.offlineId] && this.states[ids.offlineId].val !== null) {
+          if (!colorSet) {
+            if (this.states[ids.offlineId].val) {
+              checkColor = this.props.themeType === 'dark' ? COLOR_NAME_DISCONNECTED_DARK : COLOR_NAME_DISCONNECTED_LIGHT;
+              icons.push( /*#__PURE__*/_react["default"].createElement(_WifiOff["default"], {
+                key: "disc",
+                title: this.texts.deviceError,
+                className: this.props.classes.iconDeviceDisconnected
+              }));
+            } else {
+              checkColor = this.props.themeType === 'dark' ? COLOR_NAME_CONNECTED_DARK : COLOR_NAME_CONNECTED_LIGHT;
+              icons.push( /*#__PURE__*/_react["default"].createElement(_Wifi["default"], {
+                key: "conn",
+                title: this.texts.deviceError,
+                className: this.props.classes.iconDeviceConnected
+              }));
+            }
+          } else if (this.states[ids.offlineId].val) {
+            icons.push( /*#__PURE__*/_react["default"].createElement(_WifiOff["default"], {
+              key: "disc",
+              title: this.texts.deviceError,
+              className: this.props.classes.iconDeviceDisconnected
+            }));
+          } else {
+            icons.push( /*#__PURE__*/_react["default"].createElement(_Wifi["default"], {
+              key: "conn",
+              title: this.texts.deviceError,
+              className: this.props.classes.iconDeviceConnected
+            }));
+          }
+        }
+      }
+
       var q = checkVisibleObjectType ? _Utils["default"].quality2text(((_this$states$id2 = this.states[id]) === null || _this$states$id2 === void 0 ? void 0 : _this$states$id2.q) || 0).join(', ') : null;
       return /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         container: true,
@@ -5242,7 +5450,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           background: invertBackground,
           color: id === 'system' ? COLOR_NAME_SYSTEM : id === 'system.adapter' ? COLOR_NAME_SYSTEM_ADAPTER : checkColor
         }
-      }, item.data.name, alias), /*#__PURE__*/_react["default"].createElement("div", {
+      }, item.data.name, alias, icons), /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           color: checkColor,
           background: invertBackground
@@ -5266,7 +5474,16 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         style: {
           width: this.columnsVisibility.name
         }
-      }, ((_item$data2 = item.data) === null || _item$data2 === void 0 ? void 0 : _item$data2.title) || '') : null, !this.state.statesView ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, this.columnsVisibility.type ? /*#__PURE__*/_react["default"].createElement("div", {
+      }, ((_item$data2 = item.data) === null || _item$data2 === void 0 ? void 0 : _item$data2.title) || '', (_item$data3 = item.data) !== null && _item$data3 !== void 0 && _item$data3.title ? /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          color: checkColor
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_IconCopy["default"], {
+        className: _Utils["default"].clsx(classes.cellCopyButton, 'copyButton'),
+        onClick: function onClick(e) {
+          return _this37.onCopy(e, item.data.title);
+        }
+      })) : null) : null, !this.state.statesView ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, this.columnsVisibility.type ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.cellType,
         style: {
           width: this.columnsVisibility.type
@@ -5353,12 +5570,18 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         className: classes.cellValue,
         style: {
           width: this.columnsVisibility.val,
-          cursor: valueEditable ? item.data.button ? 'grab' : 'text' : 'default'
+          cursor: valueEditable ? (common === null || common === void 0 ? void 0 : common.type) === 'file' ? 'zoom-in' : item.data.button ? 'grab' : 'text' : 'default'
         },
         onClick: valueEditable ? function () {
-          if (!item.data.obj || !_this37.states) {
+          if (!obj || !_this37.states) {
             return null;
-          } // in non expert mode control button directly
+          }
+
+          if ((common === null || common === void 0 ? void 0 : common.type) === 'file') {
+            return _this37.setState({
+              viewFileDialog: id
+            });
+          } // in non-expert mode control button directly
 
 
           if (!_this37.props.expertMode && item.data.button) {
@@ -5927,11 +6150,41 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
      * @returns {JSX.Element | null}
      */
 
+  }, {
+    key: "renderViewObjectFileDialog",
+    value: function renderViewObjectFileDialog() {
+      var _this46 = this;
+
+      if (!this.state.viewFileDialog || !this.props.objectBrowserViewFile) {
+        return null;
+      }
+
+      var ObjectBrowserViewFile = this.props.objectBrowserViewFile;
+      return /*#__PURE__*/_react["default"].createElement(ObjectBrowserViewFile, {
+        key: "viewFile",
+        obj: this.objects[this.state.viewFileDialog],
+        themeType: this.props.themeType,
+        socket: this.props.socket,
+        dialogName: this.props.dialogName,
+        t: this.props.t,
+        expertMode: this.state.filter.expertMode,
+        onClose: function onClose() {
+          return _this46.setState({
+            viewFileDialog: ''
+          });
+        }
+      });
+    }
+    /**
+     * @private
+     * @returns {JSX.Element | null}
+     */
+
   }, {
     key: "renderEditValueDialog",
     value: function renderEditValueDialog() {
       var _this$objects$this$ed,
-          _this46 = this;
+          _this47 = this;
 
       if (!this.state.updateOpened || !this.props.objectBrowserValue) {
         return null;
@@ -5952,11 +6205,11 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         defaultHistory: this.defaultHistory,
         dateFormat: this.props.dateFormat,
         onClose: function onClose(res) {
-          _this46.setState({
+          _this47.setState({
             updateOpened: false
           });
 
-          res && _this46.onUpdate(res);
+          res && _this47.onUpdate(res);
         }
       });
     }
@@ -5968,7 +6221,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
      * @returns {JSX.Element}
      */
     function render() {
-      var _this47 = this;
+      var _this48 = this;
 
       this.recordStates = [];
       this.unsubscribeTimer && clearTimeout(this.unsubscribeTimer); // apply filter if changed
@@ -5983,13 +6236,13 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
 
         if (counter.count < 500 && !this.state.expandAllVisible) {
           setTimeout(function () {
-            return _this47.setState({
+            return _this48.setState({
               expandAllVisible: true
             });
           });
         } else if (counter.count >= 500 && this.state.expandAllVisible) {
           setTimeout(function () {
-            return _this47.setState({
+            return _this48.setState({
               expandAllVisible: false
             });
           });
@@ -5999,9 +6252,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       }
 
       this.unsubscribeTimer = setTimeout(function () {
-        _this47.unsubscribeTimer = null;
+        _this48.unsubscribeTimer = null;
 
-        _this47.checkUnsubscribes();
+        _this48.checkUnsubscribes();
       }, 200);
 
       if (!this.state.loaded) {
@@ -6016,7 +6269,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         }, /*#__PURE__*/_react["default"].createElement(_TabHeader["default"], null, this.getToolbar()), /*#__PURE__*/_react["default"].createElement(_TabContent["default"], null, this.renderHeader(), /*#__PURE__*/_react["default"].createElement("div", {
           className: this.props.classes.tableDiv,
           ref: this.tableRef
-        }, items)), this.renderToast(), this.renderColumnsEditCustomDialog(), this.renderColumnsSelectorDialog(), this.renderCustomDialog(), this.renderEditValueDialog(), this.renderEditObjectDialog(), this.renderEditRoleDialog(), this.renderEnumDialog(), this.renderErrorDialog(), this.renderExportDialog(), this.state.modalNewObj && this.props.modalNewObject && this.props.modalNewObject(this), this.state.modalEditOfAccess && this.props.modalEditOfAccessControl && this.props.modalEditOfAccessControl(this, this.state.modalEditOfAccessObjData));
+        }, items)), this.renderToast(), this.renderColumnsEditCustomDialog(), this.renderColumnsSelectorDialog(), this.renderCustomDialog(), this.renderEditValueDialog(), this.renderEditObjectDialog(), this.renderViewObjectFileDialog(), this.renderEditRoleDialog(), this.renderEnumDialog(), this.renderErrorDialog(), this.renderExportDialog(), this.state.modalNewObj && this.props.modalNewObject && this.props.modalNewObject(this), this.state.modalEditOfAccess && this.props.modalEditOfAccessControl && this.props.modalEditOfAccessControl(this, this.state.modalEditOfAccessObjData));
       }
     }
   }], [{
@@ -6095,6 +6348,8 @@ ObjectBrowser.propTypes = {
   objectBrowserEditObject: _propTypes["default"].object,
   objectBrowserEditRole: _propTypes["default"].object,
   // on Edit role
+  objectBrowserViewFile: _propTypes["default"].func,
+  // on view file state
   router: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].func]),
   types: _propTypes["default"].array,
   // optional ['state', 'instance', 'channel']
@@ -6103,7 +6358,7 @@ ObjectBrowser.propTypes = {
   objectsWorker: _propTypes["default"].object,
   // optional cache of objects
   filterFunc: _propTypes["default"].func,
-  // function to filter out all unneccessary objects. It cannot be used together with "types"
+  // function to filter out all unnecessary objects. It cannot be used together with "types"
   // Example for function: `obj => obj.common && obj.common.type === 'boolean'` to show only boolean states
   dragSettings: _propTypes["default"].object,
   DragWrapper: _propTypes["default"].func,