Add a categories rating, error messages and move a bots rating to ste…

…em-js

src/App.vue

@@ -16,8 +16,16 @@
 </template>
 
 <script>
+
+import { Menu, MenuItem } from 'element-ui';
+
+
 export default {
   name: 'app',
+  components: {
+    'el-menu': Menu,
+    'el-menu-item': MenuItem,
+  },
   data() {
     return {
     };

src/components/Bots.vue

@@ -23,12 +23,20 @@
 
 <script>
 
+import { Card, Table, TableColumn } from 'element-ui';
 import steem from 'steem';
+import formatNumberMixin from '@/utils/FormatNumber';
+
+steem.api.setOptions({ url: 'https://api.steemit.com' });
 
 export default {
   name: 'Bots',
   components: {
+    'el-card': Card,
+    'el-table': Table,
+    'el-table-column': TableColumn,
   },
+  mixins: [formatNumberMixin],
   data() {
     return {
       isLoading: false,
@@ -39,82 +47,53 @@ export default {
     loadData() {
       this.isLoading = true;
 
-      const botList = `(
-          'aksdwi',
-          'boomerang',
-          'appreciator',
-          'buildawhale',
-          'upmyvote',
-          'sneaky-ninja',
-          'upme',
-          'jerrybanfield',
-          'booster',
-          'ipromote',
-          'postpromoter',
-          'allaz',
-          'pushup',
-          'minnowhelper'
-        )
-      `;
-
-      const sqlBots = `
-        SELECT
-          name,
-          vesting_shares,
-          delegated_vesting_shares,
-          received_vesting_shares
-        FROM Accounts
-        WHERE name IN ${botList}
-      `;
-
+      const botList = [
+        'aksdwi',
+        'boomerang',
+        'appreciator',
+        'buildawhale',
+        'upmyvote',
+        'sneaky-ninja',
+        'upme',
+        'jerrybanfield',
+        'booster',
+        'ipromote',
+        'postpromoter',
+        'allaz',
+        'pushup',
+        'minnowhelper',
+      ];
+
+      // SQL:
       // json_metadata, voting_power, reputation
       // vesting_shares, delegated_vesting_shares , received_vesting_shares
 
-      const ajaxData = {
-        query: sqlBots,
-      };
-
-      fetch('https://sql.steemhelpers.com/api', {
-        method: 'post',
-        headers: {
-          'Content-type': 'application/json; charset=utf-8',
-        },
-        body: JSON.stringify(ajaxData),
-        mode: 'cors',
-        dataType: 'json',
-      })
-        .then((response) => {
-          if (response.status >= 400 && response.status < 600) {
-            throw new Error(response.statusText);
-          }
-          return response.json();
-        })
-        .then((data) => {
-          this.tableData = data.rows;
-
-          steem.api.setOptions({ url: 'https://api.steemit.com' });
-          steem.api.getDynamicGlobalProperties((err, result) => {
-            const totalVestingFundSteem = parseFloat(result.total_vesting_fund_steem.split(' ')[0]);
-            const totalVestingShares = parseFloat(result.total_vesting_shares.split(' ')[0]);
-
-            this.calculateSteemPower(totalVestingFundSteem, totalVestingShares);
-            console.log(err, result);
-          });
-        })
-        .catch((error) => {
+      // JS:
+      // reward_vesting_balance: "2.047894 VESTS"
+      // reward_vesting_steem:"0.001 STEEM"
+
+      steem.api.getAccounts(botList, (getAccountsError, botAccountList) => {
+        // console.log(getAccountsError, botAccountList);
+        if (getAccountsError) {
           this.isLoading = false;
-          console.log('Request failed', error);
+          this.$notify({ title: 'Error' });
+          return;
+        }
+        this.tableData = botAccountList;
+
+        steem.api.getDynamicGlobalProperties((globalPropsError, result) => {
+          if (globalPropsError) {
+            this.isLoading = false;
+            this.$notify({ title: 'Error' });
+            return;
+          }
+          const totalVestingFundSteem = parseFloat(result.total_vesting_fund_steem.split(' ')[0]);
+          const totalVestingShares = parseFloat(result.total_vesting_shares.split(' ')[0]);
+
+          this.calculateSteemPower(totalVestingFundSteem, totalVestingShares);
         });
+      });
     }, // loadData
-    formatter(valueInt) {
-      let valueStr = valueInt.toString();
-      if (valueStr.length > 6) {
-        valueStr = `${Number((valueInt / 1000000).toFixed(2))}M`;
-      } else if (valueStr.length > 3) {
-        valueStr = `${(valueInt / 1000).toFixed()}k`;
-      }
-      return valueStr;
-    },
     calculateSteemPower(totalVestingFundSteem, totalVestingShares) {
       let newTableData = [];
 
@@ -129,7 +108,7 @@ export default {
 
         let totalSteemPowerRaw = steemPower + (receivedSteemPower - delegatedSteemPower);
         totalSteemPowerRaw = parseInt(totalSteemPowerRaw);
-        const totalSteemPower = this.formatter(totalSteemPowerRaw);
+        const totalSteemPower = this.formatNumber(totalSteemPowerRaw);
 
         const newRow = Object.assign({}, row, {
           steem_power: steemPower,

src/components/Categories.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="categories">
+
+    <el-card style="max-width: 500px; margin: 50px auto;">
+
+      <el-table :data="topCategories" v-loading="isLoading">
+        <el-table-column prop="category" label="Category">
+          <template slot-scope="scope">
+            <a :href="`https://steemit.com/trending/${scope.row.category}`" target="_blank">
+              {{scope.row.category}}
+            </a>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="pending_payout_value" label="Pending payout" width="120">
+          <template slot-scope="scope">
+            ${{formatPendingPayout(scope.row.pending_payout_value)}}
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="children" label="Comments" width="90">
+          <template slot-scope="scope">
+            {{formatNumber(scope.row.children)}}
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="net_votes" label="Votes" width="65">
+          <template slot-scope="scope">
+            {{formatNumber(scope.row.net_votes)}}
+          </template>
+        </el-table-column>
+
+      </el-table>
+
+    </el-card>
+
+  </div>
+</template>
+
+<script>
+
+import { Card, Table, TableColumn } from 'element-ui';
+import formatNumberMixin from '@/utils/FormatNumber';
+
+
+export default {
+  name: 'Homepage',
+  components: {
+    'el-card': Card,
+    'el-table': Table,
+    'el-table-column': TableColumn,
+  },
+  mixins: [formatNumberMixin],
+  data() {
+    return {
+      isLoading: false,
+      activeSorter: 'pending_payout_value',
+      topCategories: [],
+    };
+  },
+  methods: {
+    changeSorter(menuSorter) {
+      this.activeSorter = menuSorter;
+      this.authors = [];
+      this.lastProfileValue = 999999;
+      this.loadData();
+    },
+
+    isActiveSorter(menuSorter) {
+      return this.activeSorter === menuSorter;
+    },
+
+    loadTopCategories() {
+      this.isLoading = true;
+
+      const sqlTopCategoriesBase = `
+        SELECT TOP 100
+          category,
+          SUM(Comments.pending_payout_value) as pending_payout_value,
+          SUM(Comments.children) as children,
+          SUM(Comments.net_votes) as net_votes,
+          COUNT(*) as posts
+        FROM Comments
+        WHERE depth=0 AND created BETWEEN GETDATE()-7 AND GETDATE()
+        GROUP BY category
+        ORDER BY SUM(Comments.{sorter}) DESC
+      `;
+
+      const sqlTopCategories = sqlTopCategoriesBase.replace(/{sorter}/g, this.activeSorter);
+
+      const ajaxData = {
+        query: sqlTopCategories,
+      };
+
+      fetch('https://sql.steemhelpers.com/api', {
+        method: 'post',
+        headers: {
+          'Content-type': 'application/json; charset=utf-8',
+        },
+        body: JSON.stringify(ajaxData),
+        mode: 'cors',
+        dataType: 'json',
+      })
+        .then((response) => {
+          this.isLoading = false;
+
+          if (response.status >= 400 && response.status < 600) {
+            throw new Error(response.statusText);
+          }
+          return response.json();
+        })
+        .then((data) => {
+          this.topCategories = data.rows;
+        })
+        .catch((error) => {
+          console.log('Request failed', error);
+          // Materialize.toast('Error!', 4000);
+        });
+    }, // loadTopCategories
+
+    formatPendingPayout(pendingPayoutRaw) {
+      const pendingPayout = Math.round(Number.parseFloat(pendingPayoutRaw));
+      return this.formatNumber(pendingPayout);
+    },
+
+  },
+  mounted() {
+    this.loadTopCategories();
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style>
+
+
+</style>

src/main.js

@@ -4,16 +4,21 @@
 import Vue from 'vue';
 import infiniteScroll from 'vue-infinite-scroll';
 
-import ElementUI from 'element-ui';
+// import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
-import locale from 'element-ui/lib/locale/lang/en';
+import lang from 'element-ui/lib/locale/lang/en';
+import locale from 'element-ui/lib/locale';
+import { Loading } from 'element-ui';
 
 import App from './App';
 import router from './router';
 
 Vue.config.productionTip = false;
 Vue.use(infiniteScroll);
-Vue.use(ElementUI, { locale });
+
+// Vue.use(ElementUI, { lang });
+locale.use(lang);
+Vue.use(Loading.directive);
 
 /* eslint-disable no-new */
 new Vue({

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import Router from 'vue-router';
 import Homepage from '@/components/Homepage';
 import Bots from '@/components/Bots';
+import Categories from '@/components/Categories';
 
 Vue.use(Router);
 
@@ -17,5 +18,10 @@ export default new Router({
       name: 'bots',
       component: Bots,
     },
+    {
+      path: '/categories',
+      name: 'categories',
+      component: Categories,
+    },
   ],
 });

src/utils/FormatNumber.js

@@ -0,0 +1,14 @@
+
+export default {
+  methods: {
+    formatNumber(valueInt) {
+      let valueStr = valueInt.toString();
+      if (valueStr.length > 6) {
+        valueStr = `${Number((valueInt / 1000000).toFixed(2))}M`;
+      } else if (valueStr.length > 3) {
+        valueStr = `${(valueInt / 1000).toFixed()}k`;
+      }
+      return valueStr;
+    },
+  },
+};

test/e2e/specs/test.js

@@ -11,9 +11,6 @@ module.exports = {
     browser
       .url(devServer)
       .waitForElementVisible('#app', 5000)
-      .assert.elementPresent('.hello')
-      .assert.containsText('h1', 'Welcome to Your Vue.js App')
-      .assert.elementCount('img', 1)
       .end();
   },
 };