Skip to content

Commit

Permalink
Showing 10 changed files with 606 additions and 32 deletions.
4 changes: 2 additions & 2 deletions src/components/MainHeaderDescriptive.vue
Original file line number Diff line number Diff line change
@@ -10,8 +10,8 @@
<v-btn text small :to="{ name: 'search' }" class="text--secondary" active-class="bg-before-transparent">
Search
</v-btn>
<v-btn text small :to="{ name: 'stats' }" class="text--secondary" active-class="bg-before-transparent">
Networks
<v-btn text small :to="{ path: `/stats/${config.networks[0]}/general` }" class="text--secondary" active-class="bg-before-transparent">
Stats
</v-btn>
<v-btn text small :to="{ name: 'dapps' }" class="text--secondary" active-class="bg-before-transparent">
Dapps
39 changes: 37 additions & 2 deletions src/router/index.js
Original file line number Diff line number Diff line change
@@ -6,8 +6,10 @@ import Home from '@/views/home/Home.vue'

import ExtendedSearch from '@/views/extended_search/ExtendedSearch.vue'

import Network from '@/views/network/Network.vue'
import NetworkTab from '@/views/network/NetworkTab.vue'
import Stats from '@/views/stats/Stats.vue'
import NetworkTab from '@/views/stats/NetworkTab.vue'
import StatsTab from '@/views/stats/StatsTab.vue'
import Diff from '@/views/diff/Diff.vue'
import Docs from '@/views/docs/Docs.vue'

