kaverti/frontend
5
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

prerelease3

Browse source
This commit is contained in:
Troplo 2021-01-28 19:25:45 +11:00
parent 62a7fcb2dc
commit 15ee3dc914
11 changed files with 117 additions and 173 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/components/Navbar.vue
View file

@ -155,11 +155,13 @@
<section class="modal-card-body has-text-centered">
<h1 class="subtitle">What's new in {{$store.state.client.clientVersion}}?</h1>
<ul>
<li>Marketplace</li>
<li>Pagination Component</li>
<li>Fix crashing when token is null</li>
<li>User list pagination</li>
<li>Marketplace Item</li>
<li>Improved pagination</li>
<li>Add friend page</li>
<li>Remove koin icon in buttons</li>
<li>Add global wall</li>
<li>Add blog</li>
<li>Add new friend count in Navbar User Menu</li>
<li>Add developmental forum</li>
</ul>
</section>
<footer class="modal-card-foot">
@ -314,7 +316,7 @@
</template>
<template #end>
<b-navbar-item v-if="$store.state.user.username && !loading" @click="dailyReward">
<b-navbar-item v-if="$store.state.user.username && !loading" @click="dailyReward(true)">
<img src="https://cdn.kaverti.com/icons/koins.svg">{{$store.state.user.koins}}
</b-navbar-item>
<div v-if="!loading">
@ -337,7 +339,7 @@
<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>&nbsp; {{$t('navbar.user.friends')}}</b-navbar-item>
<b-navbar-item tag="router-link" to="/friends"><b-tag class="is-info" rounded v-if="friendCount > 0"> {{ friendCount }}</b-tag>&nbsp;&nbsp;&nbsp;&nbsp;<p>{{$t('navbar.user.friends')}}</p></b-navbar-item>
<b-navbar-item @click="logout()">{{$t('navbar.user.logout')}}</b-navbar-item>
</b-navbar-dropdown>
<b-navbar-item v-if="loading">
@ -657,13 +659,15 @@ export default {
this.$buefy.snackbar.open(`WARNING: You have fake authenticated, you do not have authenticated API access. Use for debug purposes only.`)
Object.assign(axios.defaults, {headers: {Authorization: this.$store.state.user.token}})
},
dailyReward() {
dailyReward(notify) {
this.axios.get(
process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/reward'
).then(res => {
this.$store.commit('setKoins', res.data.koins)
}).catch(e => {
AjaxErrorHandler(this.$store)(e)
if(notify) {
AjaxErrorHandler(this.$store)(e)
}
})
},
getInfo() {
@ -723,17 +727,14 @@ export default {
this.loading = false
console.log(this.getBannerId())
})
if(this.$store.state.username) {
this.dailyReward()
this.$nextTick(() => {
this.dailyReward(false)
this.showUpdate()
this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/getAllPendingCanAccept')
.then(res => {
this.friendCount = res.data.count
}).catch(() => {
this.$buefy.snackbar.open({message: this.$t('errors.authFail'), type: 'is-warning'})
this.loading = false
})
}
this.showUpdate()
})
})
}
}
</script>

2
src/components/Pagination.vue
View file

@ -1,5 +1,5 @@
<template>
<div class='pagination'>
<div>
<slot></slot>
</div>
</template>

11
src/locales/en.json
View file

@ -113,7 +113,8 @@
"dev": {
"title": "Developer Options",
"fakeUser": "Fake User Auth",
"debug": "Debug Page"
"debug": "Debug Page",
"brokenRoute": "Enable broken (disabled) routes"
},
"user": {
"title": "Unknown",
@ -133,7 +134,8 @@
"discord": "Discord",
"roadmap": "Roadmap",
"documentation": "API Docs",
"stats": "Kaverti Stats"
"stats": "Kaverti Stats",
"blog": "Kaverti Blog"
},
"register": "Register",
"login": "Login"
@ -287,6 +289,11 @@
"originalPrice": "Original Price",
"creator": "The Creator"
},
"friends": {
"pendingCanAccept": "Requests to you",
"pending": "Requests from you",
"accepted": "Accepted requests"
},
"currency": "Koins",
"close": "Close",
"tos": "Terms of Service",

