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

muhahahhaa

Browse source
This commit is contained in:
Bytetrex 2021-04-09 14:01:28 +08:00
parent d45a5bd9d0
commit 73fca4ff51
11 changed files with 647 additions and 609 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/App.vue
View file

@ -20,25 +20,27 @@ export default {
Footer, Footer,
}, },
mounted() { mounted() {
if (JSON.parse(localStorage.getItem("token"))) { const jwt = localStorage.getItem("token");
this.$store.commit("setToken", JSON.parse(localStorage.getItem("token"))); const wind = localStorage.getItem("wind404");
}
if (JSON.parse(localStorage.getItem("wind404"))) { if (token) {
var wind = JSON.parse(localStorage.getItem("wind404")); this.$store.commit("setToken", token);
} else {
// eslint-disable-next-line no-redeclare
var wind = false;
} }
if (wind) {
this.$store.commit("setWind", wind); this.$store.commit("setWind", wind);
Object.assign(axios.defaults, { } else {
headers: { Authorization: this.$store.state.user.token }, this.$store.commit("setWind", wind);
}); }
if (this.$store.state.debug) { if (this.$store.state.debug) {
this.$buefy.snackbar.open({ this.$buefy.snackbar.open({
message: this.$t("errors.devBuild"), message: this.$t("errors.devBuild"),
type: "is-warning", type: "is-warning",
}); });
} }
if (this.$store.state.user.username) {
this.axios this.axios
.get( .get(
process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIENDPOINT +
@ -63,12 +65,14 @@ export default {
type: "is-warning", type: "is-warning",
}); });
}); });
this.axios.get( this.axios.get(
process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIENDPOINT +
process.env.VUE_APP_APIVERSION + process.env.VUE_APP_APIVERSION +
"/" + "/" +
"awards/eligibility" "awards/eligibility"
); );
}
}, },
}; };
</script> </script>
@ -79,6 +83,6 @@ export default {
</style> </style>
<style lang="css"> <style lang="css">
@import './assets/css/kaverti.css'; @import "./assets/css/kaverti.css";
@import "https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css"; @import "https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css";
</style> </style>

6
src/assets/css/kaverti.css
View file

@ -5,7 +5,11 @@
} }
main { main {
flex: 1 !important flex: 1 !important;
}
.container {
max-width: 960px !important;
} }
.large-icon { .large-icon {

18
src/components/Navbar.vue
View file

@ -260,9 +260,6 @@
<b-navbar-item tag="router-link" to="/teams"> <b-navbar-item tag="router-link" to="/teams">
{{ $t("navbar.teams") }} {{ $t("navbar.teams") }}
</b-navbar-item> </b-navbar-item>
<b-navbar-item tag="router-link" to="/games">
{{ $t("navbar.games") }}
</b-navbar-item>
<div <div
v-if="$store.state.debug" v-if="$store.state.debug"
class="navbar-item has-dropdown is-hoverable is-info" class="navbar-item has-dropdown is-hoverable is-info"
@ -296,18 +293,9 @@
<b-navbar-item tag="router-link" to="/roadmap">{{ <b-navbar-item tag="router-link" to="/roadmap">{{
$t("navbar.more.roadmap") $t("navbar.more.roadmap")
}}</b-navbar-item> }}</b-navbar-item>
<b-navbar-item tag="a" href="soon">{{
$t("navbar.more.documentation")
}}</b-navbar-item>
<b-navbar-item tag="router-link" to="/downloads">{{
$t("navbar.downloads")
}}</b-navbar-item>
<b-navbar-item tag="router-link" to="/stats">{{ <b-navbar-item tag="router-link" to="/stats">{{
$t("navbar.more.stats") $t("navbar.more.stats")
}}</b-navbar-item> }}</b-navbar-item>
<b-navbar-item tag="router-link" to="/blog">{{
$t("navbar.more.blog")
}}</b-navbar-item>
</div> </div>
</div> </div>
</template> </template>
@ -352,12 +340,6 @@
<b-navbar-item tag="router-link" to="/avatar">{{ <b-navbar-item tag="router-link" to="/avatar">{{
$t("navbar.user.avatar") $t("navbar.user.avatar")
}}</b-navbar-item> }}</b-navbar-item>
<b-navbar-item tag="router-link" to="/creations">{{
$t("navbar.user.creations")
}}</b-navbar-item>
<b-navbar-item tag="router-link" to="/downloads">{{
$t("navbar.user.downloads")
}}</b-navbar-item>
<b-navbar-item <b-navbar-item
tag="router-link" tag="router-link"
to="/admin" to="/admin"

93
src/main.js
View file

@ -1,68 +1,69 @@
import Vue from 'vue' import Vue from "vue";
import App from './App.vue' import App from "./App.vue";
import router from './router' import router from "./router";
import store from './store' import store from "./store";
import Buefy, {Snackbar} from 'buefy' import Buefy, { Snackbar } from "buefy";
import axios from 'axios' import axios from "axios";
import VueAxios from 'vue-axios' import VueAxios from "vue-axios";
import i18n from './i18n' import i18n from "./i18n";
import moment from 'moment' import moment from "moment";
import VMdEditor from '@kangc/v-md-editor'; import VMdEditor from "@kangc/v-md-editor";
import '@kangc/v-md-editor/lib/style/base-editor.css'; import "@kangc/v-md-editor/lib/style/base-editor.css";
import enUS from '@kangc/v-md-editor/lib/lang/en-US'; import enUS from "@kangc/v-md-editor/lib/lang/en-US";
import createHljsTheme from '@kangc/v-md-editor/lib/theme/hljs'; import createHljsTheme from "@kangc/v-md-editor/lib/theme/hljs";
import json from 'highlight.js/lib/languages/json'; import json from "highlight.js/lib/languages/json";
const hljsTheme = createHljsTheme(); const hljsTheme = createHljsTheme();
import io from 'socket.io-client' import io from "socket.io-client"
import VueSocketIO from "vue-socket.io"; import VueSocketIO from "vue-socket.io";
import NProgress from "vue-nprogress"; import NProgress from "vue-nprogress";
Vue.use(NProgress)
const nprogress = new NProgress() Vue.use(NProgress);
const nprogress = new NProgress();
Vue.use( Vue.use(
new VueSocketIO({ new VueSocketIO({
debug: true, debug: true,
connection: io(process.env.VUE_APP_GATEWAYENDPOINT), // options object is Optional connection: io(process.env.VUE_APP_GATEWAYENDPOINT), // options object is Optional
}) })
); );
Vue.use(VMdEditor) Vue.use(VMdEditor);
VMdEditor.lang.use('en-US', enUS); Vue.use(VueAxios, axios);
Vue.use(Buefy);
// Axios Headers
const jwtToken = localStorage.getItem("token");
axios.defaults.headers.common["Authorization"] = jwtToken;
Vue.config.productionTip = false;
Vue.prototype.$snackbar = Snackbar;
// BBCode Configuration
VMdEditor.lang.use("en-US", enUS);
hljsTheme.extend((md, hljs) => { hljsTheme.extend((md, hljs) => {
md.set({ md.set({
html: false, // Enable HTML tags in source html: false,
xhtmlOut: false, // Use '/' to close single tags (<br />). xhtmlOut: false,
// This is only for full CommonMark compatibility. breaks: true,
breaks: true, // Convert '\n' in paragraphs into <br> langPrefix: "language-",
langPrefix: 'language-', // CSS language prefix for fenced blocks. Can be linkify: true,
// useful for external highlighters.
linkify: true, // Autoconvert URL-like text to links
image: false, image: false,
// Enable some language-neutral replacement + quotes beautification
typographer: true, typographer: true,
quotes: "“”‘’"
// Double + single quotes replacement pairs, when typographer enabled, });
// and smartquotes on. Could be either a String or an Array. md.disable("image");
// hljs.registerLanguage("json", json);
// For example, you can use '«»„“' for Russian, '„“‚‘' for German,
// and ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'] for French (including nbsp).
quotes: '“”‘’'
})
md.disable('image')
hljs.registerLanguage('json', json);
}); });
Vue.use(VueAxios, axios)
Vue.use(Buefy) // Date Format Configuration
Vue.config.productionTip = false Vue.filter("formatDate", function(value) {
Vue.prototype.$snackbar = Snackbar
Vue.filter('formatDate', function(value) {
if (value) { if (value) {
return moment(String(value)).format('hh:mm A, DD/MM/YYYY') return moment(String(value)).format("hh:mm A, DD/MM/YYYY");
} }
}) });
new Vue({ new Vue({
nprogress, nprogress,
router, router,
store, store,
i18n, i18n,
render: h => h(App) render: h => h(App)
}).$mount('#app') }).$mount("#app");

4
src/views/Forums.vue
View file

@ -27,12 +27,12 @@
> >
<NoItems connection="true"></NoItems> <NoItems connection="true"></NoItems>
</div> </div>
<div class="column is-7" v-if="!threads.length && !loadingThreads"> <div class="column is-9" v-if="!threads.length && !loadingThreads">
<div class="box"> <div class="box">
<NoItems type="forum threads"></NoItems> <NoItems type="forum threads"></NoItems>
</div> </div>
</div> </div>
<div class="column is-7" v-if="threads.length"> <div class="column is-9" v-if="threads.length">
<div class="content"> <div class="content">
<article <article
class="thread_display box" class="thread_display box"

2
src/views/Home.vue
View file

@ -27,7 +27,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="column is-7" v-if="!loading"> <div class="column is-8" v-if="!loading">
<div class="box"> <div class="box">
<div class="title"> <div class="title">
{{ $t('home.globalWall') }} {{ $t('home.globalWall') }}

4
src/views/Settings.vue
View file

@ -16,14 +16,14 @@
</b-menu-list> </b-menu-list>
</b-menu> </b-menu>
</div> </div>
<div class="column is-7"> <div class="column is-9">
<router-view></router-view> <router-view></router-view>
</div> </div>
</div> </div>
</div> </div>
<div class="container" v-else> <div class="container" v-else>
<div class="columns is-centered"> <div class="columns is-centered">
<div class="column is-5"> <div class="column is-6">
<div class="box has-text-centered"> <div class="box has-text-centered">
<i class="far fa-times-square large-icon"></i> <i class="far fa-times-square large-icon"></i>
<div class="subtitle">{{ $t("generic.notLoggedIn") }}</div> <div class="subtitle">{{ $t("generic.notLoggedIn") }}</div>

7
src/views/Teams.vue
View file

@ -3,9 +3,10 @@
<section class="section"> <section class="section">
<div class="container"> <div class="container">
<div class="columns is-centered is-multiline" v-if="!loading"> <div class="columns is-centered is-multiline" v-if="!loading">
<div v-if="!teams.length" class="column"> <div class="column is-6" v-if="!teams.length">
<br /> <div class="box">
<NoItems :connection="true" type="users"> </NoItems> <NoItems :connection="true" type="teams"> </NoItems>
</div>
</div> </div>
<Pagination <Pagination
class="columns is-multiline" class="columns is-multiline"

163
src/views/Transaction.vue
View file

@ -1,10 +1,16 @@
<template> <template>
<main> <div id="transactions">
<div class="section column"> <section class="section">
<div class="container" v-if="$store.state.user.username">
<div class="columns is-centered">
<div class="column is-6">
<div class="box"> <div class="box">
<h1 class="title">Transaction Log</h1> <div class="title">Transaction Log</div>
<hr />
<NoItems v-if="!transactions.length" type="transactions"></NoItems>
<b-table <b-table
:detail-key='"log-" + transactions.id' v-else
:detail-key="'log-' + transactions.id"
:data="transactions" :data="transactions"
:paginated="isPaginated" :paginated="isPaginated"
:per-page="perPage" :per-page="perPage"
@ -20,47 +26,73 @@
aria-next-label="Next page" aria-next-label="Next page"
aria-previous-label="Previous page" aria-previous-label="Previous page"
aria-page-label="Page" aria-page-label="Page"
aria-current-label="Current page"> >
<b-table-column
<b-table-column field="props.row.text" label="Message" sortable v-slot="props"> field="props.row.text"
label="Message"
sortable
v-slot="props"
>
{{ props.row.text }} {{ props.row.text }}
</b-table-column> </b-table-column>
<b-table-column
<b-table-column field="props.row.priceOfPurchase" label="Price" sortable v-slot="props"> field="props.row.priceOfPurchase"
label="Price"
sortable
v-slot="props"
>
{{ props.row.priceOfPurchase }} {{ props.row.priceOfPurchase }}
</b-table-column> </b-table-column>
<b-table-column field="props.row.createdAt" label="Date" sortable centered v-slot="props"> <b-table-column
field="props.row.createdAt"
label="Date"
sortable
centered
v-slot="props"
>
<span class="tag is-success"> <span class="tag is-success">
{{ new Date(props.row.createdAt).toLocaleDateString() }} {{ new Date(props.row.createdAt).toLocaleDateString() }}
</span> </span>
</b-table-column> </b-table-column>
</b-table> </b-table>
</div> </div>
<NoItems v-if="!transactions.length" type="transactions"></NoItems>
</div> </div>
</main> </div>
</div>
<div class="container" v-else>
<div class="columns is-centered">
<div class="column is-6">
<div class="box has-text-centered">
<i class="far fa-times-square large-icon"></i>
<div class="subtitle">{{ $t("generic.notLoggedIn") }}</div>
</div>
</div>
</div>
</div>
</section>
</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: 'Transactions', name: "Transactions",
components: { components: {
NoItems NoItems,
}, },
data () { data() {
return { return {
search: '', search: "",
transactions: [], transactions: [],
isPaginated: true, isPaginated: true,
isPaginationSimple: false, isPaginationSimple: false,
isPaginationRounded: false, isPaginationRounded: false,
paginationPosition: 'bottom', paginationPosition: "bottom",
defaultSortDirection: 'desc', defaultSortDirection: "desc",
sortIcon: 'arrow-up', sortIcon: "arrow-up",
sortIconSize: 'is-small', sortIconSize: "is-small",
currentPage: 1, currentPage: 1,
perPage: 30, perPage: 30,
defaultOpenedDetails: [1], defaultOpenedDetails: [1],
@ -71,90 +103,103 @@ export default {
limit: 15, limit: 15,
showTeamTab: 0, showTeamTab: 0,
tcreateProd: { tcreateProd: {
username: '', username: "",
name: '', name: "",
loading: false, loading: false,
errors: { errors: {
username: '', username: "",
name: '' name: "",
} },
}, },
roleOptions: [ roleOptions: [
{ name: 'Admins', value: 'admin' }, { name: "Admins", value: "admin" },
{ name: 'transactions', value: 'user' } { name: "transactions", value: "user" },
], ],
roleSelected: ['admin', 'user'], roleSelected: ["admin", "user"],
tableSort: { tableSort: {
column: 'username', column: "username",
sort: 'desc' sort: "desc",
} },
} };
}, },
methods: { methods: {
fetchData () { fetchData() {
if(this.offset === null) return; if (this.offset === null) return;
let url = process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `transactions? let url =
process.env.VUE_APP_APIENDPOINT +
process.env.VUE_APP_APIVERSION +
`/` +
`transactions?
sort=${this.tableSort.column} sort=${this.tableSort.column}
&order=${this.tableSort.sort} &order=${this.tableSort.sort}
&offset=${this.offset} &offset=${this.offset}
`; `;
if(this.roleSelected.length === 1) { if (this.roleSelected.length === 1) {
url += '&role=' + this.roleSelected[0]; url += "&role=" + this.roleSelected[0];
} }
if(this.search.length) { if (this.search.length) {
url += '&search=' + encodeURIComponent(this.search.trim()); url += "&search=" + encodeURIComponent(this.search.trim());
} }
this.loading = true; this.loading = true;
this.axios this.axios
.get(url) .get(url)
.then(res => { .then((res) => {
this.transactions.push(...res.data); this.transactions.push(...res.data);
this.loading = /*loading =*/ false; this.loading = /*loading =*/ false;
//If returned data is less than the limit //If returned data is less than the limit
//then there must be no more pages to paginate //then there must be no more pages to paginate
if(res.data.length < this.limit) { if (res.data.length < this.limit) {
this.offset = null; this.offset = null;
} else { } else {
this.offset+= this.limit; this.offset += this.limit;
} }
}) })
.catch(e => { .catch((e) => {
AjaxErrorHandler(this.$store)(e); AjaxErrorHandler(this.$store)(e);
this.loading = /*loading =*/ false; this.loading = /*loading =*/ false;
}); });
}, },
resetFetchData () { resetFetchData() {
this.offset = 0; this.offset = 0;
this.transactions = []; this.transactions = [];
this.fetchData(); this.fetchData();
}
}, },
getNewertransactions () { },
this.loadingNewer = true getNewertransactions() {
this.loadingNewer = true;
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'transactions' + '?limit=' + this.newtransactions) .get(
.then(res => { process.env.VUE_APP_APIENDPOINT +
this.loadingNewer = false process.env.VUE_APP_APIVERSION +
this.newtransactions = 0 "/" +
"transactions" +
"?limit=" +
this.newtransactions
)
.then((res) => {
this.loadingNewer = false;
this.newtransactions = 0;
this.threads.unshift(...res.data.Threads) this.threads.unshift(...res.data.Threads);
}) })
.catch((e) => { .catch((e) => {
this.loadingNewer = false this.loadingNewer = false;
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
}) });
}, },
mounted () { mounted() {
if (this.$store.state.user.username) {
this.fetchData(); this.fetchData();
} }
} },
};
</script> </script>

4
src/views/User.vue
View file

@ -3,7 +3,7 @@
<section class="section"> <section class="section">
<div class="container"> <div class="container">
<div class="columns is-centered" v-if="exists"> <div class="columns is-centered" v-if="exists">
<div class="column is-3 is-vcentered has-text-centered"> <div class="column is-4 is-vcentered has-text-centered">
<h1 class="title"> <h1 class="title">
{{ user.username }}&nbsp;<Badges {{ user.username }}&nbsp;<Badges
:username="user.username" :username="user.username"
@ -95,7 +95,7 @@
{{ $t("user.marketplace") }}: {{ $t("user.marketplace") }}:
</div> </div>
</div> </div>
<div class="column is-6 is-vcentered has-text-centered"> <div class="column is-8 is-vcentered has-text-centered">
<h1 class="title">{{ $t("user.more") }} {{ user.username }}</h1> <h1 class="title">{{ $t("user.more") }} {{ user.username }}</h1>
<div> <div>
<div class="tabs"> <div class="tabs">

5
src/views/Users.vue
View file

@ -3,10 +3,11 @@
<section class="section"> <section class="section">
<div class="container"> <div class="container">
<div class="columns is-centered is-multiline" v-if="!loading"> <div class="columns is-centered is-multiline" v-if="!loading">
<div v-if="!users.length" class="column"> <div class="column is-6" v-if="!users.length">
<br /> <div class="box">
<NoItems :connection="true" type="users"> </NoItems> <NoItems :connection="true" type="users"> </NoItems>
</div> </div>
</div>
<Pagination <Pagination
class="columns is-multiline" class="columns is-multiline"
v-if="users.length" v-if="users.length"