update the notifications on the fly as they occur and display them co…

…rrectly
ioBroker · Feb 22, 2024 · fcc69e9 · fcc69e9
1 parent 47b92f3
commit fcc69e9
Show file tree

Hide file tree

Showing 4 changed files with 163 additions and 157 deletions.
diff --git a/packages/admin/src/src/App.jsx b/packages/admin/src/src/App.jsx
@@ -929,6 +929,7 @@ class App extends Router {
                             this.adaptersWorker.registerRepositoryHandler(this.repoChangeHandler);
                             this.adaptersWorker.registerHandler(this.adaptersChangeHandler);
                             this.hostsWorker.registerHandler(this.updateHosts);
+                            this.hostsWorker.registerNotificationHandler(notifications => this.handleNewNotifications(notifications));
 
                             this.subscribeOnHostsStatus();
 
@@ -1269,12 +1270,12 @@ class App extends Router {
         }
 
         return <NotificationsDialog
-            messages={{}}
+            notifications={this.state.notifications.notifications}
+            instances={this.state.notifications.instances}
             onClose={() => this.setState({ notificationsDialog: false })}
-            ackCallback={() => console.log('ask')}
+            ackCallback={(host, name) => this.socket.clearNotifications(host, name)}
             dateFormat={this.state.systemConfig.common.dateFormat}
             themeType={this.state.themeType}
-            instances={{}}
         />;
     }
 
@@ -1298,7 +1299,7 @@ class App extends Router {
      *
      * @param {Record<string, any>} notifications
      */
-    handleNewNotifications(notifications) {
+    async handleNewNotifications(notifications) {
         // console.log(`new notifications: ${JSON.stringify(notifications)}`);
         let noNotifications = 0;
 
@@ -1316,7 +1317,9 @@ class App extends Router {
             }
         }
 
-        this.setState({ noNotifications, notifications });
+        const instances = await this.instancesWorker.getInstances();
+
+        this.setState({ noNotifications, notifications: { notifications, instances } });
     }
 
     showAdaptersWarning = (notifications, socket, host) => {
@@ -2383,6 +2386,19 @@ class App extends Router {
                             )}
                         >
                             <Toolbar>
+                                <IconButton
+                                    size="large"
+                                    onClick={() => this.setState({ notificationsDialog: true })}
+                                >
+                                    <Tooltip title={I18n.t('Notifications')}>
+                                        <Badge
+                                            badgeContent={this.state.noNotifications}
+                                            color="primary"
+                                        >
+                                            <NotificationsIcon />
+                                        </Badge>
+                                    </Tooltip>
+                                </IconButton>
                                 <IconButton
                                     size="large"
                                     edge="start"
@@ -2565,20 +2581,6 @@ class App extends Router {
                                         </IconButton>}
                                 </div>
 
-                                <IconButton
-                                    size="large"
-                                    onClick={() => this.setState({ notificationsDialog: true })}
-                                >
-                                    <Tooltip title={I18n.t('Notifications')}>
-                                        <Badge
-                                            badgeContent={this.state.noNotifications}
-                                            color="primary"
-                                        >
-                                            <NotificationsIcon />
-                                        </Badge>
-                                    </Tooltip>
-                                </IconButton>
-
                                 {this.renderLoggedUser()}
 
                                 {this.state.drawerState !== 0 &&

diff --git a/packages/admin/src/src/Workers/HostsWorker.jsx b/packages/admin/src/src/Workers/HostsWorker.jsx
@@ -174,15 +174,15 @@ class HostsWorker {
 
             this.notificationTimer = setTimeout(host_ => {
                 this.notificationTimer = null;
-                this.notificationPromises[host_] = this._getNotificationsFromHots(host_, true);
+                this.notificationPromises[host_] = this._getNotificationsFromHosts(host_, true);
 
                 this.notificationPromises[host_].then(notifications =>
                     this.notificationsHandlers.forEach(cb => cb(notifications)));
             }, 300, host);
         }
     };
 
-    _getNotificationsFromHots(hostId, update) {
+    _getNotificationsFromHosts(hostId, update) {
         if (!update && this.notificationPromises[hostId]) {
             return this.notificationPromises[hostId];
         }
@@ -205,12 +205,12 @@ class HostsWorker {
 
     getNotifications(hostId, update) {
         if (hostId) {
-            return this._getNotificationsFromHots(hostId, update);
+            return this._getNotificationsFromHosts(hostId, update);
         }
         return this.socket.getCompactHosts(update)
             .then(hosts => {
                 const promises = hosts
-                    .map(host => this._getNotificationsFromHots(host._id, update));
+                    .map(host => this._getNotificationsFromHosts(host._id, update));
 
                 return Promise.all(promises)
                     .then(pResults => {

diff --git a/packages/admin/src/src/dialogs/ExpertModeDialog.jsx b/packages/admin/src/src/dialogs/ExpertModeDialog.jsx
@@ -9,11 +9,11 @@ import {
     FormControlLabel,
     Checkbox,
     Grid,
-    DialogTitle, IconButton, Typography
+    DialogTitle, IconButton, Typography,
 } from '@mui/material';
 import {
     Build as BuildIcon,
-    Check,
+    Check as CheckIcon,
 } from '@mui/icons-material';
 
 import { I18n, IconExpert } from '@iobroker/adapter-react-v5';