Bugfix/develop onboarding new fixes (#2907)

* Refactor structure as base for fixes relates to xibosignageltd/xibo-private#927 - JS file added - SCSS file added, CSS moved from xibo.css - Webpack config to build files - New files added to Twig - Welcome card template and config added * Add new templates * Apply new components * Implement functionalities * Fix responsiveness and layouts * Minor spacing changes --------- Co-authored-by: maurofmferrao <[email protected]>
xibosignage · Feb 12, 2025 · a6a59e2 · a6a59e2
1 parent ba2d1d3
commit a6a59e2
Show file tree

Hide file tree

Showing 10 changed files with 568 additions and 483 deletions.
diff --git a/ui/bundle_templates.js b/ui/bundle_templates.js
@@ -140,5 +140,13 @@ window.templates = {
     campaignAssignLayout:
       require('./src/templates/campaign/campaign-assign-layout.hbs'),
   },
+  welcome: {
+    welcomeCard:
+      require('./src/templates/welcome/welcome-card.hbs'),
+      serviceCard:
+      require('./src/templates/welcome/service-card.hbs'),
+    othersCard:
+      require('./src/templates/welcome/others-card.hbs'),
+  },
 };
 
diff --git a/ui/src/pages/welcome/welcome-page.js b/ui/src/pages/welcome/welcome-page.js
@@ -0,0 +1,78 @@
+import './welcome-page.scss';
+
+$(function () {
+
+  for (let index = 0; index < onboardingCard.length; index++) {
+    const card = onboardingCard[index];
+
+    const $newCard = $(templates.welcome.welcomeCard(card));
+
+    $newCard.on('click', function (e) {
+      e.preventDefault();
+      var targetId = $(this).attr("href");
+      var targetElement = $(targetId);
+
+      if (targetElement.length) {
+        var offset = targetElement.offset().top - 100;
+
+        $("html, body").animate({
+          scrollTop: offset
+        }, 800);
+
+        targetElement.css({
+          "border": "3px solid #0e70f6",
+          "transition": "border-color 1s ease-out"
+        });
+
+        setTimeout(function () {
+          targetElement.css("border-color", "transparent");
+        }, 1000);
+      }
+    });
+
+    $newCard.appendTo('.welcome-page .onboarding-cards-container');
+  }
+
+  for (let index = 0; index < serviceCards.length; index++) {
+    const card = serviceCards[index];
+
+    let targetContainer = null;
+
+    if (card.featureFlag === "displays.view") {
+      targetContainer = ".service-card-container .displays-enabled";
+    } else if (Array.isArray(card.featureFlag) && card.featureFlag.includes("library.view") || card.featureFlag.includes("layout.view")) {
+      targetContainer = ".service-card-container .library-layout-enabled";
+    } else if (card.featureFlag === "schedule.view") {
+      targetContainer = ".service-card-container .schedule-enabled";
+    }
+
+    if (targetContainer && $(targetContainer).length) {
+      const $serviceCard = $(templates.welcome.serviceCard(card));
+      $serviceCard.appendTo(targetContainer);
+    }
+  }
+
+  for (let index = 0; index < othersCards.length; index++) {
+    const card = othersCards[index];
+
+    const $othersCard = $(templates.welcome.othersCard(card));
+
+    $othersCard.appendTo('.welcome-page .others-card-container');
+  }
+
+  var scrollUpButton = $(".scroll-up");
+
+  $(window).on("scroll", function () {
+    if ($(window).scrollTop() > 200) {
+      scrollUpButton.fadeIn();
+    } else {
+      scrollUpButton.fadeOut();
+    }
+  });
+
+  scrollUpButton.on("click", function (e) {
+    e.preventDefault();
+    $("html, body").animate({ scrollTop: 0 }, "smooth");
+  });
+
+});