merge

2014-05-15 16:39:22 -03:00 · 2014-05-15 16:39:22 -03:00 · d8c3d08582
parent 63210ba277 b94aaa69fe
commit d8c3d08582
11 changed files with 479 additions and 32 deletions
--- a/css/main.css
+++ b/css/main.css
@ -496,6 +496,142 @@ a.loading {
 vertical-align:middle
 }

-input.ng-invalid-wallet-secret {
-    background: #FFB6C1;
+/* notifications */
+
+.dr-notification-container {
+  position: absolute;
+  z-index: 10000;
+}
+
+.dr-notification-container.bottom {
+  bottom: 20px;
+}
+
+.dr-notification-container.right {
+  right: 20px;
+}
+
+.dr-notification-container.left {
+  left: 20px;
+}
+
+.dr-notification-container.top {
+  top: 20px;
+}
+
+.dr-notification-container.center {
+  left: 50%;
+  margin-left: -190px;
+}
+
+.dr-notification-wrapper {
+  width: 380px;
+  position: relative;
+  margin: 10px 0;
+}
+
+.dr-notification {
+  width: 380px;
+  background-color: #2C3E50;
+  clear: both;
+  min-height: 80px;
+  max-height: 90px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  border-radius: 5px;
+  color: #bfe2de;
+  border: 1px solid rgba(4, 94, 123, 0.85);
+  overflow: hidden;
+}
+
+.dr-notification-close-btn {
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  -ms-border-radius: 20px;
+  border-radius: 20px;
+  display: inline-block;
+  padding: 3px;
+  background-color: #2C3E50;
+  font-size: 14px;
+  color: #adfaff;
+  border: 1px solid rgba(4, 94, 123, 0.85);
+  position: absolute;
+  right: -11px;
+  top: 5px;
+  -webkit-transition: all 0.35s cubic-bezier(0.31, 0.39, 0.21, 1.65);
+  -moz-transition: all 0.35s cubic-bezier(0.31, 0.39, 0.21, 1.65);
+  transition: all 0.35s cubic-bezier(0.31, 0.39, 0.21, 1.65);
+  cursor: pointer;
+}
+.dr-notification-close-btn i {
+  padding-left: 3px;
+}
+.dr-notification-close-btn:hover {
+  -webkit-transform: scale3d(1.25, 1.25, 1);
+  -moz-transform: scale3d(1.25, 1.25, 1);
+  -ms-transform: scale3d(1.25, 1.25, 1);
+  transform: scale3d(1.25, 1.25, 1);
+}
+
+.dr-notification-image {
+  width: 80px;
+  height: 80px;
+  border-right: 1px solid rgba(4, 94, 123, 0.85);
+  float: left;
+  display: block;
+  font-size: 40px;
+  color: white;
+  text-align: center;
+}
+.dr-notification-image i {
+  display: block;
+  width: 100%;
+  padding-top: 25px;
+}
+.dr-notification-image img {
+  margin: 15px;
+  max-width: 70px;
+  min-width: 48px;
+}
+
+.dr-notification-image.dr-notification-type-info {
+  color: #FFF;
+}
+
+.dr-notification-image.dr-notification-type-warning {
+  color: #FFA226;
+}
+
+.dr-notification-image.dr-notification-type-error {
+  color: #FF4B4F;
+}
+
+.dr-notification-image.dr-notification-type-success {
+  color: #B4D455;
+}
+
+.dr-notification-image.success {
+  color: #B4D455;
+}
+
+.dr-notification-content {
+  padding-left: 100px;
+  padding-right: 15px;
+  padding-top: 10px;
+}
+
+.dr-notification-title {
+  color: white;
+  padding: 0px;
+  font-size: 20px;
+}
+
+p.dr-notification-text {
+  margin-top: -5px;
+  font-size: 12px;
+}
+
+input.ng-invalid-wallet-secret {
+  background: #FFB6C1;
 }
--- a/index.html
+++ b/index.html
@ -112,6 +112,8 @@

    </div>

+    <div notifications="middle right"></div>
+
    <div id="main" class="row" ng-class="{'main-home': !$root.wallet}">
      <div class="large-12 columns" ng-view></div>
    </div>
@ -340,7 +342,7 @@
      <div class="transactions" data-ng-controller="TransactionsController">
        <div class="row" ng-show='$root.wallet.publicKeyRing.isComplete()'>
          <div class="large-12 columns">
-            <h4>Transactions proposals <small>({{txs.length}})</small></h4>
+            <h4>Transaction proposals <small>({{txs.length}})</small></h4>
            <div class="panel radius pending" ng-repeat="tx in txs | orderBy: 'createdTs':true">
              <div class="txheader">
                <div class="row m10">
@ -362,7 +364,7 @@
                <div class="box-copayers" ng-repeat="(cId, actions) in tx.peerActions">
                  <figure class="left">
                    <a href="#/transactions" class="has-tip" tooltip-popup-delay='1000' tooltip="{{cId === $root.wallet.getMyCopayerId() ? 'You' : $root.wallet.publicKeyRing.nicknameForCopayer(cId)}}">
-                      <img src="./img/satoshi.gif" alt="cId" width="200">
+                      <img src="./img/satoshi.gif" alt="{{cId}}" width="200">
                    </a>
                  </figure>
                  <div class="box-status">
@ -682,6 +684,7 @@ on supported browsers please check <a href="http://www.webrtc.org/">http://www.w
    <script src="js/services/walletFactory.js"></script>
    <script src="js/services/controllerUtils.js"></script>
    <script src="js/services/passphrase.js"></script>
+    <script src="js/services/notifications.js"></script>

    <script src="js/controllers/header.js"></script>
    <script src="js/controllers/footer.js"></script>
--- a/js/app.js
+++ b/js/app.js
@ -7,6 +7,7 @@ var copayApp = window.copayApp = angular.module('copay',[
  'ngRoute',
  'mm.foundation',
  'monospaced.qrcode',
+  'notifications',
  'copay.header',
  'copay.footer',
  'copay.addresses',
--- a/js/controllers/header.js
+++ b/js/controllers/header.js
@ -1,7 +1,7 @@
 'use strict';

 angular.module('copay.header').controller('HeaderController',
-  function($scope, $rootScope, $location, walletFactory, controllerUtils) {
+  function($scope, $rootScope, $location, $notification, walletFactory, controllerUtils) {
    $scope.menu = [
    {
      'title': 'Addresses',
@ -27,6 +27,15 @@ angular.module('copay.header').controller('HeaderController',
      }
    });

+    // Initialize alert notification (not show when init wallet)
+    $rootScope.txAlertCount = 0;
+    $notification.enableHtml5Mode(); // for chrome: if support, enable it
+    $rootScope.$watch('txAlertCount', function(txAlertCount) {
+      if (txAlertCount && txAlertCount > 0) {
+        $notification.info('New Transaction', ($rootScope.txAlertCount == 1) ? 'You have a pending transaction proposal' : 'You have ' + $rootScope.txAlertCount + ' pending transaction proposals', txAlertCount);
+      }
+    });
+
    $scope.isActive = function(item) {
      if (item.link && item.link.replace('#','') == $location.path()) {
        return true;
--- a/js/controllers/signin.js
+++ b/js/controllers/signin.js
@ -2,8 +2,13 @@

 angular.module('copay.signin').controller('SigninController',
  function($scope, $rootScope, $location, walletFactory, controllerUtils, Passphrase) {
+    var cmp = function(o1, o2){
+      var v1 = o1.show.toLowerCase(), v2 = o2.show.toLowerCase();
+      return v1 > v2 ? 1 : ( v1 < v2 ) ? -1 : 0;
+    };
+
    $scope.loading = false;
-    $scope.wallets = walletFactory.getWallets();
+    $scope.wallets = walletFactory.getWallets().sort(cmp);
    $scope.selectedWalletId = $scope.wallets.length ? $scope.wallets[0].id : null;
    $scope.openPassword = '';

--- a/js/controllers/transactions.js
+++ b/js/controllers/transactions.js
@ -8,6 +8,7 @@ angular.module('copay.transactions').controller('TransactionsController',

    $scope.send = function (ntxid) {
      $scope.loading = true;
+      $rootScope.txAlertCount = 0;
      var w = $rootScope.wallet;
      w.sendTx(ntxid, function(txid) {
          console.log('[transactions.js.68:txid:] SENTTX CALLBACK',txid); //TODO
@ -65,6 +66,7 @@ angular.module('copay.transactions').controller('TransactionsController',

    $scope.reject = function (ntxid) {
      $scope.loading = true;
+      $rootScope.txAlertCount = 0;
      var w = $rootScope.wallet;
      w.reject(ntxid);
      $rootScope.flashMessage = {type:'warning', message: 'Transaction rejected by you'};
--- a/js/models/core/TxProposals.js
+++ b/js/models/core/TxProposals.js
@ -180,8 +180,9 @@ TxProposals.prototype._mergeBuilder = function(myTxps, theirTxps, mergeInfo) {
 };

 TxProposals.prototype.add = function(data) {
-  var id = data.builder.build().getNormalizedHash().toString('hex');
-  this.txps[id] = new TxProposal(data);
+  var ntxid = data.builder.build().getNormalizedHash().toString('hex');
+  this.txps[ntxid] = new TxProposal(data);
+  return ntxid;
 };


@ -191,12 +192,20 @@ TxProposals.prototype.setSent = function(ntxid,txid) {
 };


-TxProposals.prototype.getTxProposal = function(ntxid) {
+TxProposals.prototype.getTxProposal = function(ntxid, copayers) {
  var txp = this.txps[ntxid];
  var i = JSON.parse(JSON.stringify(txp));
  i.builder = txp.builder;
  i.ntxid = ntxid;
  i.peerActions = {};
+
+  if (copayers) {
+    for(var j=0; j < copayers.length; j++) {
+      var p = copayers[j];
+      i.peerActions[p] = {};
+    }
+  }
+
  for(var p in txp.seenBy){
    i.peerActions[p]={seen: txp.seenBy[p]};
  }
--- a/js/models/core/Wallet.js
+++ b/js/models/core/Wallet.js
@ -94,6 +94,7 @@ Wallet.prototype._handleTxProposals = function(senderId, data, isInbound) {
  if (mergeInfo.hasChanged || addSeen) {
    this.log('### BROADCASTING txProposals. ');
    recipients = null;
+    TODO: only diff
    this.sendTxProposals(recipients);
  }
  this.emit('txProposalsUpdated', this.txProposals);
@ -114,7 +115,7 @@ Wallet.prototype._handleData = function(senderId, data, isInbound) {
      break;
    case 'walletReady':
      this.sendPublicKeyRing(senderId);
-      this.sendTxProposals(senderId);
+      this.sendTxProposals(senderId); // send old
      break;
    case 'publicKeyRing':
      this._handlePublicKeyRing(senderId, data, isInbound);
@ -223,12 +224,23 @@ Wallet.prototype.getOnlinePeerIDs = function() {
  return this.network.getOnlinePeerIDs();
 };

+Wallet.prototype.getRegisteredCopayerIds = function() {
+  var l = this.publicKeyRing.registeredCopayers();
+  var copayers = [];
+  for (var i = 0; i < l; i++) {
+    var cid = this.getCopayerId(i);
+    copayers.push(cid);
+  }
+  return copayers;
+};
+
 Wallet.prototype.getRegisteredPeerIds = function() {
  var l = this.publicKeyRing.registeredCopayers();
  if (this.registeredPeerIds.length !== l) {
    this.registeredPeerIds = [];
+    var copayers = this.getRegisteredCopayerIds();
    for (var i = 0; i < l; i++) {
-      var cid = this.getCopayerId(i);
+      var cid = copayers[i];
      var pid = this.network.peerFromCopayer(cid);
      this.registeredPeerIds.push({
        peerId: pid,
@ -275,14 +287,18 @@ Wallet.prototype.toEncryptedObj = function() {
  return this.storage.export(walletObj);
 };

-Wallet.prototype.sendTxProposals = function(recipients) {
+Wallet.prototype.sendTxProposals = function(recipients, ntxid) {
  this.log('### SENDING txProposals TO:', recipients || 'All', this.txProposals);

-  this.network.send(recipients, {
-    type: 'txProposals',
-    txProposals: this.txProposals.toObj(),
-    walletId: this.id,
-  });
+  var toSend = ntxid ? [ntxid] : this.getTxProposals.getNtxids();
+  for(var i in toSend) {
+    var id = toSend[i];
+    this.network.send(recipients, {
+      type: 'txProposals',
+      txProposals: this.txProposals.toObj(id),
+      walletId: this.id,
+    });
+  }
 };

 Wallet.prototype.sendWalletReady = function(recipients) {
@ -326,8 +342,9 @@ Wallet.prototype.generateAddress = function(isChange) {

 Wallet.prototype.getTxProposals = function() {
  var ret = [];
+  var copayers = this.getRegisteredCopayerIds();
  for (var k in this.txProposals.txps) {
-    var i = this.txProposals.getTxProposal(k);
+    var i = this.txProposals.getTxProposal(k, copayers);
    i.signedByUs = i.signedBy[this.getMyCopayerId()] ? true : false;
    i.rejectedByUs = i.rejectedBy[this.getMyCopayerId()] ? true : false;
    if (this.totalCopayers - i.rejectCount < this.requiredCopayers)
@ -345,7 +362,7 @@ Wallet.prototype.reject = function(ntxid) {
  if (!txp || txp.rejectedBy[myId] || txp.signedBy[myId]) return;

  txp.rejectedBy[myId] = Date.now();
-  this.sendTxProposals();
+  this.sendTxProposals(null, ntxid);
  this.store();
  this.emit('txProposalsUpdated');
 };
@ -366,7 +383,7 @@ Wallet.prototype.sign = function(ntxid) {

  if (b.signaturesAdded > before) {
    txp.signedBy[myId] = Date.now();
-    this.sendTxProposals();
+    this.sendTxProposals(null, ntxid);
    this.store();
    this.emit('txProposalsUpdated');
    return true;
@ -392,7 +409,7 @@ Wallet.prototype.sendTx = function(ntxid, cb) {
    if (txid) {
      self.txProposals.setSent(ntxid, txid);
    }
-    self.sendTxProposals();
+    self.sendTxProposals(null, ntxid);
    self.store();
    return cb(txid);
  });
@ -502,9 +519,10 @@ Wallet.prototype.createTx = function(toAddress, amountSatStr, opts, cb) {
  }

  self.getSafeUnspent(function(unspentList) {
-    if (self.createTxSync(toAddress, amountSatStr, unspentList, opts)) {
-      self.sendPublicKeyRing(); // Change Address
-      self.sendTxProposals();
+    var ntxid = self.createTxSync(toAddress, amountSatStr, unspentList, opts);
+    if (ntxid) {
+      self.sendPublicKeyRing(); // For the new change Address
+      self.sendTxProposals(null, ntxid);
      self.store();
      self.emit('txProposalsUpdated');
    }
@ -558,8 +576,7 @@ Wallet.prototype.createTxSync = function(toAddress, amountSatStr, utxos, opts) {
    builder: b,
  };

-  this.txProposals.add(data);
-  return true;
+  return this.txProposals.add(data);
 };

 Wallet.prototype.disconnect = function() {
--- a/js/models/storage/LocalEncrypted.js
+++ b/js/models/storage/LocalEncrypted.js
@ -73,7 +73,8 @@ Storage.prototype._write = function(k,v) {

 // get value by key
 Storage.prototype.getGlobal = function(k) {
-  return  localStorage.getItem(k);
+  var item = localStorage.getItem(k);
+  return item == 'undefined' ? undefined : item;
 };

 // set value for key
--- a/js/services/controllerUtils.js
+++ b/js/services/controllerUtils.js
@ -128,6 +128,8 @@ angular.module('copay.controllerUtils')
      var w = $rootScope.wallet;
      if (!w) return;
      
+      var myCopayerId = w.getMyCopayerId();
+      var pending = 0;
      var inT = w.getTxProposals();
      var txs  = [];

@ -149,13 +151,16 @@ angular.module('copay.controllerUtils')
        i.fee = i.builder.feeSat/bitcore.util.COIN;
        i.missingSignatures = tx.countInputMissingSignatures(0);
        txs.push(i);
-      });
-      $rootScope.txs = txs;
-      var pending = 0;
-      for(var i=0; i<txs.length;i++) {
-        if (!txs[i].finallyRejected && !txs[i].sentTs) {
+
+        if (myCopayerId != i.creator && !i.finallyRejected && !i.sentTs && !i.rejectedByUs && !i.signedByUs) {
          pending++;
        }
+
+      });
+      
+      $rootScope.txs = txs;
+      if ($rootScope.pendingTxCount < pending) {
+        $rootScope.txAlertCount = pending;
      }
      $rootScope.pendingTxCount = pending;
      w.removeListener('txProposalsUpdated',root.updateTxs)
--- a/js/services/notifications.js
+++ b/js/services/notifications.js
@ -0,0 +1,259 @@
+'use strict';
+
+angular.module('notifications', []).
+  factory('$notification', ['$timeout',function($timeout){
+
+    console.log('notification service online');
+    var notifications = JSON.parse(localStorage.getItem('$notifications')) || [],
+        queue = [];
+
+    var settings = {
+      info: { duration: 5000, enabled: true },
+      warning: { duration: 5000, enabled: true },
+      error: { duration: 5000, enabled: true },
+      success: { duration: 5000, enabled: true },
+      progress: { duration: 0, enabled: true },
+      custom: { duration: 35000, enabled: true },
+      details: true,
+      localStorage: false,
+      html5Mode: false,
+      html5DefaultIcon: '../img/satoshi.gif'
+    };
+
+    function html5Notify(icon, title, content, ondisplay, onclose){
+      if(window.webkitNotifications.checkPermission() === 0){
+        if(!icon){
+          icon = '../img/favicon.ico';
+        }
+        var noti = window.webkitNotifications.createNotification(icon, title, content);
+        if(typeof ondisplay === 'function'){
+          noti.ondisplay = ondisplay;
+        }
+        if(typeof onclose === 'function'){
+          noti.onclose = onclose;
+        }
+        noti.show();
+      }
+      else {
+        settings.html5Mode = false;
+      }
+    }
+
+
+    return {
+
+      /* ========== SETTINGS RELATED METHODS =============*/
+
+      disableHtml5Mode: function(){
+        settings.html5Mode = false;
+      },
+
+      disableType: function(notificationType){
+        settings[notificationType].enabled = false;
+      },
+
+      enableHtml5Mode: function(){
+        // settings.html5Mode = true;
+        settings.html5Mode = this.requestHtml5ModePermissions();
+      },
+
+      enableType: function(notificationType){
+        settings[notificationType].enabled = true;
+      },
+
+      getSettings: function(){
+        return settings;
+      },
+
+      toggleType: function(notificationType){
+        settings[notificationType].enabled = !settings[notificationType].enabled;
+      },
+
+      toggleHtml5Mode: function(){
+        settings.html5Mode = !settings.html5Mode;
+      },
+
+      requestHtml5ModePermissions: function(){
+        if (window.webkitNotifications){
+          console.log('notifications are available');
+          if (window.webkitNotifications.checkPermission() === 0) {
+            return true;
+          }
+          else{
+            window.webkitNotifications.requestPermission(function(){
+              if(window.webkitNotifications.checkPermission() === 0){
+                settings.html5Mode = true;
+              }
+              else{
+                settings.html5Mode = false;
+              }
+            });
+            return false;
+          }
+        }
+        else{
+          console.log('notifications are not supported');
+          return false;
+        }
+      },
+
+
+      /* ============ QUERYING RELATED METHODS ============*/
+
+      getAll: function(){
+        // Returns all notifications that are currently stored
+        return notifications;
+      },
+
+      getQueue: function(){
+        return queue;
+      },
+
+      /* ============== NOTIFICATION METHODS ==============*/
+
+      info: function(title, content, userData){
+        console.log(title, content);
+        return this.awesomeNotify('info','info', title, content, userData);
+      },
+
+      error: function(title, content, userData){
+        return this.awesomeNotify('error', 'remove', title, content, userData);
+      },
+
+      success: function(title, content, userData){
+        return this.awesomeNotify('success', 'ok', title, content, userData);
+      },
+
+      warning: function(title, content, userData){
+        return this.awesomeNotify('warning', 'exclamation', title, content, userData);
+      },
+
+      awesomeNotify: function(type, icon, title, content, userData){
+        /**
+         * Supposed to wrap the makeNotification method for drawing icons using font-awesome
+         * rather than an image.
+         *
+         * Need to find out how I'm going to make the API take either an image
+         * resource, or a font-awesome icon and then display either of them.
+         * Also should probably provide some bits of color, could do the coloring
+         * through classes.
+         */
+        // image = '<i class="icon-' + image + '"></i>';
+        return this.makeNotification(type, false, icon, title, content, userData);
+      },
+
+      notify: function(image, title, content, userData){
+        // Wraps the makeNotification method for displaying notifications with images
+        // rather than icons
+        return this.makeNotification('custom', image, true, title, content, userData);
+      },
+
+      makeNotification: function(type, image, icon, title, content, userData){
+        var notification = {
+          'type': type,
+          'image': image,
+          'icon': icon,
+          'title': title,
+          'content': content,
+          'timestamp': +new Date(),
+          'userData': userData
+        };
+        notifications.push(notification);
+
+        if(settings.html5Mode){
+          html5Notify(image, title, content, function(){
+            console.log("inner on display function");
+          }, function(){
+            console.log("inner on close function");
+          });
+        }
+        else{
+          queue.push(notification);
+          $timeout(function removeFromQueueTimeout(){
+            queue.splice(queue.indexOf(notification), 1);
+          }, settings[type].duration);
+
+        }
+
+        this.save();
+        return notification;
+      },
+
+
+      /* ============ PERSISTENCE METHODS ============ */
+
+      save: function(){
+        // Save all the notifications into localStorage
+        // console.log(JSON);
+        if(settings.localStorage){
+          localStorage.setItem('$notifications', JSON.stringify(notifications));
+        }
+        // console.log(localStorage.getItem('$notifications'));
+      },
+
+      restore: function(){
+        // Load all notifications from localStorage
+      },
+
+      clear: function(){
+        notifications = [];
+        this.save();
+      }
+
+    };
+  }]).
+  directive('notifications', ['$notification', '$compile', function($notification, $compile){
+    /**
+     *
+     * It should also parse the arguments passed to it that specify
+     * its position on the screen like "bottom right" and apply those
+     * positions as a class to the container element
+     *
+     * Finally, the directive should have its own controller for
+     * handling all of the notifications from the notification service
+     */
+//    console.log('this is a new directive');
+    var html =
+      '<div class="dr-notification-wrapper" ng-repeat="noti in queue">' +
+        '<div class="dr-notification-close-btn" ng-click="removeNotification(noti)">' +
+          '<i class="fi-x"></i>' +
+        '</div>' +
+        '<div class="dr-notification">' +
+          '<div class="dr-notification-image dr-notification-type-{{noti.type}}" ng-switch on="noti.image">' +
+            '<i class="icon-{{noti.icon}}" ng-switch-when="false"></i>' +
+            '<img ng-src="{{noti.image}}" ng-switch-default />' +
+          '</div>' +
+          '<div class="dr-notification-content">' +
+            '<h3 class="dr-notification-title">{{noti.title}}</h3>' +
+            '<p class="dr-notification-text">{{noti.content}}</p>' +
+          '</div>' +
+        '</div>' +
+      '</div>';
+
+
+    function link(scope, element, attrs){
+      var position = attrs.notifications;
+      position = position.split(' ');
+      element.addClass('dr-notification-container');
+      for(var i = 0; i < position.length ; i++){
+        element.addClass(position[i]);
+      }
+    }
+
+
+    return {
+      restrict: 'A',
+      scope: {},
+      template: html,
+      link: link,
+      controller: ['$scope', function NotificationsCtrl( $scope ){
+        $scope.queue = $notification.getQueue();
+
+        $scope.removeNotification = function(noti){
+          $scope.queue.splice($scope.queue.indexOf(noti), 1);
+        };
+      }
+    ]
+
+    };
+  }]);