fixed bug in player side-bar

src/components/PlayerSideInfo.vue

@@ -20,15 +20,13 @@
       </ul>
     </div>
 
-    <div v-else class="side-info-box most-played-with">
+    <div v-else-if="mostMatesLoading" class="side-info-box most-played-with">
       <div class="heading">
         <h5>Most played with</h5>
       </div>
       <hr>
       <ul class="list-unstyled placeholder-glow">
         <li class="placeholder col-11"></li>
-        <li class="placeholder col-11"></li>
-        <li class="placeholder col-11"></li>
       </ul>
     </div>
 
@@ -52,24 +50,12 @@
       </ul>
     </div>
 
-    <div v-else-if="props.player_meta.most_mates && props.player_meta.most_mates[0].total >= 1" class="side-info-box best-mate">
+    <div v-else-if="bestMatesLoading" class="side-info-box best-mate">
       <div class="heading">
         <h5>Best Mate <span class="text-muted">(by winrate)</span></h5>
       </div>
       <hr>
       <ul class="list-unstyled placeholder-glow">
-        <li class="col-11">Not enough Data</li>
-      </ul>
-    </div>
-
-    <div v-else class="side-info-box best-mate">
-      <div class="heading">
-        <h5>Best Mate <span class="text-muted">(by winrate)</span></h5>
-      </div>
-      <hr>
-      <ul class="list-unstyled placeholder-glow">
-        <li class="placeholder col-11"></li>
-        <li class="placeholder col-11"></li>
         <li class="placeholder col-11"></li>
       </ul>
     </div>
@@ -94,15 +80,13 @@
       {{ setDmgGraphWidth() }}
     </div>
 
-    <div v-else class="side-info-box preferred-weapons">
+    <div v-else-if="weaponsLoading" class="side-info-box preferred-weapons">
       <div class="heading">
         <h5>Weapons <span class="text-muted">(by dmg)</span></h5>
       </div>
       <hr>
       <ul class="list-unstyled placeholder-glow">
         <li class="placeholder col-11"></li>
-        <li class="placeholder col-11"></li>
-        <li class="placeholder col-11"></li>
       </ul>
     </div>
 
@@ -126,24 +110,12 @@
       </ul>
     </div>
 
-    <div v-else-if="props.player_meta.total_maps && !props.player_meta.win_maps" class="side-info-box best-map">
+    <div v-else-if="mapsLoading" class="side-info-box best-map">
       <div class="heading">
         <h5>Best Map <span class="text-muted">(by winrate)</span></h5>
       </div>
       <hr>
       <ul class="list-unstyled placeholder-glow">
-        <li class="col-11">Not enough Data</li>
-      </ul>
-    </div>
-
-    <div v-else class="side-info-box best-map">
-      <div class="heading">
-        <h5>Best Map <span class="text-muted">(by winrate)</span></h5>
-      </div>
-      <hr>
-      <ul class="list-unstyled placeholder-glow">
-        <li class="placeholder col-11"></li>
-        <li class="placeholder col-11"></li>
         <li class="placeholder col-11"></li>
       </ul>
     </div>
@@ -166,6 +138,11 @@ export default {
   setup(props) {
     const displayCounter = 3
 
+    const mostMatesLoading = ref(true)
+    const bestMatesLoading = ref(true)
+    const weaponsLoading = ref(true)
+    const mapsLoading = ref(true)
+
     const data = reactive({
       best_maps: [],
       best_weapons_tmp: [],
@@ -223,9 +200,22 @@ export default {
 
       if (data.best_maps.length > displayCounter)
         data.best_maps.splice(displayCounter, data.best_maps.length - displayCounter)
+
+      if (!props.player_meta.most_mates) {
+        mostMatesLoading.value = false
+      }
+      if (!props.player_meta.best_mates) {
+        bestMatesLoading.value = false
+      }
+      if (!props.player_meta.win_maps) {
+        mapsLoading.value = false
+      }
+      if (!props.player_meta.eq_map || !props.player_meta.weapon_dmg) {
+        weaponsLoading.value = false
+      }
     })
 
-    return {props, data, setDmgGraphWidth, GoToPlayer, constructAvatarUrl, FixMapName}
+    return {props, data, weaponsLoading, mapsLoading, mostMatesLoading, bestMatesLoading, setDmgGraphWidth, GoToPlayer, constructAvatarUrl, FixMapName}
   }
 }
 </script>

src/utils/ApiRequests.js

@@ -56,6 +56,8 @@ export const TrackMe = async (id64, authcode, sharecode = '') => {
     // const res = await axios
     //   .post(`${API_URL}/player/${id64}/track`, `authcode=${authcode}&sharecode=${sharecode}`)
 
+    // TODO: Needs testing
+
     const res = await axios({
       method: 'post',
       url: `${API_URL}/player/${id64}/track`,

src/views/Player.vue

@@ -268,8 +268,6 @@ export default {
           }
 
           await SetPlayerData()
-
-          console.log(store.state.playerDetails)
         }
       }
     }
@@ -327,7 +325,7 @@ export default {
     })
 
     watch(() => data.playerMeta, () => {
-
+      console.log(data.playerMeta)
     })
 
     onMounted(async () => {
@@ -339,6 +337,8 @@ export default {
       data.playerMeta = await GetPlayerMeta(props.id, displayCounter)
 
       scrollToPos(store.state.scroll_state)
+
+      console.log(store.state.playerDetails)
     })
 
     onBeforeUnmount(() => {