Merge pull request #110 from LiskHQ/23_forging-center

Add forging center - Closes #23

src/app/components/forging/forging.js

@@ -0,0 +1,94 @@
+import moment from 'moment';
+
+import './forging.less';
+
+const UPDATE_INTERVAL = 20000;
+
+app.component('forging', {
+  template: require('./forging.pug')(),
+  bindings: {
+    account: '=',
+  },
+  controller: class forging {
+    constructor($scope, $timeout, $peers) {
+      this.$scope = $scope;
+      this.$timeout = $timeout;
+      this.$peers = $peers;
+
+      this.statistics = {};
+      this.blocks = [];
+
+      this.updateAllData();
+    }
+
+    $onDestroy() {
+      this.$timeout.cancel(this.timeout);
+    }
+
+    updateAllData() {
+      this.updateDelegate();
+      this.updateForgedBlocks(10);
+
+      this.updateForgingStats('today', moment().format('YYYY-MM-DD'));
+      this.updateForgingStats('last24h', moment().subtract(1, 'days'));
+      this.updateForgingStats('last7d', moment().subtract(7, 'days'));
+      this.updateForgingStats('last30d', moment().subtract(30, 'days'));
+      this.updateForgingStats('total', moment('2016-04-24 17:00'));
+    }
+
+    updateDelegate() {
+      this.$peers.active.sendRequest('delegates/get', {
+        publicKey: this.account.publicKey,
+      }, (data) => {
+        if (data.success) {
+          this.delegate = data.delegate;
+        } else {
+          this.delegate = {};
+        }
+      });
+    }
+
+    updateForgedBlocks(limit, offset) {
+      this.$timeout.cancel(this.timeout);
+
+      this.$peers.active.sendRequest('blocks', {
+        limit,
+        offset: offset || 0,
+        generatorPublicKey: this.account.publicKey,
+      }, (data) => {
+        if (data.success) {
+          if (this.blocks.length === 0) {
+            this.blocks = data.blocks;
+          } else if (offset) {
+            Array.prototype.push.apply(this.blocks, data.blocks);
+          } else if (this.blocks[0].id !== data.blocks[0].id) {
+            Array.prototype.unshift.apply(this.blocks,
+              data.blocks.filter(block => block.timestamp > this.blocks[0].timestamp));
+          }
+          this.blocksLoaded = true;
+          this.moreBlocksExist = this.blocks.length < data.count;
+        }
+
+        this.timeout = this.$timeout(this.updateAllData.bind(this), UPDATE_INTERVAL);
+      });
+    }
+
+    loadMoreBlocks() {
+      this.blocksLoaded = false;
+      this.updateForgedBlocks(20, this.blocks.length);
+    }
+
+    updateForgingStats(key, startMoment) {
+      this.$peers.active.sendRequest('delegates/forging/getForgedByAccount', {
+        generatorPublicKey: this.account.publicKey,
+        start: moment(startMoment).unix(),
+        end: moment().unix(),
+      }, (data) => {
+        if (data.success) {
+          this.statistics[key] = data.forged;
+        }
+      });
+    }
+  },
+});
+

src/app/components/forging/forging.less

@@ -0,0 +1,22 @@
+forging {
+  md-card-content {
+    padding: 0 0 5px;
+  }
+
+  md-card-title md-menu {
+     margin: -8px -14px;
+  }
+
+  .pull-right {
+    float: right;
+  }
+
+  .progress-label {
+    right: auto;
+    left: auto;
+    position: absolute;
+    font-size: 2em;
+    margin-top: 15px;
+    padding: 60px 90px;
+  }
+}

src/app/components/forging/forging.pug

