Blog posts

src/components/Navbar.vue

@@ -308,6 +308,7 @@
             <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">{{$t('navbar.more.stats')}}</b-navbar-item>
+            <b-navbar-item tag="router-link" to="/blog">{{$t('navbar.more.blog')}}</b-navbar-item>
           </div>
         </div>
       </template>
@@ -317,28 +318,28 @@
           <img src="https://cdn.kaverti.com/icons/koins.svg">{{$store.state.user.koins}}
         </b-navbar-item>
         <div v-if="!loading">
-        <b-navbar-item v-if="!$store.state.user.username" tag="div">
+          <b-navbar-item v-if="!$store.state.user.username" tag="div">
-          <div class="buttons">
+            <div class="buttons">
-            <b-button @click="registerModal = true" class="button is-primary">
+              <b-button @click="registerModal = true" class="button is-primary">
-              <strong>{{$t('navbar.register')}}</strong>
+                <strong>{{$t('navbar.register')}}</strong>
-            </b-button>
+              </b-button>
-            <b-button @click="loginModal = true" class="button is-light">
+              <b-button @click="loginModal = true" class="button is-light">
-              {{$t('navbar.login')}}
+                {{$t('navbar.login')}}
-            </b-button>
+              </b-button>
-          </div>
+            </div>
-        </b-navbar-item>
+          </b-navbar-item>
-          <b-navbar-dropdown class="is-hoverable navbar-item" :label="$store.state.user.username">
-            <b-navbar-item tag="router-link" :to="'/u/' + $store.state.user.username">{{$t('navbar.user.profile')}}</b-navbar-item>
-            <b-navbar-item @click="settingsModal = true">{{$t('navbar.user.settings')}}</b-navbar-item>
-            <b-navbar-item tag="router-link" to="/transactions">{{$t('navbar.user.transactions')}}</b-navbar-item>
-            <b-navbar-item tag="router-link" to="/character">{{$t('navbar.user.avatar')}}</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 tag="router-link" to="/admin" v-if="$store.state.user.admin">{{$t('navbar.user.admin')}}</b-navbar-item>
-            <b-navbar-item tag="router-link" to="/friends"><b-tag class="is-info" rounded> 1</b-tag>&nbsp; {{$t('navbar.user.friends')}}</b-navbar-item>
-            <b-navbar-item @click="logout()">{{$t('navbar.user.logout')}}</b-navbar-item>
-          </b-navbar-dropdown>
         </div>
+        <b-navbar-dropdown class="is-hoverable" style="padding-right:15px" :label="$store.state.user.username" v-if="$store.state.user.username && !loading">
+          <b-navbar-item tag="router-link" :to="'/u/' + $store.state.user.username">{{$t('navbar.user.profile')}}</b-navbar-item>
+          <b-navbar-item @click="settingsModal = true">{{$t('navbar.user.settings')}}</b-navbar-item>
+          <b-navbar-item tag="router-link" to="/transactions">{{$t('navbar.user.transactions')}}</b-navbar-item>
+          <b-navbar-item tag="router-link" to="/character">{{$t('navbar.user.avatar')}}</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 tag="router-link" to="/admin" v-if="$store.state.user.admin">{{$t('navbar.user.admin')}}</b-navbar-item>
+          <b-navbar-item tag="router-link" to="/friends"><b-tag class="is-info" rounded> 1</b-tag>&nbsp; {{$t('navbar.user.friends')}}</b-navbar-item>
+          <b-navbar-item @click="logout()">{{$t('navbar.user.logout')}}</b-navbar-item>
+        </b-navbar-dropdown>
         <b-navbar-item v-if="loading">
           <div class="fa-1x">
             <i class="fas fa-circle-notch fa-spin"></i>&nbsp;

src/views/Friends.vue

@@ -1,6 +1,6 @@
 <template>
   <main class="section">
-    <h1 class="title has-text-centered">{{name}}</h1>
+    <h1 class="title has-text-centered">{{name}} ({{count}})</h1>
     <div class="tabs is-centered">
       <ul>
         <router-link tag="li" :to="'/friends/pendingCanAccept'" exact><a>{{ $t('friends.pendingCanAccept') }}</a></router-link>
