@iobroker/adapter-react-v5 3.1.2 → 3.1.3

package/Components/ObjectBrowser.js

@@ -163,6 +163,8 @@ var _IconDevice = _interopRequireDefault(require("../icons/IconDevice"));
 
 var _IconDocument = _interopRequireDefault(require("../icons/IconDocument"));
 
+var _IconDocumentReadOnly = _interopRequireDefault(require("../icons/IconDocumentReadOnly"));
+
 var _IconInstance = _interopRequireDefault(require("../icons/IconInstance"));
 
 var _IconState = _interopRequireDefault(require("../icons/IconState"));
@@ -286,7 +288,8 @@ var styles = function styles(theme) {
     headerRow: {
       paddingLeft: theme.spacing(1),
       height: 38,
-      whiteSpace: 'nowrap'
+      whiteSpace: 'nowrap',
+      userSelect: 'none'
     },
     buttonClearFilter: {
       position: 'relative',
@@ -517,19 +520,6 @@ var styles = function styles(theme) {
         display: 'block'
       }
     },
-    cellValueWritable: {
-      '&:after': {
-        content: '"*"',
-        color: theme.palette.mode === 'dark' ? 'white' : 'black',
-        position: 'absolute',
-        zIndex: 1,
-        top: -6,
-        left: 0,
-        fontSize: 9,
-        width: 4,
-        height: 4
-      }
-    },
     cellValueFile: {
       color: '#2837b9'
     },
@@ -796,6 +786,39 @@ var styles = function styles(theme) {
       top: 4,
       right: 50,
       width: 20
+    },
+    resizeHandle: {
+      display: 'block',
+      position: 'absolute',
+      cursor: 'col-resize',
+      width: 7,
+      top: 2,
+      bottom: 2,
+      zIndex: 1
+    },
+    resizeHandleRight: {
+      right: 3,
+      borderRight: '2px dotted #888',
+      '&:hover': {
+        borderColor: '#ccc',
+        borderRightStyle: 'solid'
+      },
+      '&.active': {
+        borderColor: '#517ea5',
+        borderRightStyle: 'solid'
+      }
+    },
+    resizeHandleLeft: {
+      left: -4,
+      borderLeft: '2px dotted #888',
+      '&:hover': {
+        borderColor: '#ccc',
+        borderLeftStyle: 'solid'
+      },
+      '&.active': {
+        borderColor: '#517ea5',
+        borderLeftStyle: 'solid'
+      }
     }
   };
 };