@@ -0,0 +1,86 @@
+div.offline-hide
+  div
+    md-card.loading(ng-show='!$ctrl.delegate')
+      md-progress-linear(md-mode='indeterminate')
+    md-content
+      div(layout='row', ng-if='$ctrl.delegate && !$ctrl.delegate.username')
+        md-card(flex-100, flex-gt-xs=100, layout-align='center center', layout-padding)
+          span.title You need to become a delegate to start forging
+          md-button.md-raised.md-primary(disabled) Become Delegate
+      div(layout='column', layout-gt-xs='row', ng-if='$ctrl.delegate.username')
+        md-card(flex-gt-xs=100, layout-padding)
+          .info-panel.info-panel-grey
+            span.title {{$ctrl.delegate.username}} 
+            span.pull-right {{$ctrl.statistics.total  | lsk | number:2 }} LSK Earned
+      md-content(layout='column', layout-gt-xs='row', ng-if='$ctrl.delegate.username')
+        md-card(flex-50, flex-gt-xs=25, layout-padding)
+          .info-panel.info-panel-grey
+            span.title Today 
+            span.pull-right {{$ctrl.statistics.today  | lsk | number:2 }} LSK
+        md-card(flex-50, flex-gt-xs=25, layout-padding)
+          .info-panel.info-panel-grey
+            span.title Last 24 hours 
+            span.pull-right {{$ctrl.statistics.last24h  | lsk | number:2 }} LSK
+        md-card(flex-50, flex-gt-xs=25, layout-padding)
+          .info-panel.info-panel-grey
+            span.title {{'Last 7 days'}} 
+            span.pull-right {{$ctrl.statistics.last7d  | lsk | number:2 }} LSK
+        md-card(flex-50, flex-gt-xs=25, layout-padding)
+          .info-panel.info-panel-grey
+            span.title {{'Last 30 days'}} 
+            span.pull-right {{$ctrl.statistics.last30d  | lsk | number:2 }} LSK
+      div(layout='column', layout-gt-xs='row', ng-if='$ctrl.delegate.username')
+        md-card(flex-gt-xs=33, layout-align='center center', layout-padding)
+          div Rank
+          div.progress-label {{$ctrl.delegate.rate}}
+          md-progress-circular(md-mode='determinate', value='{{101 - $ctrl.delegate.rate}}', md-diameter='200') {{$ctrl.delegate.rate}}
+        md-card(flex-gt-xs=33, layout-align='center center', layout-padding)
+          div Productivity
+          div.progress-label {{$ctrl.delegate.productivity}}%
+          md-progress-circular(md-mode='determinate', value='{{$ctrl.delegate.productivity}}', md-diameter='200')
+        md-card(flex-gt-xs=33, layout-align='center center', layout-padding)
+          div Approval
+          div.progress-label {{$ctrl.delegate.approval}}%
+          md-progress-circular(md-mode='determinate', value='{{$ctrl.delegate.approval}}', md-diameter='200')
+      md-card(layout='column', ng-if='$ctrl.delegate.username')
+        md-card-title
+          md-card-title-text
+            spa.md-title Forged Blocks
+          span(md-position-mode='target-right target', ng-if='$ctrl.blocks.length === 0 && $ctrl.blocksLoaded')
+            span You have not forged any blocks yet.
+          md-menu(md-position-mode='target-right target', ng-if='$ctrl.blocks.length')
+             md-button.md-icon-button(ng-click='$mdOpenMenu()')
+               i.material-icons more_vert
+             md-menu-content(width='4')
+               md-menu-item
+                p(ng-click='check($event)')
+                  md-checkbox#advanced.filled-in.violet(ng-model='$ctrl.showAllColumns') Show All Columns
+               // md-menu-item
+                p(ng-click='check($event)')
+                  md-checkbox#fulltime.filled-in.violet(ng-model='showFullTime')
+                  label(for='fulltime')  Show Full Time
+        md-card-content
+          md-content(layout='column')
+            md-table-container(ng-show='$ctrl.blocks.length')
+              table(md-table, ng-table='tableBlocks', border='0', width='100%', cellpadding='0', cellspacing='0', ng-show='$ctrl.blocks.length')
+                thead(md-head)
+                  tr(md-row)
+                    th(md-column) Block height
+                    th(md-column, ng-show='$ctrl.showAllColumns') Block Id
+                    th(md-column) Timestamp
+                    th(md-column) Total fee
+                    th(md-column) Reward
+                tbody(md-body)
+                  tr(md-row, ng-repeat='block in $ctrl.blocks')
+                    td(md-cell data-title='tableBlocks.cols.height', sortable="'height'") {{block.height}}
+                    td(md-cell data-title='tableBlocks.cols.blockId', ng-show='$ctrl.showAllColumns') {{block.id}}
+                    td(md-cell data-title='tableBlocks.cols.timestamp', sortable="'timestamp'")
+                      span(ng-show='block.timestamp > 0')
+                        timestamp(data='block.timestamp')
+                      span(ng-show='block.timestamp == 0') -
+                    td(md-cell data-title='tableBlocks.cols.totalFee', sortable="'totalFee'") {{block.totalFee | lsk}}
+                    td(md-cell data-title='tableBlocks.cols.reward', sortable="'reward'") {{block.reward | lsk}}
+                    td.width-80(md-cell data-title="''")
+        md-button.more(ng-show='$ctrl.moreBlocksExist', ng-disabled='!$ctrl.blocksLoaded', ng-click='$ctrl.loadMoreBlocks()') Load More
+        .loading
+          md-progress-linear(md-mode='indeterminate', ng-hide='$ctrl.blocksLoaded')

