✨ Frontend: Student competition announcement (#4404)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/AnnouncementTracker.js

@@ -0,0 +1,154 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2023 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.AnnouncementTracker", {
+  extend: qx.core.Object,
+  type: "singleton",
+
+  properties: {
+    start: {
+      check: "Date",
+      init: null,
+      nullable: true
+    },
+
+    end: {
+      check: "Date",
+      init: null,
+      nullable: true
+    },
+
+    title: {
+      check: "String",
+      init: null,
+      nullable: true
+    },
+
+    description: {
+      check: "String",
+      init: null,
+      nullable: true
+    },
+
+    link: {
+      check: "String",
+      init: null,
+      nullable: true
+    }
+  },
+
+  members: {
+    __loginAnnouncement: null,
+    __userMenuAnnouncement: null,
+
+    startTracker: function() {
+      if (osparc.product.Utils.isProduct("s4llite")) {
+        const announcementData = {
+          start: "2023-06-22T15:00:00.000Z",
+          end: "2023-11-01T02:00:00.000Z",
+          title: "Student Competition 2023",
+          description: "For more information click <a href='https://zmt.swiss/news-and-events/news/sim4life/s4llite-student-competition-2023/' style='color: white' target='_blank'>here</a>",
+          link: "https://zmt.swiss/news-and-events/news/sim4life/s4llite-student-competition-2023/"
+        };
+        this.__setAnnouncement(announcementData);
+      }
+    },
+
+    getLoginAnnouncement: function() {
+      if (this.__isValid() && this.__loginAnnouncement) {
+        return this.__loginAnnouncement;
+      }
+      return null;
+    },
+
+    getUserMenuAnnouncement: function() {
+      if (this.__isValid() && this.__userMenuAnnouncement) {
+        return this.__userMenuAnnouncement;
+      }
+      return null;
+    },
+
+    __isValid: function() {
+      const now = new Date();
+      if (
+        this.getStart() &&
+        this.getEnd() &&
+        this.getStart() > now &&
+        now < this.getEnd()
+      ) {
+        return true;
+      }
+      return false;
+    },
+
+    __setAnnouncement: function(announcementData) {
+      this.setStart(announcementData && "start" in announcementData ? new Date(announcementData.start) : null);
+      this.setEnd(announcementData && "end" in announcementData ? new Date(announcementData.end) : null);
+      this.setTitle(announcementData && "title" in announcementData ? announcementData.title : null);
+      this.setDescription(announcementData && "description" in announcementData ? announcementData.description : null);
+      this.setLink(announcementData && "link" in announcementData ? announcementData.link : null);
+
+      this.__buildAnnouncementUIs();
+    },
+
+    __buildAnnouncementUIs: function() {
+      this.__buildLoginAnnouncement();
+      this.__buildUserMenuAnnouncement();
+    },
+
+    __buildLoginAnnouncement: function() {
+      const announcmentLayout = this.__loginAnnouncement = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)).set({
+        backgroundColor: "strong-main",
+        alignX: "center",
+        padding: 12,
+        allowGrowX: true,
+        maxWidth: 300
+      });
+      announcmentLayout.getContentElement().setStyles({
+        "border-radius": "8px"
+      });
+
+      const titleLabel = new qx.ui.basic.Label().set({
+        value: this.getTitle(),
+        font: "text-16",
+        textColor: "white",
+        alignX: "center",
+        rich: true,
+        wrap: true
+      });
+      announcmentLayout.add(titleLabel);
+
+      const descriptionLabel = new qx.ui.basic.Label().set({
+        value: this.getDescription(),
+        font: "text-14",
+        textColor: "white",
+        alignX: "center",
+        rich: true,
+        wrap: true
+      });
+      announcmentLayout.add(descriptionLabel);
+    },
+
+    __buildUserMenuAnnouncement: function() {
+      const link = this.getLink();
+      if (link) {
+        const button = this.__userMenuAnnouncement = new qx.ui.menu.Button(this.getTitle() + "...");
+        button.addListener("execute", () => window.open(link));
+      }
+    }
+  }
+});

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

@@ -68,6 +68,13 @@ qx.Class.define("osparc.auth.LoginPageS4L", {
       const image = this._getLogoWPlatform();
       loginLayout.add(image);
 
+      const announcementTracker = osparc.AnnouncementTracker.getInstance();
+      announcementTracker.startTracker();
+      const loginAnnouncement = announcementTracker.getLoginAnnouncement();
+      if (loginAnnouncement) {
+        loginLayout.add(loginAnnouncement);
+      }
+
       const pages = this._getLoginStack();
       loginLayout.add(pages);
 

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

@@ -163,6 +163,12 @@ qx.Class.define("osparc.navigation.UserMenuButton", {
         osparc.store.Support.addQuickStartToMenu(this.getMenu());
         osparc.store.Support.addPanddyToMenu(this.getMenu());
       }
+      const announcementTracker = osparc.AnnouncementTracker.getInstance();
+      announcementTracker.startTracker();
+      const userMenuAnnouncement = announcementTracker.getUserMenuAnnouncement();
+      if (userMenuAnnouncement) {
+        this.getMenu().add(userMenuAnnouncement);
+      }
       this.getMenu().addSeparator();
       this.getChildControl("about");
       if (osparc.product.Utils.showAboutProduct()) {