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

Awards/user pages/etc

Browse source
This commit is contained in:
Troplo 2021-01-19 01:57:19 +11:00
parent 247baaa399
commit 503f577ed3
10 changed files with 216 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/App.vue
View file

@ -3,6 +3,9 @@
</style>
<style>
@import 'https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css';
.large-icon {
font-size: 60px;
}
</style>
<template>
<div id="app">
@ -54,6 +57,7 @@ export default {
}).catch(() => {
this.$buefy.snackbar.open({message:this.$t('errors.down'), type: 'is-warning'})
})
this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'awards/eligibility')
}
}
</script>

19
src/components/Badges.vue Normal file
View file

@ -0,0 +1,19 @@
<template>
<tags>
<b-tag v-if="admin" class="is-danger" rounded>Admin</b-tag>&nbsp;
<b-tag v-if="bot" class="is-info" rounded>Bot</b-tag>&nbsp;
<b-tag v-if="booster" class="is-primary" rounded>Discord Booster</b-tag>&nbsp;
<b-tag v-if="system" class="is-success" rounded>System</b-tag>&nbsp;
</tags>
</template>
<script>
export default {
name: 'UserInventory',
props: ['admin', 'booster', 'bot', 'hidden', 'banned', 'system'],
data() {
return {
inventory: []
}
},
}
</script>

19
src/components/Navbar.vue
View file