src/app/components/main/main.js

@@ -42,6 +42,7 @@ app.component('main', {
         .then(() => {
           this.prelogged = false;
           this.logged = true;
+          this.checkIfIsDelegate();
         })
         .catch(() => {
           if (attempts < 10) {
@@ -63,6 +64,16 @@ app.component('main', {
       this.passphrase = '';
     }
 
+    checkIfIsDelegate() {
+      if (this.account && this.account.publicKey) {
+        this.$peers.active.sendRequest('delegates/get', {
+          publicKey: this.account.publicKey,
+        }, (data) => {
+          this.isDelegate = data.success;
+        });
+      }
+    }
+
     update() {
       this.reset();
 

src/app/components/main/main.less

@@ -9,6 +9,10 @@ main {
   .logout {
     margin-right: 0;
   }
+
+  md-tabs-wrapper {
+    margin: 0 10px;
+  }
 
   md-content {
     background-color: #eee;
@@ -18,6 +22,12 @@ main {
     background-color: #fff;
   }
 
+  md-tabs md-ink-bar {
+    color: rgb(2,136,209);
+    background-color: rgb(2,136,209);
+    height: 4px;
+  }
+
   .header {
     margin-top: 5px;
 

src/app/components/main/main.pug

@@ -11,4 +11,16 @@ md-content(layout='row')
     div(ng-if='$ctrl.logged', ng-class='{ online: $ctrl.$peers.online, offline: !$ctrl.$peers.online }')
       top(account='$ctrl.account')
       send(passphrase='$ctrl.passphrase', account='$ctrl.account')
-      transactions(account='$ctrl.account')
+      md-tabs(md-selected='selectedIndex', md-dynamic-height='true', md-stretch-tabs='always')
+        md-tab(md-on-select='onTabSelected(tab)', md-on-deselect='announceDeselected(tab)', ng-disabled='tab.disabled')
+          md-tab-label Transactions
+          md-tab-body
+            transactions(account='$ctrl.account')
+        md-tab(md-on-select='onTabSelected(tab)', md-on-deselect='announceDeselected(tab)', ng-disabled='tab.disabled')
+          md-tab-label Voting
+          md-tab-body
+            delegates(account='$ctrl.account')
+        md-tab(ng-if='$ctrl.isDelegate')
+          md-tab-label Forging 
+          md-tab-body
+            forging(account='$ctrl.account')

src/app/components/top/top.pug

@@ -11,7 +11,7 @@ md-content(layout='column', layout-gt-xs='row')
       span.md-title.title Peer
       md-select(ng-model='$ctrl.$peers.currentPeerConfig', aria-label='Peer')
         md-optgroup(ng-repeat='(name, peers) in $ctrl.$peers.stack', ng-if='peers.length', label='{{ name }}')
-          md-option(ng-repeat='peer in peers', ng-value='peer') {{ peer.node }}{{ peer.port ? ':' + peer.port : '' }}
+          md-option(ng-repeat='peer in peers', ng-value='peer') {{ peer.node }}{{ name === 'localhost' ? ':' + peer.port : '' }}
   md-card.offline-hide(flex-gt-xs=33)
     md-card-content(layout='column', layout-align='center center')
       span.md-title.title Balance

src/app/lisk-nano.js

@@ -9,6 +9,7 @@ import './components/send/send';
 import './components/transactions/transactions';
 import './components/timestamp/timestamp';
 import './components/lsk/lsk';
+import './components/forging/forging';
 
 import './services/peers/peers';
 import './services/lsk';

src/app/services/peers/peers.js

@@ -35,6 +35,10 @@ app.factory('$peers', ($timeout, $cookies, $location, $q) => {
       if (!this.stack) {
         this.stack = this.active.listPeers();
         this.stack.localhost = [localhostConf, {
+          node: 'localhost',
+          port: 7000,
+          testnet: true,
+        }, {
           node: 'localhost',
           port: 8000,
         }];