From 4905a40ac48573ca5c34445bbda8285c2df41a33 Mon Sep 17 00:00:00 2001
From: Zhiting Lin <zlin035@uottawa.ca>
Date: Tue, 20 Aug 2019 15:26:07 +0800
Subject: [PATCH] update the vote page.

---
 src/assets/language/cn.js              |   3 +
 src/assets/language/en.js              |   3 +
 src/models/transaction.js              |  28 +++++
 src/router.js                          |   8 ++
 src/views/sendTransaction/transfer.vue |   3 +-
 src/views/vote/listVote.vue            |  22 ++--
 src/views/vote/vote.vue                | 188 +++++++++++++++++++++++++++++++++
 7 files changed, 246 insertions(+), 9 deletions(-)
 create mode 100644 src/views/vote/vote.vue

diff --git a/src/assets/language/cn.js b/src/assets/language/cn.js
index 52aecb0..9134a3f 100644
--- a/src/assets/language/cn.js
+++ b/src/assets/language/cn.js
@@ -66,6 +66,9 @@ const cn = {
     vote:'投票',
     votes:'票数'
   },
+  vote:{
+    selectNode:'选择节点'
+  },
   signMessage:{
     title:'请求签名',
     address: '签名地址',
diff --git a/src/assets/language/en.js b/src/assets/language/en.js
index 490cd29..1ff233e 100644
--- a/src/assets/language/en.js
+++ b/src/assets/language/en.js
@@ -66,6 +66,9 @@ const en = {
     vote:'Vote',
     votes:'Votes'
   },
+  vote:{
+    selectNode:'Select Node'
+  },
   signMessage:{
     title:'Request Signature',
     address: 'Sign Address',
diff --git a/src/models/transaction.js b/src/models/transaction.js
index 8eaa30d..b7df428 100644
--- a/src/models/transaction.js
+++ b/src/models/transaction.js
@@ -54,6 +54,34 @@ transaction.buildCrossChain = function(guid, to, asset, amount, confirmations) {
   return retPromise;
 };
 
+transaction.buildVote = function(guid, vote, amount, confirmations, memo) {
+  let retPromise = new Promise((resolve, reject) => {
+    bytom.transaction
+      .buildVote(guid, vote, Number(amount), confirmations, memo)
+      .then(res => {
+        resolve(res);
+      })
+      .catch(error => {
+        reject(error);
+      });
+  });
+  return retPromise;
+};
+
+transaction.buildVeto = function(guid, vote, amount, confirmations, memo) {
+  let retPromise = new Promise((resolve, reject) => {
+    bytom.transaction
+      .buildVeto(guid, vote, Number(amount), confirmations, memo)
+      .then(res => {
+        resolve(res);
+      })
+      .catch(error => {
+        reject(error);
+      });
+  });
+  return retPromise;
+};
+
 transaction.buildTransaction = function(guid, inputs, outputs, gas, confirmations) {
   let retPromise = new Promise((resolve, reject) => {
     bytom.transaction
diff --git a/src/router.js b/src/router.js
index d65c7f5..b93e25f 100644
--- a/src/router.js
+++ b/src/router.js
@@ -26,6 +26,14 @@ const routers = [
         }
       },
       {
+        path: '/vote',
+        name: 'vote',
+        meta: { title: '投票' },
+        component: resolve => {
+          require(['@/views/vote/vote.vue'], resolve)
+        }
+      },
+      {
         path: '/crossChain',
         name: 'cross-chain',
         meta: { title: '跨链' },
diff --git a/src/views/sendTransaction/transfer.vue b/src/views/sendTransaction/transfer.vue
index cdea3ed..c18e059 100644
--- a/src/views/sendTransaction/transfer.vue
+++ b/src/views/sendTransaction/transfer.vue
@@ -191,7 +191,8 @@ export default {
                 }
             });
 
-            account.balance(newGuid).then(balances => {
+            account.balance(newGuid).then(obj => {
+              const balances = obj.balances
               let balance = 0.00
               if(balances.length >0 ) {
                 const balanceObject = balances.filter(b => b.asset === BTM)[0]
diff --git a/src/views/vote/listVote.vue b/src/views/vote/listVote.vue
index 0aebeaf..ef4a7e6 100644
--- a/src/views/vote/listVote.vue
+++ b/src/views/vote/listVote.vue
@@ -143,7 +143,11 @@
                     </div>
                     <div class="vote-number">{{$t('listVote.votes')}} {{formatNue(vote.vote_num)}} ({{formatFraction(vote.vote_num, totalVote)}})</div>
                   </td>
-                <td><button>{{$t('listVote.vote')}}</button></td>
+                <td>
+                  <router-link :to="{name: 'vote', params: { vote: vote }}">
+                    {{$t('listVote.vote')}}
+                  </router-link>
+                </td>
               </tr>
             </table>
           </div>
@@ -156,6 +160,7 @@ import query from "@/models/query";
 import { BTM } from "@/utils/constants";
 import Number from "@/utils/Number"
 import { mapActions, mapGetters, mapState } from 'vuex'
+import _ from 'lodash';
 
 export default {
     components: {
@@ -186,11 +191,12 @@ export default {
             }
         },
       myVote() {
-          if(this.currentAccount.votes && this.currentAccount.votes.length === 0){
-            return 0
-          }else{
-            return 'ddddd'
-          }
+        let vote
+        const votes = this.currentAccount.votes
+        if(votes && votes.length >0 ){
+          vote = _.sumBy(votes,'total')
+        }
+        return (vote != null && vote != 0) ? Number.formatNue(vote) : '0.00'
       },
       filteredList() {
         return this.votes.filter(post => {
@@ -219,7 +225,8 @@ export default {
         formatFraction: function (upper, lower) {
           return Number.fractionalNum(upper, lower);
         }
-    }, mounted() {
+    },
+    mounted() {
       query.chainStatus().then(resp => {
         if(resp){
           this.totalVote = resp.total_vote_num;
@@ -227,7 +234,6 @@ export default {
             item.rank = index+1;
             return item
           });
-          console.log(this.votes)
         }
       });
     }
diff --git a/src/views/vote/vote.vue b/src/views/vote/vote.vue
new file mode 100644
index 0000000..07e1067
--- /dev/null
+++ b/src/views/vote/vote.vue
@@ -0,0 +1,188 @@
+<style lang="" scoped>
+.header {
+  display: flex;
+}
+.header p{
+  text-align: center;
+  width: 270px;
+  padding-top: 17px;
+}
+
+.transferType input[type=radio] {
+  position: absolute;
+  visibility: hidden;
+}
+
+.transferType input[type="radio"]:checked+label{
+  color:white;
+  background-color: #333333;
+}
+
+.form-container{
+  margin: 20px;
+}
+.form {
+    margin-bottom: 20px;
+    padding: 10px 15px;
+    border-radius:4px;
+}
+.form-container .btn{
+    height: 48px;
+    bottom: 20px;
+    position: absolute;
+    width: 320px;
+}
+.vote-title{
+  font-size: 14px;
+  color: #000;
+  vertical-align: middle;
+  align-items: center;
+  display: flex;
+}
+.vote-title img{
+  height: 36px;
+  width: 36px;
+  border:1px solid #E0E0E0;
+  opacity:1;
+  border-radius:4px;
+  margin-right: 15px;
+}
+</style>
+
+<template>
+    <div class="warp-chlid bg-gray">
+        <section class="header bg-header">
+            <i class="iconfont icon-back" @click="close"></i>
+            <p>{{ $t('crossChain.title') }}</p>
+        </section>
+
+        <section class="form-container">
+          <div class="form bg-white">
+            <div v-if="vote !== null" class="form-item">
+              <label class="form-item-label">{{ $t('vote.selectNode') }}</label>
+              <div class="form-item-content" >
+                <div class="vote-title" >
+                  <img  :src="vote.logo" alt="">
+                  <div>
+                    {{vote.name}}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="form bg-white">
+
+              <div class="form-item">
+                  <label class="form-item-label">
+                    {{ $t('transfer.quantity') }}
+
+                    <small class="float-right" style="margin-right: 8px;">{{ transaction.cost||0 }} CNY</small>
+                  </label>
+                  <div class="form-item-content" style=" display: flex;">
+                      <input type="number" v-model="transaction.amount" :placeholder="bytomBalance">
+                      <span class="color-grey" style="width: 40px; font-size: 15px;position: absolute;right: 0;">{{unit}}</span>
+                  </div>
+              </div>
+          </div>
+          <a class="btn btn-primary" @click="send">{{ $t('transfer.send') }}</a>
+        </section>
+    </div>
+</template>
+
+<script>
+import transaction from "@/models/transaction";
+import getLang from "@/assets/language/sdk";
+import Confirm from "../sendTransaction/transferConfirm";
+import { BTM } from "@/utils/constants";
+import { mapGetters, mapState } from 'vuex'
+
+export default {
+    components: {
+        Confirm
+    },
+    data() {
+        return {
+            show: false,
+            accountBalance: 0.00,
+            unit: 'BTM',
+            fee: this.$t("transfer.feeType"),
+            feeTypeOptions: [this.$t("transfer.feeType")],
+            vote:null,
+            transaction: {
+                amount: "",
+                to:'',
+                confirmations: 1
+            }
+        };
+    },
+    computed: {
+      bytomBalance: function () {
+        let balance,
+          balances = this.currentAccount.vpBalances
+        if(balances && balances.length >0 ){
+          const balanceObject = balances.filter(b => b.asset === BTM)[0]
+          balance = balanceObject.balance/Math.pow(10,balanceObject.decimals)
+        }
+
+          return `Vapor${this.$t("crossChain.amountPlaceHolder")}${(balance != null && balance != 0) ? balance : '0.00'}`
+      },
+      ...mapState([
+        'bytom'
+      ]),
+      ...mapGetters([
+        'currentAccount',
+        'accountList',
+        'net',
+        'netType'
+      ])
+    },
+    watch: {
+        "transaction.amount": function (newAmount) {
+            transaction.asset(this.transaction.asset).then(ret => {
+                this.transaction.cost = Number(ret.cny_price * newAmount).toFixed(2);
+            });
+        },
+        account: function (newAccount) {
+            this.guid = newAccount.guid;
+        }
+    },
+    methods: {
+        close: function () {
+            this.$router.go(-1)
+            this.transaction.vote = "";
+            this.transaction.amount = "";
+        },
+        send: function () {
+            if (this.transaction.amount <= 0) {
+                this.$dialog.show({
+                    body: this.$t("transfer.noneBTM")
+                });
+                return;
+            }
+
+            let loader = this.$loading.show({
+                // Optional parameters
+                container: null,
+                canCancel: true,
+                onCancel: this.onCancel
+            });
+
+            const vote = this.vote.pub_key
+            this.transaction.to = vote
+            transaction.buildVote(this.currentAccount.guid, vote,  this.transaction.amount*100000000, this.transaction.confirmations).then(result => {
+                loader.hide();
+                this.transaction.fee = Number(result.fee / 100000000);
+                this.$router.push({ name: 'transfer-confirm', params: { account: this.currentAccount, transaction: this.transaction, rawData: result} })
+            }).catch(error => {
+                loader.hide();
+                this.$dialog.show({
+                    body: getLang(error.message)
+                });
+            });
+
+        }
+    }, mounted() {
+        this.vote = this.$route.params.vote
+    }
+};
+</script>
-- 
2.11.0