@iobroker/gui-components 10.0.16 → 10.2.0

package/build/Components/DeviceType/i18n/ru.json

@@ -1,6 +1,8 @@
 {
     "type-Device type": "Тип устройства",
     "type-airCondition": "Кондиционер",
+    "type-airPurifier": "Очиститель воздуха",
+    "type-airQuality": "Качество воздуха",
     "type-blind": "Рольставни/Жалюзи",
     "type-blindButtons": "Жалюзи управляющиеся кнопками",
     "type-button": "Кнопка",
@@ -8,11 +10,17 @@
     "type-camera": "Камера",
     "type-chart": "Диаграмма",
     "type-cie": "CIE свет",
+    "type-coAlarm": "Датчик угарного газа",
+    "type-contact": "Датчик контакта",
     "type-ct": "Цветовая температура",
     "type-dimmer": "Диммер",
     "type-door": "Датчик положения двери",
+    "type-electricity": "Счётчик электроэнергии",
+    "type-fan": "Вентилятор",
+    "type-fillLevel": "Уровень наполнения",
     "type-fireAlarm": "Датчик дыма",
     "type-floodAlarm": "Датчик затопления",
+    "type-flow": "Расход",
     "type-gate": "Ворота",
     "type-hue": "HUE свет",
     "type-humidity": "Влажность",
@@ -27,6 +35,8 @@
     "type-media": "Медиа-плейер",
     "type-motion": "Датчик движения",
     "type-percentage": "Проценты",
+    "type-pressure": "Давление",
+    "type-pump": "Насос",
     "type-rgb": "RGB свет",
     "type-rgbSingle": "R,G,B как отдельные значение",
     "type-rgbwSingle": "R,G,B,W как отдельные значение",
@@ -34,9 +44,8 @@
     "type-socket": "Розетка",
     "type-temperature": "Температура",
     "type-thermostat": "Термостат",
-    "type-url": "URL",
+    "type-unknown": "Неизвестно",
     "type-vacuumCleaner": "Пылесос",
-    "type-valve": "Вентиль",
     "type-volume": "Громкость",
     "type-volumeGroup": "Группа громкости",
     "type-warning": "Предупреждение",

package/build/Components/DeviceType/i18n/uk.json

@@ -1,6 +1,8 @@
 {
     "type-Device type": "Тип пристрою",
     "type-airCondition": "Кондиціонер",
+    "type-airPurifier": "Очищувач повітря",
+    "type-airQuality": "Якість повітря",
     "type-blind": "жалюзі",
     "type-blindButtons": "Штора керується кнопками",
     "type-button": "кнопку",
@@ -8,11 +10,17 @@
     "type-camera": "камера",
     "type-chart": "Діаграма",
     "type-cie": "Кольорове світло CIE",
+    "type-coAlarm": "Датчик чадного газу",
+    "type-contact": "Датчик контакту",
     "type-ct": "Колірна температура",
     "type-dimmer": "диммер",
     "type-door": "двері",
+    "type-electricity": "Лічильник електроенергії",
+    "type-fan": "Вентилятор",
+    "type-fillLevel": "Рівень наповнення",
     "type-fireAlarm": "пожежна сигналізація",
     "type-floodAlarm": "сигналізація про повінь",
+    "type-flow": "Витрата",
     "type-gate": "ворота",
     "type-hue": "світло HUE",
     "type-humidity": "вологість",
@@ -27,6 +35,8 @@
     "type-media": "ЗМІ",
     "type-motion": "руху",
     "type-percentage": "Відсоток",
+    "type-pressure": "Тиск",
+    "type-pump": "Насос",
     "type-rgb": "RGB світло",
     "type-rgbSingle": "Одиночне світло RGB",
     "type-rgbwSingle": "RGBW як одне значення",
@@ -34,9 +44,8 @@
     "type-socket": "гніздо",
     "type-temperature": "температура",
     "type-thermostat": "термостат",
-    "type-url": "URL",
+    "type-unknown": "Невідомо",
     "type-vacuumCleaner": "Пилосос",
-    "type-valve": "клапан",
     "type-volume": "обсяг",
     "type-volumeGroup": "група обсягів",
     "type-warning": "УВАГА",

package/build/Components/DeviceType/i18n/zh-cn.json

@@ -1,6 +1,8 @@
 {
     "type-Device type": "设备类型",
     "type-airCondition": "空调",
+    "type-airPurifier": "空气净化器",
+    "type-airQuality": "空气质量",
     "type-blind": "百叶窗",
     "type-blindButtons": "按钮控制百叶窗",
     "type-button": "按钮",
@@ -8,11 +10,17 @@
     "type-camera": "相机",
     "type-chart": "图表",
     "type-cie": "CIE色光",
+    "type-coAlarm": "一氧化碳报警器",
+    "type-contact": "触点传感器",
     "type-ct": "色温",
     "type-dimmer": "调光器",
     "type-door": "门",
+    "type-electricity": "电表",
+    "type-fan": "风扇",
+    "type-fillLevel": "填充量",
     "type-fireAlarm": "火灾报警",
     "type-floodAlarm": "洪水警报",
+    "type-flow": "流量",
     "type-gate": "门",
     "type-hue": "色调灯",
     "type-humidity": "湿度",
@@ -27,6 +35,8 @@
     "type-media": "媒体",
     "type-motion": "运动",
     "type-percentage": "百分比",
+    "type-pressure": "压力",
+    "type-pump": "泵",
     "type-rgb": "RGB灯",
     "type-rgbSingle": "RGB灯单",
     "type-rgbwSingle": "RGBW 作为单一值",
@@ -34,9 +44,8 @@
     "type-socket": "插座",
     "type-temperature": "温度",
     "type-thermostat": "恒温器",
-    "type-url": "网址",
+    "type-unknown": "未知",
     "type-vacuumCleaner": "吸尘器",
-    "type-valve": "阀门",
     "type-volume": "体积",
     "type-volumeGroup": "卷组",
     "type-warning": "警告",

package/build/Components/ObjectBrowser/ObjectBrowserClass.d.ts

@@ -33,6 +33,10 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
     /** Width class for which the columns were calculated the last time */
     private lastCalculatedWidth;
     private pausedSubscribes;
+    /** The tree was rebuilt while subscribes were paused, so the filter must be re-applied on resume */
+    private treeRebuiltWhilePaused;
+    /** Time of the first object change since the last tree rebuild (upper bound for the rebuild delay) */
+    private objectsUpdateFirstTs;
     private selectFirst;
     /** Last navigation that was applied from `navigateTo` or reported via `onNavigateTo` (loop guard). */
     private lastNav;
@@ -40,7 +44,7 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
     private applyingNav;
     root: TreeItem | null;
     readonly states: Record<string, ioBroker.State>;
-    subscribes: string[];
+    subscribes: Set<string>;
     private unsubscribeTimer;
     private statesUpdateTimer;
     private objectsUpdateTimer;
@@ -94,7 +98,7 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
         item: any;
         ts: number;
     };
-    recordStates: string[];
+    recordStates: Set<string>;
     styles: {
         cellIdIconFolder?: React.CSSProperties;
         cellIdIconDocument?: React.CSSProperties;

package/build/Components/ObjectBrowser/ObjectBrowserClass.js

@@ -17,7 +17,7 @@ import { Utils } from '../Utils'; // @iobroker/gui-components/Components/Utils
 import { TabContainer } from '../TabContainer';
 import { TabContent } from '../TabContent';
 import { TabHeader } from '../TabHeader';
-import { applyFilter, binarySearch, buildTree, findNode, formatValue, generateFile, getName, colVar, widthFromContainer, growVar, getSelectIdIconFromObjects, setCustomValue, } from './utils';
+import { applyFilter, buildTree, findNode, formatValue, generateFile, getName, colVar, widthFromContainer, growVar, getSelectIdIconFromObjects, setCustomValue, } from './utils';
 import { HistoryChart } from './HistoryChart';
 import { styles } from './styles';
 import * as dialogs from './dialogs';
@@ -54,6 +54,10 @@ export class ObjectBrowserClass extends Component {
     /** Width class for which the columns were calculated the last time */
     lastCalculatedWidth = null;
     pausedSubscribes = false;
+    /** The tree was rebuilt while subscribes were paused, so the filter must be re-applied on resume */
+    treeRebuiltWhilePaused = false;
+    /** Time of the first object change since the last tree rebuild (upper bound for the rebuild delay) */
+    objectsUpdateFirstTs = 0;
     selectFirst;
     /** Last navigation that was applied from `navigateTo` or reported via `onNavigateTo` (loop guard). */
     lastNav = null;
@@ -61,7 +65,7 @@ export class ObjectBrowserClass extends Component {
     applyingNav = false;
     root = null;
     states = {};
-    subscribes = [];
+    subscribes = new Set();
     unsubscribeTimer = null;
     statesUpdateTimer = null;
     objectsUpdateTimer = null;
@@ -99,7 +103,7 @@ export class ObjectBrowserClass extends Component {
     columnsVisibility = {};
     changedIds = null;
     contextMenu = null;
-    recordStates = [];
+    recordStates = new Set();
     styles = {};
     expertMode = false;
     customColumnDialog = null;
@@ -688,7 +692,7 @@ export class ObjectBrowserClass extends Component {
             // console.log(`- unsubscribe ${pattern}`);
             this.props.socket.unsubscribeState(pattern, this.onStateChange);
         });
-        this.subscribes = [];
+        this.subscribes.clear();
         this.objects = {};
     }
     /**
@@ -740,7 +744,7 @@ export class ObjectBrowserClass extends Component {
             // console.log(`- unsubscribe ${pattern}`);
             this.props.socket.unsubscribeState(pattern, this.onStateChange);
         });
-        this.subscribes = [];
+        this.subscribes.clear();
         this.loadAllObjects(true)
             .then(() => console.log('updated!'))
             .catch(e => this.showError(e));
@@ -837,12 +841,12 @@ export class ObjectBrowserClass extends Component {
     }
     checkUnsubscribes() {
         // Remove unused subscriptions
-        for (let i = this.subscribes.length - 1; i >= 0; i--) {
-            if (!this.recordStates.includes(this.subscribes[i])) {
-                this.unsubscribe(this.subscribes[i]);
+        for (const id of [...this.subscribes]) {
+            if (!this.recordStates.has(id)) {
+                this.unsubscribe(id);
             }
         }
-        this.recordStates = [];
+        this.recordStates.clear();
     }
     /**
      * Find an item.
@@ -875,6 +879,19 @@ export class ObjectBrowserClass extends Component {
      */
     onStateChange = (id, state) => {
         // console.log(`> stateChange ${id}`);
+        const oldState = this.states[id];
+        if (state &&
+            oldState &&
+            state.val === oldState.val &&
+            state.ack === oldState.ack &&
+            state.q === oldState.q &&
+            state.ts === oldState.ts &&
+            state.lc === oldState.lc &&
+            state.from === oldState.from) {
+            // echo of the already known state: nothing that is displayed can have changed
+            // (`from` is compared too, because it is shown in the `changedFrom` column)
+            return;
+        }
         if (this.states[id]) {
             const item = this.findItem(id);
             if (item?.data.state) {
@@ -995,23 +1012,38 @@ export class ObjectBrowserClass extends Component {
         this.afterObjectUpdated();
     };
     afterObjectUpdated() {
-        if (!this.objectsUpdateTimer && this.objects) {
-            this.objectsUpdateTimer = setTimeout(() => {
-                this.objectsUpdateTimer = null;
-                const { info, root } = buildTree(this.objects, {
-                    imagePrefix: this.props.imagePrefix,
-                    root: this.props.root,
-                    lang: this.props.lang,
-                    themeType: this.props.themeType,
-                });
-                this.root = root;
-                this.info = info;
-                if (!this.pausedSubscribes) {
-                    this.doFilter();
-                }
-                // else it will be re-rendered when the dialog will be closed
-            }, 500);
+        if (!this.objects) {
+            return;
+        }
+        if (this.objectsUpdateTimer) {
+            // collect a burst of object changes into one rebuild: wait for a quiet period,
+            // but do not postpone the rebuild forever while changes keep arriving
+            if (Date.now() - this.objectsUpdateFirstTs >= 2000) {
+                return;
+            }
+            clearTimeout(this.objectsUpdateTimer);
+        }
+        else {
+            this.objectsUpdateFirstTs = Date.now();
         }
+        this.objectsUpdateTimer = setTimeout(() => {
+            this.objectsUpdateTimer = null;
+            const { info, root } = buildTree(this.objects, {
+                imagePrefix: this.props.imagePrefix,
+                root: this.props.root,
+                lang: this.props.lang,
+                themeType: this.props.themeType,
+            });
+            this.root = root;
+            this.info = info;
+            if (!this.pausedSubscribes) {
+                this.doFilter(true);
+            }
+            else {
+                // the new tree has no visibility flags yet; re-apply the filter when the dialog is closed
+                this.treeRebuiltWhilePaused = true;
+            }
+        }, 500);
     }
     // This function is called when the user changes the alias of an object.
     // It updates the aliasMap and returns true if the aliasMap has changed.
@@ -1097,8 +1129,8 @@ export class ObjectBrowserClass extends Component {
         return { newInnerState, filtered: false };
     }
     subscribe(id) {
-        if (!this.subscribes.includes(id)) {
-            this.subscribes.push(id);
+        if (!this.subscribes.has(id)) {
+            this.subscribes.add(id);
             // console.log(`+ subscribe ${id}`);
             if (!this.pausedSubscribes) {
                 this.props.socket
@@ -1108,9 +1140,8 @@ export class ObjectBrowserClass extends Component {
         }
     }
     unsubscribe(id) {
-        const pos = this.subscribes.indexOf(id);
-        if (pos !== -1) {
-            this.subscribes.splice(pos, 1);
+        if (this.subscribes.has(id)) {
+            this.subscribes.delete(id);
             if (this.states[id]) {
                 delete this.states[id];
             }
@@ -1129,6 +1160,11 @@ export class ObjectBrowserClass extends Component {
         else if (this.pausedSubscribes && !isPause) {
             this.pausedSubscribes = false;
             this.subscribes.forEach(id => this.props.socket.subscribeState(id, this.onStateChange));
+            if (this.treeRebuiltWhilePaused) {
+                // without this filter run, no node of the rebuilt tree is marked visible and the browser stays empty
+                this.treeRebuiltWhilePaused = false;
+                this.doFilter(true);
+            }
         }
     }
     clearFilter() {
@@ -1168,20 +1204,21 @@ export class ObjectBrowserClass extends Component {
         this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectSelected`, '[]');
         this.setState({ expanded: [], depth: 0, selected: [] }, () => this.onAfterSelect());
     }
-    expandDepth(root, depth, expanded) {
+    expandDepth(root, depth, expanded, expandedSet) {
         if (!this.root) {
             throw new Error('No root');
         }
         root ||= this.root;
+        expandedSet ||= new Set(expanded);
         if (depth > 0) {
             root.children?.forEach(item => {
                 if (item.data.sumVisibility) {
-                    if (!binarySearch(expanded, item.data.id)) {
+                    if (!expandedSet.has(item.data.id)) {
                         expanded.push(item.data.id);
-                        expanded.sort();
+                        expandedSet.add(item.data.id);
                     }
                     if (depth - 1 > 0) {
-                        this.expandDepth(item, depth - 1, expanded);
+                        this.expandDepth(item, depth - 1, expanded, expandedSet);
                     }
                 }
             });
@@ -1196,6 +1233,7 @@ export class ObjectBrowserClass extends Component {
             const expanded = [...this.state.expanded];
             if (this.root) {
                 this.expandDepth(this.root, depth, expanded);
+                expanded.sort();
             }
             this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectExpanded`, JSON.stringify(expanded));
             this.setState({ depth, expanded });
@@ -2303,7 +2341,7 @@ export class ObjectBrowserClass extends Component {
      * The rendering method of this component.
      */
     render() {
-        this.recordStates = [];
+        this.recordStates.clear();
         if (this.unsubscribeTimer) {
             clearTimeout(this.unsubscribeTimer);
         }