Delegate Vote Refactor

client/app/assets/app.css

@@ -16,11 +16,15 @@ body {
 ::-webkit-scrollbar {
     width: 12px;
 }
-
 ::selection {
     background: #ADD8E6;
 }
 
+/* Utilities */
+.d-inline-block {
+    display: inline-block;
+}
+
 /* Track */
 
 ::-webkit-scrollbar-track {
@@ -296,6 +300,9 @@ span.name {
     padding: 20px;
     border-top: 1px solid #ccc;
 }
+#vote-help a {
+    color: #555;
+}
 
 .tab-text-only-content {
     padding: 20px;

client/app/index.html

@@ -78,7 +78,7 @@
             <div ng-controller="AccountTransactionsController as transactionsCtrl">
               <transaction-tab account-ctrl="ul" transactions-ctrl="transactionsCtrl"></transaction-tab>
             </div>
-            <votes-tab account-ctrl="ul"></votes-tab>
+            <votes-tab account="ul.selected" account-ctrl="ul" theme="ul.currentTheme"></votes-tab>
             <signing-tab account-ctrl="ul" ng-if="!ul.selected.ledger"></signing-tab>
             <exchange-tab account-ctrl="ul"></exchange-tab>
             <offchain-tab account-ctrl="ul"></offchain-tab>
@@ -88,7 +88,6 @@
         </md-content>
       </div>
     </div>
-
   </div>
 
   <link rel="stylesheet" href="assets/css/roboto.css" />
@@ -136,7 +135,8 @@
   <script src="src/components/account/main-sidenav.controller.js"></script>
   <script src="src/components/account/account-card.controller.js"></script>
   <script src="src/components/account/transaction-tab.controller.js"></script>
-  <script src="src/components/account/votes-tab.controller.js"></script>
+  <script src="src/components/account/votes-tab/vote.dialog.controller.js"></script>
+  <script src="src/components/account/votes-tab/votes-tab.controller.js"></script>
   <script src="src/components/account/signing-tab.controller.js"></script>
   <script src="src/components/account/exchange-tab.controller.js"></script>
   <script src="src/components/account/offchain-tab.controller.js"></script>

client/app/src/accounts/account.controller.js

@@ -237,8 +237,6 @@
     self.manageNetworks = manageNetworks
     self.openPassphrasesDialog = openPassphrasesDialog
     self.createDelegate = createDelegate
-    self.vote = vote
-    self.addDelegate = addDelegate
     self.currency = storageService.get('currency') || self.currencies[0]
     self.switchNetwork = networkService.switchNetwork
     self.marketinfo = {}
@@ -892,112 +890,6 @@
       } else return selectedAccount.delegates
     }
 
