🎨 Frontend: Replace Credits Indicator with just a Label (ITISFoundati…

…on#4795)
bisgaard-itis · Sep 28, 2023 · b08f004 · b08f004
1 parent d587eb3
commit b08f004
Show file tree

Hide file tree

Showing 11 changed files with 134 additions and 243 deletions.
diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/BuyCredits.js b/services/static-webserver/client/source/class/osparc/desktop/credits/BuyCredits.js
@@ -251,7 +251,7 @@ qx.Class.define("osparc.desktop.credits.BuyCredits", {
     },
 
     __getCreditsLeftView: function() {
-      const creditsLeftView = new osparc.desktop.credits.CreditsIndicatorWText();
+      const creditsLeftView = new osparc.desktop.credits.CreditsLabel();
       this.bind("wallet", creditsLeftView, "wallet");
       return creditsLeftView;
     },

diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicator.js b/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicator.js
diff --git a/...ices/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicatorWText.js b/...ices/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicatorWText.js
diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsLabel.js b/services/static-webserver/client/source/class/osparc/desktop/credits/CreditsLabel.js
@@ -0,0 +1,104 @@
+/* ************************************************************************
+
+   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.desktop.credits.CreditsLabel", {
+  extend: qx.ui.basic.Atom,
+
+  construct: function(wallet, shortWording) {
+    this.base(arguments);
+
+    this.set({
+      font: "text-16",
+      allowGrowX: false
+      // icon: "@MaterialIcons/monetization_on/16",
+      // iconPosition: "right"
+    });
+
+    if (wallet) {
+      this.setWallet(wallet);
+    }
+
+    if (shortWording !== undefined) {
+      this.setShortWording(shortWording);
+    }
+
+    this.bind("creditsAvailable", this, "label", {
+      converter: () => this.__recomputeLabel()
+    });
+
+    this.bind("creditsAvailable", this, "textColor", {
+      converter: val => {
+        if (val > 20) {
+          return "text";
+        } else if (val > 0.1) {
+          return "warning-yellow";
+        }
+        return "danger-red";
+      }
+    });
+
+    this.bind("shortWording", this, "label", {
+      converter: () => this.__recomputeLabel()
+    });
+  },
+
+  properties: {
+    wallet: {
+      check: "osparc.data.model.Wallet",
+      init: null,
+      nullable: true,
+      event: "changeWallet",
+      apply: "__applyWallet"
+    },
+
+    creditsAvailable: {
+      check: "Number",
+      init: 0,
+      nullable: false,
+      event: "changeCreditsAvailable"
+    },
+
+    shortWording: {
+      check: "Boolean",
+      init: false,
+      nullable: false,
+      event: "changeShortWording"
+    }
+  },
+
+  members: {
+    __applyWallet: function(wallet) {
+      if (wallet) {
+        wallet.bind("creditsAvailable", this, "creditsAvailable");
+      }
+    },
+
+    __recomputeLabel: function() {
+      const creditsAvailable = this.getCreditsAvailable();
+      if (creditsAvailable === null) {
+        return "-";
+      }
+      let label = creditsAvailable.toFixed(2);
+      if (this.isShortWording()) {
+        label += this.tr(" cr.");
+      } else {
+        label += this.tr(" credits");
+      }
+      return label;
+    }
+  }
+});
diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/Overview.js b/services/static-webserver/client/source/class/osparc/desktop/credits/Overview.js
@@ -162,15 +162,7 @@ qx.Class.define("osparc.desktop.credits.Overview", {
       titleLayout.add(walletName);
       layout.add(titleLayout);
 
-      const progressBar = new osparc.desktop.credits.CreditsIndicatorWText(wallet, "vertical").set({
-        allowShrinkY: true
-      });
-      progressBar.getChildControl("credits-indicator").set({
-        minWidth: 100
-      });
-      progressBar.getChildControl("credits-text").set({
-        font: "text-16"
-      });
+      const progressBar = new osparc.desktop.credits.CreditsLabel(wallet);
       layout.add(progressBar);
 
       const buyButton = new qx.ui.form.Button().set({
@@ -240,13 +232,8 @@ qx.Class.define("osparc.desktop.credits.Overview", {
         column++;
 
         // indicator
-        const progressBar = new osparc.desktop.credits.CreditsIndicatorWText(wallet, "horizontal").set({
-          allowShrinkY: true
-        });
-        progressBar.getChildControl("credits-indicator").set({
-          minWidth: 100
-        });
-        layout.add(progressBar, {
+        const creditsLabel = new osparc.desktop.credits.CreditsLabel(wallet);
+        layout.add(creditsLabel, {
           column,
           row: i
         });
@@ -292,8 +279,8 @@ qx.Class.define("osparc.desktop.credits.Overview", {
                 }
                 const entry = [
                   osparc.utils.Utils.formatDateAndTime(new Date(transaction["createdAt"])),
-                  transaction["priceDollars"].toString(),
-                  transaction["osparcCredits"].toString(),
+                  transaction["priceDollars"].toFixed(2).toString(),
+                  transaction["osparcCredits"].toFixed(2).toString(),
                   walletName,
                   transaction["comment"]
                 ];

diff --git a/services/static-webserver/client/source/class/osparc/desktop/credits/WalletsMiniViewer.js b/services/static-webserver/client/source/class/osparc/desktop/credits/WalletsMiniViewer.js
@@ -154,10 +154,10 @@ qx.Class.define("osparc.desktop.credits.WalletsMiniViewer", {
     },
 
     __addWallet: function(wallet) {
-      const progressBar = new osparc.desktop.credits.CreditsIndicator(wallet).set({
-        allowShrinkY: true
+      const creditsLabel = new osparc.desktop.credits.CreditsLabel(wallet, true).set({
+        alignX: "right"
       });
-      this._add(progressBar, {
+      this._add(creditsLabel, {
         flex: 1
       });
     },