From 77ab26824754f4338553816d5803974554b1e45a Mon Sep 17 00:00:00 2001
From: TrueKuehli <rctcoaster2000@hotmail.de>
Date: Mon, 1 Oct 2018 15:15:01 +0200
Subject: Added notifications badges to notifications

Shows the current amount of notifications
---
 WebInterface/NodeJSServer/src/index.js               |  2 +-
 .../src/modules/ui/notification-banner.js            | 16 ++++++++++++++--
 .../style/partials/front-layer/_notifications.scss   | 20 +++++++++++++++++++-
 3 files changed, 34 insertions(+), 4 deletions(-)

(limited to 'WebInterface/NodeJSServer/src')

diff --git a/WebInterface/NodeJSServer/src/index.js b/WebInterface/NodeJSServer/src/index.js
index 3ca0e39..35ea63e 100644
--- a/WebInterface/NodeJSServer/src/index.js
+++ b/WebInterface/NodeJSServer/src/index.js
@@ -7,7 +7,7 @@ let backdrop = new Backdrop('menu', 'front-layer', 'show-menu');
 backdrop.register();
 
 let notifications = new BannerController('notifications',
-    'banner-info', 'dismiss-banner');
+    'banner-info', 'dismiss-banner', 'notification-amount');
 notifications.register();
 
 let client = new ServerClient('http://89.183.8.51:5000/chatHub', 'server-list', true);
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();
+    }
   }
 }
diff --git a/WebInterface/NodeJSServer/src/style/partials/front-layer/_notifications.scss b/WebInterface/NodeJSServer/src/style/partials/front-layer/_notifications.scss
index 4dd7361..d8e8159 100644
--- a/WebInterface/NodeJSServer/src/style/partials/front-layer/_notifications.scss
+++ b/WebInterface/NodeJSServer/src/style/partials/front-layer/_notifications.scss
@@ -2,7 +2,6 @@
 
 .front-layer {
   .banner {
-    z-index: 1;
     background-color: white;
     border: none;
     border-radius: 16px 16px 0 0;
@@ -34,6 +33,25 @@
       margin-bottom: 0;
     }
 
+    .notification-badge {
+      height: 1rem;
+      min-width: 1rem;
+      font-weight: bold;
+      color: $secondary-text;
+      font-size: 1rem;
+      padding: 0.5rem;
+      margin: 0.5rem 0 0.5rem 1rem;
+      text-align: center;
+      line-height: 1rem;
+      background-color: $secondary;
+      border: none;
+      border-radius: 50%;
+
+      &.hidden {
+        display: none;
+      }
+    }
+
     .banner-text {
       align-self: left;
       margin: 1rem;
-- 
cgit v1.2.3-54-g00ecf