🎨 [Frontend] Enh: Support multiple announcements

services/static-webserver/client/source/class/osparc/announcement/AnnouncementUIFactory.js

@@ -19,14 +19,8 @@ qx.Class.define("osparc.announcement.AnnouncementUIFactory", {
   extend: qx.core.Object,
   type: "singleton",
 
-  properties: {
-    announcement: {
-      check: "osparc.announcement.Announcement",
-      init: null,
-      nullable: false,
-      event: "changeAnnouncement",
-      apply: "__applyAnnouncement"
-    }
+  events: {
+    "changeAnnouncements": "qx.event.type.Event",
   },
 
   statics: {
@@ -63,14 +57,9 @@ qx.Class.define("osparc.announcement.AnnouncementUIFactory", {
       }
 
       return loginAnnouncement;
-    }
-  },
-
-  members: {
-    __ribbonAnnouncement: null,
+    },
 
-    __isValid: function(widgetType) {
-      const announcement = this.getAnnouncement();
+    isValid: function(announcement, widgetType) {
       if (announcement) {
         const now = new Date();
         const validPeriod = now > announcement.getStart() && now < announcement.getEnd();
@@ -80,59 +69,105 @@ qx.Class.define("osparc.announcement.AnnouncementUIFactory", {
       }
       return false;
     },
+  },
 
-    __applyAnnouncement: function() {
-      if (this.__ribbonAnnouncement) {
-        osparc.notification.RibbonNotifications.getInstance().removeNotification(this.__ribbonAnnouncement);
-        this.__ribbonAnnouncement = null;
-      }
-      if (this.__hasRibbonAnnouncement()) {
-        this.__addRibbonAnnouncement();
-      }
+  members: {
+    __announcements: null,
+    __ribbonAnnouncements: null,
+
+    setAnnouncementsData: function(announcementsData) {
+      this.__announcements = [];
+      announcementsData.forEach(announcementData => {
+        const announcement = new osparc.announcement.Announcement(announcementData);
+        this.__announcements.push(announcement);
+      });
+      this.fireEvent("changeAnnouncements");
+
+      this.__addToRibbon();
     },
 
-    hasLoginAnnouncement: function() {
-      return this.__isValid("login");
+    __addToRibbon: function() {
+      if (this.__ribbonAnnouncements && this.__ribbonAnnouncements.length) {
+        this.__ribbonAnnouncements.forEach(ribbonAnnouncement => {
+          osparc.notification.RibbonNotifications.getInstance().removeNotification(ribbonAnnouncement);
+        });
+      }
+      this.__ribbonAnnouncements = [];
+      this.__announcements.forEach(announcement => {
+        if (this.self().isValid(announcement, "ribbon")) {
+          const ribbonAnnouncement = this.__addRibbonAnnouncement(announcement);
+          if (ribbonAnnouncement) {
+            this.__ribbonAnnouncements.push(ribbonAnnouncement);
+          }
+        }
+      });
     },
 
-    __hasRibbonAnnouncement: function() {
-      return this.__isValid("ribbon");
+    hasLoginAnnouncement: function() {
+      return this.__announcements && this.__announcements.some(announcement => this.self().isValid(announcement, "login"));
     },
 
     hasUserMenuAnnouncement: function() {
-      return this.__isValid("user-menu") && this.getAnnouncement().getLink();
+      return this.__announcements && this.__announcements.some(announcement => this.self().isValid(announcement, "ribbon") && announcement.getLink());
     },
 
-    createLoginAnnouncement: function() {
-      const announcement = this.getAnnouncement();
-      const loginAnnouncement = this.self().createLoginAnnouncement(announcement.getTitle(), announcement.getDescription());
-      return loginAnnouncement;
+    createLoginAnnouncements: function() {
+      const loginAnnouncements = [];
+      this.__announcements.forEach(announcement => {
+        if (this.self().isValid(announcement, "login")) {
+          const loginAnnouncement = this.self().createLoginAnnouncement(announcement.getTitle(), announcement.getDescription())
+          loginAnnouncement.setWidth(osparc.auth.core.BaseAuthPage.FORM_WIDTH-5); // show 1-2 pixel of the nearby announcement
+          loginAnnouncements.push(loginAnnouncement);
+        }
+      });
+      if (loginAnnouncements.length === 1) {
+        return loginAnnouncements[0];
+      }
+      const slideBar = new osparc.widget.SlideBar().set({
+        allowGrowX: true,
+      });
+      slideBar.getChildControl("button-backward").set({
+        backgroundColor: "transparent"
+      });
+      slideBar.getChildControl("button-forward").set({
+        backgroundColor: "transparent"
+      });
+      loginAnnouncements.forEach(loginAnnouncement => slideBar.add(loginAnnouncement));
+      return slideBar;
     },
 
-    __addRibbonAnnouncement: function() {
-      const announcement = this.getAnnouncement();
-
+    __addRibbonAnnouncement: function(announcement) {
       if (osparc.utils.Utils.localCache.isDontShowAnnouncement(announcement.getId())) {
-        return;
+        return null;
       }
 
-      let text = announcement.getTitle();
+      let text = "";
+      if (announcement.getTitle()) {
+        text += announcement.getTitle();
+      }
+      if (announcement.getTitle() && announcement.getDescription()) {
+        text += ": ";
+      }
       if (announcement.getDescription()) {
-        text += ": " + announcement.getDescription();
+        text += announcement.getDescription();
       }
-
-      const ribbonAnnouncement = this.__ribbonAnnouncement = new osparc.notification.RibbonNotification(text, "announcement", true);
+      const ribbonAnnouncement = new osparc.notification.RibbonNotification(text, "announcement", true);
       ribbonAnnouncement.announcementId = announcement.getId();
       osparc.notification.RibbonNotifications.getInstance().addNotification(ribbonAnnouncement);
+      return ribbonAnnouncement;
     },
 
-    createUserMenuAnnouncement: function() {
-      const announcement = this.getAnnouncement();
-
-      const link = announcement.getLink();
-      const userMenuAnnouncement = new qx.ui.menu.Button(announcement.getTitle() + "...");
-      userMenuAnnouncement.addListener("execute", () => window.open(link));
-      return userMenuAnnouncement;
+    createUserMenuAnnouncements: function() {
+      const userMenuAnnouncements = [];
+      this.__announcements.forEach(announcement => {
+        if (this.self().isValid(announcement, "user-menu")) {
+          const link = announcement.getLink();
+          const userMenuAnnouncement = new qx.ui.menu.Button(announcement.getTitle() + "...");
+          userMenuAnnouncement.addListener("execute", () => window.open(link));
+          userMenuAnnouncements.push(userMenuAnnouncement);
+        }
+      });
+      return userMenuAnnouncements;
     }
   }
 });

services/static-webserver/client/source/class/osparc/announcement/Tracker.js

@@ -25,21 +25,13 @@ qx.Class.define("osparc.announcement.Tracker", {
 
   members: {
     __checkInterval: null,
-    __announcements: null,
 
     checkAnnouncements: async function() {
-      return new Promise(resolve => {
-        osparc.data.Resources.get("announcements")
-          .then(announcements => {
-            if (announcements && announcements.length) {
-              this.__setAnnouncements(announcements);
-            } else {
-              this.__setAnnouncements(null);
-            }
-            resolve();
-          })
-          .catch(err => console.error(err));
-      });
+      osparc.data.Resources.get("announcements")
+        .then(announcements => {
+          osparc.announcement.AnnouncementUIFactory.getInstance().setAnnouncementsData((announcements && announcements.length) ? announcements : []);
+        })
+        .catch(err => console.error(err));
     },
 
     startTracker: function() {
@@ -52,15 +44,5 @@ qx.Class.define("osparc.announcement.Tracker", {
         clearInterval(this.__checkInterval);
       }
     },
-
-    __setAnnouncements: function(announcementsData) {
-      this.__announcements = {};
-      if (announcementsData) {
-        announcementsData.forEach(announcementData => {
-          const announcement = new osparc.announcement.Announcement(announcementData);
-          osparc.announcement.AnnouncementUIFactory.getInstance().setAnnouncement(announcement);
-        });
-      }
-    }
   }
 });

services/static-webserver/client/source/class/osparc/auth/ui/LoginView.js

@@ -37,18 +37,22 @@ qx.Class.define("osparc.auth.ui.LoginView", {
 
   members: {
     __loginBtn: null,
+    __loginAnnouncements: null,
 
     // overrides base
     _buildPage: function() {
       const announcementUIFactory = osparc.announcement.AnnouncementUIFactory.getInstance();
+      const addAnnouncements = () => {
+        if (this.__loginAnnouncements) {
+          this.remove(this.__loginAnnouncements);
+        }
+        this.__loginAnnouncements = announcementUIFactory.createLoginAnnouncements();
+        this.addAt(this.__loginAnnouncements, 0);
+      };
       if (announcementUIFactory.hasLoginAnnouncement()) {
-        this.addAt(announcementUIFactory.createLoginAnnouncement(), 0);
+        addAnnouncements();
       } else {
-        announcementUIFactory.addListenerOnce("changeAnnouncement", e => {
-          if (announcementUIFactory.hasLoginAnnouncement()) {
-            this.addAt(announcementUIFactory.createLoginAnnouncement(), 0);
-          }
-        });
+        announcementUIFactory.addListenerOnce("changeAnnouncements", () => addAnnouncements());
       }
 
       // form

services/static-webserver/client/source/class/osparc/navigation/UserMenu.js

@@ -177,10 +177,7 @@ qx.Class.define("osparc.navigation.UserMenu", {
       this.getChildControl("theme-switcher");
       this.addSeparator();
 
-      const announcementUIFactory = osparc.announcement.AnnouncementUIFactory.getInstance();
-      if (announcementUIFactory.hasUserMenuAnnouncement()) {
-        this.add(announcementUIFactory.createUserMenuAnnouncement());
-      }
+      this.__addAnnouncements();
       this.getChildControl("about");
       if (osparc.product.Utils.showAboutProduct()) {
         this.getChildControl("about-product");
@@ -196,6 +193,13 @@ qx.Class.define("osparc.navigation.UserMenu", {
       osparc.utils.Utils.prettifyMenu(this);
     },
 
+    __addAnnouncements: function() {
+      const announcementUIFactory = osparc.announcement.AnnouncementUIFactory.getInstance();
+      if (announcementUIFactory.hasUserMenuAnnouncement()) {
+        announcementUIFactory.createUserMenuAnnouncements().forEach(announcement => this.add(announcement));
+      }
+    },
+
     populateMenuCompact: function() {
       this.removeAll();
       const authData = osparc.auth.Data.getInstance();
@@ -233,10 +237,7 @@ qx.Class.define("osparc.navigation.UserMenu", {
       this.getChildControl("theme-switcher");
       this.addSeparator();
 
-      const announcementUIFactory = osparc.announcement.AnnouncementUIFactory.getInstance();
-      if (announcementUIFactory.hasUserMenuAnnouncement()) {
-        this.add(announcementUIFactory.createUserMenuAnnouncement());
-      }
+      this.__addAnnouncements();
       this.getChildControl("about");
       if (!osparc.product.Utils.isProduct("osparc")) {
         this.getChildControl("about-product");