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

general fixes

Browse source
This commit is contained in:
Bytetrex 2021-04-07 17:32:16 +08:00
parent 85c098ee78
commit 308ae85b0e
11 changed files with 1242 additions and 14952 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

117
src/App.vue
View file

@ -1,68 +1,83 @@
<style lang="scss">
@import './assets/scss/buefy';
@import './assets/scss/editor';
</style>
<style>
@import 'https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css';
@import '../assets/css/kaverti.css';
</style>
<template> <template>
<div id="app"> <div id="app">
<div id="navigation"> <Navbar />
<Navbar/> <main>
</div> <router-view />
<div id="router content-wrapper"> </main>
<router-view/> <Footer />
</div>
<div id="footer">
<Footer/>
</div>
</div> </div>
</template> </template>
<script> <script>
import Navbar from './components/Navbar' import Navbar from "./components/Navbar";
import Footer from './components/Footer' import Footer from "./components/Footer";
import axios from "axios"; import axios from "axios";
export default { export default {
name: 'KavertiApp', name: "KavertiApp",
components: { components: {
Navbar, Navbar,
Footer Footer,
}, },
mounted() { mounted() {
if(JSON.parse( if (JSON.parse(localStorage.getItem("token"))) {
localStorage.getItem('token'))) { this.$store.commit("setToken", JSON.parse(localStorage.getItem("token")));
this.$store.commit('setToken', JSON.parse(
localStorage.getItem('token')))
} }
if(JSON.parse( if (JSON.parse(localStorage.getItem("wind404"))) {
localStorage.getItem('wind404'))) { var wind = JSON.parse(localStorage.getItem("wind404"));
var wind = JSON.parse(
localStorage.getItem('wind404'))
} else { } else {
// eslint-disable-next-line no-redeclare // eslint-disable-next-line no-redeclare
var wind = false var wind = false;
} }
this.$store.commit('setWind', wind) this.$store.commit("setWind", wind);
Object.assign(axios.defaults, {headers: {Authorization: this.$store.state.user.token}}) Object.assign(axios.defaults, {
if(this.$store.state.debug) { headers: { Authorization: this.$store.state.user.token },
this.$buefy.snackbar.open({message:this.$t('errors.devBuild'), type: 'is-warning'}) });
if (this.$store.state.debug) {
this.$buefy.snackbar.open({
message: this.$t("errors.devBuild"),
type: "is-warning",
});
} }
this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'userinfo') this.axios
.then(res => { .get(
this.$store.commit('setUsername', res.data.username) process.env.VUE_APP_APIENDPOINT +
this.$store.commit('setEmail', res.data.email) process.env.VUE_APP_APIVERSION +
this.$store.commit('setEmailVerified', res.data.emailVerified) "/" +
this.$store.commit('setAdmin', res.data.admin) "userinfo"
this.$store.commit('setKoins', res.data.koins) )
this.$store.commit('setID', res.data.id) .then((res) => {
this.$store.commit('setBot', res.data.bot) this.$store.commit("setUsername", res.data.username);
this.$store.commit('setDescription', res.data.description) this.$store.commit("setEmail", res.data.email);
this.$store.commit('setExecutive', res.data.executive) this.$store.commit("setEmailVerified", res.data.emailVerified);
}).catch(() => { this.$store.commit("setAdmin", res.data.admin);
this.$buefy.snackbar.open({message:this.$t('errors.down'), type: 'is-warning'}) this.$store.commit("setKoins", res.data.koins);
}) this.$store.commit("setID", res.data.id);
this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'awards/eligibility') this.$store.commit("setBot", res.data.bot);
} this.$store.commit("setDescription", res.data.description);
} this.$store.commit("setExecutive", res.data.executive);
})
.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> </script>
<style lang="scss">
@import "./assets/scss/buefy";
@import "./assets/scss/editor";
</style>
<style lang="css">
@import "https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css";
</style>

350
src/router/index.js
View file

