257 lines
8.8 KiB
Vue
257 lines
8.8 KiB
Vue
<template>
|
|
<div id="home">
|
|
<section class="section" v-if="$store.state.user.username">
|
|
<div class="container">
|
|
<div class="columns is-centered">
|
|
<div class="column is-4">
|
|
<div class="title">
|
|
{{ $store.state.user.username }}
|
|
</div>
|
|
<div class="box">
|
|
<img :src="'https://cdn.kaverti.com/user/avatars/full/' + $store.state.user.avatar + '.png'" alt="Avatar" width="50%">
|
|
</div>
|
|
<div class="title">
|
|
{{ $t('home.news') }}
|
|
</div>
|
|
<div v-if="blogs.length">
|
|
<div class="box" v-for='(blog) in blogs' :key='"blog-" + blog.id'>
|
|
<div class="subtitle">
|
|
{{ blog.name }}
|
|
</div>
|
|
<p>{{ blog.plainText }}</p>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<div class="box">
|
|
<NoItems type="blog posts"></NoItems>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-7" v-if="!loading">
|
|
<div class="box">
|
|
<div class="title">
|
|
{{ $t('home.globalWall') }}
|
|
</div>
|
|
<b-input type="textarea" maxlength="256" placeholder="How's it going?" v-model="wallText"></b-input>
|
|
<b-tag type="is-info" class="is-pulled-right">
|
|
Markdown is no longer available on wall posts.
|
|
</b-tag>
|
|
<b-button type="is-info" ckass="is-pulled-left" :loading="loadingWallButton" @click="postWall">Post</b-button>
|
|
</div>
|
|
<hr>
|
|
<div class="box" v-for='(post) in wallPosts' :key='"wallPosts-" + post.id'>
|
|
<article class="media">
|
|
<figure class="media-left">
|
|
<figure class="image is-64x64 is-rounded">
|
|
<img :src="'https://cdn.kaverti.com/user/avatars/headshot/' + post.fromUser.picture + '.png'" alt="Avatar">
|
|
</figure>
|
|
</figure>
|
|
<div class="media-content">
|
|
<div class="content">
|
|
<p>
|
|
<strong>{{ post.fromUser.username }}</strong>
|
|
<small>{{ post.createdAt | formatDate() }}</small>
|
|
<br>
|
|
{{ post.plainText }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="media-right">
|
|
<b-tooltip label="Delete" v-if="$store.state.user.admin">
|
|
<b-button class="delete"></b-button>
|
|
</b-tooltip>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section hero is-info is-large is-fullheight-with-navbar" v-if="!$store.state.user.username">
|
|
<div class="hero-body">
|
|
<div class="container has-text-centered">
|
|
<div class="title">
|
|
Kaverti
|
|
</div>
|
|
<div class="subtitle">
|
|
Kaverti is a new 3D sandbox gaming platform, and avatar social website.
|
|
<br>
|
|
Kaverti is home to hundreds of users who enjoy using it
|
|
<br>
|
|
So why not sign up today!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section hero is-white is-medium" v-if="!$store.state.user.username">
|
|
<div class="hero-body">
|
|
<div class="container has-text-centered">
|
|
<div class="title">
|
|
Statistics
|
|
</div>
|
|
<div class="columns is-centered">
|
|
<div class="column has-text-centered">
|
|
<div class="title">{{ $t('stats.users') }}</div>
|
|
<div class="box">
|
|
<div class="title" v-if="!loading">
|
|
{{ users }}
|
|
</div>
|
|
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
|
</div>
|
|
</div>
|
|
<div class="column has-text-centered">
|
|
<div class="title">{{ $t('stats.users') }}</div>
|
|
<div class="box">
|
|
<div class="title" v-if="!loading">
|
|
{{ users }}
|
|
</div>
|
|
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
|
</div>
|
|
</div>
|
|
<div class="column has-text-centered">
|
|
<div class="title">{{ $t('stats.posts') }}</div>
|
|
<div class="box">
|
|
<div class="title" v-if="!loading">
|
|
{{ posts }}
|
|
</div>
|
|
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
|
</div>
|
|
</div>
|
|
<div class="column has-text-centered">
|
|
<div class="title">{{ $t('stats.users') }}</div>
|
|
<div class="box">
|
|
<div class="title" v-if="!loading">
|
|
{{ users }}
|
|
</div>
|
|
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
|
</div>
|
|
</div>
|
|
<div class="column has-text-centered">
|
|
<div class="title">{{ $t('stats.purchased') }}</div>
|
|
<div class="box">
|
|
<div class="title" v-if="!loading">
|
|
{{ inventory }}
|
|
</div>
|
|
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
|
</div>
|
|
</div>
|
|
<div class="column has-text-centered">
|
|
<div class="title">{{ $t('stats.items') }}</div>
|
|
<div class="box">
|
|
<div class="title" v-if="!loading">
|
|
{{ items }}
|
|
</div>
|
|
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
|
</div>
|
|
</div>
|
|
<div class="column has-text-centered">
|
|
<div class="title">{{ $t('stats.teams') }}</div>
|
|
<div class="box">
|
|
<div class="title" v-if="!loading">
|
|
{{ teams }}
|
|
</div>
|
|
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
|
</div>
|
|
</div>
|
|
<div class="column has-text-centered">
|
|
<div class="title">{{ $t('stats.threads') }}</div>
|
|
<div class="box">
|
|
<div class="title" v-if="!loading">
|
|
{{ threads }}
|
|
</div>
|
|
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import NoItems from "@/components/NoItems";
|
|
import AjaxErrorHandler from ".././assets/js/errorHandler";
|
|
|
|
export default {
|
|
name: 'Home',
|
|
components: {
|
|
NoItems
|
|
},
|
|
data() {
|
|
return {
|
|
blogs: [],
|
|
wallOffset: 0,
|
|
wallPosts: [],
|
|
wallText: '',
|
|
mentions: '',
|
|
loadingWallButton: false,
|
|
loadingWall: true,
|
|
users: 0,
|
|
posts: 0,
|
|
inventory: 0,
|
|
teams: 0,
|
|
threads: 0,
|
|
items: 0,
|
|
loading: false
|
|
}
|
|
},
|
|
methods: {
|
|
postWall() {
|
|
this.loadingWallButton = true
|
|
|
|
this.axios.post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `wall/post`, {
|
|
username: "GlobalWall",
|
|
content: this.wallText
|
|
}).then(() => {
|
|
this.loadingWallButton = false
|
|
this.getWall(true)
|
|
}).catch(e => {
|
|
this.loadingWallButton = false
|
|
AjaxErrorHandler(this.$store)(e)
|
|
})
|
|
},
|
|
getWall(initial) {
|
|
this.loadingWall = true
|
|
if(initial) {
|
|
this.wallOffset = 0
|
|
}
|
|
this.axios
|
|
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `user/GlobalWall?wall=true&offset=` + this.wallOffset)
|
|
.then(res => {
|
|
this.loadingPosts = false
|
|
this.loadingWall = false
|
|
if(initial) {
|
|
this.wallPosts = res.data.userWalls
|
|
} else {
|
|
this.wallPosts.push(...res.data.userWalls)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
mounted() {
|
|
this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + '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'})
|
|
})
|
|
this.axios
|
|
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `blog/posts`)
|
|
.then(res => {
|
|
this.blogs = res.data
|
|
})
|
|
.catch(e => {
|
|
AjaxErrorHandler(this.$store)(e)
|
|
})
|
|
this.getWall(true)
|
|
}
|
|
}
|
|
</script>
|