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

42
src/App.vue
View file

@ -20,28 +20,30 @@ 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 (token) {
this.$store.commit("setToken", token);
} }
if (JSON.parse(localStorage.getItem("wind404"))) {
var wind = JSON.parse(localStorage.getItem("wind404")); if (wind) {
this.$store.commit("setWind", wind);
} else { } else {
// eslint-disable-next-line no-redeclare this.$store.commit("setWind", wind);
var wind = false;
} }
this.$store.commit("setWind", wind);
Object.assign(axios.defaults, {
headers: { Authorization: this.$store.state.user.token },
});
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",
}); });
} }
this.axios
if (this.$store.state.user.username) {
this.axios
.get( .get(
process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIENDPOINT +
process.env.VUE_APP_APIVERSION + process.env.VUE_APP_APIVERSION +
"/" + "/" +
"userinfo" "userinfo"
@ -63,12 +65,14 @@ export default {
type: "is-warning", type: "is-warning",
}); });
}); });
this.axios.get(
process.env.VUE_APP_APIENDPOINT + this.axios.get(
process.env.VUE_APP_APIVERSION + process.env.VUE_APP_APIENDPOINT +
"/" + 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 {

816
src/components/Navbar.vue
View file

File diff suppressed because it is too large Load diff

117
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. image: false,
linkify: true, // Autoconvert URL-like text to links typographer: true,
image: false, quotes: "“”‘’"
});
// Enable some language-neutral replacement + quotes beautification md.disable("image");
typographer: true, hljs.registerLanguage("json", json);
// Double + single quotes replacement pairs, when typographer enabled,
// and smartquotes on. Could be either a String or an Array.
//
// 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 if (value) {
Vue.filter('formatDate', function(value) { return moment(String(value)).format("hh:mm A, DD/MM/YYYY");
if (value) { }
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"

247
src/views/Transaction.vue
View file

@ -1,66 +1,98 @@
<template> <template>
<main> <div id="transactions">
<div class="section column"> <section class="section">
<div class="box"> <div class="container" v-if="$store.state.user.username">
<h1 class="title">Transaction Log</h1> <div class="columns is-centered">
<b-table <div class="column is-6">
:detail-key='"log-" + transactions.id' <div class="box">
:data="transactions" <div class="title">Transaction Log</div>
:paginated="isPaginated" <hr />
:per-page="perPage" <NoItems v-if="!transactions.length" type="transactions"></NoItems>
:current-page.sync="currentPage" <b-table
:pagination-simple="isPaginationSimple" v-else
:pagination-position="paginationPosition" :detail-key="'log-' + transactions.id"
:default-sort-direction="defaultSortDirection" :data="transactions"
:pagination-rounded="isPaginationRounded" :paginated="isPaginated"
:sort-icon="sortIcon" :per-page="perPage"
:opened-detailed="defaultOpenedDetails" :current-page.sync="currentPage"
:sort-icon-size="sortIconSize" :pagination-simple="isPaginationSimple"
default-sort="user.first_name" :pagination-position="paginationPosition"
aria-next-label="Next page" :default-sort-direction="defaultSortDirection"
aria-previous-label="Previous page" :pagination-rounded="isPaginationRounded"
aria-page-label="Page" :sort-icon="sortIcon"
aria-current-label="Current page"> :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"
>
<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.text" label="Message" sortable v-slot="props"> <b-table-column
{{ props.row.text }} field="props.row.priceOfPurchase"
</b-table-column> label="Price"
sortable
v-slot="props"
>
{{ props.row.priceOfPurchase }}
</b-table-column>
<b-table-column
<b-table-column field="props.row.priceOfPurchase" label="Price" sortable v-slot="props"> field="props.row.createdAt"
{{ props.row.priceOfPurchase }} label="Date"
</b-table-column> sortable
centered
<b-table-column field="props.row.createdAt" label="Date" sortable centered v-slot="props"> 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>
</div>
</div> </div>
<NoItems v-if="!transactions.length" type="transactions"></NoItems> <div class="container" v-else>
</div> <div class="columns is-centered">
</main> <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 () { getNewertransactions() {
this.loadingNewer = true 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() {
this.fetchData(); if (this.$store.state.user.username) {
} 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">

7
src/views/Users.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="!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"