diff options
author | TrueKuehli <rctcoaster2000@hotmail.de> | 2018-10-01 15:15:01 +0200 |
---|---|---|
committer | TrueKuehli <rctcoaster2000@hotmail.de> | 2018-10-01 15:15:01 +0200 |
commit | 77ab26824754f4338553816d5803974554b1e45a (patch) | |
tree | 5a50518bc7cacbb579ae54e9e238e039eb6d19a9 /WebInterface/NodeJSServer/src/modules/ui/notification-banner.js | |
parent | 237e4d43229847bb69aadcfa6e6aca517128913b (diff) |
Added notifications badges to notifications
Shows the current amount of notifications
Diffstat (limited to 'WebInterface/NodeJSServer/src/modules/ui/notification-banner.js')
-rw-r--r-- | WebInterface/NodeJSServer/src/modules/ui/notification-banner.js | 16 |
1 files changed, 14 insertions, 2 deletions
diff --git a/WebInterface/NodeJSServer/src/modules/ui/notification-banner.js b/WebInterface/NodeJSServer/src/modules/ui/notification-banner.js index 395db94..12461fa 100644 --- a/WebInterface/NodeJSServer/src/modules/ui/notification-banner.js +++ b/WebInterface/NodeJSServer/src/modules/ui/notification-banner.js @@ -7,11 +7,13 @@ export default class BannerController { * @param {string} bannerId ID of Notification Banner * @param {string} textP ID of Notification Banner text field * @param {string} dismissBtn ID of dismiss button + * @param {string} notificationBadge ID of badge (# of notifications) */ - constructor(bannerId, textP, dismissBtn) { + constructor(bannerId, textP, dismissBtn, notificationBadge) { this.banner = document.getElementById(bannerId); this.bannerText = document.getElementById(textP); this.dismissBtn = document.getElementById(dismissBtn); + this.notificationBadge = document.getElementById(notificationBadge); this.bannerMsgs = []; // Hide Banner after JS loading finished @@ -69,7 +71,6 @@ export default class BannerController { * Updates the notification banner with the most recent message */ update() { - // TODO: Show if multiple messages are there if (this.bannerMsgs.length === 0) { this.banner.classList.add('hidden'); return; @@ -85,5 +86,16 @@ export default class BannerController { else this.bannerText.innerText = text; this.current = name; + + // Update notification badge + if (this.bannerMsgs.length < 2) { + this.notificationBadge.classList.add('hidden'); + } else if (this.bannerMsgs.length > 9) { + this.notificationBadge.classList.remove('hidden'); + this.notificationBadge.textContent = '∞'; + } else { + this.notificationBadge.classList.remove('hidden'); + this.notificationBadge.textContent = this.bannerMsgs.length.toString(); + } } } |