More features
This commit is contained in:
parent
068e931a7d
commit
e1369dfab5
11 changed files with 318 additions and 275 deletions
3
assets/css/kaverti.css
Normal file
3
assets/css/kaverti.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.large-icon {
|
||||
font-size: 60px;
|
||||
}
|
||||
|
|
@ -1,242 +1,3 @@
|
|||
body {
|
||||
padding-bottom: 30px!important;
|
||||
position: relative!important;
|
||||
min-height: 100%!important;
|
||||
}
|
||||
|
||||
a {
|
||||
transition: background 0.2s, color 0.2s!important;
|
||||
}
|
||||
a:hover,
|
||||
a:focus {
|
||||
text-decoration: none!important;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
padding-left: 0!important;
|
||||
transition: all 0.5s ease!important;
|
||||
position: relative!important;
|
||||
}
|
||||
|
||||
#sidebar-wrapper {
|
||||
z-index: 1000!important;
|
||||
position: fixed!important;
|
||||
left: 250px!important;
|
||||
width: 0!important;
|
||||
height: 100%!important;
|
||||
margin-left: -250px!important;
|
||||
overflow-y: auto!important;
|
||||
overflow-x: hidden!important;
|
||||
background: #222!important;
|
||||
transition: all 0.5s ease!important;
|
||||
}
|
||||
|
||||
#wrapper.toggled #sidebar-wrapper {
|
||||
width: 250px!important;
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
position: absolute!important;
|
||||
top: 0!important;
|
||||
width: 250px!important;
|
||||
text-align: center!important;
|
||||
padding: 20px 0!important;
|
||||
}
|
||||
.sidebar-brand h2 {
|
||||
margin: 0!important;
|
||||
font-weight: 600!important;
|
||||
font-size: 24px!important;
|
||||
color: #fff!important;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
position: absolute!important;
|
||||
top: 75px!important;
|
||||
width: 250px!important;
|
||||
margin: 0!important;
|
||||
padding: 0!important;
|
||||
list-style: none!important;
|
||||
}
|
||||
.sidebar-nav > li {
|
||||
text-indent: 10px!important;
|
||||
line-height: 42px!important;
|
||||
}
|
||||
.sidebar-nav > li a {
|
||||
display: block!important;
|
||||
text-decoration: none!important;
|
||||
color: #757575!important;
|
||||
font-weight: 600!important;
|
||||
font-size: 18px!important;
|
||||
}
|
||||
.sidebar-nav > li > a:hover,
|
||||
.sidebar-nav > li.active > a {
|
||||
text-decoration: none!important;
|
||||
color: #fff!important;
|
||||
background: #F8BE12!important;
|
||||
}
|
||||
.sidebar-nav > li > a i.fa {
|
||||
font-size: 24px!important;
|
||||
width: 60px!important;
|
||||
}
|
||||
|
||||
#navbar-wrapper {
|
||||
width: 100%!important;
|
||||
position: absolute!important;
|
||||
z-index: 2!important;
|
||||
}
|
||||
#wrapper.toggled #navbar-wrapper {
|
||||
position: absolute!important;
|
||||
margin-right: -250px!important;
|
||||
}
|
||||
#navbar-wrapper .navbar {
|
||||
border-width: 0 0 0 0!important;
|
||||
background-color: #eee!important;
|
||||
font-size: 24px!important;
|
||||
margin-bottom: 0!important;
|
||||
border-radius: 0!important;
|
||||
}
|
||||
#navbar-wrapper .navbar a {
|
||||
color: #757575!important;
|
||||
}
|
||||
#navbar-wrapper .navbar a:hover {
|
||||
color: #F8BE12!important;
|
||||
}
|
||||
|
||||
#content-wrapper {
|
||||
width: 100%!important;
|
||||
position: absolute!important;
|
||||
padding: 15px!important;
|
||||
top: 100px!important;
|
||||
}
|
||||
#wrapper.toggled #content-wrapper {
|
||||
position: absolute!important;
|
||||
margin-right: -250px!important;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#wrapper {
|
||||
padding-left: 250px!important;
|
||||
}
|
||||
|
||||
#wrapper.toggled {
|
||||
padding-left: 60px!important;
|
||||
}
|
||||
|
||||
#sidebar-wrapper {
|
||||
width: 250px!important;
|
||||
}
|
||||
|
||||
#wrapper.toggled #sidebar-wrapper {
|
||||
width: 60px!important;
|
||||
}
|
||||
|
||||
#wrapper.toggled #navbar-wrapper {
|
||||
position: absolute!important;
|
||||
margin-right: -190px!important;
|
||||
}
|
||||
|
||||
#wrapper.toggled #content-wrapper {
|
||||
position: absolute!important;
|
||||
margin-right: -190px!important;
|
||||
}
|
||||
|
||||
#navbar-wrapper {
|
||||
position: relative!important;
|
||||
}
|
||||
|
||||
#wrapper.toggled {
|
||||
padding-left: 60px!important;
|
||||
}
|
||||
|
||||
#content-wrapper {
|
||||
position: relative!important;
|
||||
top: 0!important;
|
||||
}
|
||||
|
||||
#wrapper.toggled #navbar-wrapper,
|
||||
#wrapper.toggled #content-wrapper {
|
||||
position: relative!important;
|
||||
margin-right: 60px!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
#wrapper {
|
||||
padding-left: 60px!important;
|
||||
}
|
||||
|
||||
#sidebar-wrapper {
|
||||
width: 60px!important;
|
||||
}
|
||||
|
||||
#wrapper.toggled #navbar-wrapper {
|
||||
position: absolute!important;
|
||||
margin-right: -250px!important;
|
||||
}
|
||||
|
||||
#wrapper.toggled #content-wrapper {
|
||||
position: absolute!important;
|
||||
margin-right: -250px!important;
|
||||
}
|
||||
|
||||
#navbar-wrapper {
|
||||
position: relative!important;
|
||||
}
|
||||
|
||||
#wrapper.toggled {
|
||||
padding-left: 250px!important;
|
||||
}
|
||||
|
||||
#content-wrapper {
|
||||
position: relative!important;
|
||||
top: 0!important;
|
||||
}
|
||||
|
||||
#wrapper.toggled #navbar-wrapper,
|
||||
#wrapper.toggled #content-wrapper {
|
||||
position: relative!important;
|
||||
margin-right: 250px!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
#wrapper {
|
||||
padding-left: 0!important;
|
||||
}
|
||||
|
||||
#sidebar-wrapper {
|
||||
width: 0!important;
|
||||
}
|
||||
|
||||
#wrapper.toggled #sidebar-wrapper {
|
||||
width: 250px!important;
|
||||
}
|
||||
#wrapper.toggled #navbar-wrapper {
|
||||
position: absolute!important;
|
||||
margin-right: -250px!important;
|
||||
}
|
||||
|
||||
#wrapper.toggled #content-wrapper {
|
||||
position: absolute!important;
|
||||
margin-right: -250px!important;
|
||||
}
|
||||
|
||||
#navbar-wrapper {
|
||||
position: relative!important;
|
||||
}
|
||||
|
||||
#wrapper.toggled {
|
||||
padding-left: 250px!important;
|
||||
}
|
||||
|
||||
#content-wrapper {
|
||||
position: relative!important;
|
||||
top: 0!important;
|
||||
}
|
||||
|
||||
#wrapper.toggled #navbar-wrapper,
|
||||
#wrapper.toggled #content-wrapper {
|
||||
position: relative!important;
|
||||
margin-right: 250px!important;
|
||||
}
|
||||
}
|
||||
/*
|
||||
Soon
|
||||
*/
|
||||
|
|
@ -3,9 +3,7 @@
|
|||
</style>
|
||||
<style>
|
||||
@import 'https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css';
|
||||
.large-icon {
|
||||
font-size: 60px;
|
||||
}
|
||||
@import '../assets/css/kaverti.css';
|
||||
</style>
|
||||
<template>
|
||||
<div id="app">
|
||||
|
|
@ -54,6 +52,8 @@ export default {
|
|||
this.$store.commit('setKoins', res.data.koins)
|
||||
this.$store.commit('setID', res.data.id)
|
||||
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'})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@
|
|||
<b-button
|
||||
class='button is-info'
|
||||
:loading='settings.general.description.loading'
|
||||
@click='fakeUser()'
|
||||
@click='saveDesc()'
|
||||
>
|
||||
{{$t('settings.general.saveDesc')}}
|
||||
</b-button>
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
<b-button
|
||||
class='button is-info'
|
||||
:loading='settings.general.preferences.loading'
|
||||
@click='fakeUser()'
|
||||
@click='savePref()'
|
||||
>
|
||||
{{$t('settings.general.savePref')}}
|
||||
</b-button>
|
||||
|
|
@ -447,6 +447,46 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
savePref() {
|
||||
this.preferences.error = ''
|
||||
this.preferences.loading = true
|
||||
|
||||
this.axios
|
||||
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/preferences', {
|
||||
developerMode: this.preferences.developerMode
|
||||
})
|
||||
.then(() => {
|
||||
this.preferences.loading = false
|
||||
this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'userinfo')
|
||||
.then(res => {
|
||||
this.$store.commit('setUsername', res.data.username)
|
||||
this.$store.commit('setEmail', res.data.email)
|
||||
this.$store.commit('setEmailVerified', res.data.emailVerified)
|
||||
this.$store.commit('setAdmin', res.data.admin)
|
||||
this.$store.commit('setDevMode', res.data.developerMode)
|
||||
})
|
||||
})
|
||||
.catch(e => {
|
||||
this.preferences.loading = false
|
||||
AjaxErrorHandler(this.$store)(e)
|
||||
})
|
||||
},
|
||||
saveDesc() {
|
||||
this.description.error = ''
|
||||
this.description.loading = true
|
||||
|
||||
this.axios
|
||||
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/preferences', {
|
||||
description: this.description.value
|
||||
})
|
||||
.then(() => {
|
||||
this.description.loading = false
|
||||
})
|
||||
.catch(e => {
|
||||
this.description.loading = false
|
||||
AjaxErrorHandler(this.$store)(e)
|
||||
})
|
||||
},
|
||||
getBannerId() {
|
||||
if(localStorage.getItem(this.$store.state.client.bannerId)) {
|
||||
this.showBanner = false
|
||||
|
|
@ -469,13 +509,10 @@ export default {
|
|||
agree: this.register.agree
|
||||
}).then((res) => {
|
||||
this.register.loading = false
|
||||
this.$store.commit('setUsername', res.data.username)
|
||||
this.$store.commit('setAvatar', res.data.avatar)
|
||||
this.$store.commit('setID', res.data.id)
|
||||
this.$store.commit('setEmailVerified', res.data.emailVerified)
|
||||
this.$store.commit('setEmail', res.data.email)
|
||||
this.$store.commit('setAdmin', res.data.admin)
|
||||
this.registerModal = false
|
||||
this.$store.commit('setToken', res.data.token)
|
||||
localStorage.setItem('token', JSON.stringify(res.data.token));
|
||||
this.getInfo()
|
||||
this.$buefy.snackbar.open({message:this.$t('errors.registered'), type: 'is-info'})
|
||||
}).catch(e => {
|
||||
this.register.loading = false
|
||||
|
|
@ -566,13 +603,43 @@ export default {
|
|||
this.$store.commit('fakeUser')
|
||||
this.$buefy.snackbar.open(`WARNING: You have fake authenticated, you do not have authenticated API access. Use for debug purposes only.`)
|
||||
Object.assign(axios.defaults, {headers: {Authorization: this.$store.state.user.token}})
|
||||
},
|
||||
getInfo() {
|
||||
Object.assign(axios.defaults, {headers: {Authorization: this.$store.state.user.token}})
|
||||
this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'kaverti/state')
|
||||
.then(res => {
|
||||
this.$store.commit('setSettings', res.data)
|
||||
this.$store.commit('setVersion', res.data.latestCanaryVersion)
|
||||
this.$store.commit('setAPIVersion', res.data.latestAPIVersion)
|
||||
}).catch(() => {
|
||||
this.$buefy.snackbar.open({message:this.$t('errors.down'), type: 'is-info'})
|
||||
})
|
||||
this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'userinfo')
|
||||
.then(res => {
|
||||
this.$store.commit('setUsername', res.data.username)
|
||||
this.$store.commit('setEmail', res.data.email)
|
||||
this.$store.commit('setEmailVerified', res.data.emailVerified)
|
||||
this.$store.commit('setAdmin', res.data.admin)
|
||||
this.$store.commit('setKoins', res.data.koins)
|
||||
this.$store.commit('setID', res.data.id)
|
||||
this.$store.commit('setBot', res.data.bot)
|
||||
this.$store.commit('setDescription', res.data.description)
|
||||
this.$store.commit('setExecutive', res.data.executive)
|
||||
this.settings.general.description.value = res.data.description
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.$buefy.snackbar.open({message:this.$t('errors.authFail'), type: 'is-warning'})
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
Object.assign(axios.defaults, {headers: {Authorization: this.$store.state.user.token}})
|
||||
this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'kaverti/state')
|
||||
.then(res => {
|
||||
this.$store.commit('setSettings', res.data)
|
||||
this.$store.commit('setVersion', res.data.latestCanaryVersion)
|
||||
this.$store.commit('setAPIVersion', res.data.latestAPIVersion)
|
||||
}).catch(() => {
|
||||
this.$buefy.snackbar.open({message:this.$t('errors.down'), type: 'is-info'})
|
||||
})
|
||||
|
|
@ -585,12 +652,9 @@ export default {
|
|||
this.$store.commit('setKoins', res.data.koins)
|
||||
this.$store.commit('setID', res.data.id)
|
||||
this.$store.commit('setBot', res.data.bot)
|
||||
if(localStorage.getItem('usernameCache')) {
|
||||
localStorage.removeItem('usernameCache')
|
||||
localStorage.setItem('usernameCache', JSON.stringify(res.data.username));
|
||||
} else {
|
||||
localStorage.setItem('usernameCache', JSON.stringify(res.data.username));
|
||||
}
|
||||
this.$store.commit('setDescription', res.data.description)
|
||||
this.$store.commit('setExecutive', res.data.executive)
|
||||
this.settings.general.description.value = res.data.description
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.$buefy.snackbar.open({message:this.$t('errors.authFail'), type: 'is-warning'})
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="is-vcentered has-text-centered columns">
|
||||
<div class="column is-vcentered has-text-centered" v-if="!connection">
|
||||
<i class="far fa-times-square large-icon"></i>
|
||||
<h1 class="subtitle">{{$t('generic.noItemsStart')}} {{type}} {{$t('generic.noItemsEnd')}}</h1>
|
||||
<h1 class="subtitle is-centered">{{$t('generic.noItemsStart')}} {{type}} {{$t('generic.noItemsEnd')}}</h1>
|
||||
</div>
|
||||
<div class="column is-vcentered" v-if="connection">
|
||||
<i class="far fa-times-square large-icon"></i>
|
||||
|
|
|
|||
|
|
@ -63,6 +63,12 @@ const routes = [
|
|||
},
|
||||
{
|
||||
path: '/forums',
|
||||
redirect: '/forums/ALL',
|
||||
name: 'Forums',
|
||||
component: route('Forums')
|
||||
},
|
||||
{
|
||||
path: '/forums/:category',
|
||||
name: 'Forums',
|
||||
component: route('Forums')
|
||||
},
|
||||
|
|
|
|||
|
|
@ -31,6 +31,14 @@ export default new Vuex.Store({
|
|||
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: '',
|
||||
|
|
@ -44,7 +52,8 @@ export default new Vuex.Store({
|
|||
emailVerified: false,
|
||||
modeler: false,
|
||||
developerMode: false,
|
||||
executive: false
|
||||
executive: false,
|
||||
description: ''
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
|
|
@ -59,6 +68,9 @@ export default new Vuex.Store({
|
|||
setVersion(state, value) {
|
||||
state.client.latestClientVersion = value
|
||||
},
|
||||
setAPIVersion(state, value) {
|
||||
state.client.latestAPIVersion = value
|
||||
},
|
||||
turnOffDebug(state) {
|
||||
state.debug = false
|
||||
},
|
||||
|
|
@ -86,6 +98,14 @@ export default new Vuex.Store({
|
|||
setToken (state, value) {
|
||||
state.user.token = value
|
||||
},
|
||||
setBanned (state, value) {
|
||||
state.banned.message = value
|
||||
state.banned.banned = value
|
||||
state.banned.readOnlyMode = value
|
||||
state.banned.disableLogin = value
|
||||
state.banned.ipBanned = value
|
||||
state.banned.expiry = value
|
||||
},
|
||||
setAvatar (state, value) {
|
||||
state.user.avatar = value
|
||||
},
|
||||
|
|
@ -109,6 +129,12 @@ export default new Vuex.Store({
|
|||
},
|
||||
setAdmin (state, value) {
|
||||
state.user.admin = value
|
||||
},
|
||||
setExecutive (state, value) {
|
||||
state.user.executive = value
|
||||
},
|
||||
setDescription (state, value) {
|
||||
state.user.description = value
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<main>
|
||||
<div>
|
||||
<main class="columns">
|
||||
<div class="column is-5">
|
||||
<h1 class="title" v-if="createType === 0">
|
||||
Uploading a hat
|
||||
</h1>
|
||||
|
|
@ -52,10 +52,18 @@
|
|||
</a>
|
||||
</b-upload>
|
||||
</b-field>
|
||||
<b-button v-if="createType === 0" @click="submitItem" :loading="loading">Submit</b-button>
|
||||
<b-button v-if="createType === 1" @click="submitItem" :loading="loading">Submit</b-button>
|
||||
<b-button v-if="createType === 2" @click="submitItem" :loading="loading">Submit</b-button>
|
||||
<b-button v-if="createType === 3" @click="submitItem" :loading="loading">Submit</b-button>
|
||||
<div class="buttons">
|
||||
<b-button v-if="createType === 0" @click="submitItem" :loading="loading">Submit</b-button>
|
||||
<b-button v-if="createType === 1" @click="submitItem" :loading="loading">Submit</b-button>
|
||||
<b-button v-if="createType === 2" @click="submitItem" :loading="loading">Submit</b-button>
|
||||
<b-button v-if="createType === 3" @click="submitItem" :loading="loading">Submit</b-button>
|
||||
<b-button v-if="createType === 0" @click="previewItem" :loading="loadingPreview">Preview</b-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<h1 class="title">Preview Image</h1>
|
||||
<img :src="'https://cdn.kaverti.com/marketplace/previews/' + preview" v-if="preview">
|
||||
<h1 class="subtitle" v-if="!preview">Press preview to preview the hat as if it were uploaded on the Marketplace.</h1>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
|
@ -70,6 +78,8 @@ export default {
|
|||
createType: 0,
|
||||
stage: 1,
|
||||
loading: false,
|
||||
loadingPreview: false,
|
||||
preview: '',
|
||||
item: {
|
||||
file: '',
|
||||
fileObj: '',
|
||||
|
|
@ -86,6 +96,21 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
previewItem() {
|
||||
this.loadingPreview = true
|
||||
const data = new FormData();
|
||||
|
||||
data.append('image', this.item.file);
|
||||
data.append('fileObj', this.item.fileObj);
|
||||
this.axios.post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'marketplace/preview/' + this.createType, data)
|
||||
.then((res) => {
|
||||
this.loadingPreview = false
|
||||
this.preview = res.data.image
|
||||
}).catch((e) => {
|
||||
this.loadingPreview = false
|
||||
AjaxErrorHandler(this.$store)(e)
|
||||
})
|
||||
},
|
||||
submitItem() {
|
||||
this.loading = true
|
||||
const data = new FormData();
|
||||
|
|
@ -100,8 +125,9 @@ export default {
|
|||
data.append('limited', this.item.limited);
|
||||
data.append('quantityAllowed', this.item.quantity);
|
||||
this.axios.post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'marketplace/upload/' + this.createType, data)
|
||||
.then(() => {
|
||||
.then((res) => {
|
||||
this.loading = false
|
||||
this.axios.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'marketplace/rerender/' + res.data.id)
|
||||
}).catch((e) => {
|
||||
this.loading = false
|
||||
AjaxErrorHandler(this.$store)(e)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,153 @@
|
|||
<template>
|
||||
<main>
|
||||
|
||||
<main class="section">
|
||||
<div class="columns is-multiline has-text-centered">
|
||||
<div class="column is-2" v-if="!loadingCategory && categories.length">
|
||||
<b-button class="is-info">Create thread</b-button>
|
||||
<br><br>
|
||||
<div class="box">
|
||||
<router-link
|
||||
:to='"/forums/ALL"'
|
||||
>
|
||||
<p class="subtitle is-link">All</p>
|
||||
</router-link>
|
||||
<router-link
|
||||
v-for='(category, $index) in categories'
|
||||
:key='"category-link-" + $index'
|
||||
:to='"/forums/" + category.value'
|
||||
>
|
||||
<p class="subtitle is-link">{{category.name}}</p>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-2" v-if="loadingCategory">
|
||||
<div class="box">
|
||||
<p><b-skeleton></b-skeleton></p>
|
||||
<p><b-skeleton></b-skeleton></p>
|
||||
<p><b-skeleton></b-skeleton></p>
|
||||
<p><b-skeleton></b-skeleton></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-2" v-if="!loadingCategory && !categories.length">
|
||||
<div class="box">
|
||||
<NoItems connection="true"></NoItems>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column box" v-if="!threads.length && !loadingThreads">
|
||||
<NoItems type="forum threads"></NoItems>
|
||||
</div>
|
||||
<div class="column column is-9">
|
||||
<div class="box content">
|
||||
<article class="media" v-for='(thread) in threads' :key='"thread-" + thread.id'>
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img :src="'https://cdn.kaverti.com/user/avatars/headshot/' + thread.User.picture + '.png'">
|
||||
</p>
|
||||
By
|
||||
{{thread.User.username}}
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>{{thread.name}}</strong>
|
||||
<br>
|
||||
{{thread.Posts[0].plainText}}
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<p>Created at:</p>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<button class="delete"></button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
<script>
|
||||
import AjaxErrorHandler from "../../assets/js/errorHandler";
|
||||
import NoItems from "../components/NoItems"
|
||||
export default {
|
||||
name: 'Forums',
|
||||
props: ['username'],
|
||||
components: {
|
||||
NoItems
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
categories: [],
|
||||
loadingCategory: true,
|
||||
loadingThreads: true,
|
||||
threads: [],
|
||||
selectedCategory: 'ALL'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getThreads (initial) {
|
||||
if(this.nextURL === null && !initial) return
|
||||
|
||||
let URL = process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'forums/category/' + this.selectedCategory
|
||||
if(!initial) {
|
||||
URL = this.nextURL || URL
|
||||
}
|
||||
|
||||
this.loadingThreads = true
|
||||
|
||||
this.axios
|
||||
.get(URL)
|
||||
.then(res => {
|
||||
this.loadingThreads = false
|
||||
|
||||
if(initial) {
|
||||
this.threads = res.data.Threads
|
||||
} else {
|
||||
this.threads.push(...res.data.Threads)
|
||||
}
|
||||
|
||||
this.nextURL = res.data.meta.nextURL
|
||||
this.nextThreadsCount = res.data.meta.nextThreadsCount
|
||||
})
|
||||
.catch((e) => {
|
||||
this.loadingThreads = false
|
||||
|
||||
AjaxErrorHandler(this.$store)(e)
|
||||
})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selectedCategory (newValue) {
|
||||
this.$router.push('/forums/' + newValue.toLowerCase());
|
||||
},
|
||||
$route () {
|
||||
this.selectedCategory = this.$route.path.split('/')[2].toUpperCase()
|
||||
this.newThreads = 0
|
||||
this.getThreads(true)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.axios
|
||||
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + 'forums/category')
|
||||
.then(res => {
|
||||
this.categories = res.data
|
||||
this.loadingCategory = false
|
||||
})
|
||||
.catch(e => {
|
||||
this.loadingCategory = false
|
||||
let invalidId = e.response.data.errors.find(error => {
|
||||
return error.name === 'accountDoesNotExist'
|
||||
})
|
||||
|
||||
if (invalidId) {
|
||||
this.$store.commit('set404Page', true)
|
||||
} else {
|
||||
AjaxErrorHandler(this.$store)(e)
|
||||
}
|
||||
})
|
||||
this.getThreads(true)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,8 +1,11 @@
|
|||
<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">
|
||||
<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>
|
||||
|
|
@ -17,10 +20,13 @@
|
|||
</template>
|
||||
<script>
|
||||
import AjaxErrorHandler from "../../assets/js/errorHandler";
|
||||
|
||||
import NoItems from "../components/NoItems"
|
||||
export default {
|
||||
name: 'UserAwards',
|
||||
props: ['username'],
|
||||
components: {
|
||||
NoItems
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
awards: []
|
||||
|
|
|
|||
|
|
@ -2,8 +2,7 @@
|
|||
<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>
|
||||
<NoItems type="inventory items"></NoItems>
|
||||
</div>
|
||||
<div class="column is-4" v-for='(item) in inventory' :key='"item-" + item.id'>
|
||||
<h1 class="subtitle">{{item.Item.name}}</h1>
|
||||
|
|
@ -19,10 +18,14 @@
|
|||
</template>
|
||||
<script>
|
||||
import AjaxErrorHandler from "../../assets/js/errorHandler";
|
||||
import NoItems from "../components/NoItems"
|
||||
|
||||
export default {
|
||||
name: 'UserInventory',
|
||||
props: ['username'],
|
||||
components: {
|
||||
NoItems
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inventory: []
|
||||
|
|
|
|||
Loading…
Reference in a new issue