@ -1,181 +1,193 @@
import Vue from 'vue' import Vue from 'vue';
import VueRouter from 'vue-router' import VueRouter from 'vue-router';
import NProgress from 'nprogress' import NProgress from 'nprogress';
import 'nprogress/nprogress.css'; import 'nprogress/nprogress.css';
Vue.use(VueRouter) Vue.use(VueRouter);
NProgress.configure({ showSpinner: false }); NProgress.configure({ showSpinner: false });
function route(view){ function route(view) {
return() => import(`@/views/${view}.vue`) return () =>
import (`@/views/${view}.vue`)
} }
const routes = [ const routes = [{
{ path: '/',
path: '/', name: 'Home',
name: 'Home', component: route('Home')
component: route('Home') },
}, {
{ path: '/about',
path: '/about', name: 'About',
name: 'About', component: route('About')
component: route('About') },
}, {
{ path: '/debug',
path: '/debug', name: 'Debug',
name: 'Debug', component: route('Debug')
component: route('Debug') },
}, {
{ path: '/u/:username', redirect: '/u/:username/awards', component: route('User'), children: [ path: '/u/:username',
{ path: 'posts', component: route('UserPosts') }, redirect: '/u/:username/awards',
{ path: 'threads', component: route('UserThreads') }, component: route('User'),
{ path: 'items', component: route('UserMarketplace') }, children: [
{ path: 'wall', component: route('UserWall') }, { path: 'posts', component: route('UserPosts') },
{ path: 'inventory', component: route('UserInventory') }, { path: 'threads', component: route('UserThreads') },
{ path: 'friends', component: route('UserFriends') }, { path: 'items', component: route('UserMarketplace') },
{ path: 'awards', component: route('UserAwards') } { path: 'wall', component: route('UserWall') },
] }, { path: 'inventory', component: route('UserInventory') },
{ { path: 'friends', component: route('UserFriends') },
path: '/users', { path: 'awards', component: route('UserAwards') }
name: 'Users', ]
component: route('Users') },
}, {
{ path: '/users',
path: '/teams', name: 'Users',
name: 'Teams', component: route('Users')
component: route('Teams') },
}, {
{ path: '/teams',
path: '/character', name: 'Teams',
redirect: '/avatar', component: route('Teams')
name: 'Character', },
component: route('Avatar') {
}, path: '/character',
{ redirect: '/avatar',
path: '/avatar', name: 'Character',
redirect: '/avatar/hats', component: route('Avatar')
name: 'Avatar', },
component: route('Avatar') {
}, path: '/avatar',
{ redirect: '/avatar/hats',
path: '/avatar/:category', name: 'Avatar',
name: 'Avatar', component: route('Avatar')
component: route('Avatar') },
}, {
{ path: '/t/:username', component: route('Team'), children: [ path: '/avatar/:category',
{ path: 'posts', component: route('UserPosts') }, name: 'Avatar',
{ path: 'threads', component: route('UserThreads') }, component: route('Avatar')
{ path: 'items', component: route('UserMarketplace') }, },
{ path: 'wall', component: route('UserWall') }, {
{ path: 'inventory', component: route('UserInventory') }, path: '/t/:username',
{ path: 'friends', component: route('UserFriends') }, component: route('Team'),
{ path: 'awards', component: route('UserAwards') } children: [
] }, { path: 'posts', component: route('UserPosts') },
{ { path: 'threads', component: route('UserThreads') },
path: '/chat', { path: 'items', component: route('UserMarketplace') },
component: route('Chat'), { path: 'wall', component: route('UserWall') },
redirect: ('/chat/home'), { path: 'inventory', component: route('UserInventory') },
children: [ { path: 'friends', component: route('UserFriends') },
{ path: '/', component: route('ChatHome') }, { path: 'awards', component: route('UserAwards') }
{ path: '/home', component: route('ChatHome') }, ]
{ path: 'conversation', component: route('ChatMessage') }, },
{ path: 'conversation/:id', component: route('ChatMessage'), name: 'conversation' } {
] path: '/chat',
}, component: route('Chat'),
{ redirect: ('/chat/home'),
path: '/awards', children: [
name: 'Awards', { path: '/', component: route('ChatHome') },
component: route('Awards') { path: '/home', component: route('ChatHome') },
}, { path: 'conversation', component: route('ChatMessage') },
{ { path: 'conversation/:id', component: route('ChatMessage'), name: 'conversation' }
path: '/transactions', ]
name: 'Transactions', },
component: route('Transaction') {
}, path: '/awards',
{ name: 'Awards',
path: '/forums', component: route('Awards')
redirect: '/forums/ALL', },
name: 'Forums', {
component: route('Forums') path: '/transactions',
}, name: 'Transactions',
{ component: route('Transaction')
path: '/forums/create', },
name: 'ForumThreadCreate', {
component: route('ForumThreadCreate') path: '/forums',
}, redirect: '/forums/ALL',
{ name: 'Forums',
path: '/forums/:category', component: route('Forums')
name: 'Forums', },
component: route('Forums') {
}, path: '/forums/create',
{ name: 'ForumThreadCreate',
path: '/forums/thread/:id', component: route('ForumThreadCreate')
name: 'ForumThread', },
component: route('ForumThread') {
}, path: '/forums/:category',
{ name: 'Forums',
path: '/roadmap', component: route('Forums')
name: 'Roadmap', },
component: route('Roadmap') {
}, path: '/forums/thread/:id',
{ name: 'ForumThread',
path: '/marketplace/', component: route('ForumThread')
redirect: '/marketplace/HATS', },
name: 'Marketplace', {
component: route('Marketplace') path: '/roadmap',
}, name: 'Roadmap',
{ component: route('Roadmap')
path: '/marketplace/:category', },
name: 'Marketplace', {
component: route('Marketplace') path: '/marketplace/',
}, redirect: '/marketplace/HATS',
{ name: 'Marketplace',
path: '/m/:id', component: route('Marketplace')
name: 'MarketplaceItem', },
component: route('MarketplaceItem') {
}, path: '/marketplace/:category',
{ name: 'Marketplace',
path: '/friends', component: route('Marketplace')
redirect: '/friends/accepted', },
name: 'Friends', {
component: route('Friends') path: '/m/:id',
}, name: 'MarketplaceItem',
{ component: route('MarketplaceItem')
path: '/friends/:category', },
name: 'Friends', {
component: route('Friends') path: '/friends',
}, redirect: '/friends/accepted',
{ name: 'Friends',
path: '/stats', component: route('Friends')
name: 'Stats', },
component: route('Stats') {
}, path: '/friends/:category',
{ path: '/admin', component: route('Admin'), children: [ name: 'Friends',
{ path: 'dashboard', component: route('AdminDashboard') }, component: route('Friends')
{ path: 'item', component: route('AdminCreateItem') }, },
] }, {
{ path: '/stats',
path: '*', name: 'Stats',
name: '404', component: route('Stats')
component: route('404') },
} {
] path: '/admin',
component: route('Admin'),
children: [
{ path: 'dashboard', component: route('AdminDashboard') },
{ path: 'item', component: route('AdminCreateItem') },
]
},
{
path: '*',
name: '404',
component: route('404')
}
];
const router = new VueRouter({ const router = new VueRouter({
mode: 'history', mode: 'history',
base: process.env.BASE_URL, base: process.env.BASE_URL,
routes routes
}) });
router.beforeResolve((to, from, next) => { router.beforeResolve((to, next) => {
// If this isn't an initial page load. if (to.name) {
if (to.name) { NProgress.start();
// Start the route progress bar. }
NProgress.start() next();
}
next()
}) })
router.afterEach(() => { router.afterEach(() => {
NProgress.done() NProgress.done();
}) })
export default router
export default router;

352
src/store/index.js
View file