@@ -16,6 +18,7 @@ import OperationsTab from '@/views/contract/OperationsTab.vue'
import CodeTab from '@/views/contract/CodeTab.vue'
import InteractTab from '@/views/contract/InteractTab.vue'
import ViewsTab from '@/views/contract/ViewsTab/ViewsTab.vue'
import TokensTab from '@/views/stats/TokensTab.vue'
import StorageTab from '@/views/contract/StorageTab.vue'
import ContractTokensTab from '@/views/contract/TokensTab/TokensTab.vue'
import TransfersTab from '@/views/contract/TransfersTab/TransfersTab.vue'
@@ -95,7 +98,7 @@ const router = new Router({
]
},
{
path: '/:network',
path: '/stats/:network',
components: {
default: Stats,
},
@@ -104,6 +107,38 @@ const router = new Router({
{
path: '',
name: 'stats',
redirect: 'stats_general'
},
{
name: 'stats_general',
path: 'general',
component: StatsTab,
props: true
},
{
path: 'fa12',
name: 'stats_fa12',
component: TokensTab,
props: true
},
{
path: 'fa2',
name: 'stats_fa20',
component: TokensTab,
props: true
}
]
},
{
path: '/:network',
components: {
default: Network,
},
props: { default: true },
children: [
{
path: '',
name: 'network',
component: NetworkTab,
props: true,
},
89 changes: 89 additions & 0 deletions src/views/network/Network.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<template>
<div class="fill-height pa-8">
<v-breadcrumbs :items="breadcrumbs" divider="/" class="pl-0" />
<v-row class="fill-height" no-gutters>
<v-col cols="3">
<SideBar :loading="loading" :states="states" :network="currentNetwork" />
</v-col>
<v-col cols="9">
<router-view :network="currentNetwork" :state="currentState"></router-view>
</v-col>
</v-row>
</div>
</template>

<script>
import { mapActions } from "vuex";
import SideBar from "./SideBar.vue";
import capitalize from 'lodash.capitalize';
export default {
name: "Network",
components: {
SideBar,
},
data: () => ({
loading: true,
states: [],
currentNetwork: null,
}),
computed: {
currentState() {
return this.currentNetwork ? this.states.find((item) => item.network === this.currentNetwork) : {};
},
breadcrumbs() {
return [{
text: 'Home',
to: '/',
}, {
text: capitalize(this.currentNetwork),
to: `/${this.currentNetwork}${this.$route.hash !== '#' ? '#' : '##'}`
}]
}
},
created() {
this.getStats();
},
methods: {
...mapActions(["showError"]),
navigate() {
if (this.$route.params.network)
this.currentNetwork = this.$route.params.network;
else if (this.states.length > 0)
this.currentNetwork = this.states[0].network;
},
getStats() {
this.loading = true;
this.api
.getStats()
.then((res) => {
if (!res) return;
this.states = res.sort(function (a, b) {
if (a.network === "mainnet") {
return -1;
} else if (b.network === "mainnet") {
return 1;
} else {
return b.network.localeCompare(a.network);
}
});
this.navigate();
})
.catch((err) => {
console.log(err);
this.showError(err);
})
.finally(() => (this.loading = false));
},
},
watch: {
$route: "navigate",
},
};
</script>

<style>
.main-navigation > .v-navigation-drawer__content {
overflow: hidden;
}
</style>
File renamed without changes.
File renamed without changes.
File renamed without changes.
55 changes: 27 additions & 28 deletions src/views/stats/Stats.vue
Original file line number Diff line number Diff line change
@@ -1,46 +1,45 @@
<template>
<div class="fill-height pa-8">
<v-breadcrumbs :items="breadcrumbs" divider="/" class="pl-0" />
<v-row class="fill-height" no-gutters>
<v-col cols="3">
<SideBar :loading="loading" :states="states" :network="currentNetwork" />
</v-col>
<v-col cols="9">
<router-view :network="currentNetwork" :state="currentState"></router-view>
</v-col>
</v-row>
<div class="fill-height">
<v-navigation-drawer floating app permanent width="336" color="canvas" class="main-navigation">
<v-row class="fill-height br-1" no-gutters>
<v-col cols="12">
<StatsSideBar :loading="loading" :states="states" :network="currentNetwork" />
</v-col>
</v-row>
</v-navigation-drawer>

<v-toolbar flat class color="toolbar" height="75">
<v-tabs center-active background-color="transparent" slider-color="primary" class="ml-4">
<v-tab :to="{name: 'stats_general'}" replace>
<v-icon left small>mdi-align-vertical-bottom</v-icon>&nbsp;General
</v-tab>
<v-tab :to="{name: 'stats_fa12'}" replace>
<v-icon left small>mdi-bank-outline</v-icon>&nbsp;FA1.2
</v-tab>
<v-tab :to="{name: 'stats_fa20'}" replace>
<v-icon left small>mdi-bank</v-icon>&nbsp;FA2.0
</v-tab>
</v-tabs>
</v-toolbar>

<router-view :network="currentNetwork"></router-view>
</div>
</template>

<script>
import { mapActions } from "vuex";
import SideBar from "@/views/stats/SideBar.vue";
import capitalize from 'lodash.capitalize';
import StatsSideBar from "./StatsSideBar";
export default {
name: "Stats",
components: {
SideBar,
StatsSideBar,
},
data: () => ({
loading: true,
states: [],
currentNetwork: null,
}),
computed: {
currentState() {
return this.currentNetwork ? this.states.find((item) => item.network === this.currentNetwork) : {};
},
breadcrumbs() {
return [{
text: 'Home',
to: '/',
}, {
text: capitalize(this.currentNetwork),
to: `/${this.currentNetwork}${this.$route.hash !== '#' ? '#' : '##'}`
}]
}
},
created() {
this.getStats();
},
@@ -86,4 +85,4 @@ export default {
.main-navigation > .v-navigation-drawer__content {
overflow: hidden;
}
</style>
</style>
108 changes: 108 additions & 0 deletions src/views/stats/StatsSideBar.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<template>
<div class="fill-height canvas top-margin-from-main-header">
<v-list-item style="height: 74px;">
<v-list-item-content two-line>
<v-list-item-title class="headline">Statistics</v-list-item-title>
<v-list-item-subtitle>
<span class="overline">{{ network }}</span>
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>

<v-skeleton-loader
:loading="loading"
type="list-item-two-line, list-item-two-line, list-item-two-line, list-item-two-line"
>
<v-expansion-panels flat tile mandatory multiple active-class="opened-panel">
<v-expansion-panel class="ma-0 bb-1">
<v-expansion-panel-header color="sidebar" class="pl-4 py-0">
<span class="caption font-weight-bold text-uppercase text--secondary">Networks</span>
</v-expansion-panel-header>
<v-expansion-panel-content color="data">
<v-list class="stats-sidebar-list">
<v-list-item-group v-model="item" mandatory>
<template v-for="(state, idx) in states">
<v-divider :key="'divider' + idx" v-if="idx > 0"></v-divider>
<v-list-item :key="idx" @click="navigate(state)">
<v-list-item-content>
<v-list-item-title class="overline text--primary">{{ state.network }}</v-list-item-title>
<v-list-item-subtitle class="body-2">{{ state.protocol.slice(0, 8) }}</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-list-item-action-text
class="overline text--primary"
>{{ helpers.formatDatetime(state.timestamp) }}</v-list-item-action-text>
<v-list-item-action-text class="body-2">level {{ state.level }}</v-list-item-action-text>
</v-list-item-action>
</v-list-item>
</template>
</v-list-item-group>
</v-list>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-skeleton-loader>

<BakingBadFooter />
</div>
</template>

<script>
import BakingBadFooter from "@/components/BakingBadFooter.vue";
export default {
name: "StatsSideBar",
props: {
states: Array,
loading: Boolean,
network: String,
},
components: {
BakingBadFooter,
},
created() {
this.setItem();
},
watch: {
states() {
this.setItem();
}
},
data: () => ({
item: 0,
}),
methods: {
navigate(state) {
this.$router.push({
name: this.$router.name,
params: { network: state.network },
});
},
setItem() {
this.states.forEach((x, idx) => {
if (x.network === this.$route.params.network) this.item = idx;
});
}
},
};
</script>

<style lang="scss">
.opened-panel {
border-bottom: none !important;
}
.opened-panel > .v-expansion-panel-content > .v-expansion-panel-content__wrap {
padding: 0;
}
.opened-panel > .v-expansion-panel-header {
min-height: 48px;
}
.stats-sidebar-list {
max-height: calc(100vh - 75px - 1 * 48px);
overflow-y: auto;
border-radius: 0;
padding: 0;
z-index: 1;
}
</style>
Loading

0 comments on commit 8a00301

Please sign in to comment.