From 9f0b255f32dfa81bffe75f89335a78a659b4ce6a Mon Sep 17 00:00:00 2001
From: TrueKuehli <rctcoaster2000@hotmail.de>
Date: Tue, 27 Nov 2018 12:16:33 +0100
Subject: Reworked the code, but currently unable to test, so bugs are bound to
 be in there

Will test it sometime later. There also might still be stuff, that has yet to be reworked.
---
 .../modules/ui/components/notification-banner.js   | 133 +++++++++++++++++++++
 1 file changed, 133 insertions(+)
 create mode 100644 WebInterface/NodeJSServer/src/js/modules/ui/components/notification-banner.js

(limited to 'WebInterface/NodeJSServer/src/js/modules/ui/components/notification-banner.js')

diff --git a/WebInterface/NodeJSServer/src/js/modules/ui/components/notification-banner.js b/WebInterface/NodeJSServer/src/js/modules/ui/components/notification-banner.js
new file mode 100644
index 0000000..a527725
--- /dev/null
+++ b/WebInterface/NodeJSServer/src/js/modules/ui/components/notification-banner.js
@@ -0,0 +1,133 @@
+/**
+ * Object containing a message for the notification banner
+ */
+class BannerItem {
+  /**
+   * Creates new Banner Message Items
+   * @param {String} name Name the message will be referenced under
+   * @param {String} content Content, either formatted as plain text or html
+   * @param {Boolean} html Is content formatted as html?
+   */
+  constructor(name, content, html) {
+    this.name = name;
+    this.content = content;
+    this.html = html;
+  }
+}
+
+/**
+ * Class for controlling the Notification banner
+ */
+export default class BannerController {
+  /**
+   * Creates references to objects and hides notification banner
+   * @param {Interface} iface Interface to receive comm. from
+   * @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} badge ID of badge (# of notifications)
+   */
+  constructor(iface, bannerId, textP, dismissBtn, badge) {
+    iface.addObject(this, 'notifications', ['show', 'hide']);
+    this.iface = iface;
+
+    this.ids = {bannerId, textP, dismissBtn, badge};
+  }
+
+  /**
+   * Initializes the Banner in the DOM
+   */
+  initialize() {
+    this.banner = document.getElementById(this.ids.bannerId);
+    this.bannerText = document.getElementById(this.ids.textP);
+    this.dismissBtn = document.getElementById(this.ids.dismissBtn);
+    this.notificationBadge = document.getElementById(this.ids.badge);
+    this.bannerMsgs = [];
+
+    this.banner.classList.add('hidden'); // Hide banner by default
+    this.registerEvents();
+  }
+
+  /**
+   * Registers events for notification banner
+   */
+  registerEvents() {
+    this.registerDismissEvent();
+  }
+
+  /**
+   * Registers dismissing via dismiss button
+   */
+  registerDismissEvent() {
+    this.dismissBtn.addEventListener('click', () => {
+      this.dismissCurrent();
+    });
+  }
+
+  /**
+   * Pushes a new message to the notification banner and shows it
+   * @param {string} name Name to register notification (referenced in hide)
+   * @param {string} text Notification text
+   */
+  show(name, text) {
+    let bannerItem = new BannerItem(name, text, false);
+    this.bannerMsgs.push(bannerItem);
+
+    this.update();
+  }
+
+  /**
+   * Removes notification from banner
+   * @param {string} name The name the notification was registered under
+   */
+  hide(name) {
+    if (name) this.bannerMsgs = this.bannerMsgs.filter(elt => elt.name != name);
+    else this.bannerMsgs = [];
+
+    this.update();
+  }
+
+  /**
+   * Dismisses the currently shown message
+   */
+  dismissCurrent() {
+    this.hide(this.current);
+  }
+
+  /**
+   * Updates the notification banner with the most recent message
+   */
+  update() {
+    if (this.bannerMsgs.length === 0) {
+      this.banner.classList.add('hidden');
+      return;
+    }
+
+    const lastNotification = this.bannerMsgs[this.bannerMsgs.length - 1];
+    const name = lastNotification.name;
+    const text = lastNotification.content;
+    const isHtml = lastNotification.html;
+    this.banner.classList.remove('hidden');
+
+    if (isHtml) this.bannerText.innerHTML = text;
+    else this.bannerText.innerText = text;
+
+    this.current = name;
+    this.updateNotificationBadge();
+  }
+
+  /**
+   * Updates the notification badge number
+   */
+  updateNotificationBadge() {
+    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();
+    }
+  }
+}
-- 
cgit v1.2.3-70-g09d2