added Chat-History to matches

src/components/MatchChatHistory.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="chat-history mt-2">
+    <table class="table table-borderless">
+      <tbody>
+        <tr v-for="(m, id) in data.chat" :key="id">
+          <td>
+            {{ ConvertTickToTime(m.tick) }}
+          </td>
+          <td>
+            <img :class="'team-color-' + m.color"
+                 :src="constructAvatarUrl(m.avatar)"
+                 alt="Player avatar"
+                 class="avatar">
+          </td>
+          <td class="name"
+              @click="GoToPlayer(m.steamid64)"
+              :class="m.startSide === 1 ? 'text-info' : 'text-warning'">
+            <i v-if="m.tracked" class="fa fa-dot-circle-o text-success tracked" title="Tracked user"></i>
+            {{ m.player }}
+            <i class="fa fa-external-link"></i>
+          </td>
+          <td>
+            
+          </td>
+          <td class="message">
+            {{ m.message }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import {useStore} from "vuex";
+import {onMounted, reactive} from "vue";
+import {GetChatHistory, constructAvatarUrl, GoToPlayer, ConvertTickToTime} from "@/utils";
+
+export default {
+  name: "MatchChatHistory",
+  setup() {
+    const store = useStore()
+
+    const data = reactive({
+      chat: [],
+    })
+
+    const getChatHistory = async () => {
+      const resData = await GetChatHistory(store, store.state.matchDetails.match_id)
+      if (resData !== null) {
+        data.chat = await setPlayer(sortChatHistory(resData))
+      }
+    }
+
+    const sortChatHistory = (res = {}) => {
+      let arr = []
+      if (res !== {}) {
+        Object.keys(res).forEach(i => {
+          res[i].forEach(o => {
+            let obj = Object.assign({
+              player: i,
+              tick: o.tick,
+              all_chat: o.all_chat,
+              message: o.message
+            })
+            arr.push(obj)
+          })
+        })
+      }
+      arr.sort((a, b) => a.tick - b.tick)
+      return arr
+    }
+
+    const setPlayer = async (chat) => {
+      let arr = []
+      for (const o of chat) {
+        for (const p of store.state.matchDetails.stats) {
+          console.log(p)
+          if (o.player === p.player.steamid64) {
+            const obj = Object.assign({
+              player: p.player.name,
+              steamid64: p.player.steamid64,
+              avatar: p.player.avatar,
+              color: p.color,
+              startSide: p.team_id,
+              tracked: p.player.tracked,
+              tick: o.tick,
+              all_chat: o.all_chat,
+              message: o.message
+            })
+            arr.push(obj)
+          }
+        }
+      }
+      return arr
+    }
+
+    onMounted(() => {
+      getChatHistory()
+    })
+
+    return {data, constructAvatarUrl, GoToPlayer, ConvertTickToTime}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+table td {
+  padding: .5rem;
+}
+.avatar {
+  width: 75%;
+  height: 75%;
+  border-radius: 50%;
+}
+.name {
+  cursor: pointer;
+  text-align: left;
+  width: 200px;
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .tracked {
+    font-size: .8rem;
+  }
+
+  .fa-external-link {
+    color: white;
+    font-size: .8rem;
+    vertical-align: top;
+  }
+}
+.message {
+  width: 40ch;
+  max-width: 40ch;
+}
+</style>