wallet-balance directive displaying basic crypto balance.

src/js/directives/walletBalanceDirective.js

@@ -0,0 +1,88 @@
+'use strict';
+
+(function(){
+
+  angular
+  .module('bitcoincom.directives')
+  .directive('walletBalance', function() {
+    return {
+      restrict: 'E',
+      scope: {
+        displayAsFiat: '@',
+        totalBalanceSat: '@',
+        wallet: '@'
+      },
+      templateUrl: 'views/includes/wallet-balance.html',
+      controller: walletBalanceController
+    }
+  });
+    
+  function walletBalanceController($log, $scope, $timeout, uxLanguage) {
+    console.log('walletBalanceController');
+    var cryptoBalanceHasBeenDisplayed = false;
+    
+    formatBalance();
+    $scope.$watchGroup(['displayAsFiat', 'totalBalanceSat'], function onWalletBalanceWatch() {
+      formatBalance();
+    });
+
+    function displayCryptoBalance(wallet) {
+      console.log('displayCryptoBalance()');
+      if (wallet.status) {
+        if (wallet.status.totalBalanceStr) {
+          $scope.displayAmount = wallet.status.totalBalanceStr;
+          $scope.cachedBalanceUpdatedOn = '';
+          console.log('Displaying wallet.status.totalBalanceStr');
+
+        } else if (wallet.status.cachedBalance) {
+          $scope.displayAmount = wallet.status.cachedBalance;
+          $scope.cachedBalanceUpdatedOn = wallet.status.cachedBalanceUpdatedOn;
+          console.log('Displaying wallet.status.cachedBalance');
+
+        } else {
+          $scope.displayAmount = '';
+          $scope.cachedBalanceUpdatedOn = '';
+          console.log('Displaying "" from status');
+        }
+      } else if (wallet.cachedBalance) {
+        $scope.displayAmount = cachedBalance;
+        $scope.cachedBalanceUpdatedOn = '';
+        console.log('Displaying cachedBalance');
+
+      } else {
+        $scope.displayAmount = '';
+        $scope.cachedBalanceUpdatedOn = '';
+        console.log('Displaying "" without status');
+      }
+      cryptoBalanceHasBeenDisplayed = true;
+    }
+
+    function displayFiatBalance(wallet) {
+    
+    }
+
+    function formatBalance() {
+      //console.log('formatBalance() with wallet:', $scope.wallet,);
+      console.log('formatBalance() with displayAsFiat: "' + $scope.displayAsFiat + '"');
+      var wallet = null;
+      try {
+        wallet = JSON.parse($scope.wallet);
+      } catch (e) {
+        $log.error('Error parsing wallet to display balance.', e);
+        $scope.displayAmount = '';
+        $scope.cachedBalanceUpdatedOn = '';
+      }
+
+      if (!$scope.displayAsFiat || $scope.displayAsFiat && !cryptoBalanceHasBeenDisplayed) {
+        displayCryptoBalance(wallet);
+      }
+
+      if ($scope.displayAsFiat) {
+        displayFiatBalance(wallet);
+      }
+
+
+    }
+  }
+})();
+

src/sass/components/components.scss

@@ -9,3 +9,4 @@
 @import "expand-content";
 @import "fee-summary";
 @import "formatted-amount";
+@import "wallet-balance";

src/sass/components/wallet-balance.scss

@@ -0,0 +1,3 @@
+.wallet-balance-directive {
+  display: inline-block;
+}

www/views/includes/wallet-balance.html

@@ -0,0 +1,3 @@
+<div class="wallet-balance">
+  <span>{{displayAmount}}</span><span ng-if="age">{{&middot; (cachedBalanceUpdatedOn  * 1000 | amTimeAgo)}}</span>
+</div>

www/views/tab-send.html

@@ -16,8 +16,9 @@
                     ></div>
                 </i>
                 <h2>{{fromWallet.name}}</h2>
+                <wallet-balance display-as-fiat="{{displayBalanceAsFiat}}" wallet="{{fromWallet}}" total-balance-sat={{fromWallet.status.totalBalanceSat}}></wallet-balance>
                 <!--<p ng-show="vm.origin.balanceAmount">{{vm.origin.balanceAmount}} {{vm.origin.balanceCurrency}}</p>-->
-                <formatted-amount value="{{fromWallet.status.totalBalanceStr ? fromWallet.status.totalBalanceStr : ( fromWallet.cachedBalance ? fromWallet.cachedBalance   + (fromWallet.cachedBalanceUpdatedOn ? ' &middot; ' + ( fromWallet.cachedBalanceUpdatedOn  * 1000 | amTimeAgo) : '') : ''  ) }}"></formatted-amount>
+                <!--<formatted-amount value="{{fromWallet.status.totalBalanceStr ? fromWallet.status.totalBalanceStr : ( fromWallet.cachedBalance ? fromWallet.cachedBalance   + (fromWallet.cachedBalanceUpdatedOn ? ' &middot; ' + ( fromWallet.cachedBalanceUpdatedOn  * 1000 | amTimeAgo) : '') : ''  ) }}"></formatted-amount>-->
               </div>
             </div>
           </div>