92 lines
2.9 KiB
Vue
92 lines
2.9 KiB
Vue
<template>
|
|
<main class="section">
|
|
<div class="column is-vcentered">
|
|
<h1 class="title">{{$t('stats.title')}}</h1>
|
|
</div>
|
|
<div class="columns is-centered">
|
|
<div class="column is-vcentered has-text-centered">
|
|
<h1 class="title">{{$t('stats.users')}}</h1>
|
|
<div class="box">
|
|
<h1 class="title" v-if="!loading">
|
|
{{users}}
|
|
</h1>
|
|
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
|
</div>
|
|
</div>
|
|
<div class="column is-vcentered has-text-centered">
|
|
<h1 class="title">{{$t('stats.posts')}}</h1>
|
|
<div class="box">
|
|
<h1 class="title" v-if="!loading">
|
|
{{posts}}
|
|
</h1>
|
|
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
|
</div>
|
|
</div>
|
|
<div class="column is-vcentered has-text-centered">
|
|
<h1 class="title">{{$t('stats.purchased')}}</h1>
|
|
<div class="box">
|
|
<h1 class="title" v-if="!loading">
|
|
{{inventory}}
|
|
</h1>
|
|
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
|
</div>
|
|
</div>
|
|
<div class="column is-vcentered has-text-centered">
|
|
<h1 class="title">{{$t('stats.teams')}}</h1>
|
|
<div class="box">
|
|
<h1 class="title" v-if="!loading">
|
|
{{teams}}
|
|
</h1>
|
|
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
|
</div>
|
|
</div>
|
|
<div class="column is-vcentered has-text-centered">
|
|
<h1 class="title">{{$t('stats.items')}}</h1>
|
|
<div class="box">
|
|
<h1 class="title" v-if="!loading">
|
|
{{items}}
|
|
</h1>
|
|
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
|
</div>
|
|
</div>
|
|
<div class="column is-vcentered has-text-centered">
|
|
<h1 class="title">{{$t('stats.threads')}}</h1>
|
|
<div class="box">
|
|
<h1 class="title" v-if="!loading">
|
|
{{threads}}
|
|
</h1>
|
|
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
users: 0,
|
|
posts: 0,
|
|
inventory: 0,
|
|
items: 0,
|
|
teams: 0,
|
|
threads: 0,
|
|
loading: true
|
|
}
|
|
},
|
|
mounted() {
|
|
this.axios.get(process.env.VUE_APP_API_ENDPOINT + process.env.VUE_APP_API_VERSION + '/' + 'kaverti/stats')
|
|
.then(res => {
|
|
this.users = res.data.users
|
|
this.posts = res.data.posts
|
|
this.inventory = res.data.inventory
|
|
this.items = res.data.items
|
|
this.teams = res.data.teams
|
|
this.threads = res.data.threads
|
|
this.loading = false
|
|
}).catch(() => {
|
|
this.$buefy.snackbar.open({message:this.$t('errors.authFail'), type: 'is-warning'})
|
|
})
|
|
}
|
|
}
|
|
</script> |