@ -1,182 +1,182 @@
import Vue from 'vue' import Vue from 'vue';
import Vuex from 'vuex' import Vuex from 'vuex';
import tb from 'to-boolean'; import tb from 'to-boolean';
Vue.use(Vuex)
Vue.use(Vuex);
export default new Vuex.Store({ export default new Vuex.Store({
state: { state: {
debug: tb(process.env.VUE_APP_STAGING), debug: tb(process.env.VUE_APP_STAGING),
wind: false, wind: false,
enableBrokenRoutes: false, enableBrokenRoutes: false,
client: { client: {
clientVersion: '1.0.0-prerelease4', clientVersion: '1.0.0-prerelease4',
latestClientVersion: '', latestClientVersion: '',
latestAPIVersion: '', latestAPIVersion: '',
bannerText: '', bannerText: '',
bannerEnabled: false, bannerEnabled: false,
bannerId: 0, bannerId: 0,
registrationsDisabled: false, registrationsDisabled: false,
name: "Kaverti", name: "Kaverti",
logo: '', logo: '',
icon: '', icon: '',
release: process.env.VUE_APP_RELEASE release: process.env.VUE_APP_RELEASE
},
errors: {
errors: null,
modal: false
},
banned: {
banned: false,
message: "Not banned",
readOnlyMode: false,
ipBanned: false,
disableLogin: false,
expiry: "2020-01-01T00:00:00.000Z"
},
user: {
id: 0,
username: '',
email: '',
admin: false,
avatar: 'default',
bot: '',
system: '',
token: '',
koins: 0,
emailVerified: false,
modeler: false,
developerMode: false,
executive: false,
description: '',
conversations: [],
currentConversation: 0
}
}, },
errors: { mutations: {
errors: null, setSettings(state, value) {
modal: false state.client.name = value.siteName
}, state.client.bannerEnabled = value.bannerEnabled
banned: { state.client.bannerText = value.bannerText
banned: false, state.client.registrationsDisabled = value.RegistrationsDisabled
message: "Not banned", state.client.logo = value.logo
readOnlyMode: false, state.client.icon = value.icon
ipBanned: false, },
disableLogin: false, setVersion(state, value) {
expiry: "2020-01-01T00:00:00.000Z" state.client.latestClientVersion = value
}, },
user: { setAPIVersion(state, value) {
id: 0, state.client.latestAPIVersion = value
username: '', },
email: '', turnOffDebug(state) {
admin: false, state.debug = false
avatar: 'default', },
bot: '', fakeUser(state) {
system: '', state.user.id = 1
token: '', state.user.username = "Debug"
koins: 0, state.user.email = "valid@troplo.com"
emailVerified: false, state.user.admin = false
modeler: false, state.user.avatar = 'default'
developerMode: false, state.user.bot = false
executive: false, state.user.system = false
description: '', state.user.token = "1234"
conversations: [], state.user.koins = 69
currentConversation: 0 state.user.emailVerified = true
} },
}, setAjaxErrorsModalState(state, value) {
mutations: { state.errors.modal = value;
setSettings(state, value) { },
state.client.name = value.siteName setAjaxErrors(state, value) {
state.client.bannerEnabled = value.bannerEnabled state.errors.errors = value
state.client.bannerText = value.bannerText },
state.client.registrationsDisabled = value.RegistrationsDisabled setUsername(state, value) {
state.client.logo = value.logo state.user.username = value
state.client.icon = value.icon },
}, setToken(state, value) {
setVersion(state, value) { state.user.token = value
state.client.latestClientVersion = value },
}, setBanned(state, value) {
setAPIVersion(state, value) { state.banned.message = value
state.client.latestAPIVersion = value state.banned.banned = value
}, state.banned.readOnlyMode = value
turnOffDebug(state) { state.banned.disableLogin = value
state.debug = false state.banned.ipBanned = value
}, state.banned.expiry = value
fakeUser(state) { },
state.user.id = 1 setAvatar(state, value) {
state.user.username = "Debug" state.user.avatar = value
state.user.email = "valid@troplo.com" },
state.user.admin = false setBot(state, value) {
state.user.avatar = 'default' state.user.bot = value
state.user.bot = false },
state.user.system = false setEmail(state, value) {
state.user.token = "1234" state.user.email = value
state.user.koins = 69 },
state.user.emailVerified = true setEmailVerified(state, value) {
}, state.user.emailVerified = value
setAjaxErrorsModalState(state, value) { },
state.errors.modal = value; setID(state, value) {
}, state.user.id = value
setAjaxErrors(state, value) { },
state.errors.errors = value setWind(state, value) {
}, state.wind = value
setUsername (state, value) { },
state.user.username = value setKoins(state, value) {
}, state.user.koins = value
setToken (state, value) { },
state.user.token = value setAdmin(state, value) {
}, state.user.admin = value
setBanned (state, value) { },
state.banned.message = value setExecutive(state, value) {
state.banned.banned = value state.user.executive = value
state.banned.readOnlyMode = value },
state.banned.disableLogin = value setDescription(state, value) {
state.banned.ipBanned = value state.user.description = value
state.banned.expiry = value },
}, brokenRoute(state, value) {
setAvatar (state, value) { state.enableBrokenRoutes = value
state.user.avatar = value },
}, clearConversations(state) {
setBot (state, value) { state.user.conversations = [];
state.user.bot = value },
}, addConversations(state, conversations) {
setEmail (state, value) { state.user.conversations.push(...conversations);
state.user.email = value },
}, updateConversationLastRead(state, id) {
setEmailVerified (state, value) { let index = state.user.conversations.findIndex(conversation => {
state.user.emailVerified = value return conversation.id === id;
}, });
setID (state, value) {
state.user.id = value
},
setWind (state, value) {
state.wind = value
},
setKoins (state, value) {
state.user.koins = value
},
setAdmin (state, value) {
state.user.admin = value
},
setExecutive (state, value) {
state.user.executive = value
},
setDescription (state, value) {
state.user.description = value
},
brokenRoute(state, value) {
state.enableBrokenRoutes = value
},
clearConversations (state) {
state.user.conversations = [];
},
addConversations (state, conversations) {
state.user.conversations.push(...conversations);
},
updateConversationLastRead (state, id) {
let index = state.user.conversations.findIndex(conversation => {
return conversation.id === id;
});
let conversation = state.user.conversations[index]; let conversation = state.user.conversations[index];
conversation.lastRead = new Date() + ''; conversation.lastRead = new Date() + '';
state.user.conversations.splice(index, 1, conversation); state.user.conversations.splice(index, 1, conversation);
},
updateUnshiftConversation(state, updatedConversation) {
let index = state.user.conversations.findIndex(conversation => {
return conversation.id === updatedConversation.id;
});
if (index > -1) {
state.user.conversations.splice(index, 1);
}
state.user.conversations.unshift(updatedConversation);
},
updateConversationName(state, { id, name }) {
let index = state.user.conversations.findIndex(conversation => {
return conversation.id === id;
});
let conversation = state.user.conversations[index];
conversation.name = name;
state.user.conversations.splice(index, 1, conversation);
},
setCurrentConversation(state, id) {
state.user.currentConversation = id
}
}, },
updateUnshiftConversation (state, updatedConversation) { actions: {},
let index = state.user.conversations.findIndex(conversation => { modules: {}
return conversation.id === updatedConversation.id; });
});
if(index > -1) {
state.user.conversations.splice(index, 1);
}
state.user.conversations.unshift(updatedConversation);
},
updateConversationName (state, { id, name }) {
let index = state.user.conversations.findIndex(conversation => {
return conversation.id === id;
});
let conversation = state.user.conversations[index];
conversation.name = name;
state.user.conversations.splice(index, 1, conversation);
},
setCurrentConversation (state, id) {
state.user.currentConversation = id
}
},
actions: {
},
modules: {
}
})

