Blog posts
This commit is contained in:
Troplo
parent
b981cbdafe
commit
b4a0a57b72
3 changed files with 113 additions and 32 deletions
|
|
@ -308,6 +308,7 @@
|
|||
<b-navbar-item tag="a" href="soon">{{$t('navbar.more.documentation')}}</b-navbar-item>
|
||||
<b-navbar-item tag="router-link" to="/downloads">{{$t('navbar.downloads')}}</b-navbar-item>
|
||||
<b-navbar-item tag="router-link" to="/stats">{{$t('navbar.more.stats')}}</b-navbar-item>
|
||||
<b-navbar-item tag="router-link" to="/blog">{{$t('navbar.more.blog')}}</b-navbar-item>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -317,28 +318,28 @@
|
|||
<img src="https://cdn.kaverti.com/icons/koins.svg">{{$store.state.user.koins}}
|
||||
</b-navbar-item>
|
||||
<div v-if="!loading">
|
||||
<b-navbar-item v-if="!$store.state.user.username" tag="div">
|
||||
<div class="buttons">
|
||||
<b-button @click="registerModal = true" class="button is-primary">
|
||||
<strong>{{$t('navbar.register')}}</strong>
|
||||
</b-button>
|
||||
<b-button @click="loginModal = true" class="button is-light">
|
||||
{{$t('navbar.login')}}
|
||||
</b-button>
|
||||
</div>
|
||||
</b-navbar-item>
|
||||
<b-navbar-dropdown class="is-hoverable navbar-item" :label="$store.state.user.username">
|
||||
<b-navbar-item tag="router-link" :to="'/u/' + $store.state.user.username">{{$t('navbar.user.profile')}}</b-navbar-item>
|
||||
<b-navbar-item @click="settingsModal = true">{{$t('navbar.user.settings')}}</b-navbar-item>
|
||||
<b-navbar-item tag="router-link" to="/transactions">{{$t('navbar.user.transactions')}}</b-navbar-item>
|
||||
<b-navbar-item tag="router-link" to="/character">{{$t('navbar.user.avatar')}}</b-navbar-item>
|
||||
<b-navbar-item tag="router-link" to="/creations">{{$t('navbar.user.creations')}}</b-navbar-item>
|
||||
<b-navbar-item tag="router-link" to="/downloads">{{$t('navbar.user.downloads')}}</b-navbar-item>
|
||||
<b-navbar-item tag="router-link" to="/admin" v-if="$store.state.user.admin">{{$t('navbar.user.admin')}}</b-navbar-item>
|
||||
<b-navbar-item tag="router-link" to="/friends"><b-tag class="is-info" rounded> 1</b-tag> {{$t('navbar.user.friends')}}</b-navbar-item>
|
||||
<b-navbar-item @click="logout()">{{$t('navbar.user.logout')}}</b-navbar-item>
|
||||
</b-navbar-dropdown>
|
||||
<b-navbar-item v-if="!$store.state.user.username" tag="div">
|
||||
<div class="buttons">
|
||||
<b-button @click="registerModal = true" class="button is-primary">
|
||||
<strong>{{$t('navbar.register')}}</strong>
|
||||
</b-button>
|
||||
<b-button @click="loginModal = true" class="button is-light">
|
||||
{{$t('navbar.login')}}
|
||||
</b-button>
|
||||
</div>
|
||||
</b-navbar-item>
|
||||
</div>
|
||||
<b-navbar-dropdown class="is-hoverable" style="padding-right:15px" :label="$store.state.user.username" v-if="$store.state.user.username && !loading">
|
||||
<b-navbar-item tag="router-link" :to="'/u/' + $store.state.user.username">{{$t('navbar.user.profile')}}</b-navbar-item>
|
||||
<b-navbar-item @click="settingsModal = true">{{$t('navbar.user.settings')}}</b-navbar-item>
|
||||
<b-navbar-item tag="router-link" to="/transactions">{{$t('navbar.user.transactions')}}</b-navbar-item>
|
||||
<b-navbar-item tag="router-link" to="/character">{{$t('navbar.user.avatar')}}</b-navbar-item>
|
||||
<b-navbar-item tag="router-link" to="/creations">{{$t('navbar.user.creations')}}</b-navbar-item>
|
||||
<b-navbar-item tag="router-link" to="/downloads">{{$t('navbar.user.downloads')}}</b-navbar-item>
|
||||
<b-navbar-item tag="router-link" to="/admin" v-if="$store.state.user.admin">{{$t('navbar.user.admin')}}</b-navbar-item>
|
||||
<b-navbar-item tag="router-link" to="/friends"><b-tag class="is-info" rounded> 1</b-tag> {{$t('navbar.user.friends')}}</b-navbar-item>
|
||||
<b-navbar-item @click="logout()">{{$t('navbar.user.logout')}}</b-navbar-item>
|
||||
</b-navbar-dropdown>
|
||||
<b-navbar-item v-if="loading">
|
||||
<div class="fa-1x">
|
||||
<i class="fas fa-circle-notch fa-spin"></i>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<main class="section">
|
||||
<h1 class="title has-text-centered">{{name}}</h1>
|
||||
<h1 class="title has-text-centered">{{name}} ({{count}})</h1>
|
||||
<div class="tabs is-centered">
|
||||
<ul>
|
||||
<router-link tag="li" :to="'/friends/pendingCanAccept'" exact><a>{{ $t('friends.pendingCanAccept') }}</a></router-link>
|
||||
|
|
@ -32,6 +32,7 @@ export default {
|
|||
friends: [],
|
||||
name: 'Requests to you',
|
||||
loading: true,
|
||||
count: 0,
|
||||
category: this.$route.params.category
|
||||
}
|
||||
},
|
||||
|
|
@ -182,6 +183,7 @@ export default {
|
|||
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/getAll/' + this.category)
|
||||
.then(res => {
|
||||
this.friends = res.data.rows
|
||||
this.count = res.data.count
|
||||
this.loading = false
|
||||
})
|
||||
.catch((e) => {
|
||||
|
|
|
|||
|
|
@ -6,17 +6,54 @@
|
|||
<div class="box">
|
||||
<img :src="'https://cdn.kaverti.com/user/avatars/full/' + $store.state.user.avatar + '.png'" :alt="$store.state.user.username + '\'s avatar'" width="50%">
|
||||
</div>
|
||||
<div class="box">
|
||||
Blog posts go here
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<h1 class="title has-text-centered">{{$t('home.globalWall')}}</h1>
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
test
|
||||
<h1 class="title">Recent Blog Posts</h1>
|
||||
<div v-if="blogs.length">
|
||||
<div class="box" v-for='(blog) in blogs' :key='"blog-" + blog.id'>
|
||||
<h2 class="subtitle">{{blog.name}}</h2>
|
||||
<p>{{blog.plainText}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!blogs.length" class="box">
|
||||
<NoItems type="blog posts"></NoItems>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="wallPosts.length">
|
||||
<h1 class="title has-text-centered">{{$t('home.globalWall')}}</h1>
|
||||
<div class="column" v-for='(post) in wallPosts' :key='"globalPost-" + post.id'>
|
||||
<div class="card" v-if="wallPosts.length">
|
||||
<div class="card-content">
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img :src="'https://cdn.kaverti.com/user/avatars/headshot/' + post.fromUser.picture + '.png'">
|
||||
</p>
|
||||
By
|
||||
{{post.fromUser.username}}
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>{{post.name}}</strong>
|
||||
<br>
|
||||
<div
|
||||
v-html='post.content'
|
||||
></div>
|
||||
</div>
|
||||
<div class="media-left">
|
||||
Created At: {{post.createdAt | formatDate()}}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" v-if="!wallPosts.length">
|
||||
<h1 class="title has-text-centered">{{$t('home.globalWall')}}</h1>
|
||||
<div class="box" v-if="!wallPosts.length">
|
||||
<NoItems type="wall posts">
|
||||
</NoItems>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!$store.state.user.username">
|
||||
|
|
@ -26,7 +63,48 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import NoItems from "@/components/NoItems";
|
||||
import AjaxErrorHandler from "../../assets/js/errorHandler";
|
||||
|
||||
export default {
|
||||
name: 'Home'
|
||||
name: 'Home',
|
||||
components: {
|
||||
NoItems
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
blogs: [],
|
||||
wallOffset: 0,
|
||||
wallPosts: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getWall(initial) {
|
||||
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
|
||||
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 + `/` + `blog/posts`)
|
||||
.then(res => {
|
||||
this.blogs = res.data
|
||||
})
|
||||
.catch(e => {
|
||||
AjaxErrorHandler(this.$store)(e)
|
||||
})
|
||||
this.getWall(true)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue