features

package.json

@@ -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",

src/components/Badges.vue

@@ -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',

src/components/LocalConn.vue

@@ -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>

src/components/Navbar.vue

@@ -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>

src/components/NoItems.vue

@@ -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>

src/locales/en.json

@@ -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": {

src/router/index.js

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

src/views/Transaction.vue

@@ -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>

src/views/Users.vue

@@ -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>
+</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>

yarn.lock

@@ -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"