@iobroker/adapter-react-v5 4.10.2 → 4.11.0

package/GenericApp.js

@@ -1,1082 +1,835 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof3 = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
 });
-exports["default"] = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _socketClient = require("@iobroker/socket-client");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var Sentry = _interopRequireWildcard(require("@sentry/browser"));
-var SentryIntegrations = _interopRequireWildcard(require("@sentry/integrations"));
-var _material = require("@mui/material");
-var _iconsMaterial = require("@mui/icons-material");
-var _Prompt = _interopRequireDefault(require("./Prompt"));
-var _Theme = _interopRequireDefault(require("./Theme"));
-var _Loader = _interopRequireDefault(require("./Components/Loader"));
-var _Router2 = _interopRequireDefault(require("./Components/Router"));
-var _Utils = _interopRequireDefault(require("./Components/Utils"));
-var _SaveCloseButtons = _interopRequireDefault(require("./Components/SaveCloseButtons"));
-var _Confirm = _interopRequireDefault(require("./Dialogs/Confirm"));
-var _i18n = _interopRequireDefault(require("./i18n"));
-var _Error = _interopRequireDefault(require("./Dialogs/Error"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
  * Copyright 2018-2023 Denis Haev (bluefox) <dogafox@gmail.com>
  *
  * MIT License
  *
  **/
+const react_1 = __importDefault(require("react"));
+const socket_client_1 = require("@iobroker/socket-client");
+const Sentry = __importStar(require("@sentry/browser"));
+const SentryIntegrations = __importStar(require("@sentry/integrations"));
+const material_1 = require("@mui/material");
+const icons_material_1 = require("@mui/icons-material");
+const Prompt_1 = __importDefault(require("./Prompt"));
+const Theme_1 = __importDefault(require("./Theme"));
+const Loader_1 = __importDefault(require("./Components/Loader"));
+const Router_1 = __importDefault(require("./Components/Router"));
+const Utils_1 = __importDefault(require("./Components/Utils"));
+const SaveCloseButtons_1 = __importDefault(require("./Components/SaveCloseButtons"));
+const Confirm_1 = __importDefault(require("./Dialogs/Confirm"));
+const i18n_1 = __importDefault(require("./i18n"));
+const Error_1 = __importDefault(require("./Dialogs/Error"));
 // import './index.css';
-var cssStyle = "\nhtml {\n    height: 100%;\n}\n\nbody {\n    margin: 0;\n    padding: 0;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n}\n\n/* scrollbar */\n::-webkit-scrollbar-track {\n    background-color: #ccc;\n    border-radius: 5px;\n}\n\n::-webkit-scrollbar {\n    width: 5px;\n    height: 5px;\n    background-color: #ccc;\n}\n\n::-webkit-scrollbar-thumb {\n    background-color: #575757;\n    border-radius: 5px;\n}\n\n#root {\n    height: 100%;\n}\n\n.App {\n    height: 100%;\n}\n\n@keyframes glow {\n    from {\n        background-color: initial;\n    }\n    to {\n        background-color: #58c458;\n    }\n}\n";
-
-// legacy and could be deleted
-if (!window.localStorage) {
-  window.localStorage = {
-    getItem: function getItem() {
-      return null;
-    },
-    setItem: function setItem() {
-      return null;
-    }
-  };
+const cssStyle = `
+html {
+    height: 100%;
 }
 
-/**
- * @extends {Router<import('./types').GenericAppProps, import('./types').GenericAppState>}
- */
-var GenericApp = /*#__PURE__*/function (_Router) {
-  (0, _inherits2["default"])(GenericApp, _Router);
-  /**
-   * @param {import('./types').GenericAppProps} props
-   * @param {import('./types').GenericAppSettings | undefined} settings
-   */
-  function GenericApp(props, settings) {
-    var _ref, _settings$instance;
-    var _this;
-    (0, _classCallCheck2["default"])(this, GenericApp);
-    var ConnectionClass = props.Connection || settings.Connection || _socketClient.Connection;
-    // const ConnectionClass = props.Connection === 'admin' || settings.Connection = 'admin' ? AdminConnection : (props.Connection || settings.Connection || Connection);
+body {
+    margin: 0;
+    padding: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
 
-    if (!window.document.getElementById('generic-app-iobroker-component')) {
-      var style = window.document.createElement('style');
-      style.setAttribute('id', 'generic-app-iobroker-component');
-      style.innerHTML = cssStyle;
-      window.document.head.appendChild(style);
-    }
+/* scrollbar */
+::-webkit-scrollbar-track {
+    background-color: #ccc;
+    border-radius: 5px;
+}
 
-    // Remove `!Connection.isWeb() && window.adapterName !== 'material'` when iobroker.socket will support native ws
-    if (!ConnectionClass.isWeb() && window.io && window.location.port === '3000') {
-      try {
-        var io = new window.SocketClient();
-        delete window.io;
-        window.io = io;
-      } catch (e) {
-        // ignore
-      }
-    }
-    _this = _callSuper(this, GenericApp, [props]);
-    /**
-     * @type {import('@iobroker/socket-client').Connection | import('@iobroker/socket-client').AdminConnection}
-     */
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "socket", void 0);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSystemConfigChanged", function (id, obj) {
-      if (obj && id === 'system.config') {
-        var _obj$common;
-        if (_this.socket.systemLang !== (obj === null || obj === void 0 ? void 0 : obj.common.language)) {
-          _this.socket.systemLang = (obj === null || obj === void 0 ? void 0 : obj.common.language) || 'en';
-          _i18n["default"].setLanguage(_this.socket.systemLang);
-        }
-        if (_this._systemConfig.expertMode !== !!(obj !== null && obj !== void 0 && (_obj$common = obj.common) !== null && _obj$common !== void 0 && _obj$common.expertMode)) {
-          _this._systemConfig = (obj === null || obj === void 0 ? void 0 : obj.common) || {};
-          _this.setState({
-            expertMode: _this.getExpertMode()
-          });
-        } else {
-          _this._systemConfig = (obj === null || obj === void 0 ? void 0 : obj.common) || {};
-        }
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onReceiveMessage", function (message) {
-      if (message !== null && message !== void 0 && message.data) {
-        if (message.data === 'updateTheme') {
-          var newThemeName = _Utils["default"].getThemeName();
-          _Utils["default"].setThemeName(_Utils["default"].getThemeName());
-          var newTheme = _this.createTheme(newThemeName);
-          _this.setState({
-            theme: newTheme,
-            themeName: _this.getThemeName(newTheme),
-            themeType: _this.getThemeType(newTheme)
-          }, function () {
-            _this.props.onThemeChange && _this.props.onThemeChange(newThemeName);
-            _this.onThemeChanged && _this.onThemeChanged(newThemeName);
-          });
-        } else if (message.data === 'updateExpertMode') {
-          _this.onToggleExpertMode && _this.onToggleExpertMode(_this.getExpertMode());
-        } else if (message.data !== 'chartReady') {
-          // if not "echart ready" message
-          console.debug("Received unknown message: \"".concat(JSON.stringify(message.data), "\". May be it will be processed later"));
-        }
-      }
-    });
-    /**
-     * @private
-     */
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onResize", function () {
-      _this.resizeTimer && clearTimeout(_this.resizeTimer);
-      _this.resizeTimer = setTimeout(function () {
-        _this.resizeTimer = null;
-        _this.setState({
-          width: GenericApp.getWidth()
-        });
-      }, 200);
-    });
-    (0, _Prompt["default"])();
-    var query = (window.location.search || '').replace(/^\?/, '').replace(/#.*$/, '');
-    var args = {};
-    query.trim().split('&').filter(function (t) {
-      return t.trim();
-    }).forEach(function (b) {
-      var parts = b.split('=');
-      args[parts[0]] = parts.length === 2 ? parts[1] : true;
-      if (args[parts[0]] === 'true') {
-        args[parts[0]] = true;
-      } else if (args[parts[0]] === 'false') {
-        args[parts[0]] = false;
-      }
-    });
+::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+    background-color: #ccc;
+}
 
-    // extract instance from URL
-    _this.instance = (_ref = (_settings$instance = settings === null || settings === void 0 ? void 0 : settings.instance) !== null && _settings$instance !== void 0 ? _settings$instance : props.instance) !== null && _ref !== void 0 ? _ref : args.instance !== undefined ? parseInt(args.instance, 10) || 0 : parseInt(window.location.search.slice(1), 10) || 0;
-    // extract adapter name from URL
-    var tmp = window.location.pathname.split('/');
-    _this.adapterName = (settings === null || settings === void 0 ? void 0 : settings.adapterName) || props.adapterName || window.adapterName || tmp[tmp.length - 2] || 'iot';
-    _this.instanceId = "system.adapter.".concat(_this.adapterName, ".").concat(_this.instance);
-    _this.newReact = args.newReact === true; // it is admin5
+::-webkit-scrollbar-thumb {
+    background-color: #575757;
+    border-radius: 5px;
+}
 
-    var location = _Router2["default"].getLocation();
-    location.tab = location.tab || (window._localStorage || window.localStorage).getItem("".concat(_this.adapterName, "-adapter")) || '';
-    var themeInstance = _this.createTheme();
-    _this.state = {
-      selectedTab: (window._localStorage || window.localStorage).getItem("".concat(_this.adapterName, "-adapter")) || '',
-      selectedTabNum: -1,
-      "native": {},
-      errorText: '',
-      changed: false,
-      connected: false,
-      loaded: false,
-      isConfigurationError: '',
-      expertMode: false,
-      toast: '',
-      theme: themeInstance,
-      themeName: _this.getThemeName(themeInstance),
-      themeType: _this.getThemeType(themeInstance),
-      bottomButtons: (settings && settings.bottomButtons) === false ? false : (props === null || props === void 0 ? void 0 : props.bottomButtons) !== false,
-      width: GenericApp.getWidth(),
-      confirmClose: false,
-      _alert: false,
-      _alertType: 'info',
-      _alertMessage: ''
-    };
+#root {
+    height: 100%;
+}
 
-    // init translations
-    var translations = {
-      en: require('./i18n/en.json'),
-      de: require('./i18n/de.json'),
-      ru: require('./i18n/ru.json'),
-      pt: require('./i18n/pt.json'),
-      nl: require('./i18n/nl.json'),
-      fr: require('./i18n/fr.json'),
-      it: require('./i18n/it.json'),
-      es: require('./i18n/es.json'),
-      pl: require('./i18n/pl.json'),
-      uk: require('./i18n/uk.json'),
-      'zh-cn': require('./i18n/zh-cn.json')
-    };
+.App {
+    height: 100%;
+}
 
-    // merge together
-    if (settings && settings.translations) {
-      Object.keys(settings.translations).forEach(function (lang) {
-        return translations[lang] = Object.assign(translations[lang], settings.translations[lang]);
-      });
-    } else if (props.translations) {
-      Object.keys(props.translations).forEach(function (lang) {
-        return translations[lang] = Object.assign(translations[lang], props.translations[lang]);
-      });
+@keyframes glow {
+    from {
+        background-color: initial;
     }
-    _i18n["default"].setTranslations(translations);
-    _this.savedNative = {}; // to detect if the config changed
-
-    _this.encryptedFields = props.encryptedFields || (settings === null || settings === void 0 ? void 0 : settings.encryptedFields) || [];
-    _this.sentryDSN = settings && settings.sentryDSN || props.sentryDSN;
-    if (window.socketUrl) {
-      if (window.socketUrl.startsWith(':')) {
-        window.socketUrl = "".concat(window.location.protocol, "//").concat(window.location.hostname).concat(window.socketUrl);
-      } else if (!window.socketUrl.startsWith('http://') && !window.socketUrl.startsWith('https://')) {
-        window.socketUrl = "".concat(window.location.protocol, "//").concat(window.socketUrl);
-      }
+    to {
+        background-color: #58c458;
     }
-    _this.alerDialogRendered = false;
-    window.oldAlert = window.alert;
-    window.alert = function (message) {
-      if (!_this.alerDialogRendered) {
-        window.oldAlert(message);
-        return;
-      }
-      if (message && message.toString().toLowerCase().includes('error')) {
-        console.error(message);
-        _this.showAlert(message.toString(), 'error');
-      } else {
-        console.log(message);
-        _this.showAlert(message.toString(), 'info');
-      }
-    };
-    _this.socket = new ConnectionClass(_objectSpread(_objectSpread({}, (props === null || props === void 0 ? void 0 : props.socket) || (settings === null || settings === void 0 ? void 0 : settings.socket)), {}, {
-      name: _this.adapterName,
-      doNotLoadAllObjects: settings === null || settings === void 0 ? void 0 : settings.doNotLoadAllObjects,
-      onProgress: function onProgress(progress) {
-        if (progress === _socketClient.PROGRESS.CONNECTING) {
-          _this.setState({
-            connected: false
-          });
-        } else if (progress === _socketClient.PROGRESS.READY) {
-          _this.setState({
-            connected: true
-          });
-        } else {
-          _this.setState({
-            connected: true
-          });
+}
+`;
+class GenericApp extends Router_1.default {
+    /**
+     * @param {import('./types').GenericAppProps} props
+     * @param {import('./types').GenericAppSettings | undefined} settings
+     */
+    constructor(props, settings) {
+        var _a, _b;
+        const ConnectionClass = (props.Connection || (settings === null || settings === void 0 ? void 0 : settings.Connection) || socket_client_1.Connection);
+        // const ConnectionClass = props.Connection === 'admin' || settings.Connection = 'admin' ? AdminConnection : (props.Connection || settings.Connection || Connection);
+        if (!window.document.getElementById('generic-app-iobroker-component')) {
+            const style = window.document.createElement('style');
+            style.setAttribute('id', 'generic-app-iobroker-component');
+            style.innerHTML = cssStyle;
+            window.document.head.appendChild(style);
         }
-      },
-      onReady: function onReady( /* objects, scripts */
-      ) {
-        _i18n["default"].setLanguage(_this.socket.systemLang);
-
-        // subscribe because of language and expert mode
-        _this.socket.subscribeObject('system.config', _this.onSystemConfigChanged).then(function () {
-          return _this.getSystemConfig();
-        }).then(function (obj) {
-          _this._secret = typeof obj !== 'undefined' && obj["native"] && obj["native"].secret || 'Zgfr56gFe87jJOM';
-          _this._systemConfig = (obj === null || obj === void 0 ? void 0 : obj.common) || {};
-          return _this.socket.getObject(_this.instanceId);
-        }).then( /*#__PURE__*/function () {
-          var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(instanceObj) {
-            var _yield$_this$socket$g;
-            var waitPromise, sentryPluginEnabled, sentryEnabled;
-            return _regenerator["default"].wrap(function _callee$(_context) {
-              while (1) switch (_context.prev = _context.next) {
-                case 0:
-                  _context.next = 2;
-                  return _this.socket.getState("".concat(_this.instanceId, ".plugins.sentry.enabled"));
-                case 2:
-                  _context.t1 = _yield$_this$socket$g = _context.sent;
-                  _context.t0 = _context.t1 === null;
-                  if (_context.t0) {
-                    _context.next = 6;
-                    break;
-                  }
-                  _context.t0 = _yield$_this$socket$g === void 0;
-                case 6:
-                  if (!_context.t0) {
-                    _context.next = 10;
-                    break;
-                  }
-                  _context.t2 = void 0;
-                  _context.next = 11;
-                  break;
-                case 10:
-                  _context.t2 = _yield$_this$socket$g.val;
-                case 11:
-                  sentryPluginEnabled = _context.t2;
-                  sentryEnabled = sentryPluginEnabled !== false && _this._systemConfig.diag !== 'none' && (instanceObj === null || instanceObj === void 0 ? void 0 : instanceObj.common) && instanceObj.common.name && instanceObj.common.version && !instanceObj.common.disableDataReporting && window.location.host !== 'localhost:3000'; // activate sentry plugin
-                  if (!_this.sentryStarted && _this.sentryDSN && sentryEnabled) {
-                    _this.sentryStarted = true;
-                    Sentry.init({
-                      dsn: _this.sentryDSN,
-                      release: "iobroker.".concat(instanceObj.common.name, "@").concat(instanceObj.common.version),
-                      integrations: [new SentryIntegrations.Dedupe()]
+        // Remove `!Connection.isWeb() && window.adapterName !== 'material'` when iobroker.socket will support native ws
+        if (!GenericApp.isWeb() && window.io && window.location.port === '3000') {
+            try {
+                const io = new window.SocketClient();
+                delete window.io;
+                window.io = io;
+            }
+            catch (e) {
+                // ignore
+            }
+        }
+        super(props);
+        this.common = null;
+        this.sentryStarted = false;
+        this.sentryInited = false;
+        this.resizeTimer = null;
+        this.onSystemConfigChanged = (id, obj) => {
+            var _a, _b;
+            if (obj && id === 'system.config') {
+                if (this.socket.systemLang !== (obj === null || obj === void 0 ? void 0 : obj.common.language)) {
+                    this.socket.systemLang = (obj === null || obj === void 0 ? void 0 : obj.common.language) || 'en';
+                    i18n_1.default.setLanguage(this.socket.systemLang);
+                }
+                if (((_a = this._systemConfig) === null || _a === void 0 ? void 0 : _a.expertMode) !== !!((_b = obj === null || obj === void 0 ? void 0 : obj.common) === null || _b === void 0 ? void 0 : _b.expertMode)) {
+                    this._systemConfig = (obj === null || obj === void 0 ? void 0 : obj.common) || {};
+                    this.setState({ expertMode: this.getExpertMode() });
+                }
+                else {
+                    this._systemConfig = (obj === null || obj === void 0 ? void 0 : obj.common) || {};
+                }
+            }
+        };
+        this.onReceiveMessage = (message) => {
+            if (message === null || message === void 0 ? void 0 : message.data) {
+                if (message.data === 'updateTheme') {
+                    const newThemeName = Utils_1.default.getThemeName();
+                    Utils_1.default.setThemeName(Utils_1.default.getThemeName());
+                    const newTheme = this.createTheme(newThemeName);
+                    this.setState({
+                        theme: newTheme,
+                        themeName: this.getThemeName(newTheme),
+                        themeType: this.getThemeType(newTheme),
+                    }, () => {
+                        this.props.onThemeChange && this.props.onThemeChange(newThemeName);
+                        this.onThemeChanged && this.onThemeChanged(newThemeName);
                     });
-                    console.log('Sentry initialized');
-                  }
-
-                  // read UUID and init sentry with it.
-                  // for backward compatibility it will be processed separately from above logic: some adapters could still have this.sentryDSN as undefined
-                  if (!_this.sentryInited && sentryEnabled) {
-                    _this.sentryInited = true;
-                    waitPromise = _this.socket.getObject('system.meta.uuid').then(function (uuidObj) {
-                      if (uuidObj && uuidObj["native"] && uuidObj["native"].uuid) {
-                        Sentry.configureScope(function (scope) {
-                          return scope.setUser({
-                            id: uuidObj["native"].uuid
-                          });
+                }
+                else if (message.data === 'updateExpertMode') {
+                    this.onToggleExpertMode && this.onToggleExpertMode(this.getExpertMode());
+                }
+                else if (message.data !== 'chartReady') { // if not "echart ready" message
+                    console.debug(`Received unknown message: "${JSON.stringify(message.data)}". May be it will be processed later`);
+                }
+            }
+        };
+        /**
+         * @private
+         */
+        this.onResize = () => {
+            this.resizeTimer && clearTimeout(this.resizeTimer);
+            this.resizeTimer = setTimeout(() => {
+                this.resizeTimer = null;
+                this.setState({ width: GenericApp.getWidth() });
+            }, 200);
+        };
+        (0, Prompt_1.default)();
+        const query = (window.location.search || '').replace(/^\?/, '').replace(/#.*$/, '');
+        const args = {};
+        query.trim().split('&').filter(t => t.trim()).forEach(b => {
+            const parts = b.split('=');
+            args[parts[0]] = parts.length === 2 ? parts[1] : true;
+            if (args[parts[0]] === 'true') {
+                args[parts[0]] = true;
+            }
+            else if (args[parts[0]] === 'false') {
+                args[parts[0]] = false;
+            }
+        });
+        // extract instance from URL
+        this.instance = (_b = (_a = settings === null || settings === void 0 ? void 0 : settings.instance) !== null && _a !== void 0 ? _a : props.instance) !== null && _b !== void 0 ? _b : (args.instance !== undefined ? parseInt(args.instance, 10) || 0 : (parseInt(window.location.search.slice(1), 10) || 0));
+        // extract adapter name from URL
+        const tmp = window.location.pathname.split('/');
+        this.adapterName = (settings === null || settings === void 0 ? void 0 : settings.adapterName) || props.adapterName || window.adapterName || tmp[tmp.length - 2] || 'iot';
+        this.instanceId = `system.adapter.${this.adapterName}.${this.instance}`;
+        this.newReact = args.newReact === true; // it is admin5
+        const location = Router_1.default.getLocation();
+        location.tab = location.tab || (window._localStorage || window.localStorage).getItem(`${this.adapterName}-adapter`) || '';
+        const themeInstance = this.createTheme();
+        this.state = {
+            selectedTab: (window._localStorage || window.localStorage).getItem(`${this.adapterName}-adapter`) || '',
+            selectedTabNum: -1,
+            native: {},
+            errorText: '',
+            changed: false,
+            connected: false,
+            loaded: false,
+            isConfigurationError: '',
+            expertMode: false,
+            toast: '',
+            theme: themeInstance,
+            themeName: this.getThemeName(themeInstance),
+            themeType: this.getThemeType(themeInstance),
+            bottomButtons: (settings && settings.bottomButtons) === false ? false : ((props === null || props === void 0 ? void 0 : props.bottomButtons) !== false),
+            width: GenericApp.getWidth(),
+            confirmClose: false,
+            _alert: false,
+            _alertType: 'info',
+            _alertMessage: '',
+        };
+        // init translations
+        const translations = {
+            en: require('./i18n/en.json'),
+            de: require('./i18n/de.json'),
+            ru: require('./i18n/ru.json'),
+            pt: require('./i18n/pt.json'),
+            nl: require('./i18n/nl.json'),
+            fr: require('./i18n/fr.json'),
+            it: require('./i18n/it.json'),
+            es: require('./i18n/es.json'),
+            pl: require('./i18n/pl.json'),
+            uk: require('./i18n/uk.json'),
+            'zh-cn': require('./i18n/zh-cn.json'),
+        };
+        // merge together
+        if (settings && settings.translations) {
+            Object.keys(settings.translations).forEach(lang => {
+                if (settings.translations) {
+                    translations[lang] = Object.assign(translations[lang], settings.translations[lang] || {});
+                }
+            });
+        }
+        else if (props.translations) {
+            Object.keys(props.translations).forEach(lang => {
+                if (props.translations) {
+                    translations[lang] = Object.assign(translations[lang], props.translations[lang] || {});
+                }
+            });
+        }
+        i18n_1.default.setTranslations(translations);
+        this.savedNative = {}; // to detect if the config changed
+        this.encryptedFields = props.encryptedFields || (settings === null || settings === void 0 ? void 0 : settings.encryptedFields) || [];
+        this.sentryDSN = (settings && settings.sentryDSN) || props.sentryDSN;
+        if (window.socketUrl) {
+            if (window.socketUrl.startsWith(':')) {
+                window.socketUrl = `${window.location.protocol}//${window.location.hostname}${window.socketUrl}`;
+            }
+            else if (!window.socketUrl.startsWith('http://') && !window.socketUrl.startsWith('https://')) {
+                window.socketUrl = `${window.location.protocol}//${window.socketUrl}`;
+            }
+        }
+        this.alertDialogRendered = false;
+        window.oldAlert = window.alert;
+        window.alert = message => {
+            if (!this.alertDialogRendered) {
+                window.oldAlert(message);
+                return;
+            }
+            if (message && message.toString().toLowerCase().includes('error')) {
+                console.error(message);
+                this.showAlert(message.toString(), 'error');
+            }
+            else {
+                console.log(message);
+                this.showAlert(message.toString(), 'info');
+            }
+        };
+        // @ts-expect-error I don't know
+        this.socket = new ConnectionClass(Object.assign(Object.assign({}, ((props === null || props === void 0 ? void 0 : props.socket) || (settings === null || settings === void 0 ? void 0 : settings.socket))), { name: this.adapterName, doNotLoadAllObjects: settings === null || settings === void 0 ? void 0 : settings.doNotLoadAllObjects, onProgress: (progress) => {
+                if (progress === socket_client_1.PROGRESS.CONNECTING) {
+                    this.setState({ connected: false });
+                }
+                else if (progress === socket_client_1.PROGRESS.READY) {
+                    this.setState({ connected: true });
+                }
+                else {
+                    this.setState({ connected: true });
+                }
+            }, onReady: ( /* objects, scripts */) => {
+                i18n_1.default.setLanguage(this.socket.systemLang);
+                // subscribe because of language and expert mode
+                this.socket.subscribeObject('system.config', this.onSystemConfigChanged)
+                    .then(() => this.getSystemConfig())
+                    .then(obj => {
+                    this._secret = (typeof obj !== 'undefined' && obj.native && obj.native.secret) || 'Zgfr56gFe87jJOM';
+                    this._systemConfig = (obj === null || obj === void 0 ? void 0 : obj.common) || {};
+                    return this.socket.getObject(this.instanceId);
+                })
+                    .then(async (obj) => {
+                    var _a, _b;
+                    let waitPromise;
+                    const instanceObj = obj;
+                    const sentryPluginEnabled = (_a = (await this.socket.getState(`${this.instanceId}.plugins.sentry.enabled`))) === null || _a === void 0 ? void 0 : _a.val;
+                    const sentryEnabled = sentryPluginEnabled !== false &&
+                        ((_b = this._systemConfig) === null || _b === void 0 ? void 0 : _b.diag) !== 'none' &&
+                        (instanceObj === null || instanceObj === void 0 ? void 0 : instanceObj.common) &&
+                        instanceObj.common.name &&
+                        instanceObj.common.version &&
+                        // @ts-expect-error will be extended in js-controller
+                        !instanceObj.common.disableDataReporting &&
+                        window.location.host !== 'localhost:3000';
+                    // activate sentry plugin
+                    if (!this.sentryStarted && this.sentryDSN && sentryEnabled) {
+                        this.sentryStarted = true;
+                        Sentry.init({
+                            dsn: this.sentryDSN,
+                            release: `iobroker.${instanceObj.common.name}@${instanceObj.common.version}`,
+                            integrations: [
+                                new SentryIntegrations.Dedupe(),
+                            ],
                         });
-                      }
-                    });
-                  }
-                  waitPromise = waitPromise || Promise.resolve();
-                  waitPromise.then(function () {
-                    if (instanceObj) {
-                      _this.common = instanceObj === null || instanceObj === void 0 ? void 0 : instanceObj.common;
-                      _this.onPrepareLoad(instanceObj["native"], instanceObj.encryptedNative); // decode all secrets
-                      _this.savedNative = JSON.parse(JSON.stringify(instanceObj["native"]));
-                      _this.setState({
-                        "native": instanceObj["native"],
-                        loaded: true,
-                        expertMode: _this.getExpertMode()
-                      }, function () {
-                        return _this.onConnectionReady && _this.onConnectionReady();
-                      });
-                    } else {
-                      console.warn('Cannot load instance settings');
-                      _this.setState({
-                        "native": {},
-                        loaded: true,
-                        expertMode: _this.getExpertMode()
-                      }, function () {
-                        return _this.onConnectionReady && _this.onConnectionReady();
-                      });
+                        console.log('Sentry initialized');
                     }
-                  });
-                case 17:
-                case "end":
-                  return _context.stop();
-              }
-            }, _callee);
-          }));
-          return function (_x) {
-            return _ref2.apply(this, arguments);
-          };
-        }())["catch"](function (e) {
-          return window.alert("Cannot settings: ".concat(e));
+                    // read UUID and init sentry with it.
+                    // for backward compatibility it will be processed separately from above logic: some adapters could still have this.sentryDSN as undefined
+                    if (!this.sentryInited && sentryEnabled) {
+                        this.sentryInited = true;
+                        waitPromise = this.socket.getObject('system.meta.uuid')
+                            .then(uuidObj => {
+                            if (uuidObj && uuidObj.native && uuidObj.native.uuid) {
+                                Sentry.configureScope(scope => scope.setUser({ id: uuidObj.native.uuid }));
+                            }
+                        });
+                    }
+                    waitPromise = waitPromise || Promise.resolve();
+                    waitPromise
+                        .then(() => {
+                        if (instanceObj) {
+                            this.common = instanceObj === null || instanceObj === void 0 ? void 0 : instanceObj.common;
+                            this.onPrepareLoad(instanceObj.native, instanceObj.encryptedNative); // decode all secrets
+                            this.savedNative = JSON.parse(JSON.stringify(instanceObj.native));
+                            this.setState({ native: instanceObj.native, loaded: true, expertMode: this.getExpertMode() }, () => this.onConnectionReady && this.onConnectionReady());
+                        }
+                        else {
+                            console.warn('Cannot load instance settings');
+                            this.setState({
+                                native: {},
+                                loaded: true,
+                                expertMode: this.getExpertMode(),
+                            }, () => this.onConnectionReady && this.onConnectionReady());
+                        }
+                    });
+                })
+                    .catch(e => window.alert(`Cannot settings: ${e}`));
+            }, onError: (err) => {
+                console.error(err);
+                this.showError(err);
+            } }));
+    }
+    /**
+     * Checks if this connection is running in a web adapter and not in an admin.
+     * @returns True if running in a web adapter or in a socketio adapter.
+     */
+    static isWeb() {
+        return window.socketUrl !== undefined;
+    }
+    showAlert(message, type) {
+        if (type !== 'error' && type !== 'warning' && type !== 'info' && type !== 'success') {
+            type = 'info';
+        }
+        this.setState({
+            _alert: true,
+            _alertType: type,
+            _alertMessage: message,
         });
-      },
-      onError: function onError(err) {
-        console.error(err);
-        _this.showError(err);
-      }
-    }));
-    return _this;
-  }
-  (0, _createClass2["default"])(GenericApp, [{
-    key: "showAlert",
-    value: function showAlert(message, type) {
-      if (type !== 'error' && type !== 'warning' && type !== 'info' && type !== 'success') {
-        type = 'info';
-      }
-      this.setState({
-        _alert: true,
-        _alertType: type,
-        _alertMessage: message
-      });
     }
-  }, {
-    key: "renderAlertSnackbar",
-    value: function renderAlertSnackbar() {
-      var _this2 = this;
-      this.alerDialogRendered = true;
-      return /*#__PURE__*/_react["default"].createElement(_material.Snackbar, {
-        style: this.state._alertType === 'error' ? {
-          backgroundColor: '#f44336'
-        } : this.state._alertType === 'success' ? {
-          backgroundColor: '#4caf50'
-        } : undefined,
-        open: this.state._alert,
-        autoHideDuration: 6000,
-        onClose: function onClose(reason) {
-          return reason !== 'clickaway' && _this2.setState({
-            _alert: false
-          });
-        },
-        message: this.state.alertMessage
-      });
+    renderAlertSnackbar() {
+        this.alertDialogRendered = true;
+        return react_1.default.createElement(material_1.Snackbar, { style: this.state._alertType === 'error' ?
+                { backgroundColor: '#f44336' } :
+                (this.state._alertType === 'success' ? { backgroundColor: '#4caf50' } : undefined), open: this.state._alert, autoHideDuration: 6000, onClose: (_e, reason) => reason !== 'clickaway' && this.setState({ _alert: false }), message: this.state._alertMessage });
     }
-  }, {
-    key: "componentDidMount",
-    value:
     /**
      * Called immediately after a component is mounted. Setting state here will trigger re-rendering.
      */
-    function componentDidMount() {
-      window.addEventListener('resize', this.onResize, true);
-      window.addEventListener('message', this.onReceiveMessage, false);
-      (0, _get2["default"])((0, _getPrototypeOf2["default"])(GenericApp.prototype), "componentDidMount", this).call(this);
+    componentDidMount() {
+        window.addEventListener('resize', this.onResize, true);
+        window.addEventListener('message', this.onReceiveMessage, false);
+        super.componentDidMount();
     }
-
     /**
      * Called immediately before a component is destroyed.
      */
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener('resize', this.onResize, true);
-      window.removeEventListener('message', this.onReceiveMessage, false);
-      (0, _get2["default"])((0, _getPrototypeOf2["default"])(GenericApp.prototype), "componentWillUnmount", this).call(this);
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.onResize, true);
+        window.removeEventListener('message', this.onReceiveMessage, false);
+        super.componentWillUnmount();
+    }
+    /**
+     * Gets the width depending on the window inner width.
+     * @returns {import('./types').Width}
+     */
+    static getWidth() {
+        /**
+         * innerWidth |xs      sm      md      lg      xl
+         *            |-------|-------|-------|-------|------>
+         * width      |  xs   |  sm   |  md   |  lg   |  xl
+         */
+        const SIZES = {
+            xs: 0,
+            sm: 600,
+            md: 960,
+            lg: 1280,
+            xl: 1920,
+        };
+        const width = window.innerWidth;
+        const keys = Object.keys(SIZES).reverse();
+        const widthComputed = keys.find(key => width >= SIZES[key]);
+        return widthComputed || 'xs';
     }
-  }, {
-    key: "createTheme",
-    value:
     /**
      * Get a theme
-     * @param {string} name Theme name
-     * @returns {import('./types').Theme}
+     * @param name Theme name
      */
-    function createTheme() {
-      var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-      return (0, _Theme["default"])(_Utils["default"].getThemeName(name));
+    createTheme(name) {
+        return (0, Theme_1.default)(Utils_1.default.getThemeName(name));
     }
-
     /**
      * Get the theme name
-     * @param {import('./types').Theme} currentTheme Theme
-     * @returns {string} Theme name
      */
-  }, {
-    key: "getThemeName",
-    value: function getThemeName(currentTheme) {
-      return currentTheme.name;
+    getThemeName(currentTheme) {
+        return currentTheme.name;
     }
-
     /**
      * Get the theme type
-     * @param {import('./types').Theme} currentTheme Theme
-     * @returns {string} Theme type
      */
-  }, {
-    key: "getThemeType",
-    value: function getThemeType(currentTheme) {
-      return currentTheme.palette.mode;
+    getThemeType(currentTheme) {
+        return currentTheme.palette.mode;
+    }
+    onThemeChanged(newThemeName) {
+    }
+    onToggleExpertMode(expertMode) {
     }
-
     /**
      * Changes the current theme
-     * @param {string} newThemeName Theme name
+     * @param newThemeName Theme name
      **/
-  }, {
-    key: "toggleTheme",
-    value: function toggleTheme(newThemeName) {
-      var _this3 = this;
-      var themeName = this.state.themeName;
-
-      // dark => blue => colored => light => dark
-      newThemeName = newThemeName || (themeName === 'dark' ? 'blue' : themeName === 'blue' ? 'colored' : themeName === 'colored' ? 'light' : 'dark');
-      if (newThemeName !== themeName) {
-        _Utils["default"].setThemeName(newThemeName);
-        var newTheme = this.createTheme(newThemeName);
-        this.setState({
-          theme: newTheme,
-          themeName: this.getThemeName(newTheme),
-          themeType: this.getThemeType(newTheme)
-        }, function () {
-          _this3.props.onThemeChange && _this3.props.onThemeChange(newThemeName);
-          _this3.onThemeChanged && _this3.onThemeChanged(newThemeName);
-        });
-      }
+    toggleTheme(newThemeName) {
+        const themeName = this.state.themeName;
+        // dark => blue => colored => light => dark
+        newThemeName = newThemeName || (themeName === 'dark' ? 'blue' :
+            (themeName === 'blue' ? 'colored' :
+                (themeName === 'colored' ? 'light' : 'dark')));
+        if (newThemeName !== themeName) {
+            Utils_1.default.setThemeName(newThemeName);
+            const newTheme = this.createTheme(newThemeName);
+            this.setState({
+                theme: newTheme,
+                themeName: this.getThemeName(newTheme),
+                themeType: this.getThemeType(newTheme),
+            }, () => {
+                this.props.onThemeChange && this.props.onThemeChange(newThemeName || 'light');
+                this.onThemeChanged && this.onThemeChanged(newThemeName || 'light');
+            });
+        }
     }
-
     /**
      * Gets the system configuration.
      * @returns {Promise<ioBroker.OtherObject>}
      */
-  }, {
-    key: "getSystemConfig",
-    value: function getSystemConfig() {
-      return this.socket.getSystemConfig();
+    getSystemConfig() {
+        return this.socket.getSystemConfig();
     }
-
     /**
      * Get current expert mode
      * @returns {boolean}
      */
-  }, {
-    key: "getExpertMode",
-    value: function getExpertMode() {
-      return window.sessionStorage.getItem('App.expertMode') === 'true' || !!this._systemConfig.expertMode;
+    getExpertMode() {
+        var _a;
+        return window.sessionStorage.getItem('App.expertMode') === 'true' || !!((_a = this._systemConfig) === null || _a === void 0 ? void 0 : _a.expertMode);
     }
-
     /**
      * Gets called when the socket.io connection is ready.
      * You can overload this function to execute own commands.
      */
-  }, {
-    key: "onConnectionReady",
-    value: function onConnectionReady() {}
-
+    onConnectionReady() {
+    }
     /**
      * Encrypts a string.
-     * @param {string} value
-     * @returns {string}
      */
-  }, {
-    key: "encrypt",
-    value: function encrypt(value) {
-      var result = '';
-      for (var i = 0; i < value.length; i++) {
-        result += String.fromCharCode(this._secret[i % this._secret.length].charCodeAt(0) ^ value.charCodeAt(i));
-      }
-      return result;
+    encrypt(value) {
+        let result = '';
+        if (this._secret) {
+            for (let i = 0; i < value.length; i++) {
+                result += String.fromCharCode(this._secret[i % this._secret.length].charCodeAt(0) ^ value.charCodeAt(i));
+            }
+        }
+        return result;
     }
-
     /**
      * Decrypts a string.
-     * @param {string} value
-     * @returns {string}
      */
-  }, {
-    key: "decrypt",
-    value: function decrypt(value) {
-      var result = '';
-      for (var i = 0; i < value.length; i++) {
-        result += String.fromCharCode(this._secret[i % this._secret.length].charCodeAt(0) ^ value.charCodeAt(i));
-      }
-      return result;
+    decrypt(value) {
+        let result = '';
+        if (this._secret) {
+            for (let i = 0; i < value.length; i++) {
+                result += String.fromCharCode(this._secret[i % this._secret.length].charCodeAt(0) ^ value.charCodeAt(i));
+            }
+        }
+        return result;
     }
-
     /**
      * Gets called when the navigation hash changes.
      * You may override this if needed.
      */
-  }, {
-    key: "onHashChanged",
-    value: function onHashChanged() {
-      var location = _Router2["default"].getLocation();
-      if (location.tab !== this.state.selectedTab) {
-        this.selectTab(location.tab);
-      }
+    onHashChanged() {
+        const location = Router_1.default.getLocation();
+        if (location.tab !== this.state.selectedTab) {
+            this.selectTab(location.tab);
+        }
     }
-
     /**
      * Selects the given tab.
-     * @param {string} tab
-     * @param {number} [index]
      */
-  }, {
-    key: "selectTab",
-    value: function selectTab(tab, index) {
-      (window._localStorage || window.localStorage).setItem("".concat(this.adapterName, "-adapter"), tab);
-      this.setState({
-        selectedTab: tab,
-        selectedTabNum: index
-      });
+    selectTab(tab, index) {
+        (window._localStorage || window.localStorage).setItem(`${this.adapterName}-adapter`, tab);
+        this.setState({ selectedTab: tab, selectedTabNum: index });
     }
-
     /**
      * Gets called before the settings are saved.
      * You may override this if needed.
-     * @param {Record<string, any>} settings
      */
-  }, {
-    key: "onPrepareSave",
-    value: function onPrepareSave(settings) {
-      var _this4 = this;
-      // here you can encode values
-      this.encryptedFields && this.encryptedFields.forEach(function (attr) {
-        if (settings[attr]) {
-          settings[attr] = _this4.encrypt(settings[attr]);
-        }
-      });
-      return true;
+    onPrepareSave(settings) {
+        // here you can encode values
+        this.encryptedFields && this.encryptedFields.forEach(attr => {
+            if (settings[attr]) {
+                settings[attr] = this.encrypt(settings[attr]);
+            }
+        });
+        return true;
     }
-
     /**
      * Gets called after the settings are loaded.
      * You may override this if needed.
-     * @param {Record<string, any>} settings
-     * @param {string[]} encryptedNative optional list of fields to be decrypted
+     * @param encryptedNative optional list of fields to be decrypted
      */
-  }, {
-    key: "onPrepareLoad",
-    value: function onPrepareLoad(settings, encryptedNative) {
-      var _this5 = this;
-      // here you can encode values
-      this.encryptedFields && this.encryptedFields.forEach(function (attr) {
-        if (settings[attr]) {
-          settings[attr] = _this5.decrypt(settings[attr]);
-        }
-      });
-      encryptedNative && encryptedNative.forEach(function (attr) {
-        _this5.encryptedFields = _this5.encryptedFields || [];
-        !_this5.encryptedFields.includes(attr) && _this5.encryptedFields.push(attr);
-        if (settings[attr]) {
-          settings[attr] = _this5.decrypt(settings[attr]);
-        }
-      });
+    onPrepareLoad(settings, encryptedNative) {
+        // here you can encode values
+        this.encryptedFields && this.encryptedFields.forEach(attr => {
+            if (settings[attr]) {
+                settings[attr] = this.decrypt(settings[attr]);
+            }
+        });
+        encryptedNative && encryptedNative.forEach(attr => {
+            this.encryptedFields = this.encryptedFields || [];
+            !this.encryptedFields.includes(attr) && this.encryptedFields.push(attr);
+            if (settings[attr]) {
+                settings[attr] = this.decrypt(settings[attr]);
+            }
+        });
     }
-
     /**
      * Gets the extendable instances.
      * @returns {Promise<any[]>}
      */
-  }, {
-    key: "getExtendableInstances",
-    value: function getExtendableInstances() {
-      var _this6 = this;
-      return new Promise(function (resolve) {
-        _this6.socket._socket.emit('getObjectView', 'system', 'instance', null, function (err, doc) {
-          if (err) {
-            resolve([]);
-          } else {
-            resolve(doc.rows.filter(function (item) {
-              return item.value.common.webExtendable;
-            }).map(function (item) {
-              return item.value;
-            }));
-          }
-        });
-      });
+    async getExtendableInstances() {
+        try {
+            const instances = await this.socket.getObjectViewSystem('instance', 'system.adapter.', 'system.adapter.\u9999');
+            return Object.values(instances).filter(instance => { var _a; return !!((_a = instance === null || instance === void 0 ? void 0 : instance.common) === null || _a === void 0 ? void 0 : _a.webExtendable); });
+        }
+        catch (e) {
+            return [];
+        }
     }
-
     /**
      * Gets the IP addresses of the given host.
-     * @param {string} host
      */
-  }, {
-    key: "getIpAddresses",
-    value: function getIpAddresses(host) {
-      var _this7 = this;
-      return new Promise(function (resolve) {
-        _this7.socket._socket.emit('getHostByIp', host || _this7.common.host, function (ip, _host) {
-          var IPs4 = [{
-            name: "[IPv4] 0.0.0.0 - ".concat(_i18n["default"].t('ra_Listen on all IPs')),
-            address: '0.0.0.0',
-            family: 'ipv4'
-          }];
-          var IPs6 = [{
-            name: '[IPv6] ::',
-            address: '::',
-            family: 'ipv6'
-          }];
-          if (_host) {
-            host = _host;
-            if (host["native"].hardware && host["native"].hardware.networkInterfaces) {
-              Object.keys(host["native"].hardware.networkInterfaces).forEach(function (eth) {
-                return host["native"].hardware.networkInterfaces[eth].forEach(function (inter) {
-                  if (inter.family !== 'IPv6') {
-                    IPs4.push({
-                      name: "[".concat(inter.family, "] ").concat(inter.address, " - ").concat(eth),
-                      address: inter.address,
-                      family: 'ipv4'
-                    });
-                  } else {
-                    IPs6.push({
-                      name: "[".concat(inter.family, "] ").concat(inter.address, " - ").concat(eth),
-                      address: inter.address,
-                      family: 'ipv6'
-                    });
-                  }
-                });
-              });
-            }
-            IPs6.forEach(function (_ip) {
-              return IPs4.push(_ip);
-            });
-          }
-          resolve(IPs4);
-        });
-      });
+    async getIpAddresses(host) {
+        var _a;
+        const ips = await this.socket.getHostByIp(host || ((_a = this.common) === null || _a === void 0 ? void 0 : _a.host) || '');
+        // translate names
+        const ip4_0 = ips.find(ip => ip.address === '0.0.0.0');
+        if (ip4_0) {
+            ip4_0.name = `[IPv4] 0.0.0.0 - ${i18n_1.default.t('ra_Listen on all IPs')}`;
+        }
+        const ip6_0 = ips.find(ip => ip.address === '::');
+        if (ip6_0) {
+            ip6_0.name = `[IPv4] :: - ${i18n_1.default.t('ra_Listen on all IPs')}`;
+        }
+        return ips;
     }
-
     /**
      * Saves the settings to the server.
-     * @param {boolean} isClose True if the user is closing the dialog.
+     * @param isClose True if the user is closing the dialog.
      */
-  }, {
-    key: "onSave",
-    value: function onSave(isClose) {
-      var _this8 = this;
-      var oldObj;
-      if (this.state.isConfigurationError) {
-        this.setState({
-          errorText: this.state.isConfigurationError
-        });
-        return;
-      }
-      this.socket.getObject(this.instanceId).then(function (_oldObj) {
-        oldObj = _oldObj || {};
-        for (var a in _this8.state["native"]) {
-          if (Object.prototype.hasOwnProperty.call(_this8.state["native"], a)) {
-            if (_this8.state["native"][a] === null) {
-              oldObj["native"][a] = null;
-            } else if (_this8.state["native"][a] !== undefined) {
-              oldObj["native"][a] = JSON.parse(JSON.stringify(_this8.state["native"][a]));
-            } else {
-              delete oldObj["native"][a];
-            }
-          }
+    onSave(isClose) {
+        let oldObj;
+        if (this.state.isConfigurationError) {
+            this.setState({ errorText: this.state.isConfigurationError });
+            return;
         }
-        if (_this8.state.common) {
-          for (var b in _this8.state.common) {
-            if (_this8.state.common[b] === null) {
-              oldObj.common[b] = null;
-            } else if (_this8.state.common[b] !== undefined) {
-              oldObj.common[b] = JSON.parse(JSON.stringify(_this8.state.common[b]));
-            } else {
-              delete oldObj.common[b];
+        this.socket.getObject(this.instanceId)
+            .then(_oldObj => {
+            oldObj = (_oldObj || {});
+            for (const a in this.state.native) {
+                if (Object.prototype.hasOwnProperty.call(this.state.native, a)) {
+                    if (this.state.native[a] === null) {
+                        oldObj.native[a] = null;
+                    }
+                    else if (this.state.native[a] !== undefined) {
+                        oldObj.native[a] = JSON.parse(JSON.stringify(this.state.native[a]));
+                    }
+                    else {
+                        delete oldObj.native[a];
+                    }
+                }
             }
-          }
-        }
-        if (_this8.onPrepareSave(oldObj["native"]) !== false) {
-          return _this8.socket.setObject(_this8.instanceId, oldObj);
-        }
-        return Promise.reject(new Error('Invalid configuration'));
-      }).then(function () {
-        _this8.savedNative = oldObj["native"];
-        globalThis.changed = false;
-        try {
-          window.parent.postMessage('nochange', '*');
-        } catch (e) {
-          // ignore
-        }
-        _this8.setState({
-          changed: false
-        });
-        isClose && GenericApp.onClose();
-      })["catch"](function (e) {
-        return console.error("Cannot save configuration: ".concat(e));
-      });
+            if (this.state.common) {
+                for (const b in this.state.common) {
+                    if (this.state.common[b] === null) {
+                        oldObj.common[b] = null;
+                    }
+                    else if (this.state.common[b] !== undefined) {
+                        oldObj.common[b] = JSON.parse(JSON.stringify(this.state.common[b]));
+                    }
+                    else {
+                        delete oldObj.common[b];
+                    }
+                }
+            }
+            if (this.onPrepareSave(oldObj.native) !== false) {
+                return this.socket.setObject(this.instanceId, oldObj);
+            }
+            return Promise.reject(new Error('Invalid configuration'));
+        })
+            .then(() => {
+            this.savedNative = oldObj.native;
+            globalThis.changed = false;
+            try {
+                window.parent.postMessage('nochange', '*');
+            }
+            catch (e) {
+                // ignore
+            }
+            this.setState({ changed: false });
+            isClose && GenericApp.onClose();
+        })
+            .catch(e => console.error(`Cannot save configuration: ${e}`));
     }
-
     /**
      * Renders the toast.
-     * @returns {JSX.Element | null} The JSX element.
      */
-  }, {
-    key: "renderToast",
-    value: function renderToast() {
-      var _this9 = this;
-      if (!this.state.toast) {
-        return null;
-      }
-      return /*#__PURE__*/_react["default"].createElement(_material.Snackbar, {
-        anchorOrigin: {
-          vertical: 'bottom',
-          horizontal: 'left'
-        },
-        open: !0,
-        autoHideDuration: 6000,
-        onClose: function onClose() {
-          return _this9.setState({
-            toast: ''
-          });
-        },
-        ContentProps: {
-          'aria-describedby': 'message-id'
-        },
-        message: /*#__PURE__*/_react["default"].createElement("span", {
-          id: "message-id"
-        }, this.state.toast),
-        action: [/*#__PURE__*/_react["default"].createElement(_material.IconButton, {
-          key: "close",
-          "aria-label": "Close",
-          color: "inherit",
-          className: this.props.classes.close,
-          onClick: function onClick() {
-            return _this9.setState({
-              toast: ''
-            });
-          },
-          size: "large"
-        }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Close, null))]
-      });
+    renderToast() {
+        var _a;
+        if (!this.state.toast) {
+            return null;
+        }
+        return react_1.default.createElement(material_1.Snackbar, { anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'left',
+            }, open: !0, autoHideDuration: 6000, onClose: () => this.setState({ toast: '' }), ContentProps: { 'aria-describedby': 'message-id' }, message: react_1.default.createElement("span", { id: "message-id" }, this.state.toast), action: [
+                react_1.default.createElement(material_1.IconButton, { key: "close", "aria-label": "Close", color: "inherit", className: (_a = this.props.classes) === null || _a === void 0 ? void 0 : _a.close, onClick: () => this.setState({ toast: '' }), size: "large" },
+                    react_1.default.createElement(icons_material_1.Close, null)),
+            ] });
     }
-
     /**
      * Closes the dialog.
      * @private
      */
-  }, {
-    key: "renderError",
-    value:
+    static onClose() {
+        if (typeof window.parent !== 'undefined' && window.parent) {
+            try {
+                // @ts-expect-error No idea how to solve it
+                if (window.parent.$iframeDialog && typeof window.parent.$iframeDialog.close === 'function') {
+                    // @ts-expect-error No idea how to solve it
+                    window.parent.$iframeDialog.close();
+                }
+                else {
+                    window.parent.postMessage('close', '*');
+                }
+            }
+            catch (e) {
+                window.parent.postMessage('close', '*');
+            }
+        }
+    }
     /**
      * Renders the error dialog.
      * @returns {JSX.Element | null} The JSX element.
      */
-    function renderError() {
-      var _this10 = this;
-      if (!this.state.errorText) {
-        return null;
-      }
-      return /*#__PURE__*/_react["default"].createElement(_Error["default"], {
-        text: this.state.errorText,
-        onClose: function onClose() {
-          return _this10.setState({
-            errorText: ''
-          });
+    renderError() {
+        if (!this.state.errorText) {
+            return null;
         }
-      });
+        return react_1.default.createElement(Error_1.default, { text: this.state.errorText, onClose: () => this.setState({ errorText: '' }) });
     }
-
     /**
      * Checks if the configuration has changed.
      * @param {Record<string, any>} [native] the new state
      */
-  }, {
-    key: "getIsChanged",
-    value: function getIsChanged(_native) {
-      _native = _native || this.state["native"];
-      var isChanged = JSON.stringify(_native) !== JSON.stringify(this.savedNative);
-      globalThis.changed = isChanged;
-      return isChanged;
+    getIsChanged(native) {
+        native = native || this.state.native;
+        const isChanged = JSON.stringify(native) !== JSON.stringify(this.savedNative);
+        globalThis.changed = isChanged;
+        return isChanged;
     }
-
     /**
      * Gets called when loading the configuration.
-     * @param {Record<string, any>} newNative The new configuration object.
+     * @param newNative The new configuration object.
      */
-  }, {
-    key: "onLoadConfig",
-    value: function onLoadConfig(newNative) {
-      if (JSON.stringify(newNative) !== JSON.stringify(this.state["native"])) {
-        this.setState({
-          "native": newNative,
-          changed: this.getIsChanged(newNative)
-        });
-      }
+    onLoadConfig(newNative) {
+        if (JSON.stringify(newNative) !== JSON.stringify(this.state.native)) {
+            this.setState({ native: newNative, changed: this.getIsChanged(newNative) });
+        }
     }
-
     /**
      * Sets the configuration error.
-     * @param {string} errorText
      */
-  }, {
-    key: "setConfigurationError",
-    value: function setConfigurationError(errorText) {
-      if (this.state.isConfigurationError !== errorText) {
-        this.setState({
-          isConfigurationError: errorText
-        });
-      }
+    setConfigurationError(errorText) {
+        if (this.state.isConfigurationError !== errorText) {
+            this.setState({ isConfigurationError: errorText });
+        }
     }
-
     /**
      * Renders the save and close buttons.
      * @returns {JSX.Element | undefined} The JSX element.
      */
-  }, {
-    key: "renderSaveCloseButtons",
-    value: function renderSaveCloseButtons() {
-      var _this11 = this;
-      if (!this.state.confirmClose && !this.state.bottomButtons) {
-        return null;
-      }
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, this.state.bottomButtons ? /*#__PURE__*/_react["default"].createElement(_SaveCloseButtons["default"], {
-        theme: this.state.theme,
-        newReact: this.newReact,
-        noTextOnButtons: this.state.width === 'xs' || this.state.width === 'sm' || this.state.width === 'md',
-        changed: this.state.changed,
-        onSave: function onSave(isClose) {
-          return _this11.onSave(isClose);
-        },
-        onClose: function onClose() {
-          if (_this11.state.changed) {
-            _this11.setState({
-              confirmClose: true
-            });
-          } else {
-            GenericApp.onClose();
-          }
+    renderSaveCloseButtons() {
+        if (!this.state.confirmClose && !this.state.bottomButtons) {
+            return null;
         }
-      }) : null, this.state.confirmClose ? /*#__PURE__*/_react["default"].createElement(_Confirm["default"], {
-        title: _i18n["default"].t('ra_Please confirm'),
-        text: _i18n["default"].t('ra_Some data are not stored. Discard?'),
-        ok: _i18n["default"].t('ra_Discard'),
-        cancel: _i18n["default"].t('ra_Cancel'),
-        onClose: function onClose(isYes) {
-          return _this11.setState({
-            confirmClose: false
-          }, function () {
-            return isYes && GenericApp.onClose();
-          });
-        }
-      }) : null);
+        return react_1.default.createElement(react_1.default.Fragment, null,
+            this.state.bottomButtons ? react_1.default.createElement(SaveCloseButtons_1.default, { theme: this.state.theme, newReact: this.newReact, noTextOnButtons: this.state.width === 'xs' || this.state.width === 'sm' || this.state.width === 'md', changed: this.state.changed, onSave: isClose => this.onSave(isClose), onClose: () => {
+                    if (this.state.changed) {
+                        this.setState({ confirmClose: true });
+                    }
+                    else {
+                        GenericApp.onClose();
+                    }
+                } }) : null,
+            this.state.confirmClose ? react_1.default.createElement(Confirm_1.default, { title: i18n_1.default.t('ra_Please confirm'), text: i18n_1.default.t('ra_Some data are not stored. Discard?'), ok: i18n_1.default.t('ra_Discard'), cancel: i18n_1.default.t('ra_Cancel'), onClose: isYes => this.setState({ confirmClose: false }, () => isYes && GenericApp.onClose()) }) : null);
     }
-
     /**
      * @private
-     * @param {Record<string, any>} obj
-     * @param {any} attrs
-     * @param {any} value
-     * @returns {boolean | undefined}
      */
-  }, {
-    key: "_updateNativeValue",
-    value: function _updateNativeValue(obj, attrs, value) {
-      if ((0, _typeof2["default"])(attrs) !== 'object') {
-        attrs = attrs.split('.');
-      }
-      var attr = attrs.shift();
-      if (!attrs.length) {
-        if (value && (0, _typeof2["default"])(value) === 'object') {
-          if (JSON.stringify(obj[attr]) !== JSON.stringify(value)) {
-            obj[attr] = value;
-            return true;
-          }
-          return false;
+    _updateNativeValue(obj, attrs, value) {
+        if (typeof attrs !== 'object') {
+            attrs = attrs.split('.');
         }
-        if (obj[attr] !== value) {
-          obj[attr] = value;
-          return true;
+        const attr = attrs.shift() || '';
+        if (!attrs.length) {
+            if (value && typeof value === 'object') {
+                if (JSON.stringify(obj[attr]) !== JSON.stringify(value)) {
+                    obj[attr] = value;
+                    return true;
+                }
+                return false;
+            }
+            if (obj[attr] !== value) {
+                obj[attr] = value;
+                return true;
+            }
+            return false;
+        }
+        obj[attr] = obj[attr] || {};
+        if (typeof obj[attr] !== 'object') {
+            throw new Error(`attribute ${attr} is no object, but ${typeof obj[attr]}`);
         }
-        return false;
-      }
-      obj[attr] = obj[attr] || {};
-      if ((0, _typeof2["default"])(obj[attr]) !== 'object') {
-        throw new Error("attribute ".concat(attr, " is no object, but ").concat((0, _typeof2["default"])(obj[attr])));
-      }
-      return this._updateNativeValue(obj[attr], attrs, value);
+        return this._updateNativeValue(obj[attr], attrs, value);
     }
-
     /**
      * Update the native value
-     * @param {string} attr The attribute name with dots as delimiter.
-     * @param {any} value The new value.
-     * @param {(() => void)} [cb] Callback which will be called upon completion.
-     */
-  }, {
-    key: "updateNativeValue",
-    value: function updateNativeValue(attr, value, cb) {
-      var _native2 = JSON.parse(JSON.stringify(this.state["native"]));
-      if (this._updateNativeValue(_native2, attr, value)) {
-        var changed = this.getIsChanged(_native2);
-        if (changed !== this.state.changed) {
-          try {
-            window.parent.postMessage(changed ? 'change' : 'nochange', '*');
-          } catch (e) {
-            // ignore
-          }
+     * @param attr The attribute name with dots as delimiter.
+     * @param value The new value.
+     * @param cb Callback which will be called upon completion.
+     */
+    updateNativeValue(attr, value, cb) {
+        const native = JSON.parse(JSON.stringify(this.state.native));
+        if (this._updateNativeValue(native, attr, value)) {
+            const changed = this.getIsChanged(native);
+            if (changed !== this.state.changed) {
+                try {
+                    window.parent.postMessage(changed ? 'change' : 'nochange', '*');
+                }
+                catch (e) {
+                    // ignore
+                }
+            }
+            this.setState({ native, changed }, cb);
         }
-        this.setState({
-          "native": _native2,
-          changed: changed
-        }, cb);
-      }
     }
-
     /**
      * Set the error text to be shown.
-     * @param {string | JSX.Element} text
      */
-  }, {
-    key: "showError",
-    value: function showError(text) {
-      this.setState({
-        errorText: text
-      });
+    showError(text) {
+        this.setState({ errorText: text });
     }
-
     /**
      * Sets the toast to be shown.
      * @param {string} toast
      */
-  }, {
-    key: "showToast",
-    value: function showToast(toast) {
-      this.setState({
-        toast: toast
-      });
+    showToast(toast) {
+        this.setState({ toast });
     }
-
     /**
      * Renders helper dialogs
      * @returns {JSX.Element} The JSX element.
      */
-  }, {
-    key: "renderHelperDialogs",
-    value: function renderHelperDialogs() {
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, this.renderError(), this.renderToast(), this.renderSaveCloseButtons(), this.renderAlertSnackbar());
+    renderHelperDialogs() {
+        return react_1.default.createElement(react_1.default.Fragment, null,
+            this.renderError(),
+            this.renderToast(),
+            this.renderSaveCloseButtons(),
+            this.renderAlertSnackbar());
     }
-
     /**
      * Renders this component.
      * @returns {JSX.Element} The JSX element.
      */
-  }, {
-    key: "render",
-    value: function render() {
-      if (!this.state.loaded) {
-        return /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
-          theme: this.state.themeType
-        });
-      }
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "App"
-      }, this.renderError(), this.renderToast(), this.renderSaveCloseButtons(), this.renderAlertSnackbar());
-    }
-  }], [{
-    key: "getWidth",
-    value:
-    /**
-     * Gets the width depending on the window inner width.
-     * @returns {import('./types').Width}
-     */
-    function getWidth() {
-      /**
-       * innerWidth |xs      sm      md      lg      xl
-       *            |-------|-------|-------|-------|------>
-       * width      |  xs   |  sm   |  md   |  lg   |  xl
-       */
-
-      var SIZES = {
-        xs: 0,
-        sm: 600,
-        md: 960,
-        lg: 1280,
-        xl: 1920
-      };
-      var width = window.innerWidth;
-      var keys = Object.keys(SIZES).reverse();
-      var widthComputed = keys.find(function (key) {
-        return width >= SIZES[key];
-      });
-      return widthComputed || 'xs';
-    }
-  }, {
-    key: "onClose",
-    value: function onClose() {
-      if (typeof window.parent !== 'undefined' && window.parent) {
-        try {
-          if (window.parent.$iframeDialog && typeof window.parent.$iframeDialog.close === 'function') {
-            window.parent.$iframeDialog.close();
-          } else {
-            window.parent.postMessage('close', '*');
-          }
-        } catch (e) {
-          window.parent.postMessage('close', '*');
+    render() {
+        if (!this.state.loaded) {
+            return react_1.default.createElement(Loader_1.default, { themeType: this.state.themeType });
         }
-      }
+        return react_1.default.createElement("div", { className: "App" },
+            this.renderError(),
+            this.renderToast(),
+            this.renderSaveCloseButtons(),
+            this.renderAlertSnackbar());
     }
-  }]);
-  return GenericApp;
-}(_Router2["default"]);
-GenericApp.propTypes = {
-  adapterName: _propTypes["default"].string,
-  // (optional) name of adapter
-  onThemeChange: _propTypes["default"].func,
-  // (optional) called by theme change
-  socket: _propTypes["default"].object,
-  // (optional) socket information (host, port)
-  encryptedFields: _propTypes["default"].array,
-  // (optional) list of native attributes that must be encrypted
-  bottomButtons: _propTypes["default"].bool,
-  // If the bottom buttons (Save/Close) must be shown
-  Connection: _propTypes["default"].object // If the bottom buttons (Save/Close) must be shown
-};
-var _default = exports["default"] = GenericApp;
-//# sourceMappingURL=GenericApp.js.map
+}
+exports.default = GenericApp;