333 lines
11 KiB
Vue
333 lines
11 KiB
Vue
|
<style>
|
||
|
|
.limit{
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
word-break: break-all;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<template>
|
||
|
|
<main>
|
||
|
|
<div class="columns is-centered">
|
||
|
|
<div class="column is-4 is-vcentered has-text-centered">
|
||
|
|
<h1 class="title">{{user.username}}</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>
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
<div class="column is-6 is-vcentered has-text-centered">
|
||
|
|
<h1 class="title">{{ $t('user.more') }} {{user.username}}</h1>
|
||
|
|
<div>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-content">
|
||
|
|
<router-view></router-view>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import AjaxErrorHandler from '../../assets/js/errorHandler'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'user',
|
||
|
|
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",
|
||
|
|
createdAt: "2020-01-01T00:00:00.000Z"
|
||
|
|
},
|
||
|
|
relationship: false,
|
||
|
|
relationships: {
|
||
|
|
type: ''
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
$route (to) {
|
||
|
|
this.selected = this.getIndexFromRoute(to.path)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
userColor () {
|
||
|
|
if(this.user) {
|
||
|
|
return this.user.color
|
||
|
|
} else {
|
||
|
|
return null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
userPicture () {
|
||
|
|
if(this.user && this.user.picture) {
|
||
|
|
return 'https://cdn.kaverti.com/user/avatars/full/' + this.user.picture + '.png'
|
||
|
|
} else {
|
||
|
|
return null
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
resetFetchData () {
|
||
|
|
this.offset = 0;
|
||
|
|
this.users = [];
|
||
|
|
|
||
|
|
this.fetchData();
|
||
|
|
},
|
||
|
|
fetchData () {
|
||
|
|
this.axios
|
||
|
|
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `user/${this.$route.params.username}`)
|
||
|
|
.then(res => this.user = 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)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
scrubDesc () {
|
||
|
|
this.axios
|
||
|
|
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'admin/user/scrub', {
|
||
|
|
description: "descscram",
|
||
|
|
user: this.username
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
this.resetFetchData()
|
||
|
|
})
|
||
|
|
.catch(AjaxErrorHandler(this.$store))
|
||
|
|
},
|
||
|
|
refreshAvatar () {
|
||
|
|
this.axios
|
||
|
|
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'admin/user/avatar', {
|
||
|
|
user: this.username
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
this.resetFetchData()
|
||
|
|
})
|
||
|
|
.catch(AjaxErrorHandler(this.$store))
|
||
|
|
},
|
||
|
|
scrubUsername () {
|
||
|
|
this.axios
|
||
|
|
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'admin/user/scrub', {
|
||
|
|
username: "usernamescram",
|
||
|
|
user: this.username
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
this.description.loading = false
|
||
|
|
})
|
||
|
|
.catch(AjaxErrorHandler(this.$store))
|
||
|
|
},
|
||
|
|
refreshFriend() {
|
||
|
|
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)
|
||
|
|
},
|
||
|
|
removeFriend () {
|
||
|
|
this.axios
|
||
|
|
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/remove', {
|
||
|
|
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, 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)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
.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
|
||
|
|
|
||
|
|
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)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
doRelationshipAccept () {
|
||
|
|
this.axios
|
||
|
|
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/accept', {
|
||
|
|
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
|
||
|
|
|
||
|
|
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)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getIndexFromRoute (path) {
|
||
|
|
let selectedIndex
|
||
|
|
let route = path.split('/')[3]
|
||
|
|
|
||
|
|
this.menuItems.forEach((item, index) => {
|
||
|
|
if(item.route === route) {
|
||
|
|
selectedIndex = index
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
return selectedIndex
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created () {
|
||
|
|
this.resetFetchData()
|
||
|
|
this.selected = this.getIndexFromRoute(this.$route.path)
|
||
|
|
|
||
|
|
this.axios
|
||
|
|
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `user/${this.$route.params.username}`)
|
||
|
|
.then(res => this.user = res.data)
|
||
|
|
|
||
|
|
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)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|