10
src/router/index.js
View file

@ -67,6 +67,11 @@ const routes = [
name: 'Forums',
component: route('Forums')
},
{
path: '/forums/create',
name: 'ForumThreadCreate',
component: route('ForumThreadCreate')
},
{
path: '/forums/:category',
name: 'Forums',
@ -77,11 +82,6 @@ const routes = [
name: 'ForumThread',
component: route('ForumThread')
},
{
path: '/forums/create',
name: 'ForumThreadCreate',
component: route('ForumThreadCreate')
},
{
path: '/roadmap',
name: 'Roadmap',

2
src/store/index.js
View file

@ -8,7 +8,7 @@ export default new Vuex.Store({
wind: false,
enableBrokenRoutes: false,
client: {
clientVersion: '1.0.0-prerelease2',
clientVersion: '1.0.0-prerelease3',
latestClientVersion: '',
latestAPIVersion: '',
bannerText: '',

27
src/views/ForumThread.vue
View file

@ -7,11 +7,12 @@
<div class="media-left">
<img :src="'https://cdn.kaverti.com/user/avatars/headshot/' + post.User.picture + '.png'">
</div>
<div class="media-content">
<div v-html="post.content"></div>
<div class="media-content">
<h2 class="subtitle">{{post.User.username}}</h2>
<div v-html="post.content"></div>
</div>
</div>
</div>
</div>
</div>
</main>
</template>
@ -36,16 +37,16 @@ export default {
}
this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'forums/thread/' + this.$route.params.id)
.then((res) => {
if(initial) {
this.thread = res.data
} else {
this.thread.Posts.push(...res.data.Posts)
}
})
.catch((e) => {
AjaxErrorHandler(this.$store)(e)
})
.then((res) => {
if(initial) {
this.thread = res.data
} else {
this.thread.Posts.push(...res.data.Posts)
}
})
.catch((e) => {
AjaxErrorHandler(this.$store)(e)
})
}
},
mounted () {

175
src/views/Friends.vue
View file

@ -1,22 +1,46 @@
<template>
<main class="section">
<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>
<router-link tag="li" :to="'/friends/accepted'" exact><a>{{ $t('friends.accepted') }}</a></router-link>
<router-link tag="li" :to="'/friends/pending'" exact><a>{{ $t('friends.pending') }}</a></router-link>
</ul>
</div>
<div class="columns is-multiline">
<div class="column is-3 has-text-centered" v-for='(friend) in friends' :key='"friend-" + friend.id'>
<h1 class="title has-text-centered">{{friend.friend2.username}}</h1>
<div class="box">
<img :src="'https://cdn.kaverti.com/user/avatars/full/' + friend.friend2.picture + '.png'"><br>
<b-button class="is-warning has-text-centered is-centered is-center" v-if="friend.type === 'pending'"><i class="fas fa-minus"></i>&nbsp;Cancel Friend Request</b-button>
<b-button class="is-warning has-text-centered is-centered is-center" v-if="friend.type === 'pendingCanAccept'"><i class="fas fa-minus"></i>&nbsp;Deny Friend Request</b-button>
<b-button class="is-success has-text-centered is-centered is-center" v-if="friend.type === 'pendingCanAccept'"><i class="fas fa-plus"></i>&nbsp;Accept Friend Request</b-button>
<b-button class="is-danger has-text-centered is-centered is-center" v-if="friend.type === 'accepted'"><i class="fas fa-minus"></i>&nbsp;Remove Friend</b-button>
<main>
<div class="section">
<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>
<router-link tag="li" :to="'/friends/accepted'" exact><a>{{ $t('friends.accepted') }}</a></router-link>
<router-link tag="li" :to="'/friends/pending'" exact><a>{{ $t('friends.pending') }}</a></router-link>
</ul>
</div>
<div class="columns is-multiline" v-if="friends.length && !loading">
<div class="column is-3 has-text-centered" v-for='(friend) in friends' :key='"friend-" + friend.id'>
<h1 class="title has-text-centered">{{friend.friend2.username}}</h1>
<div class="box">
<img :src="'https://cdn.kaverti.com/user/avatars/full/' + friend.friend2.picture + '.png'"><br>
<div class="buttons">
<b-button @click="removeFriend(friend)" class="is-warning has-text-centered is-centered is-center" v-if="friend.type === 'pending'"><i class="fas fa-minus"></i>&nbsp;Cancel Friend Request</b-button>
<b-button @click="removeFriend(friend)" class="is-warning has-text-centered is-centered is-center" v-if="friend.type === 'pendingCanAccept'"><i class="fas fa-minus"></i>&nbsp;Deny Friend Request</b-button>
<b-button @click="doRelationshipAccept(friend)" class="is-success has-text-centered is-centered is-center" v-if="friend.type === 'pendingCanAccept'"><i class="fas fa-plus"></i>&nbsp;Accept Friend Request</b-button>
<b-button @click="removeFriend(friend)" class="is-danger has-text-centered is-centered is-center" v-if="friend.type === 'accepted'"><i class="fas fa-minus"></i>&nbsp;Remove Friend</b-button>
</div>
</div>
</div>
</div>
<div class="section" v-if="!friends.length && !loading">
<NoItems type="friends"></NoItems>
</div>
<div class="section columns" v-if="loading">
<div class="column">
<div class="box">
<b-skeleton></b-skeleton>
</div>
</div>
<div class="column">
<div class="box">
<b-skeleton></b-skeleton>
</div>
</div>
<div class="column">
<div class="box">
<b-skeleton></b-skeleton>
</div>
</div>
</div>
</div>
@ -24,9 +48,12 @@
</template>
<script>
import AjaxErrorHandler from "../../assets/js/errorHandler";
import NoItems from "../components/NoItems"
export default {
name: 'Friends',
components: {
NoItems
},
data() {
return {
friends: [],
@ -55,126 +82,32 @@ export default {
}
},
methods: {
removeFriend (username) {
removeFriend (user) {
this.axios
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/remove', {
friend: username
friend: user.friend2.username
})
.then(() => {
this.getItems()
})
.catch(e => {
this.refreshFriend()
this.description.loading = false
AjaxErrorHandler(this.$store)(e, error => {
this.description.error = error.message
})
this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`)
.then(res => this.relationship = res.data, this.refreshFriend())
.catch(e => {
this.refreshFriend()
let invalidId = e.response.data.errors.find(error => {
return error.name === 'accountDoesNotExist'
})
if(invalidId) {
this.$store.commit('set404Page', true)
} else {
AjaxErrorHandler(this.$store)(e)
}
})
})
},
doRelationship () {
this.axios
.post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/send', {
friend: this.$route.params.username
})
.then(() => {
this.refreshFriend()
this.description.loading = false
this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`)
.then(res => this.relationship = res.data)
.catch(e => {
let invalidId = e.response.data.errors.find(error => {
return error.name === 'accountDoesNotExist'
})
if(invalidId) {
this.$store.commit('set404Page', true)
} else {
AjaxErrorHandler(this.$store)(e)
}
})
})
.catch(e => {
this.refreshFriend()
this.description.loading = false
this.getItems()
AjaxErrorHandler(this.$store)(e)
this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`)
.then(res => this.relationship = res.data)
.catch(e => {
let invalidId = e.response.data.errors.find(error => {
return error.name === 'accountDoesNotExist'
})
if(invalidId) {
this.$store.commit('set404Page', true)
} else {
AjaxErrorHandler(this.$store)(e)
}
})
})
},
doRelationshipAccept () {
doRelationshipAccept (user) {
this.axios
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/accept', {
friend: this.$route.params.username
friend: user.friend2.username
})
.then(() => {
this.refreshFriend()
this.description.loading = false
this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`)
.then(res => this.relationship = res.data)
.catch(e => {
let invalidId = e.response.data.errors.find(error => {
return error.name === 'accountDoesNotExist'
})
if(invalidId) {
this.$store.commit('set404Page', true)
} else {
AjaxErrorHandler(this.$store)(e)
}
})
this.getItems()
})
.catch(e => {
this.refreshFriend()
this.description.loading = false
this.getItems()
AjaxErrorHandler(this.$store)(e, error => {
this.description.error = error.message
})
this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`)
.then(res => this.relationship = res.data)
.catch(e => {
let invalidId = e.response.data.errors.find(error => {
return error.name === 'accountDoesNotExist'
})
if(invalidId) {
this.$store.commit('set404Page', true)
} else {
AjaxErrorHandler(this.$store)(e)
}
})
AjaxErrorHandler(this.$store)(e)
})
},
getItems () {

9
src/views/Marketplace.vue
View file

@ -43,14 +43,13 @@
:paginate="paginate"
@loadNext='getItems(false)'
>
<div class="column is-3" style="float: left;" v-for='(item) in items' :key='"marketplace-" + item.id'>
<div class="column is-3 has-text-centered" style="float: left;" v-for='(item) in items' :key='"marketplace-" + item.id'>
<router-link :to="'/m/' + item.id" class="subtitle has-text-centered">{{item.name}}</router-link>
<div class="box">
<router-link :to="'/m/' + item.id" class="subtitle">{{item.name}}</router-link>
<img :src="'https://cdn.kaverti.com/marketplace/avatars/' + item.previewFile + '.png'" width="40%">
<div class="buttons is-centered is-center">
<b-button class="is-info" v-if="!item.saleEnabled">{{$t('user.inventoryTab.buyNow')}} <img style="vertical-align: middle" src="https://cdn.kaverti.com/icons/koins-white.svg" width="8%">{{item.price}}</b-button>
<b-button class="is-success" v-if="item.saleEnabled">{{$t('user.inventoryTab.buyNow')}} <img style="vertical-align: middle" src="https://cdn.kaverti.com/icons/koins-white.svg" width="12%">{{item.salePrice}} <b-tooltip class="is-success" :label="$t('user.inventoryTab.onSale')"><i class="fas fa-info-circle"></i></b-tooltip></b-button>
<b-button tag="router-link" :to="'/m/' + item.id" class="is-success">{{$t('marketplace.moreInfo')}}</b-button>
<b-button class="is-info" v-if="!item.saleEnabled">{{$t('user.inventoryTab.buyNow')}} {{item.price}} Koins</b-button>
<b-button class="is-success" v-if="item.saleEnabled">{{$t('user.inventoryTab.buyNow')}} {{item.salePrice}} Koins <b-tooltip class="is-success" :label="$t('user.inventoryTab.onSale')"><i class="fas fa-info-circle"></i></b-tooltip></b-button>
</div>
</div>
</div>

13
src/views/MarketplaceItem.vue
View file

@ -30,11 +30,14 @@
</div>
</div>
<div class="columns" v-if="!loading">
<div class="column is-4">
<div class="column is-4 has-text-centered">
<h1 class="title has-text-centered">{{item.name}}</h1>
<div class="box">
<img :src="'https://cdn.kaverti.com/marketplace/avatars/' + item.previewFile + '.png'">
<img width=50% :src="'https://cdn.kaverti.com/marketplace/avatars/' + item.previewFile + '.png'">
</div>
<b-button class="is-info" v-if="!item.saleEnabled && !purchased">Buy now</b-button>
<b-button class="is-success" v-if="item.saleEnabled && !purchased">Buy now for discounted price</b-button>
<b-button disabled v-if="purchased">You own this item!</b-button>
</div>
<div class="column is-7">
<h1 class="title has-text-centered">{{$t('marketplaceItem.moreInfo')}}</h1>
@ -43,9 +46,9 @@
<b-button class="is-success" v-if="item.saleEnabled && !purchased">Buy now for discounted price</b-button>
<b-button disabled v-if="purchased">You own this item!</b-button>
<hr class="solid">
<p v-if="item.saleEnabled">{{$t('marketplaceItem.price')}}: <img style="vertical-align: middle" src="https://cdn.kaverti.com/icons/koins.svg" width="5%">{{item.salePrice}}</p>
<p v-if="item.saleEnabled">{{$t('marketplaceItem.originalPrice')}}: <img style="vertical-align: middle" src="https://cdn.kaverti.com/icons/koins.svg" width="5%">{{item.price}}</p>
<p v-if="!item.saleEnabled">{{$t('marketplaceItem.price')}}: <img style="vertical-align: middle" src="https://cdn.kaverti.com/icons/koins.svg" width="5%">{{item.price}}</p>
<p v-if="item.saleEnabled">{{$t('marketplaceItem.price')}}: {{item.salePrice}} Koins</p>
<p v-if="item.saleEnabled">{{$t('marketplaceItem.originalPrice')}}: {{item.price}} Koins</p>
<p v-if="!item.saleEnabled">{{$t('marketplaceItem.price')}}: {{item.price}} Koins</p>
<p>Uploaded at: {{item.createdAt | formatDate()}}</p>
</div>
<h1 class="title has-text-centered">{{$t('marketplaceItem.creator')}}</h1>

2
src/views/User.vue
View file

@ -10,7 +10,7 @@
<div class="column is-4 is-vcentered has-text-centered">
<h1 class="title">{{user.username}}&nbsp;<Badges :username="user.username" :system="user.system" :hidden="user.hidden" :admin="user.admin" :booster="user.booster" :bot="user.bot"></Badges></h1>
<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=25%>
<img :src="'https://cdn.kaverti.com/user/avatars/full/' + user.picture + '.png'" :alt="user.username + '\'s avatar'" width=25%>
</div>
<div class="buttons is-centered">
<b-button @click="doRelationship" class="is-success" v-if="relationships.type === 'notFriends' && user.username !== $store.state.user.username"><i class="fas fa-plus"></i> &nbsp;{{$t('relationships.notFriends')}}</b-button>

4
src/views/UserInventory.vue
View file

@ -8,8 +8,8 @@
<h1 class="subtitle">{{item.Item.name}}</h1>
<div class="box">
<img v-if="item.Item.approved" width="128px" height="128px" :src="'https://cdn.kaverti.com/marketplace/avatars/' + item.Item.previewFile + '.png'">
<b-button class="is-info" v-if="!item.Item.offSale && !item.Item.saleEnabled">{{$t('user.inventoryTab.buyNow')}} <img style="vertical-align: middle" src="https://cdn.kaverti.com/icons/koins-white.svg" width="12%">{{item.Item.price}}</b-button>
<b-button class="is-success" v-if="item.Item.saleEnabled">{{$t('user.inventoryTab.buyNow')}} <img style="vertical-align: middle" src="https://cdn.kaverti.com/icons/koins-white.svg" width="12%">{{item.Item.salePrice}} <b-tooltip class="is-success" :label="$t('user.inventoryTab.onSale')"><i class="fas fa-info-circle"></i></b-tooltip></b-button>
<b-button class="is-info" v-if="!item.Item.offSale && !item.Item.saleEnabled">{{$t('user.inventoryTab.buyNow')}} {{item.Item.price}} Koins</b-button>
<b-button class="is-success" v-if="item.Item.saleEnabled">{{$t('user.inventoryTab.buyNow')}} {{item.Item.salePrice}} Koins <b-tooltip class="is-success" :label="$t('user.inventoryTab.onSale')"><i class="fas fa-info-circle"></i></b-tooltip></b-button>
<b-button disabled v-if="item.Item.offSale">{{$t('user.inventoryTab.unavailable')}}</b-button>
</div>
</div>