From 063677b5568910c4747fc971ed6b423991db39d2 Mon Sep 17 00:00:00 2001 From: Odei Maiz <33152403+odeimaiz@users.noreply.github.com> Date: Tue, 19 Nov 2024 12:28:36 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20[Frontend]=20Enh:=20Support=20mu?= =?UTF-8?q?ltiple=20announcements=20(#6729)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../announcement/AnnouncementUIFactory.js | 129 +++++++++++------- .../class/osparc/announcement/Tracker.js | 28 +--- .../source/class/osparc/auth/ui/LoginView.js | 16 ++- .../class/osparc/navigation/UserMenu.js | 17 +-- 4 files changed, 106 insertions(+), 84 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/announcement/AnnouncementUIFactory.js b/services/static-webserver/client/source/class/osparc/announcement/AnnouncementUIFactory.js index 8f126387642..6533fc0444a 100644 --- a/services/static-webserver/client/source/class/osparc/announcement/AnnouncementUIFactory.js +++ b/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; } } }); diff --git a/services/static-webserver/client/source/class/osparc/announcement/Tracker.js b/services/static-webserver/client/source/class/osparc/announcement/Tracker.js index da6a8f17e38..368fbd6dd00 100644 --- a/services/static-webserver/client/source/class/osparc/announcement/Tracker.js +++ b/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); - }); - } - } } }); diff --git a/services/static-webserver/client/source/class/osparc/auth/ui/LoginView.js b/services/static-webserver/client/source/class/osparc/auth/ui/LoginView.js index d52f03e4784..56972d7eb6f 100644 --- a/services/static-webserver/client/source/class/osparc/auth/ui/LoginView.js +++ b/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 diff --git a/services/static-webserver/client/source/class/osparc/navigation/UserMenu.js b/services/static-webserver/client/source/class/osparc/navigation/UserMenu.js index 8a736ef7d40..213bc8bf0bd 100644 --- a/services/static-webserver/client/source/class/osparc/navigation/UserMenu.js +++ b/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");