@@ -894,7 +917,7 @@ function applyFilter(item, filters, lang, objects, context, counter, customFilte
 
     if (!filteredOut && !filters.expertMode) {
       filteredOut = data.id === 'system' || data.id === 'enum' || // (data.obj && data.obj.type === 'meta') ||
-      data.id.startsWith('system.') || data.id.startsWith('enum.') || data.id.startsWith('_design/') || common && common.expert;
+      data.id.startsWith('system.') || data.id.startsWith('enum.') || data.id.startsWith('_design/') || data.id.endsWith('.admin') || common && common.expert;
     }
 
     if (!filteredOut && context.id) {
@@ -1795,7 +1818,7 @@ var SCREEN_WIDTHS = {
   ///////////////
   // extra-large: 1920px
   xl: {
-    idWidth: 650,
+    idWidth: 550,
     fields: ['name', 'type', 'role', 'room', 'func', 'val', 'buttons', 'changedFrom', 'qualityCode', 'timestamp', 'lastChange'],
     widths: {
       name: 400,
@@ -2438,6 +2461,111 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         return el;
       })) : '';
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "resizerMouseMove", function (e) {
+      if (_this.resizerActiveDiv) {
+        var width;
+        var widthNext;
+
+        if (_this.resizeLeft) {
+          width = _this.resizerOldWidth - e.clientX + _this.resizerPosition;
+          widthNext = _this.resizerOldWidthNext + e.clientX - _this.resizerPosition;
+        } else {
+          width = _this.resizerOldWidth + e.clientX - _this.resizerPosition;
+          widthNext = _this.resizerOldWidthNext - e.clientX + _this.resizerPosition;
+        }
+
+        if ((!_this.resizerMin || width > _this.resizerMin) && (!_this.resizerNextMin || widthNext > _this.resizerNextMin)) {
+          _this.resizerCurrentWidths[_this.resizerActiveName] = width;
+          _this.resizerCurrentWidths[_this.resizerNextName] = widthNext;
+          _this.resizerActiveDiv.style.width = width + 'px';
+          _this.resizerNextDiv.style.width = widthNext + 'px';
+          _this.columnsVisibility[_this.resizerActiveName] = width;
+          _this.columnsVisibility[_this.resizerNextName] = widthNext;
+
+          if (_this.resizerNextName === 'nameHeader') {
+            _this.columnsVisibility['name'] = widthNext - _this.state.scrollBarWidth;
+            _this.resizerCurrentWidths['name'] = widthNext - _this.state.scrollBarWidth;
+          } else if (_this.resizerActiveName === 'nameHeader') {
+            _this.columnsVisibility['name'] = width - _this.state.scrollBarWidth;
+            _this.resizerCurrentWidths['name'] = width - _this.state.scrollBarWidth;
+          }
+
+          _this.customWidth = true;
+          _this.resizeTimeout && clearTimeout(_this.resizeTimeout);
+          _this.resizeTimeout = setTimeout(function () {
+            _this.resizeTimeout = null;
+
+            _this.forceUpdate();
+          }, 200);
+        }
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "resizerMouseUp", function () {
+      window.localStorage.setItem("".concat(_this.props.dialogName || 'App', ".table"), JSON.stringify(_this.resizerCurrentWidths));
+      _this.resizerActiveName = null;
+      _this.resizerNextName = null;
+      _this.resizerActiveDiv = null;
+      _this.resizerNextDiv = null;
+      window.removeEventListener('mousemove', _this.resizerMouseMove);
+      window.removeEventListener('mouseup', _this.resizerMouseUp);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "resizerMouseDown", function (e) {
+      if (_this.resizerActiveIndex === null || _this.resizerActiveIndex === undefined) {
+        if (!_this.storedWidths) {
+          _this.storedWidths = JSON.parse(JSON.stringify(SCREEN_WIDTHS[_this.props.width]));
+        }
+
+        _this.resizerCurrentWidths = _this.resizerCurrentWidths || {};
+        _this.resizerActiveDiv = e.target.parentNode;
+        _this.resizerActiveName = _this.resizerActiveDiv.dataset.name;
+        var i = 0;
+
+        if (e.target.dataset.left === 'true') {
+          _this.resizeLeft = true;
+          _this.resizerNextDiv = _this.resizerActiveDiv.previousElementSibling;
+
+          var handle = _this.resizerNextDiv.querySelector('.' + _this.props.classes.resizeHandle);
+
+          while (_this.resizerNextDiv && !handle && i < 10) {
+            _this.resizerNextDiv = _this.resizerNextDiv.previousElementSibling;
+            handle = _this.resizerNextDiv.querySelector('.' + _this.props.classes.resizeHandle);
+            i++;
+          }
+
+          if (handle && handle.dataset.left !== 'true') {
+            _this.resizerNextDiv = _this.resizerNextDiv.nextElementSibling;
+          }
+        } else {
+          _this.resizeLeft = false;
+          _this.resizerNextDiv = _this.resizerActiveDiv.nextElementSibling;
+          /*while (this.resizerNextDiv && !this.resizerNextDiv.querySelector('.' + this.props.classes.resizeHandle) && i < 10) {
+              this.resizerNextDiv = this.resizerNextDiv.nextElementSibling;
+              i++;
+          }*/
+        }
+
+        _this.resizerNextName = _this.resizerNextDiv.dataset.name;
+        _this.resizerMin = parseInt(_this.resizerActiveDiv.dataset.min, 10) || 0;
+        _this.resizerNextMin = parseInt(_this.resizerNextDiv.dataset.min, 10) || 0;
+        _this.resizerPosition = e.clientX;
+        _this.resizerCurrentWidths[_this.resizerActiveName] = _this.resizerActiveDiv.offsetWidth;
+        _this.resizerCurrentWidths[_this.resizerNextName] = _this.resizerNextDiv.offsetWidth;
+        _this.resizerOldWidth = _this.resizerCurrentWidths[_this.resizerActiveName];
+        _this.resizerOldWidthNext = _this.resizerCurrentWidths[_this.resizerNextName];
+        window.addEventListener('mousemove', _this.resizerMouseMove);
+        window.addEventListener('mouseup', _this.resizerMouseUp);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "resizerReset", function () {
+      _this.customWidth = false;
+      SCREEN_WIDTHS[_this.props.width] = JSON.parse(JSON.stringify(_this.storedWidths));
+
+      _this.calculateColumnsVisibility();
+
+      window.localStorage.removeItem("".concat(_this.props.dialogName || 'App', ".table"));
+
+      _this.forceUpdate();
+    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "extendObject", function (id, data) {
       return _this.props.socket.extendObject(id, data)["catch"](function (error) {
         return window.alert(error);
@@ -2553,7 +2681,13 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       foldersFirst = props.foldersFirst === undefined ? true : props.foldersFirst;
     }
 
-    var statesView = _this.props.objectStatesView ? JSON.parse(window.localStorage.getItem((props.dialogName || 'App') + '.objectStatesView')) || false : false;
+    var statesView = false;
+
+    try {
+      statesView = _this.props.objectStatesView ? JSON.parse(window.localStorage.getItem((props.dialogName || 'App') + '.objectStatesView')) || false : false;
+    } catch (error) {// ignore
+    }
+
     _this.state = {
       loaded: false,
       foldersFirst: foldersFirst,
@@ -2637,6 +2771,25 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       aclEveryone_write_state: props.t('ra_aclEveryone_write_state')
     };
     _this.levelPadding = props.levelPadding || ITEM_LEVEL;
+    var resizerCurrentWidths = window.localStorage.getItem("".concat(_this.props.dialogName || 'App', ".table"));
+
+    if (resizerCurrentWidths) {
+      try {
+        resizerCurrentWidths = JSON.parse(resizerCurrentWidths);
+        _this.storedWidths = JSON.parse(JSON.stringify(SCREEN_WIDTHS[_this.props.width]));
+        Object.keys(resizerCurrentWidths).forEach(function (id) {
+          if (id === 'id') {
+            SCREEN_WIDTHS[_this.props.width].idWidth = resizerCurrentWidths.id;
+          } else if (id === 'nameHeader') {
+            SCREEN_WIDTHS[_this.props.width].widths['name'] = resizerCurrentWidths[id];
+          } else if (SCREEN_WIDTHS[_this.props.width].widths[id] !== undefined) {
+            SCREEN_WIDTHS[_this.props.width].widths[id] = resizerCurrentWidths[id];
+          }
+        });
+        _this.customWidth = true;
+      } catch (e) {// ignore
+      }
+    }
 
     _this.calculateColumnsVisibility();
 
@@ -4558,7 +4711,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         }
       }, /*#__PURE__*/_react["default"].createElement("div", {
         style: info.style,
-        className: _Utils["default"].clsx(classes.cellValueText, obj.common && obj.common.write !== false && classes.cellValueWritable)
+        className: classes.cellValueText
       }, val));
     }
     /**
@@ -5081,9 +5234,15 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           }
         });
       } else {
-        iconFolder = /*#__PURE__*/_react["default"].createElement(_IconDocument["default"], {
-          className: classes.cellIdIconDocument
-        });
+        if (obj.common && obj.common.write === false && obj.type === 'state') {
+          iconFolder = /*#__PURE__*/_react["default"].createElement(_IconDocumentReadOnly["default"], {
+            className: classes.cellIdIconDocument
+          });
+        } else {
+          iconFolder = /*#__PURE__*/_react["default"].createElement(_IconDocument["default"], {
+            className: classes.cellIdIconDocument
+          });
+        }
       }
 
       var iconItem = null;
@@ -5648,6 +5807,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         this.columnsVisibility = {
           id: SCREEN_WIDTHS[this.props.width].idWidth,
           name: this.visibleCols.includes('name') ? WIDTHS.name || 0 : 0,
+          nameHeader: this.visibleCols.includes('name') ? WIDTHS.name || 0 : 0,
           type: this.visibleCols.includes('type') ? WIDTHS.type || 0 : 0,
           role: this.visibleCols.includes('role') ? WIDTHS.role || 0 : 0,
           room: this.visibleCols.includes('room') ? WIDTHS.room || 0 : 0,
@@ -5660,7 +5820,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           buttons: this.visibleCols.includes('buttons') ? WIDTHS.buttons || 0 : 0
         };
 
-        if (this.columnsVisibility.name) {
+        if (this.columnsVisibility.name && !this.customWidth) {
           var widthSum = this.columnsVisibility.id; // id is always visible
 
           if (this.state.statesView) {
@@ -5679,7 +5839,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           widthSum += this.columnsVisibility.buttons;
           this.columnsVisibility.name = "calc(100% - ".concat(widthSum + 5, "px)");
           this.columnsVisibility.nameHeader = "calc(100% - ".concat(widthSum + 5 + this.state.scrollBarWidth, "px)");
-        } else {
+        } else if (!this.customWidth) {
           // Calculate the with of ID
           var _widthSum = 0; // id is always visible
 
@@ -5781,14 +5941,14 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         }
       }
     }
+  }, {
+    key: "renderHeader",
+    value:
     /**
      * @private
      * @returns {JSX.Element}
      */
-
-  }, {
-    key: "renderHeader",
-    value: function renderHeader() {
+    function renderHeader() {
       var _this40 = this;
 
       var classes = this.props.classes;
@@ -5812,53 +5972,79 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.headerCell,
         style: {
-          width: this.columnsVisibility.id
-        }
-      }, this.getFilterInput('id')), this.columnsVisibility.name ? /*#__PURE__*/_react["default"].createElement("div", {
+          width: this.columnsVisibility.id,
+          position: 'relative'
+        },
+        "data-min": 240,
+        "data-name": "id"
+      }, this.getFilterInput('id'), /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes.resizeHandle + ' ' + this.props.classes.resizeHandleRight,
+        onMouseDown: this.resizerMouseDown,
+        onDoubleClick: this.resizerReset,
+        title: this.props.t('ra_Double click to reset table layout')
+      })), this.columnsVisibility.name ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.headerCell,
         style: {
           width: this.columnsVisibility.nameHeader
-        }
+        },
+        "data-min": 100,
+        "data-name": "nameHeader"
       }, this.getFilterInput('name')) : null, !this.state.statesView && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, this.columnsVisibility.type ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.headerCell,
         style: {
           width: this.columnsVisibility.type
-        }
+        },
+        "data-min": 100,
+        "data-name": "type"
       }, this.getFilterSelectType()) : null, this.columnsVisibility.role ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.headerCell,
         style: {
           width: this.columnsVisibility.role
-        }
+        },
+        "data-min": 100,
+        "data-name": "role"
       }, this.getFilterSelectRole()) : null, this.columnsVisibility.room ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.headerCell,
         style: {
           width: this.columnsVisibility.room
-        }
+        },
+        "data-min": 100,
+        "data-name": "room"
       }, this.getFilterSelectRoom()) : null, this.columnsVisibility.func ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.headerCell,
         style: {
           width: this.columnsVisibility.func
-        }
+        },
+        "data-min": 100,
+        "data-name": "func"
       }, this.getFilterSelectFunction()) : null), this.state.statesView && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
         className: _Utils["default"].clsx(classes.headerCell, classes.headerCellValue),
         style: {
           width: this.columnsVisibility.changedFrom
-        }
+        },
+        "data-min": 100,
+        "data-name": "changedFrom"
       }, this.props.t('ra_Changed from')), /*#__PURE__*/_react["default"].createElement("div", {
         className: _Utils["default"].clsx(classes.headerCell, classes.headerCellValue),
         style: {
           width: this.columnsVisibility.qualityCode
-        }
+        },
+        "data-min": 100,
+        "data-name": "qualityCode"
       }, this.props.t('ra_Quality code')), /*#__PURE__*/_react["default"].createElement("div", {
         className: _Utils["default"].clsx(classes.headerCell, classes.headerCellValue),
         style: {
           width: this.columnsVisibility.timestamp
-        }
+        },
+        "data-min": 100,
+        "data-name": "timestamp"
       }, this.props.t('ra_Timestamp')), /*#__PURE__*/_react["default"].createElement("div", {
         className: _Utils["default"].clsx(classes.headerCell, classes.headerCellValue),
         style: {
           width: this.columnsVisibility.lastChange
-        }
+        },
+        "data-min": 100,
+        "data-name": "lastChange"
       }, this.props.t('ra_Last change'))), this.adapterColumns.map(function (item) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           className: _Utils["default"].clsx(classes.headerCell, classes.headerCellValue),
@@ -5866,14 +6052,25 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
             width: _this40.columnsVisibility[item.id]
           },
           title: item.adapter,
-          key: item.id
+          key: item.id,
+          "data-min": 100,
+          "data-name": item.id
         }, item.name);
       }), this.columnsVisibility.val ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _Utils["default"].clsx(classes.headerCell, classes.headerCellValue),
         style: {
-          width: this.columnsVisibility.val
-        }
-      }, this.props.t('ra_Value'), filterClearInValue) : null, this.columnsVisibility.buttons ? /*#__PURE__*/_react["default"].createElement("div", {
+          width: this.columnsVisibility.val,
+          position: 'relative'
+        },
+        "data-min": 120,
+        "data-name": "val"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes.resizeHandle + ' ' + this.props.classes.resizeHandleLeft,
+        "data-left": "true",
+        onMouseDown: this.resizerMouseDown,
+        onDoubleClick: this.resizerReset,
+        title: this.props.t('ra_Double click to reset table layout')
+      }), this.props.t('ra_Value'), filterClearInValue) : null, this.columnsVisibility.buttons ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.headerCell,
         style: {
           width: this.columnsVisibility.buttons