From c8822a2869fffac5d155aa040f7ebb567f112670 Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Thu, 5 Aug 2021 16:51:24 +0800
Subject: [PATCH] add home page

---
 src/libs/fetch.js        |   1 +
 src/router/index.js      |   1 +
 src/views/Governance.vue |  33 ---------
 src/views/Home.vue       | 154 ++++++++++++++++++++++++++++++++++-----
 4 files changed, 136 insertions(+), 53 deletions(-)

diff --git a/src/libs/fetch.js b/src/libs/fetch.js
index 13d6a08e..4cec7ac0 100644
--- a/src/libs/fetch.js
+++ b/src/libs/fetch.js
@@ -25,6 +25,7 @@ async function refetchVersion(chain) {
       const version = sdk.match(re)
       return version[0]
     })
+    .catch(e => console.error(e))
 }
 
 const chainAPI = class ChainFetch {
diff --git a/src/router/index.js b/src/router/index.js
index ab004bad..03729f1d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,6 +17,7 @@ const router = new VueRouter({
       name: 'home',
       component: () => import('@/views/Home.vue'),
       meta: {
+        layout: 'full',
         pageTitle: 'Home',
         breadcrumb: [
           {
diff --git a/src/views/Governance.vue b/src/views/Governance.vue
index 111f1deb..0ea76c92 100644
--- a/src/views/Governance.vue
+++ b/src/views/Governance.vue
@@ -200,7 +200,6 @@ export default {
   },
   methods: {
     getList() {
-      // this.$http.setup(this.$route)
       this.$http.getGovernanceList().then(res => {
         const voting = res.filter(i => i.status === 2)
         if (voting.length > 0) {
@@ -221,38 +220,6 @@ export default {
       })
     },
   },
-  // asyncComputed: {
-  //   proposals: {
-  //     get() {
-  //       const api = new ChainAPI(this.$route)
-  //       api.setup(this.$route)
-  //       return api.getGovernanceList().then(res => {
-  //         const voting = res.filter(i => i.status === 2)
-  //         if (voting.length > 0) {
-  //           let i = 0
-  //           Promise.all(voting.reverse().map(p => api.getGovernanceTally(p.id, p.tally.total))).then(update => {
-  //             this.proposals.map(x => {
-  //               if (x.status === 2) {
-  //                 const xh = x
-  //                 xh.tally = update[i]
-  //                 i += 1
-  //                 return xh
-  //               }
-  //               return x
-  //             })
-  //           })
-  //         }
-  //         return res.reverse()
-  //       })
-  //     },
-  //     // default: 'loading...',
-  //   },
-  // },
-  // watch: {
-  //   proposals(val, newdata) {
-  //     console.log('In watch', val, newdata)
-  //   },
-  // },
 }
 </script>
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index dc51c340..0de1f275 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,34 +1,148 @@
 <template>
-  <div>
-    <b-card title="Kick start your project 🚀">
-      <b-card-text>All the best for your new project.</b-card-text>
-      <b-card-text>Please make sure to read our <b-link
-        href="https://pixinvent.com/demo/vuexy-vuejs-admin-dashboard-template/documentation/"
-        target="_blank"
-      >
-        Template Documentation
-      </b-link> to understand where to go from here and how to use our template.</b-card-text>
-    </b-card>
+  <div class="text-center container-lg">
+    <b-link>
+      <div class="mb-3 mt-3">
+        <vuexy-logo />
 
-    <b-card title="Want to integrate JWT? 🔒">
-      <b-card-text>We carefully crafted JWT flow so you can implement JWT with ease and with minimum efforts.</b-card-text>
-      <b-card-text>Please read our  JWT Documentation to get more out of JWT authentication.</b-card-text>
-    </b-card>
+        <h1 class="brand-text text-primary mt-2">
+          Ping Explorer
+        </h1>
+      </div>
+    </b-link>
+    <h2 class="mb-1">
+      Cosmos Ecosystem Blockchains 🛠
+    </h2>
+
+    <p class="mb-3">
+      If you want add your chain to our explorer, be free to contact us.
+    </p>
+
+    <div>
+      <b-row class="match-height">
+        <b-col
+          v-for="(data,index) in chains"
+          :key="index"
+          md="4"
+          sm="6"
+        >
+          <b-card
+            v-if="data"
+            no-body
+          >
+            <b-card-header>
+              <h4 class="mb-0 text-uppercase">
+                {{ data.chain_name }}
+              </h4>
+              <b-card-text class="mb-0">
+                Updated on {{ data.time }}
+              </b-card-text>
+            </b-card-header>
+
+            <b-img
+              :src="data.logo"
+              height="145"
+              class="mb-2"
+            />
+            <b-row class="text-center mx-0">
+              <b-col
+                cols="6"
+                class="border-top border-right d-flex align-items-between flex-column py-1"
+              >
+                <b-card-text class="text-muted mb-0">
+                  SDK Version
+                </b-card-text>
+                <h3 class="font-weight-bolder mb-0">
+                  {{ data.sdk_version }}
+                </h3>
+              </b-col>
+
+              <b-col
+                cols="6"
+                class="border-top d-flex align-items-between flex-column py-1"
+              >
+                <b-card-text class="text-muted mb-0">
+                  Height
+                </b-card-text>
+                <h3 class="font-weight-bolder mb-0">
+                  {{ data.height }}
+                </h3>
+              </b-col>
+            </b-row>
+          </b-card>
+        </b-col>
+
+        <!-- no result found -->
+        <b-col
+          v-show="!chains"
+          cols="12"
+          class="text-center"
+        >
+          <h4 class="mt-4">
+            No blockchain found!!
+          </h4>
+        </b-col>
+        <!--/ no result found -->
+      </b-row>
+    </div>
   </div>
+<!-- / Under maintenance-->
 </template>
 
 <script>
-import { BCard, BCardText, BLink } from 'bootstrap-vue'
+/* eslint-disable global-require */
+import {
+  BLink, BImg, BRow, BCol, BCard, BCardText, BCardHeader,
+} from 'bootstrap-vue'
+import VuexyLogo from '@core/layouts/components/Logo.vue'
+import store from '@/store/index'
+import { toDay } from '@/libs/data'
 
 export default {
   components: {
+    BLink,
+    BImg,
+    BRow,
+    BCol,
     BCard,
     BCardText,
-    BLink,
+    BCardHeader,
+    VuexyLogo,
+  },
+  data() {
+    return {
+      chains: [],
+      downImg: require('@/assets/images/pages/under-maintenance.svg'),
+    }
+  },
+  computed: {
+    imgUrl() {
+      if (store.state.appConfig.layout.skin === 'dark') {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.downImg = require('@/assets/images/pages/under-maintenance-dark.svg')
+        return this.downImg
+      }
+      return this.downImg
+    },
+  },
+  created() {
+    this.chains = JSON.parse(localStorage.getItem('chains'))
+    this.timer = setInterval(this.fetch, 12000)
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+  },
+  methods: {
+    fetch() {
+      Object.keys(this.chains).forEach(k => {
+        const chain = this.chains[k]
+        fetch(`${chain.api}/blocks/latest`).then(res => res.json()).then(b => {
+          console.log(b.block.header)
+          const { header } = b.block
+          this.$set(chain, 'height', header.height)
+          this.$set(chain, 'time', toDay(header.time))
+        })
+      })
+    },
   },
 }
 </script>
-
-<style>
-
-</style>