-    function addDelegate (selectedAccount) {
-      var data = { fromAddress: selectedAccount.address, delegates: [], registeredDelegates: [] }
-      $scope.controls = []
-      accountService.getActiveDelegates().then((r) => {
-        data.registeredDelegates = r
-      }).catch(() => toastService.error('Could not fetch active delegates - please check your internet connection'))
-
-      function add () {
-        function indexOfDelegates (array, item) {
-          for (var i in array) {
-            if (array[i].username === item.username) {
-              return i
-            }
-          }
-          return -1
-        }
-        $mdDialog.hide()
-        accountService.getDelegateByUsername(data.delegatename).then(
-          function (delegate) {
-            if (self.selected.selectedVotes.length < 101 && indexOfDelegates(selectedAccount.selectedVotes, delegate) < 0) {
-              selectedAccount.selectedVotes.push(delegate)
-            } else {
-              toastService.error('List full or delegate already voted.')
-            }
-          },
-          formatAndToastError
-        )
-      }
-      $scope.controls = [{}]
-
-      function cancel () {
-        $mdDialog.hide()
-      }
-
-      $scope.addDelegateDialog = {
-        data: data,
-        cancel: cancel,
-        add: add
-      }
-
-      $mdDialog.show({
-        parent: angular.element(document.getElementById('app')),
-        templateUrl: './src/accounts/view/addDelegate.html',
-        clickOutsideToClose: false,
-        preserveScope: true,
-        scope: $scope
-      })
-    }
-
-    function vote (selectedAccount) {
-      var votes = accountService.createDiffVote(selectedAccount.address, selectedAccount.selectedVotes)
-      if (!votes || votes.length === 0) {
-        toastService.error('No difference from original delegate list')
-        return
-      }
-      votes = votes[0]
-      var passphrases = accountService.getPassphrases(selectedAccount.address)
-      var data = {
-        ledger: selectedAccount.ledger,
-        fromAddress: selectedAccount ? selectedAccount.address : '',
-        secondSignature: selectedAccount ? selectedAccount.secondSignature : '',
-        passphrase: passphrases[0] ? passphrases[0] : '',
-        secondpassphrase: passphrases[1] ? passphrases[1] : '',
-        votes: votes
-      }
-
-      function next () {
-        $mdDialog.hide()
-        var publicKeys = $scope.voteDialog.data.votes.map(function (delegate) {
-          return delegate.vote + delegate.publicKey
-        }).join(',')
-        console.log(publicKeys)
-        transactionBuilderService.createVoteTransaction({
-          ledger: selectedAccount.ledger,
-          publicKey: selectedAccount.publicKey,
-          fromAddress: $scope.voteDialog.data.fromAddress,
-          publicKeys: publicKeys,
-          masterpassphrase: $scope.voteDialog.data.passphrase,
-          secondpassphrase: $scope.voteDialog.data.secondpassphrase
-        }).then(
-          function (transaction) {
-            showValidateTransaction(selectedAccount, transaction)
-          },
-          formatAndToastError
-        )
-      }
-
-      function cancel () {
-        $mdDialog.hide()
-      }
-
-      $scope.voteDialog = {
-        data: data,
-        cancel: cancel,
-        next: next
-      }
-
-      $mdDialog.show({
-        parent: angular.element(document.getElementById('app')),
-        templateUrl: './src/accounts/view/vote.html',
-        clickOutsideToClose: false,
-        preserveScope: true,
-        scope: $scope
-      })
-    }
-
     function timestamp (selectedAccount) {
       var passphrases = accountService.getPassphrases(selectedAccount.address)
       var data = {
@@ -1729,7 +1621,7 @@
       self.selected.signedMessages = storageService.get('signed-' + self.selected.address)
     }
 
-    function showValidateTransaction (selectedAccount, transaction) {
+    function showValidateTransaction (selectedAccount, transaction, cb) {
       function saveFile () {
         var fs = require('fs')
         var raw = JSON.stringify(transaction)
@@ -1774,6 +1666,10 @@
               null,
               true
             )
+
+            if (cb && typeof cb === 'function') {
+              cb(transaction)
+            }
           },
           formatAndToastError
         )

client/app/src/accounts/view/vote.html

@@ -1,10 +1,11 @@
-<md-dialog aria-label="Vote" ng-cloak md-theme="ul.currentTheme">
+<md-dialog aria-label="Vote" ng-cloak md-theme="$dialog.theme">
   <form>
-    <md-toolbar>
+    <md-toolbar ng-class="{'md-warn': $dialog.delegate_to_unvote}">
       <div class="md-toolbar-tools">
-        <h2><span translate>Update vote from</span> {{voteDialog.data.fromAddress}}</h2>
+        <h2 ng-if="!$dialog.delegate_to_unvote">Vote</h2>
+        <h2 ng-if="$dialog.delegate_to_unvote">Remove Vote</h2>
         <span flex></span>
-        <md-button class="md-icon-button" ng-click="voteDialog.cancel()">
+        <md-button class="md-icon-button" ng-click="$dialog.cancel()">
           <md-icon md-font-library="material-icons">clear</md-icon>
         </md-button>
       </div>
@@ -19,13 +20,13 @@ <h2><span translate>Update vote from</span> {{voteDialog.data.fromAddress}}</h2>
       </div>
     </md-dialog-content>
     <md-dialog-actions layout="row">
-      <md-button ng-click="voteDialog.next()">
-        <translate ng-if="!voteDialog.data.ledger">Next</translate>
-        <translate ng-if="voteDialog.data.ledger">Sign with Ledger</translate>
+      <md-button ng-click="$dialog.addDelegateVote($dialog.delegate)">
+        <translate ng-if="!$dialog.account.ledger">Next</translate>
+        <translate ng-if="$dialog.account.ledger">Sign with Ledger</translate>
       </md-button>
-      <md-button ng-click="voteDialog.cancel()" style="margin-right:20px;">
+      <md-button ng-click="$dialog.cancel()" style="margin-right:20px;">
         <translate>Cancel</translate>
       </md-button>
     </md-dialog-actions>
   </form>
-</md-dialog>
+</md-dialog>

client/app/src/components/account/votes-tab/templates/vote.dialog.html

@@ -0,0 +1,42 @@
+<md-dialog aria-label="Vote" ng-cloak md-theme="$dialog.theme">
+  <form>
+    <md-toolbar ng-class="{'md-warn': $dialog.delegateToUnvote}">
+      <div class="md-toolbar-tools">
+        <h2 ng-if="!$dialog.delegateToUnvote">Vote</h2>
+        <h2 ng-if="$dialog.delegateToUnvote">Remove Vote</h2>
+        <span flex></span>
+        <md-button class="md-icon-button" ng-click="$dialog.cancel()">
+          <md-icon md-font-library="material-icons">clear</md-icon>
+        </md-button>
+      </div>
+    </md-toolbar>
+    <md-dialog-content>
+      <div class="md-dialog-content">
+        <md-input-container class="md-block" ng-if="!$dialog.delegateToUnvote">
+          <label for="delegate-name" translate>Active delegates (forging)</label>
+          <md-select id="delegate-name" ng-model="$dialog.delegate.name">
+            <md-option ng-value="delegate.username"
+                       ng-repeat="delegate in $dialog.activeDelegates | orderBy: '-approval'">{{delegate.username}} ({{delegate.approval}}% {{'approval'|translate}}, {{delegate.productivity}}% {{'productivity'|translate}})</md-option>
+          </md-select>
+        </md-input-container>
+
+        <md-input-container class="md-block">
+          <label translate>Delegate name</label>
+          <input ng-disabled="$dialog.delegateToUnvote" ng-model="$dialog.delegate.name" type="text">
+        </md-input-container>
+
+        <passphrase-field ng-if="!$dialog.account.ledger" ng-model="$dialog.passphrases.first" label="Passphrase"></passphrase-field>
+        <passphrase-field ng-if="$dialog.passphrases.second" ng-model="$dialog.passphrases.second" label="Second Passphrase"></passphrase-field>
+      </div>
+    </md-dialog-content>
+    <md-dialog-actions layout="row">
+      <md-button ng-click="$dialog.updateDelegateVote($dialog.delegate)">
+        <translate ng-if="!$dialog.account.ledger">Next</translate>
+        <translate ng-if="$dialog.account.ledger">Sign with Ledger</translate>
+      </md-button>
+      <md-button ng-click="$dialog.cancel()" style="margin-right:20px;">
+        <translate>Cancel</translate>
+      </md-button>
+    </md-dialog-actions>
+  </form>
+</md-dialog>