@ -263,8 +263,8 @@
</template>
<template #end>
<b-navbar-item v-if="$store.state.user.username">
{{$store.state.user.koins}} {{$t('currency')}}
<b-navbar-item v-if="$store.state.user.username && !loading">
<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">
@ -294,14 +294,12 @@
</div>
</b-navbar-item>
</div>
<div v-if="loading">
<b-navbar-item>
<div class="fa-1x">
<i class="fas fa-circle-notch fa-spin"></i>&nbsp;
&nbsp;Loading
</div>
</b-navbar-item>
</div>
<b-navbar-item v-if="loading">
<div class="fa-1x">
<i class="fas fa-circle-notch fa-spin"></i>&nbsp;
&nbsp;{{ $t('generic.loading') }}
</div>
</b-navbar-item>
</template>
</b-navbar>
<section v-if='$store.state.client.bannerText && $store.state.client.bannerEnabled && showBanner' class="hero is-info">
@ -585,7 +583,6 @@ export default {
}
this.loading = false
}).catch(() => {
localStorage.setItem('userCache', JSON.stringify(this.$store.state.user));
this.$buefy.snackbar.open({message:this.$t('errors.authFail'), type: 'is-warning'})
this.loading = false
console.log(this.getBannerId())

30
src/locales/en.json
View file

@ -163,6 +163,23 @@
"logout": "You have been logged out of Kaverti.",
"register": "You have been registered to Kaverti, Welcome!"
},
"generic": {
"name": "Kaverti",
"loading": "Loading"
},
"relationships": {
"pending": "Cancel Friend Request",
"notFriends": "Send Friend Request",
"pendingCanAccept": "Accept Friend Request"
},
"badges": {
"admin": "Admin",
"bot": "Bot",
"add": "+",
"system": "System",
"banned": "Banned",
"hidden": "Hidden"
},
"user": {
"title": "Loading",
"about": "About",
@ -174,7 +191,18 @@
"items": "Items",
"wall": "User Wall",
"description": "Description",
"created": "Registered at"
"created": "Registered at",
"defaultDesc": "Hi, I'm ",
"marketplace": "Published items",
"relationships": "Friends",
"wearing": "Wearing",
"inventoryTab": {
"buyNow": "Buy now for ",
"was": "was",
"unavailable": "Item is unavailable",
"noItems": "This user doesn't have any items in their inventory yet!",
"onSale": "Item is on sale"
}
},
"stats": {
"title": "Stats",

2
src/router/index.js
View file

@ -23,7 +23,7 @@ const routes = [
name: 'Debug',
component: route('Debug')
},
{ path: '/u/:username', redirect: '/u/:username/posts', component: route('User'), children: [
{ path: '/u/:username', redirect: '/u/:username/awards', component: route('User'), children: [
{ path: 'posts', component: route('UserPosts') },
{ path: 'threads', component: route('UserThreads') },
{ path: 'items', component: route('UserMarketplace') },

44
src/views/User.vue
View file

@ -8,16 +8,26 @@
<main>
<div class="columns is-centered">
<div class="column is-4 is-vcentered has-text-centered">
<h1 class="title">{{user.username}}</h1>
<h1 class="title">{{user.username}}&nbsp;<Badges :admin="user.admin" :booster="user.booster" :bot="user.bot"></Badges>&nbsp;<b-tag v-if="$store.state.user.admin" class="is-info" rounded><i class="fas fa-plus"></i></b-tag></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="70%">
</div>
<div class="buttons is-centered">
<b-button @click="doRelationship" class="is-success" v-if="relationships.type === 'notFriends'"><i class="fas fa-plus"></i> &nbsp;{{$t('relationships.notFriends')}}</b-button>
<b-button @click="removeFriend" class="is-warning" v-if="relationships.type === 'pending'"><i class="fas fa-minus"></i> &nbsp;{{$t('relationships.pending')}}</b-button>
<b-button @click="doRelationshipAccept" class="is-info" v-if="relationships.type === 'pendingCanAccept'"><i class="fas fa-plus"></i> &nbsp;{{$t('relationships.pendingCanAccept')}}</b-button>
<b-button @click="removeFriend" class="is-danger" v-if="relationships.type === 'ignore'"><i class="fas fa-minus"></i> &nbsp;{{$t('relationships.ignore')}}</b-button>
<b-button @click="removeFriend" class="is-danger" v-if="relationships.type === 'accepted'"><i class="fas fa-minus"></i> &nbsp;{{$t('relationships.accepted')}}</b-button>
<b-button class="is-info" v-if="relationships.type === ''" disabled><i class="fas fa-spin"></i> &nbsp;<i class="fas fa-circle-notch fa-spin"></i>&nbsp;{{ $t('generic.loading') }}</b-button>
</div>
<h1 class="subtitle">
{{ $t('user.about') }} {{user.username}}
</h1>
<div class="box limit">
{{ $t('user.description') }}: {{user.description}}<br>
{{ $t('user.created') }}: {{user.createdAt}}
<div v-if="user.description">{{ $t('user.description') }}: {{user.description}}</div><br>
<div v-if="!user.description">{{$t('user.description')}}: {{$t('user.defaultDesc')}} {{user.username}}</div>
{{ $t('user.created') }}: {{user.createdAt}}<br>
{{ $t('user.marketplace') }}:
</div>
</div>
<div class="column is-6 is-vcentered has-text-centered">
@ -26,12 +36,12 @@
<div class="tabs">
<ul>
<router-link tag="li" :to="'/u/' + user.username + '/posts'" exact><a>{{ $t('user.posts') }}</a></router-link>
<router-link tag="li" :to="'/u/' + user.username + '/threads'" exact><a>{{ $t('user.threads') }}</a></router-link>
<router-link tag="li" :to="'/u/' + user.username + '/wall'" exact><a>{{ $t('user.wall') }}</a></router-link>
<router-link tag="li" :to="'/u/' + user.username + '/items'" exact><a>{{ $t('user.items') }}</a></router-link>
<router-link tag="li" :to="'/u/' + user.username + '/inventory'" exact><a>{{ $t('user.inventory') }}</a></router-link>
<router-link tag="li" :to="'/u/' + user.username + '/awards'" exact><a>{{ $t('user.awards') }}</a></router-link>
<router-link tag="li" :to="'/u/' + user.username + '/wearing'" exact><a>{{ $t('user.wearing') }}</a></router-link>
<router-link tag="li" :to="'/u/' + user.username + '/friends'" exact><a>{{ $t('user.relationships') }}</a></router-link>
</ul>
</div>
</div>
@ -47,20 +57,14 @@
<script>
import AjaxErrorHandler from '../../assets/js/errorHandler'
import Badges from '../components/Badges'
export default {
name: 'user',
components: {
Badges
},
data () {
return {
menuItems: [
/* { name: 'Wall', route: 'wall' }, */
{ name: 'Posts', route: 'posts' },
{ name: 'Threads', route: 'threads' },
/* { name: 'Friends', route: 'friends' } */
],
selected: 0,
username: this.$route.params.username,
user: {
username: "Loading",
description: "Loading",
@ -115,6 +119,9 @@ export default {
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.relationships.type = res.data.type)
},
scrubDesc () {
this.axios
@ -149,9 +156,10 @@ export default {
.catch(AjaxErrorHandler(this.$store))
},
refreshFriend() {
this.relationships.type === ''
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)
.then(res => this.relationships.type = res.data.type)
},
removeFriend () {
this.axios
@ -228,9 +236,7 @@ export default {
this.refreshFriend()
this.description.loading = false
AjaxErrorHandler(this.$store)(e, error => {
this.description.error = error.message
})
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)

45
src/views/UserAwards.vue
View file

@ -1,5 +1,48 @@
<template>
<main>
<div class="columns">
<div class="column is-4" v-for='(award) in awards' :key='"award-" + award.id'>
<div class="box">
<b-tag v-if="award.Award.rarity === 'Common'">{{award.Award.rarity}}</b-tag>
<b-tag v-if="award.Award.rarity === 'Uncommon'">{{award.Award.rarity}}</b-tag>
<b-tag v-if="award.Award.rarity === 'Rare'" class="is-warning">{{award.Award.rarity}}</b-tag>
<b-tag v-if="award.Award.rarity === 'Extremely Rare'" class="is-danger">{{award.Award.rarity}}</b-tag>
<b-tag v-if="award.Award.rarity === 'Impossible'" class="is-danger">{{award.Award.rarity}}</b-tag><br>
<b-tooltip :label="award.Award.description"><h1 class="subtitle">{{award.Award.name}} &nbsp;<i class="fas fa-info-circle"></i></h1></b-tooltip><br>
<img :src="'https://cdn.kaverti.com/awards/icon/' + award.Award.icon + '.png'">
</div>
</div>
</div>
</main>
</template>
<script>
import AjaxErrorHandler from "../../assets/js/errorHandler";
export default {
name: 'UserAwards',
props: ['username'],
data() {
return {
awards: []
}
},
mounted() {
this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `user/${this.$route.params.username}?awards=true`)
.then(res => {
this.awards = 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)
}
})
}
}
</script>

37
src/views/UserFriends.vue
View file

@ -1,5 +1,40 @@
<template>
<main>
<div class="column" v-if="!friends.length">
<i class="far fa-times-square large-icon"></i>
<h1 class="subtitle">This user doesn't have any friends yet, how about you send them a friend request?</h1>
<b-button>Send {{$route.params.username}} a friend request</b-button>
</div>
</main>
</template>
<script>
import AjaxErrorHandler from "../../assets/js/errorHandler";
export default {
name: 'UserFriends',
props: ['username'],
data() {
return {
friends: []
}
},
mounted() {
this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + 'relationships/user/' + this.$route.params.username)
.then(res => {
this.inventory = res.data.Inventories
})
.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)
}
})
}
}
</script>

47
src/views/UserInventory.vue
View file

@ -1,5 +1,50 @@
<template>
<main>
<div class="columns is-multiline">
<div class="column" v-if="!inventory.length">
<i class="far fa-times-square large-icon"></i>
<h1 class="subtitle">{{$t('user.inventoryTab.noItems')}}</h1>
</div>
<div class="column is-4" v-for='(item) in inventory' :key='"item-" + item.id'>
<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 disabled v-if="item.Item.offSale">{{$t('user.inventoryTab.unavailable')}}</b-button>
</div>
</div>
</div>
</main>
</template>
<script>
import AjaxErrorHandler from "../../assets/js/errorHandler";
export default {
name: 'UserInventory',
props: ['username'],
data() {
return {
inventory: []
}
},
mounted() {
this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `user/${this.$route.params.username}?sort=username&order=desc&offset=234243&inventory=true`)
.then(res => {
this.inventory = res.data.Inventories
})
.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)
}
})
}
}
</script>

2
src/views/UserPosts.vue
View file

@ -76,7 +76,7 @@ export default {
})
}
},
created () {
mounted () {
this.$store.dispatch('setTitle', this.$route.params.username + ' - Posts')
this.axios