54 lines
1.9 KiB
Vue
54 lines
1.9 KiB
Vue
<template>
|
|
<main>
|
|
<div class="columns">
|
|
<div class="column" v-if="!awards.length">
|
|
<NoItems type="awards"></NoItems>
|
|
</div>
|
|
<div class="column is-4" v-for='(award) in awards' :key='"award-" + award.id'>
|
|
<div class="box" v-if="awards.length">
|
|
<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}} <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";
|
|
import NoItems from "../components/NoItems"
|
|
export default {
|
|
name: 'UserAwards',
|
|
props: ['username'],
|
|
components: {
|
|
NoItems
|
|
},
|
|
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> |