548 lines
16 KiB
Vue
548 lines
16 KiB
Vue
<template>
|
|
<div id="user">
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="columns is-centered" v-if="exists">
|
|
<div class="column is-4 is-vcentered has-text-centered">
|
|
<h1 class="title">
|
|
{{ user.username }} <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/' +
|
|
user.picture +
|
|
'.png'
|
|
"
|
|
:alt="user.username + '\'s avatar'"
|
|
width="50%"
|
|
class="is-centered"
|
|
/>
|
|
</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> {{
|
|
$t("relationships.notFriends")
|
|
}}</b-button
|
|
>
|
|
<b-button
|
|
@click="removeFriend"
|
|
class="is-warning"
|
|
v-if="relationships.type === 'pending'"
|
|
><i class="fas fa-minus"></i> {{
|
|
$t("relationships.pending")
|
|
}}</b-button
|
|
>
|
|
<b-button
|
|
@click="doRelationshipAccept"
|
|
class="is-info"
|
|
v-if="relationships.type === 'pendingCanAccept'"
|
|
><i class="fas fa-plus"></i> {{
|
|
$t("relationships.pendingCanAccept")
|
|
}}</b-button
|
|
>
|
|
<b-button
|
|
@click="removeFriend"
|
|
class="is-danger"
|
|
v-if="relationships.type === 'ignore'"
|
|
><i class="fas fa-minus"></i> {{
|
|
$t("relationships.ignore")
|
|
}}</b-button
|
|
>
|
|
<b-button
|
|
@click="removeFriend"
|
|
class="is-danger"
|
|
v-if="relationships.type === 'accepted'"
|
|
><i class="fas fa-minus"></i> {{
|
|
$t("relationships.accepted")
|
|
}}</b-button
|
|
>
|
|
<b-button
|
|
class="is-info"
|
|
v-if="relationships.type === ''"
|
|
disabled
|
|
><i class="fas fa-spin"></i> <i
|
|
class="fas fa-circle-notch fa-spin"
|
|
></i
|
|
> {{ $t("generic.loading") }}</b-button
|
|
>
|
|
</div>
|
|
<h1 class="subtitle">{{ $t("user.about") }} {{ user.username }}</h1>
|
|
<div class="box limit">
|
|
<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 | formatDate()
|
|
}}<br />
|
|
{{ $t("user.marketplace") }}:
|
|
</div>
|
|
</div>
|
|
<div class="column is-8 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 + '/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>
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<router-view></router-view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column" v-if="!exists">
|
|
<NoItems notFound="true"></NoItems>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import AjaxErrorHandler from ".././assets/js/errorHandler";
|
|
import Badges from "../components/Badges";
|
|
import NoItems from "../components/NoItems";
|
|
|
|
export default {
|
|
name: "User",
|
|
components: {
|
|
Badges,
|
|
NoItems,
|
|
},
|
|
data() {
|
|
return {
|
|
modifyUserModal: true,
|
|
user: {
|
|
username: "Loading",
|
|
description: "Loading",
|
|
createdAt: "2020-01-01T00:00:00.000Z",
|
|
},
|
|
exists: true,
|
|
relationship: false,
|
|
relationships: {
|
|
type: "",
|
|
},
|
|
};
|
|
},
|
|
watch: {
|
|
"$route.params.username"() {
|
|
this.user = [
|
|
{
|
|
username: "Loading",
|
|
description: "Loading",
|
|
createdAt: "2020-01-01T00:00:00.000Z",
|
|
},
|
|
];
|
|
this.relationship = false;
|
|
this.relationships.type = "";
|
|
this.fetchData();
|
|
},
|
|
},
|
|
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_API_ENDPOINT +
|
|
process.env.VUE_APP_API_VERSION +
|
|
`/` +
|
|
`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.exists = false;
|
|
} else {
|
|
AjaxErrorHandler(this.$store)(e);
|
|
}
|
|
});
|
|
this.axios
|
|
.get(
|
|
process.env.VUE_APP_API_ENDPOINT +
|
|
process.env.VUE_APP_API_VERSION +
|
|
`/` +
|
|
"relationships/get/" +
|
|
this.$route.params.username
|
|
)
|
|
.then((res) => (this.relationships.type = res.data.type));
|
|
},
|
|
scrubDesc() {
|
|
this.axios
|
|
.put(
|
|
process.env.VUE_APP_API_ENDPOINT +
|
|
process.env.VUE_APP_API_VERSION +
|
|
"/" +
|
|
"admin/user/scrub",
|
|
{
|
|
description: "descscram",
|
|
user: this.username,
|
|
}
|
|
)
|
|
.then(() => {
|
|
this.resetFetchData();
|
|
})
|
|
.catch(AjaxErrorHandler(this.$store));
|
|
},
|
|
refreshAvatar() {
|
|
this.axios
|
|
.put(
|
|
process.env.VUE_APP_API_ENDPOINT +
|
|
process.env.VUE_APP_API_VERSION +
|
|
"/" +
|
|
"admin/user/avatar",
|
|
{
|
|
user: this.username,
|
|
}
|
|
)
|
|
.then(() => {
|
|
this.resetFetchData();
|
|
})
|
|
.catch(AjaxErrorHandler(this.$store));
|
|
},
|
|
scrubUsername() {
|
|
this.axios
|
|
.put(
|
|
process.env.VUE_APP_API_ENDPOINT +
|
|
process.env.VUE_APP_API_VERSION +
|
|
"/" +
|
|
"admin/user/scrub",
|
|
{
|
|
username: "usernamescram",
|
|
user: this.username,
|
|
}
|
|
)
|
|
.then(() => {
|
|
this.description.loading = false;
|
|
})
|
|
.catch(AjaxErrorHandler(this.$store));
|
|
},
|
|
refreshFriend() {
|
|
this.relationships.type === "";
|
|
this.axios
|
|
.get(
|
|
process.env.VUE_APP_API_ENDPOINT +
|
|
process.env.VUE_APP_API_VERSION +
|
|
`/` +
|
|
`relationships/get/${this.$route.params.username}`
|
|
)
|
|
.then((res) => (this.relationships.type = res.data.type));
|
|
},
|
|
removeFriend() {
|
|
this.axios
|
|
.put(
|
|
process.env.VUE_APP_API_ENDPOINT +
|
|
process.env.VUE_APP_API_VERSION +
|
|
"/" +
|
|
"relationships/remove",
|
|
{
|
|
friend: this.$route.params.username,
|
|
}
|
|
)
|
|
.then(() => {
|
|
this.refreshFriend();
|
|
this.description.loading = false;
|
|
this.axios
|
|
.get(
|
|
process.env.VUE_APP_API_ENDPOINT +
|
|
process.env.VUE_APP_API_VERSION +
|
|
`/` +
|
|
`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_API_ENDPOINT +
|
|
process.env.VUE_APP_API_VERSION +
|
|
`/` +
|
|
`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_API_ENDPOINT +
|
|
process.env.VUE_APP_API_VERSION +
|
|
"/" +
|
|
"relationships/send",
|
|
{
|
|
friend: this.$route.params.username,
|
|
}
|
|
)
|
|
.then(() => {
|
|
this.refreshFriend();
|
|
this.description.loading = false;
|
|
this.axios
|
|
.get(
|
|
process.env.VUE_APP_API_ENDPOINT +
|
|
process.env.VUE_APP_API_VERSION +
|
|
`/` +
|
|
`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);
|
|
this.axios
|
|
.get(
|
|
process.env.VUE_APP_API_ENDPOINT +
|
|
process.env.VUE_APP_API_VERSION +
|
|
`/` +
|
|
`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_API_ENDPOINT +
|
|
process.env.VUE_APP_API_VERSION +
|
|
"/" +
|
|
"relationships/accept",
|
|
{
|
|
friend: this.$route.params.username,
|
|
}
|
|
)
|
|
.then(() => {
|
|
this.refreshFriend();
|
|
this.description.loading = false;
|
|
this.axios
|
|
.get(
|
|
process.env.VUE_APP_API_ENDPOINT +
|
|
process.env.VUE_APP_API_VERSION +
|
|
`/` +
|
|
`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_API_ENDPOINT +
|
|
process.env.VUE_APP_API_VERSION +
|
|
`/` +
|
|
`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;
|
|
},
|
|
},
|
|
mounted() {
|
|
this.resetFetchData();
|
|
this.selected = this.getIndexFromRoute(this.$route.path);
|
|
|
|
this.axios
|
|
.get(
|
|
process.env.VUE_APP_API_ENDPOINT +
|
|
process.env.VUE_APP_API_VERSION +
|
|
`/` +
|
|
`user/${this.$route.params.username}`
|
|
)
|
|
.then((res) => (this.user = res.data));
|
|
|
|
this.axios
|
|
.get(
|
|
process.env.VUE_APP_API_ENDPOINT +
|
|
process.env.VUE_APP_API_VERSION +
|
|
`/` +
|
|
`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> |