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

features

Browse source
This commit is contained in:
Troplo 2021-01-20 00:03:47 +11:00
parent a9fc91f381
commit bc9842c12d
10 changed files with 374 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -17,6 +17,7 @@
"dotenv-webpack": "^6.0.0",
"socket.io": "^3.1.0",
"to-boolean": "^1.0.0",
"v-offline": "^1.3.0",
"vue": "^2.6.11",
"vue-axios": "^3.2.2",
"vue-i18n": "^8.17.3",

2
src/components/Badges.vue
View file

@ -48,7 +48,7 @@
</trpl-badges>
</template>
<script>
import AjaxErrorHandler from "../../../website/legacyfrontend/src/assets/js/errorHandler";
import AjaxErrorHandler from "../../assets/js/errorHandler";
export default {
name: 'UserBadges',

22
src/components/LocalConn.vue Normal file
View file

@ -0,0 +1,22 @@
<template>
<offline @detected-condition="handleConnectivityChange">
<div slot="offline">
<p>OFFLINE</p>
</div>
</offline>
</template>
<script>
import offline from 'v-offline';
export default {
name: "LocalConn",
components: {
offline
},
methods: {
handleConnectivityChange(status) {
console.log(status);
}
}
}
</script>

8
src/components/Navbar.vue
View file

@ -134,6 +134,11 @@
</b-tab-item>
</b-tabs>
</section>
<footer class="modal-card-foot">
<b-button
:label="$t('close')"
@click="settingsModal = false" />
</footer>
</div>
</form>
</b-modal>
@ -226,6 +231,9 @@
<b-navbar-item tag="router-link" to="/">
{{$t('navbar.home')}}
</b-navbar-item>
<b-navbar-item tag="router-link" to="/forums">
{{$t('navbar.forums')}}
</b-navbar-item>
<b-navbar-item tag="router-link" to="/marketplace">
{{$t('navbar.marketplace')}}
</b-navbar-item>

18
src/components/NoItems.vue Normal file
View file

@ -0,0 +1,18 @@
<template>
<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>
</div>
<div class="column is-vcentered" v-if="connection">
<i class="far fa-times-square large-icon"></i>
<h1 class="subtitle">{{$t('generic.noItemsConnection')}}</h1>
</div>
</div>
</template>
<script>
export default {
name: 'NoItems',
props: ['type', 'connection'],
}
</script>

27
src/locales/en.json
View file

@ -165,13 +165,20 @@
},
"generic": {
"name": "Kaverti",
"loading": "Loading"
"loading": "Loading",
"noItemsConnection": "Please check your internet connection, or try again later.",
"noItemsStart": "There are no",
"noItemsEnd": "to display."
},
"relationships": {
"pending": "Cancel Friend Request",
"notFriends": "Send Friend Request",
"pendingCanAccept": "Accept Friend Request"
},
"modifyUser": {
"title": "Modify User",
"text": "Modify user badges"
},
"badges": {
"admin": "Admin",
"bot": "Bot",
@ -217,10 +224,26 @@
"settings": {
"title": "User Settings",
"general": {
"title": "General"
"title": "General",
"about": "About",
"description": "Your description",
"hi": "Hi, I'm",
"saveDesc": "Save description",
"savePref": "Save preferences",
"preferences": "Preferences",
"devMode": "Developer mode"
},
"security": {
"title": "Security"
},
"privacy": {
"title": "Privacy"
},
"experiments": {
"title": "Experiments"
},
"about": {
"title": "About"
}
},
"languages": {

5
src/router/index.js
View file

@ -56,6 +56,11 @@ const routes = [
name: 'Awards',
component: route('Awards')
},
{
path: '/transactions',
name: 'Transactions',
component: route('Transaction')
},
{
path: '/forums',
name: 'Forums',

160
src/views/Transaction.vue Normal file
View file

@ -0,0 +1,160 @@
<template>
<main>
<div class="section column">
<div class="box">
<h1 class="title">Transaction Log</h1>
<b-table
:detail-key='"log-" + transactions.id'
:data="transactions"
:paginated="isPaginated"
:per-page="perPage"
:current-page.sync="currentPage"
:pagination-simple="isPaginationSimple"
:pagination-position="paginationPosition"
:default-sort-direction="defaultSortDirection"
:pagination-rounded="isPaginationRounded"
:sort-icon="sortIcon"
:opened-detailed="defaultOpenedDetails"
:sort-icon-size="sortIconSize"
default-sort="user.first_name"
aria-next-label="Next page"
aria-previous-label="Previous page"
aria-page-label="Page"
aria-current-label="Current page">
<b-table-column field="props.row.text" label="Message" sortable v-slot="props">
{{ props.row.text }}
</b-table-column>
<b-table-column field="props.row.priceOfPurchase" label="Price" sortable v-slot="props">
{{ props.row.priceOfPurchase }}
</b-table-column>
<b-table-column field="props.row.createdAt" label="Date" sortable centered v-slot="props">
<span class="tag is-success">
{{ new Date(props.row.createdAt).toLocaleDateString() }}
</span>
</b-table-column>
</b-table>
</div>
<NoItems v-if="!transactions.length" type="transactions"></NoItems>
</div>
</main>
</template>
<script>
import AjaxErrorHandler from '../../assets/js/errorHandler';
import NoItems from '../components/NoItems'
export default {
name: 'Transactions',
components: {
NoItems
},
data () {
return {
search: '',
transactions: [],
isPaginated: true,
isPaginationSimple: false,
isPaginationRounded: false,
paginationPosition: 'bottom',
defaultSortDirection: 'desc',
sortIcon: 'arrow-up',
sortIconSize: 'is-small',
currentPage: 1,
perPage: 30,
defaultOpenedDetails: [1],
showDetailIcon: true,
loading: true,
offset: 0,
limit: 15,
showTeamTab: 0,
tcreateProd: {
username: '',
name: '',
loading: false,
errors: {
username: '',
name: ''
}
},
roleOptions: [
{ name: 'Admins', value: 'admin' },
{ name: 'transactions', value: 'user' }
],
roleSelected: ['admin', 'user'],
tableSort: {
column: 'username',
sort: 'desc'
}
}
},
methods: {
fetchData () {
if(this.offset === null) return;
let url = process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `transactions?
sort=${this.tableSort.column}
&order=${this.tableSort.sort}
&offset=${this.offset}
`;
if(this.roleSelected.length === 1) {
url += '&role=' + this.roleSelected[0];
}
if(this.search.length) {
url += '&search=' + encodeURIComponent(this.search.trim());
}
this.loading = true;
this.axios
.get(url)
.then(res => {
this.transactions.push(...res.data);
this.loading = /*loading =*/ false;
//If returned data is less than the limit
//then there must be no more pages to paginate
if(res.data.length < this.limit) {
this.offset = null;
} else {
this.offset+= this.limit;
}
})
.catch(e => {
AjaxErrorHandler(this.$store)(e);
this.loading = /*loading =*/ false;
});
},
resetFetchData () {
this.offset = 0;
this.transactions = [];
this.fetchData();
}
},
getNewertransactions () {
this.loadingNewer = true
this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'transactions' + '?limit=' + this.newtransactions)
.then(res => {
this.loadingNewer = false
this.newtransactions = 0
this.threads.unshift(...res.data.Threads)
})
.catch((e) => {
this.loadingNewer = false
AjaxErrorHandler(this.$store)(e)
})
},
mounted () {
this.fetchData();
}
}
</script>

122
src/views/Users.vue
View file

@ -1,5 +1,125 @@
<template>
<main>
<div class="columns is-multiline" v-if="!loading">
<div v-if="!users.length" class="column">
<br>
<NoItems :connection="true" type="users">
</NoItems>
</div>
<div class="column is-3" v-for='(user) in users' :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'">
</div>
</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>
<script>
import AjaxErrorHandler from "../../assets/js/errorHandler";
import Badges from "../components/Badges"
import NoItems from "../components/NoItems"
export default {
name: 'Users',
components: {
Badges,
NoItems
},
data() {
return {
users: [],
offset: 0,
limit: 15,
loading: true
}
},
mounted() {
this.loading = true
this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `user?offset=${this.offset};`)
.then(res => {
this.users.push(...res.data);
if(res.data.length < this.limit) {
this.offset = null;
} else {
this.offset+= this.limit;
}
this.loading = false
})
.catch(e => {
AjaxErrorHandler(this.$store)(e)
this.loading = false
})
}
}
</script>

12
yarn.lock
View file

@ -9661,6 +9661,11 @@ pify@^4.0.1:
resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
ping.js@^0.2.3:
version "0.2.3"
resolved "https://registry.yarnpkg.com/ping.js/-/ping.js-0.2.3.tgz#bd84ab80919b59fdfe713a93f22262564ed91d2b"
integrity sha512-mUxaydie369PF+uwNDepRinpfbHXtqPvTvKahtU2L0zz1Wu65ib+++QLX0xFpnRNOFxaG9CyAXa5voNrhLU8Ew==
pinkie-promise@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
@ -12452,6 +12457,13 @@ uuid@^8.0.0:
resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
v-offline@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/v-offline/-/v-offline-1.3.0.tgz#e3e73bbf8b194a625d03e37167535df8b2763ad4"
integrity sha512-y9sUj4BDoPpGawHlh647FthhlW4DeXzIrWDxD4XkUKbb9avZqyulGkO9pvf2pGzsq2mKat7Ey3qSLKGBGWKxpA==
dependencies:
ping.js "^0.2.3"
v8-compile-cache@^2.0.3:
version "2.2.0"
resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz#9471efa3ef9128d2f7c6a7ca39c4dd6b5055b132"