292
src/views/Forums.vue
View file

@ -1,95 +1,118 @@
<template> <template>
<main class="section"> <div id="forums">
<div class="columns is-multiline has-text-centered"> <section class="section">
<div class="column is-2" v-if="!loadingCategory && categories.length"> <div class="container">
<b-button @click="$router.push('/forums/create')" class="is-info">Create thread</b-button> <div class="columns is-centered">
<br><br> <div class="column is-3" v-if="!loadingCategory && categories.length">
<div class="box"> <router-link to="/forums/create">
<router-link <b-button type="is-info">Create Thread</b-button>
:to='"/forums/ALL"' </router-link>
<br />
<b-menu>
<b-menu-list label="Categories">
<router-link to="/forums/ALL">
<b-menu-item label="All"></b-menu-item>
</router-link>
<router-link
v-for="(category, $index) in categories"
:key="'category-link-' + $index"
:to="'/forums/' + category.value"
>
<b-menu-item :label="category.name"></b-menu-item>
</router-link>
</b-menu-list>
</b-menu>
</div>
<div class="column is-3" v-if="loadingCategory">
<b-skeleton></b-skeleton>
<b-skeleton></b-skeleton>
<b-skeleton></b-skeleton>
<b-skeleton></b-skeleton>
</div>
<div
class="column is-3"
v-if="!loadingCategory && !categories.length"
> >
<p class="subtitle is-link">All</p> <NoItems connection="true"></NoItems>
</router-link> </div>
<router-link <div class="column is-7" v-if="!threads.length && !loadingThreads">
v-for='(category, $index) in categories' <div class="box">
:key='"category-link-" + $index' <NoItems type="forum threads"></NoItems>
:to='"/forums/" + category.value' </div>
> </div>
<p class="subtitle is-link">{{category.name}}</p> <div class="column is-7" v-if="threads.length">
</router-link> <div class="content">
</div> <article
</div> class="thread_display box"
<div class="column is-2" v-if="loadingCategory"> v-for="thread in threads"
<div class="box"> :key="'thread-' + thread.id"
<p><b-skeleton></b-skeleton></p> @click="goToThread(thread)"
<p><b-skeleton></b-skeleton></p> >
<p><b-skeleton></b-skeleton></p> <div style="width: calc(100% - 3rem)">
<p><b-skeleton></b-skeleton></p> <div class="thread_display__header">
</div> <span class="thread_display__name">
</div> {{ thread.name }}
<div class="column is-2" v-if="!loadingCategory && !categories.length"> </span>
<div class="box"> <div class="thread_display__meta_bar">
<NoItems connection="true"></NoItems> <div>
</div> By
</div> <span class="thread_display__username" ref="username">
<div class="column box" v-if="!threads.length && !loadingThreads"> {{ thread.User.username }}
<NoItems type="forum threads"></NoItems> </span>
</div> in
<div class="column column is-9" v-if="threads.length"> <span class="thread_display__category" ref="category">
<div class="content"> {{ thread.Category.name }}
<article class='thread_display box' v-for='(thread) in threads' :key='"thread-" + thread.id' @click="goToThread(thread)"> </span>
<div style='width: calc(100% - 3rem);'> &middot;
<div class='thread_display__header'> <span class="thread_display__date">
<span class='thread_display__name'> {{ thread.createdAt | formatDate }}
{{thread.name}} </span>
</span> </div>
<div class='thread_display__meta_bar'> </div>
<div> </div>
By <div class="thread_display__replies_bar">
<span class='thread_display__username' ref='username'>{{thread.User.username}}</span> <div
in class="thread_display__latest_reply"
<span class='thread_display__category' ref='category'>{{thread.Category.name}}</span> v-if="thread.Posts.length === 2"
&middot; >
<span class='thread_display__date'>{{thread.createdAt | formatDate}}</span> <font-awesome-icon :icon="['fa', 'reply']" fixed-width />
<span class="thread_display__latest_reply__text"
>Latest reply by &nbsp;</span
>
<span class="thread_display__username">{{
replyUsername
}}</span>
&middot;
<span class="thread_display__date">{{
thread.Posts[1].createdAt | formatDate
}}</span>
</div>
<span title="Replies to thread" v-if="thread.Posts[0]">
Replies: {{ thread.postsCount - 1 }}
</span>
<span title="Replies to thread" v-else> Replies: 0 </span>
</div>
<div class="thread_display__content">
{{ thread.Posts[0].plainText }}
</div> </div>
</div> </div>
</div> </article>
<div class='thread_display__replies_bar'>
<div
class='thread_display__latest_reply'
v-if='thread.Posts.length === 2'
>
<font-awesome-icon :icon='["fa", "reply"]' fixed-width />
<span class='thread_display__latest_reply__text'>Latest reply by &nbsp;</span>
<span class='thread_display__username'>{{replyUsername}}</span>
&middot;
<span class='thread_display__date'>{{thread.Posts[1].createdAt | formatDate}}</span>
</div>
<span title='Replies to thread' v-if="thread.Posts[0]">
Replies: {{thread.postsCount - 1}}
</span>
<span title='Replies to thread' v-else>
Replies: 0
</span>
</div>
<div class='thread_display__content'>
{{thread.Posts[0].plainText}}
</div>
</div> </div>
</article> </div>
</div> </div>
</div> </div>
</div> </section>
</main> </div>
</template> </template>
<script> <script>
import AjaxErrorHandler from "../../assets/js/errorHandler"; import AjaxErrorHandler from "../../assets/js/errorHandler";
import NoItems from "../components/NoItems" import NoItems from "../components/NoItems";
export default { export default {
name: 'Forums', name: "Forums",
props: ['username'], props: ["username"],
components: { components: {
NoItems NoItems,
}, },
data() { data() {
return { return {
@ -97,73 +120,84 @@ export default {
loadingCategory: true, loadingCategory: true,
loadingThreads: true, loadingThreads: true,
threads: [], threads: [],
selectedCategory: 'ALL' selectedCategory: "ALL",
} };
}, },
methods: { methods: {
goToThread(thread) { goToThread(thread) {
this.$router.push('/forums/thread/' + thread.id) this.$router.push("/forums/thread/" + thread.id);
}, },
getThreads (initial) { getThreads(initial) {
if(this.nextURL === null && !initial) return if (this.nextURL === null && !initial) return;
this.loadingThreads = true this.loadingThreads = true;
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'forums/category/' + this.selectedCategory) .get(
.then(res => { process.env.VUE_APP_APIENDPOINT +
this.loadingThreads = false process.env.VUE_APP_APIVERSION +
"/" +
"forums/category/" +
this.selectedCategory
)
.then((res) => {
this.loadingThreads = false;
if(initial) { if (initial) {
this.threads = res.data.Threads this.threads = res.data.Threads;
} else { } else {
this.threads.push(...res.data.Threads) this.threads.push(...res.data.Threads);
} }
this.nextURL = res.data.meta.nextURL this.nextURL = res.data.meta.nextURL;
this.nextThreadsCount = res.data.meta.nextThreadsCount this.nextThreadsCount = res.data.meta.nextThreadsCount;
}) })
.catch((e) => { .catch((e) => {
this.loadingThreads = false this.loadingThreads = false;
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
}) });
}, },
}, },
watch: { watch: {
selectedCategory (newValue) { selectedCategory(newValue) {
this.$router.push('/forums/' + newValue.toLowerCase()); this.$router.push("/forums/" + newValue.toLowerCase());
},
$route() {
this.selectedCategory = this.$route.path.split("/")[2].toUpperCase();
this.getThreads(true);
}, },
$route () {
this.selectedCategory = this.$route.path.split('/')[2].toUpperCase()
this.getThreads(true)
}
}, },
mounted() { mounted() {
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + 'forums/category') .get(
.then(res => { process.env.VUE_APP_APIENDPOINT +
this.categories = res.data process.env.VUE_APP_APIVERSION +
this.loadingCategory = false `/` +
}) "forums/category"
.catch(e => { )
this.loadingCategory = false .then((res) => {
let invalidId = e.response.data.errors.find(error => { this.categories = res.data;
return error.name === 'accountDoesNotExist' this.loadingCategory = false;
}) })
.catch((e) => {
this.loadingCategory = false;
let invalidId = e.response.data.errors.find((error) => {
return error.name === "accountDoesNotExist";
});
if (invalidId) { if (invalidId) {
this.$store.commit('set404Page', true) this.$store.commit("set404Page", true);
} else { } else {
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
} }
}) });
this.getThreads(true) this.getThreads(true);
} },
} };
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
@import '../assets/scss/variables'; @import "../assets/scss/variables";
.thread_display { .thread_display {
cursor: pointer; cursor: pointer;
@ -182,8 +216,8 @@ export default {
} }
@at-root #{&}__username, @at-root #{&}__username,
#{&}__category, #{&}__category,
#{&}__date { #{&}__date {
color: $color--text__primary; color: $color--text__primary;
} }