@@ -32,6 +32,7 @@ export default {
       friends: [],
       name: 'Requests to you',
       loading: true,
+      count: 0,
       category: this.$route.params.category
     }
   },
@@ -182,6 +183,7 @@ export default {
           .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/getAll/' + this.category)
           .then(res => {
             this.friends = res.data.rows
+            this.count = res.data.count
             this.loading = false
           })
           .catch((e) => {

src/views/Home.vue

@@ -6,17 +6,54 @@
         <div class="box">
           <img :src="'https://cdn.kaverti.com/user/avatars/full/' + $store.state.user.avatar + '.png'" :alt="$store.state.user.username + '\'s avatar'" width="50%">
         </div>
-        <div class="box">
+        <h1 class="title">Recent Blog Posts</h1>
-          Blog posts go here
+        <div v-if="blogs.length">
-        </div>
+          <div class="box" v-for='(blog) in blogs' :key='"blog-" + blog.id'>
-      </div>
+            <h2 class="subtitle">{{blog.name}}</h2>
-      <div class="column is-6">
+            <p>{{blog.plainText}}</p>
-        <h1 class="title has-text-centered">{{$t('home.globalWall')}}</h1>
-        <div class="card">
-          <div class="card-content">
-            test
           </div>
         </div>
+        <div v-if="!blogs.length" class="box">
+          <NoItems type="blog posts"></NoItems>
+        </div>
+      </div>
+      <div v-if="wallPosts.length">
+        <h1 class="title has-text-centered">{{$t('home.globalWall')}}</h1>
+        <div class="column" v-for='(post) in wallPosts' :key='"globalPost-" + post.id'>
+          <div class="card" v-if="wallPosts.length">
+            <div class="card-content">
+              <article class="media">
+                <figure class="media-left">
+                  <p class="image is-64x64">
+                    <img :src="'https://cdn.kaverti.com/user/avatars/headshot/' + post.fromUser.picture + '.png'">
+                  </p>
+                  By
+                  {{post.fromUser.username}}
+                </figure>
+                <div class="media-content">
+                  <div class="content">
+                    <p>
+                      <strong>{{post.name}}</strong>
+                      <br>
+                    <div
+                        v-html='post.content'
+                    ></div>
+                  </div>
+                  <div class="media-left">
+                    Created At: {{post.createdAt | formatDate()}}
+                  </div>
+                </div>
+              </article>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="column" v-if="!wallPosts.length">
+        <h1 class="title has-text-centered">{{$t('home.globalWall')}}</h1>
+        <div class="box" v-if="!wallPosts.length">
+        <NoItems type="wall posts">
+        </NoItems>
+      </div>
       </div>
     </div>
     <div v-if="!$store.state.user.username">
@@ -26,7 +63,48 @@
 </template>
 
 <script>
+import NoItems from "@/components/NoItems";
+import AjaxErrorHandler from "../../assets/js/errorHandler";
+
 export default {
-  name: 'Home'
+  name: 'Home',
+  components: {
+    NoItems
+  },
+  data() {
+    return {
+      blogs: [],
+      wallOffset: 0,
+      wallPosts: []
+    }
+  },
+  methods: {
+    getWall(initial) {
+      if(initial) {
+        this.wallOffset = 0
+      }
+      this.axios
+          .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `user/GlobalWall?wall=true&offset=` + this.wallOffset)
+          .then(res => {
+            this.loadingPosts = false
+            if(initial) {
+              this.wallPosts = res.data.userWalls
+            } else {
+              this.wallPosts.push(...res.data.userWalls)
+            }
+          })
+    }
+  },
+  mounted() {
+    this.axios
+        .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `blog/posts`)
+        .then(res => {
+          this.blogs = res.data
+        })
+        .catch(e => {
+          AjaxErrorHandler(this.$store)(e)
+        })
+    this.getWall(true)
+  }
 }
 </script>