1 files changed, 133 insertions, 0 deletions
diff --git a/WebInterface/src/js/modules/ui/components/notification-banner.js b/WebInterface/src/js/modules/ui/components/notification-banner.js
new file mode 100644
index 0000000..a527725
--- /dev/null
+++ b/WebInterface/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();
+    }
+  }
+}