4
src/views/Team.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<main> <div id="team">
</main> </div>
</template> </template>

743
src/views/User.vue
View file

@ -1,354 +1,547 @@
<style>
.limit{
margin-top: 0.5rem;
word-break: break-all;
}
</style>
<template> <template>
<main class="section"> <div id="user">
<div class="columns is-centered" v-if="exists"> <section class="section">
<div class="column is-4 is-vcentered has-text-centered"> <div class="container">
<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="columns is-centered" v-if="exists">
<div class="box"> <div class="column is-3 is-vcentered has-text-centered">
<img :src="'https://cdn.kaverti.com/user/avatars/full/' + user.picture + '.png'" :alt="user.username + '\'s avatar'" width="50%"> <h1 class="title">
</div> {{ user.username }}&nbsp;<Badges
<div class="buttons is-centered"> :username="user.username"
<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> :system="user.system"
<b-button @click="removeFriend" class="is-warning" v-if="relationships.type === 'pending'"><i class="fas fa-minus"></i> &nbsp;{{$t('relationships.pending')}}</b-button> :hidden="user.hidden"
<b-button @click="doRelationshipAccept" class="is-info" v-if="relationships.type === 'pendingCanAccept'"><i class="fas fa-plus"></i> &nbsp;{{$t('relationships.pendingCanAccept')}}</b-button> :admin="user.admin"
<b-button @click="removeFriend" class="is-danger" v-if="relationships.type === 'ignore'"><i class="fas fa-minus"></i> &nbsp;{{$t('relationships.ignore')}}</b-button> :booster="user.booster"
<b-button @click="removeFriend" class="is-danger" v-if="relationships.type === 'accepted'"><i class="fas fa-minus"></i> &nbsp;{{$t('relationships.accepted')}}</b-button> :bot="user.bot"
<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> ></Badges>
</div> </h1>
<h1 class="subtitle"> <div class="box">
{{ $t('user.about') }} {{user.username}} <img
</h1> :src="
<div class="box limit"> 'https://cdn.kaverti.com/user/avatars/full/' +
<div v-if="user.description">{{ $t('user.description') }}: {{user.description}}</div><br> user.picture +
<div v-if="!user.description">{{$t('user.description')}}: {{$t('user.defaultDesc')}} {{user.username}}</div> '.png'
{{ $t('user.created') }}: {{user.createdAt | formatDate()}}<br> "
{{ $t('user.marketplace') }}: :alt="user.username + '\'s avatar'"
</div> width="50%"
</div> />
<div class="column is-6 is-vcentered has-text-centered"> </div>
<h1 class="title">{{ $t('user.more') }} {{user.username}}</h1> <div class="buttons is-centered">
<div> <b-button
@click="doRelationship"
<div class="tabs"> class="is-success"
<ul> v-if="
<router-link tag="li" :to="'/u/' + user.username + '/wall'" exact><a>{{ $t('user.wall') }}</a></router-link> relationships.type === 'notFriends' &&
<router-link tag="li" :to="'/u/' + user.username + '/items'" exact><a>{{ $t('user.items') }}</a></router-link> user.username !== $store.state.user.username
<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> ><i class="fas fa-plus"></i> &nbsp;{{
<router-link tag="li" :to="'/u/' + user.username + '/wearing'" exact><a>{{ $t('user.wearing') }}</a></router-link> $t("relationships.notFriends")
<router-link tag="li" :to="'/u/' + user.username + '/friends'" exact><a>{{ $t('user.relationships') }}</a></router-link> }}</b-button
</ul> >
<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">
<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-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 + '/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> </div>
<div class="card"> <div class="column" v-if="!exists">
<div class="card-content"> <NoItems notFound="true"></NoItems>
<router-view></router-view>
</div>
</div> </div>
</div> </div>
</div> </section>
<div class="column" v-if="!exists"> </div>
<NoItems notFound="true"></NoItems>
</div>
</main>
</template> </template>
<script> <script>
import AjaxErrorHandler from '../../assets/js/errorHandler' import AjaxErrorHandler from "../../assets/js/errorHandler";
import Badges from '../components/Badges' import Badges from "../components/Badges";
import NoItems from '../components/NoItems' import NoItems from "../components/NoItems";
export default { export default {
name: 'User', name: "User",
components: { components: {
Badges, Badges,
NoItems NoItems,
}, },
data () { data() {
return { return {
modifyUserModal: true, modifyUserModal: true,
user: { user: {
username: "Loading", username: "Loading",
description: "Loading", description: "Loading",
createdAt: "2020-01-01T00:00:00.000Z" createdAt: "2020-01-01T00:00:00.000Z",
}, },
exists: true, exists: true,
relationship: false, relationship: false,
relationships: { relationships: {
type: '' type: "",
} },
} };
}, },
watch: { watch: {
'$route.params.username' () { "$route.params.username"() {
this.user = [{ this.user = [
username: "Loading", {
description: "Loading", username: "Loading",
createdAt: "2020-01-01T00:00:00.000Z" description: "Loading",
}] createdAt: "2020-01-01T00:00:00.000Z",
this.relationship = false },
this.relationships.type = '' ];
this.fetchData() this.relationship = false;
} this.relationships.type = "";
this.fetchData();
},
}, },
computed: { computed: {
userColor () { userColor() {
if(this.user) { if (this.user) {
return this.user.color return this.user.color;
} else { } else {
return null return null;
} }
}, },
userPicture () { userPicture() {
if(this.user && this.user.picture) { if (this.user && this.user.picture) {
return 'https://cdn.kaverti.com/user/avatars/full/' + this.user.picture + '.png' return (
"https://cdn.kaverti.com/user/avatars/full/" +
this.user.picture +
".png"
);
} else { } else {
return null return null;
} }
} },
}, },
methods: { methods: {
resetFetchData () { resetFetchData() {
this.offset = 0; this.offset = 0;
this.users = []; this.users = [];
this.fetchData(); this.fetchData();
}, },
fetchData () { fetchData() {
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `user/${this.$route.params.username}`) .get(
.then(res => this.user = res.data) process.env.VUE_APP_APIENDPOINT +
.catch(e => { process.env.VUE_APP_APIVERSION +
let invalidId = e.response.data.errors.find(error => { `/` +
return error.name === 'accountDoesNotExist' `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) { if (invalidId) {
this.exists = false this.exists = false;
} else { } else {
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
} }
}) });
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + 'relationships/get/' + this.$route.params.username) .get(
.then(res => this.relationships.type = res.data.type) 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 () { scrubDesc() {
this.axios this.axios
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'admin/user/scrub', { .put(
process.env.VUE_APP_APIENDPOINT +
process.env.VUE_APP_APIVERSION +
"/" +
"admin/user/scrub",
{
description: "descscram", description: "descscram",
user: this.username user: this.username,
}) }
.then(() => { )
this.resetFetchData() .then(() => {
}) this.resetFetchData();
.catch(AjaxErrorHandler(this.$store)) })
.catch(AjaxErrorHandler(this.$store));
}, },
refreshAvatar () { refreshAvatar() {
this.axios this.axios
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'admin/user/avatar', { .put(
user: this.username process.env.VUE_APP_APIENDPOINT +
}) process.env.VUE_APP_APIVERSION +
.then(() => { "/" +
this.resetFetchData() "admin/user/avatar",
}) {
.catch(AjaxErrorHandler(this.$store)) user: this.username,
}
)
.then(() => {
this.resetFetchData();
})
.catch(AjaxErrorHandler(this.$store));
}, },
scrubUsername () { scrubUsername() {
this.axios this.axios
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'admin/user/scrub', { .put(
process.env.VUE_APP_APIENDPOINT +
process.env.VUE_APP_APIVERSION +
"/" +
"admin/user/scrub",
{
username: "usernamescram", username: "usernamescram",
user: this.username user: this.username,
}) }
.then(() => { )
this.description.loading = false .then(() => {
}) this.description.loading = false;
.catch(AjaxErrorHandler(this.$store)) })
.catch(AjaxErrorHandler(this.$store));
}, },
refreshFriend() { refreshFriend() {
this.relationships.type === '' this.relationships.type === "";
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`) .get(
.then(res => this.relationships.type = res.data.type) process.env.VUE_APP_APIENDPOINT +
process.env.VUE_APP_APIVERSION +
`/` +
`relationships/get/${this.$route.params.username}`
)
.then((res) => (this.relationships.type = res.data.type));
}, },
removeFriend () { removeFriend() {
this.axios this.axios
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/remove', { .put(
friend: this.$route.params.username process.env.VUE_APP_APIENDPOINT +
}) process.env.VUE_APP_APIVERSION +
.then(() => { "/" +
this.refreshFriend() "relationships/remove",
this.description.loading = false {
this.axios friend: this.$route.params.username,
.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 => { .then(() => {
this.refreshFriend() this.refreshFriend();
let invalidId = e.response.data.errors.find(error => { this.description.loading = false;
return error.name === 'accountDoesNotExist' 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) { if (invalidId) {
this.$store.commit('set404Page', true) this.$store.commit("set404Page", true);
} else { } else {
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
} }
}) });
}) })
.catch(e => { .catch((e) => {
this.refreshFriend() this.refreshFriend();
this.description.loading = false this.description.loading = false;
AjaxErrorHandler(this.$store)(e, error => { AjaxErrorHandler(this.$store)(e, (error) => {
this.description.error = error.message this.description.error = error.message;
}) });
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`) .get(
.then(res => this.relationship = res.data, this.refreshFriend()) process.env.VUE_APP_APIENDPOINT +
.catch(e => { process.env.VUE_APP_APIVERSION +
this.refreshFriend() `/` +
let invalidId = e.response.data.errors.find(error => { `relationships/get/${this.$route.params.username}`
return error.name === 'accountDoesNotExist' )
}) .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) { if (invalidId) {
this.$store.commit('set404Page', true) this.$store.commit("set404Page", true);
} else { } else {
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
} }
}) });
}) });
}, },
doRelationship () { doRelationship() {
this.axios this.axios
.post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/send', { .post(
friend: this.$route.params.username process.env.VUE_APP_APIENDPOINT +
}) process.env.VUE_APP_APIVERSION +
.then(() => { "/" +
this.refreshFriend() "relationships/send",
this.description.loading = false {
this.axios friend: this.$route.params.username,
.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 => { .then(() => {
let invalidId = e.response.data.errors.find(error => { this.refreshFriend();
return error.name === 'accountDoesNotExist' 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) { if (invalidId) {
this.$store.commit('set404Page', true) this.$store.commit("set404Page", true);
} else { } else {
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
} }
}) });
}) })
.catch(e => { .catch((e) => {
this.refreshFriend() this.refreshFriend();
this.description.loading = false this.description.loading = false;
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`) .get(
.then(res => this.relationship = res.data) process.env.VUE_APP_APIENDPOINT +
.catch(e => { process.env.VUE_APP_APIVERSION +
let invalidId = e.response.data.errors.find(error => { `/` +
return error.name === 'accountDoesNotExist' `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) { if (invalidId) {
this.$store.commit('set404Page', true) this.$store.commit("set404Page", true);
} else { } else {
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
} }
}) });
}) });
}, },
doRelationshipAccept () { doRelationshipAccept() {
this.axios this.axios
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/accept', { .put(
friend: this.$route.params.username process.env.VUE_APP_APIENDPOINT +
}) process.env.VUE_APP_APIVERSION +
.then(() => { "/" +
this.refreshFriend() "relationships/accept",
this.description.loading = false {
this.axios friend: this.$route.params.username,
.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 => { .then(() => {
let invalidId = e.response.data.errors.find(error => { this.refreshFriend();
return error.name === 'accountDoesNotExist' 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) { if (invalidId) {
this.$store.commit('set404Page', true) this.$store.commit("set404Page", true);
} else { } else {
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
} }
}) });
}) })
.catch(e => { .catch((e) => {
this.refreshFriend() this.refreshFriend();
this.description.loading = false this.description.loading = false;
AjaxErrorHandler(this.$store)(e, error => { AjaxErrorHandler(this.$store)(e, (error) => {
this.description.error = error.message this.description.error = error.message;
}) });
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`) .get(
.then(res => this.relationship = res.data) process.env.VUE_APP_APIENDPOINT +
.catch(e => { process.env.VUE_APP_APIVERSION +
let invalidId = e.response.data.errors.find(error => { `/` +
return error.name === 'accountDoesNotExist' `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) { if (invalidId) {
this.$store.commit('set404Page', true) this.$store.commit("set404Page", true);
} else { } else {
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
} }
}) });
}) });
}, },
getIndexFromRoute (path) { getIndexFromRoute(path) {
let selectedIndex let selectedIndex;
let route = path.split('/')[3] let route = path.split("/")[3];
this.menuItems.forEach((item, index) => { this.menuItems.forEach((item, index) => {
if(item.route === route) { if (item.route === route) {
selectedIndex = index selectedIndex = index;
} }
}) });
return selectedIndex return selectedIndex;
} },
}, },
mounted () { mounted() {
this.resetFetchData() this.resetFetchData();
this.selected = this.getIndexFromRoute(this.$route.path) this.selected = this.getIndexFromRoute(this.$route.path);
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `user/${this.$route.params.username}`) .get(
.then(res => this.user = res.data) process.env.VUE_APP_APIENDPOINT +
process.env.VUE_APP_APIVERSION +
`/` +
`user/${this.$route.params.username}`
)
.then((res) => (this.user = res.data));
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`) .get(
.then(res => this.relationship = res.data) process.env.VUE_APP_APIENDPOINT +
.catch(e => { process.env.VUE_APP_APIVERSION +
let invalidId = e.response.data.errors.find(error => { `/` +
return error.name === 'accountDoesNotExist' `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) { if (invalidId) {
this.$store.commit('set404Page', true) this.$store.commit("set404Page", true);
} else { } else {
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
} }
}) });
} },
} };
</script> </script>

6
src/views/UserItems.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<main> <div id="user-items">
TEST
</main> </div>
</template> </template>

4
src/views/UserThreads.vue
View file

@ -1,3 +1,5 @@
<template> <template>
<main>TEST</main> <div id="user-threads">
TEST
</div>
</template> </template>

4
src/views/UserWall.vue
View file

@ -1,3 +1,5 @@
<template> <template>
<main>TEST</main> <div id="user-wall">
TEST
</div>
</template> </template>

310
src/views/Users.vue
View file

@ -1,111 +1,144 @@
<template> <template>
<main class="section"> <div id="users">
<div class="columns is-multiline" v-if="!loading"> <section class="section">
<div v-if="!users.length" class="column"> <div class="container">
<br> <div class="columns is-centered is-multiline" v-if="!loading">
<NoItems :connection="true" type="users"> <div v-if="!users.length" class="column">
</NoItems> <br />
</div> <NoItems :connection="true" type="users"> </NoItems>
<Pagination </div>
class='columns is-multiline' <Pagination
v-if='users.length' class="columns is-multiline"
:loading='loading' v-if="users.length"
:paginate="paginate" :loading="loading"
:wait="wait" :paginate="paginate"
@loadNext='getUsers(false)' :wait="wait"
> @loadNext="getUsers(false)"
<div class="column is-3" v-for='(user) in users' :key='"user-" + user.id'> >
<div class="box"> <div
<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> class="column is-3"
<img :src="'https://cdn.kaverti.com/user/avatars/full/' + user.picture + '.png'"><br> v-for="user in users"
<b-button tag="router-link" :to='"/u/" + user.username' class="is-centered is-info">View Profile</b-button> :key="'user-' + user.id"
>
<div class="box">
<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>
<img
:src="
'https://cdn.kaverti.com/user/avatars/full/' +
user.picture +
'.png'
"
/><br />
<b-button
tag="router-link"
:to="'/u/' + user.username"
class="is-centered is-info"
>View Profile</b-button
>
</div>
</div>
</Pagination>
</div>
<div class="columns is-multiline" v-if="loading">
<div class="column is-4">
<div class="box">
<h1 class="title">
<b-skeleton></b-skeleton>
</h1>
<b-skeleton height="100px"></b-skeleton>
</div>
</div>
<div class="column is-4">
<div class="box">
<h1 class="title">
<b-skeleton></b-skeleton>
</h1>
<b-skeleton height="100px"></b-skeleton>
</div>
</div>
<div class="column is-4">
<div class="box">
<h1 class="title">
<b-skeleton></b-skeleton>
</h1>
<b-skeleton height="100px"></b-skeleton>
</div>
</div>
<div class="column is-4">
<div class="box">
<h1 class="title">
<b-skeleton></b-skeleton>
</h1>
<b-skeleton height="100px"></b-skeleton>
</div>
</div>
<div class="column is-4">
<div class="box">
<h1 class="title">
<b-skeleton></b-skeleton>
</h1>
<b-skeleton height="100px"></b-skeleton>
</div>
</div>
<div class="column is-4">
<div class="box">
<h1 class="title">
<b-skeleton></b-skeleton>
</h1>
<b-skeleton height="100px"></b-skeleton>
</div>
</div>
<div class="column is-4">
<div class="box">
<h1 class="title">
<b-skeleton></b-skeleton>
</h1>
<b-skeleton height="100px"></b-skeleton>
</div>
</div>
<div class="column is-4">
<div class="box">
<h1 class="title">
<b-skeleton></b-skeleton>
</h1>
<b-skeleton height="100px"></b-skeleton>
</div>
</div>
<div class="column is-4">
<div class="box">
<h1 class="title">
<b-skeleton></b-skeleton>
</h1>
<b-skeleton height="100px"></b-skeleton>
</div>
</div>
</div> </div>
</div> </div>
</Pagination> </section>
</div> </div>
<div class="columns is-multiline" v-if="loading">
<div class="column is-4">
<div class="box">
<h1 class="title">
<b-skeleton></b-skeleton>
</h1>
<b-skeleton height="100px"></b-skeleton>
</div>
</div>
<div class="column is-4">
<div class="box">
<h1 class="title">
<b-skeleton></b-skeleton>
</h1>
<b-skeleton height="100px"></b-skeleton>
</div>
</div> <div class="column is-4">
<div class="box">
<h1 class="title">
<b-skeleton></b-skeleton>
</h1>
<b-skeleton height="100px"></b-skeleton>
</div>
</div>
<div class="column is-4">
<div class="box">
<h1 class="title">
<b-skeleton></b-skeleton>
</h1>
<b-skeleton height="100px"></b-skeleton>
</div>
</div>
<div class="column is-4">
<div class="box">
<h1 class="title">
<b-skeleton></b-skeleton>
</h1>
<b-skeleton height="100px"></b-skeleton>
</div>
</div> <div class="column is-4">
<div class="box">
<h1 class="title">
<b-skeleton></b-skeleton>
</h1>
<b-skeleton height="100px"></b-skeleton>
</div>
</div> <div class="column is-4">
<div class="box">
<h1 class="title">
<b-skeleton></b-skeleton>
</h1>
<b-skeleton height="100px"></b-skeleton>
</div>
</div> <div class="column is-4">
<div class="box">
<h1 class="title">
<b-skeleton></b-skeleton>
</h1>
<b-skeleton height="100px"></b-skeleton>
</div>
</div>
<div class="column is-4">
<div class="box">
<h1 class="title">
<b-skeleton></b-skeleton>
</h1>
<b-skeleton height="100px"></b-skeleton>
</div>
</div>
</div>
</main>
</template> </template>
<script> <script>
import AjaxErrorHandler from "../../assets/js/errorHandler"; import AjaxErrorHandler from "../../assets/js/errorHandler";
import Badges from "../components/Badges" import Badges from "../components/Badges";
import NoItems from "../components/NoItems" import NoItems from "../components/NoItems";
import Pagination from "../components/Pagination" import Pagination from "../components/Pagination";
export default { export default {
name: 'Users', name: "Users",
components: { components: {
Badges, Badges,
NoItems, NoItems,
Pagination Pagination,
}, },
data() { data() {
return { return {
@ -114,49 +147,56 @@ export default {
paginate: true, paginate: true,
limit: 30, limit: 30,
loading: true, loading: true,
wait: true wait: true,
} };
}, },
methods: { methods: {
getUsers(initial) { getUsers(initial) {
if(initial) { if (initial) {
this.users = [] this.users = [];
this.loading = true this.loading = true;
this.offset = 0 this.offset = 0;
this.paginate = true this.paginate = true;
} }
if(!initial) { if (!initial) {
this.wait = true this.wait = true;
} }
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'user/' + '?offset=' + this.offset) .get(
.then(res => { process.env.VUE_APP_APIENDPOINT +
if(res.data < this.limit) { process.env.VUE_APP_APIVERSION +
this.offset = null; "/" +
} else { "user/" +
this.offset+= this.limit; "?offset=" +
} this.offset
if(!initial && !res.data.length) { )
this.paginate = false .then((res) => {
} if (res.data < this.limit) {
if(initial) { this.offset = null;
this.users = res.data } else {
} else { this.offset += this.limit;
this.users.push(...res.data) }
} if (!initial && !res.data.length) {
this.loading = false this.paginate = false;
this.wait = false }
}) if (initial) {
.catch((e) => { this.users = res.data;
this.loading = false } else {
this.wait = false this.users.push(...res.data);
AjaxErrorHandler(this.$store)(e) }
}) this.loading = false;
} this.wait = false;
})
.catch((e) => {
this.loading = false;
this.wait = false;
AjaxErrorHandler(this.$store)(e);
});
},
}, },
mounted() { mounted() {
this.loading = true this.loading = true;
this.getUsers() this.getUsers();
} },
} };
</script> </script>

14008
yarn.lock
View file

File diff suppressed because it is too large Load diff