feat: add stats from nuke

src/components/Stats.vue

@@ -0,0 +1,231 @@
+<template>
+<h1 class="text-2xl font-bold uppercase mb-10">stats management</h1>
+<div class="grid grid-cols-2 gap-x-8">
+  <div class="overflow-x-auto">
+    <table class="table-auto">
+      <thead>
+        <tr>
+          <th class="border border-gray-400 text-left px-8 py-4">Player Name</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Player Name Arabic</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Player Name Japanese</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Image</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Image Full?</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Win Title</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Win %</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Goals Title</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Goals</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Shots Title</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Shots</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Saves Title</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Saves</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Assists Title</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Assists</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr class="item" :class="item === e._id ? 'active' : ''" @click="setItem(e)" v-for="e in store.state.stats" :key="e._id">
+          <td class="border border-gray-400 text-left px-8 py-4">{{ e.name }}</td>
+          <td class="border border-gray-400 text-left px-8 py-4" dir="rtl">{{ e.name_arabic ?? '' }}</td>
+          <td class="border border-gray-400 text-left px-8 py-4">{{ e.name_jpn ?? '' }}</td>
+          <td class="border border-gray-400 text-left px-8 py-4"><img :src="e.image" :alt="e.name"></td>
+          <td class="border border-gray-400 text-left px-8 py-4">{{ e.image_full }}</td>
+          <td class="border border-gray-400 text-left px-8 py-4">{{ e.win_name }}</td>
+          <td class="border border-gray-400 text-left px-8 py-4">{{ e.win }}</td>
+          <td class="border border-gray-400 text-left px-8 py-4">{{ e.goals_name }}</td>
+          <td class="border border-gray-400 text-left px-8 py-4">{{ e.goals }}</td>
+          <td class="border border-gray-400 text-left px-8 py-4">{{ e.shots_name }}</td>
+          <td class="border border-gray-400 text-left px-8 py-4">{{ e.shots }}</td>
+          <td class="border border-gray-400 text-left px-8 py-4">{{ e.saves_name }}</td>
+          <td class="border border-gray-400 text-left px-8 py-4">{{ e.saves }}</td>
+          <td class="border border-gray-400 text-left px-8 py-4">{{ e.assists_name }}</td>
+          <td class="border border-gray-400 text-left px-8 py-4">{{ e.assists }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div>
+    <h2 class="text-lg font-bold">Create / Update</h2>
+    <form name="form" @submit.prevent="form">
+      <p class="mt-4">Player Name</p>
+      <input v-model="name" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
+      <p class="mt-4">Player name arabic (optional)</p>
+      <input v-model="name_arabic" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" />
+      <p class="mt-4">Player name japanese (optional)</p>
+      <input v-model="name_jpn" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" />
+      <p class="mt-4">Image URL</p>
+      <input v-model="image" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" />
+      <p class="mt-4">Image Full Size?</p>
+      <input v-model="image_full" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="checkbox" />
+      <p class="mt-4">Win Title</p>
+      <input v-model="win_name" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" />
+      <p class="mt-4">Win %</p>
+      <input v-model="win" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" />
+      <p class="mt-4">Goals Title</p>
+      <input v-model="goals_name" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" />
+      <p class="mt-4">Goals</p>
+      <input v-model="goals" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" />
+      <p class="mt-4">Shots Title</p>
+      <input v-model="shots_name" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" />
+      <p class="mt-4">Shots</p>
+      <input v-model="shots" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" />
+      <p class="mt-4">Saves Title</p>
+      <input v-model="saves_name" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" />
+      <p class="mt-4">Saves</p>
+      <input v-model="saves" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" />
+      <p class="mt-4">Assists Title</p>
+      <input v-model="assists_name" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" />
+      <p class="mt-4">Assists</p>
+      <input v-model="assists" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" />
+
+      <button class="block w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">Submit</button>
+      <button @click.prevent="delForm" v-if="item" class="block mt-4 w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">Delete</button>
+    </form>
+  </div>
+</div>
+</template>
+
+<script>
+import { inject, ref } from 'vue'
+import { create, update, del } from '../utils/websocket'
+
+export default {
+  setup() {
+    const store = inject('store')
+
+    const item = ref('')
+    const name = ref('')
+    const name_arabic = ref('')
+    const name_jpn = ref('')
+    const image = ref('')
+    const image_full = ref(false)
+    const win_name = ref('')
+    const win = ref('')
+    const goals_name = ref('')
+    const goals = ref('')
+    const shots_name = ref('')
+    const shots = ref('')
+    const saves_name = ref('')
+    const saves = ref('')
+    const assists_name = ref('')
+    const assists = ref('')
+
+    const reset = () => {
+      item.value = ''
+      name.value = ''
+      name_arabic.value = ''
+      name_jpn.value = ''
+      image.value = ''
+      image_full.value = false
+      win_name.value = ''
+      win.value = ''
+      goals_name.value = ''
+      goals.value = ''
+      shots_name.value = ''
+      shots.value = ''
+      saves_name.value = ''
+      saves.value = ''
+      assists_name.value = ''
+      assists.value = ''
+    }
+
+    const setItem = (e) => {
+      item.value = e._id
+      name.value = e.name
+      name_arabic.value = e.name_arabic
+      name_jpn.value = e.name_jpn
+      image.value = e.image
+      image_full.value = e.image_full
+      win_name.value = e.win_name
+      win.value = e.win
+      goals_name.value = e.goals_name
+      goals.value = e.goals
+      shots_name.value = e.shots
+      shots.value = e.shots
+      saves_name.value = e.saves_name
+      saves.value = e.saves
+      assists_name.value = e.assists_name
+      assists.value = e.assists
+    }
+
+    const form = () => {
+      if (item.value !== '') {
+        update('stats', item.value, {
+          name: name.value,
+          name_arabic: name_arabic.value,
+          name_jpn: name_jpn.value,
+          image: image.value,
+          image_full: image_full.value,
+          win_name: win_name.value,
+          win: win.value,
+          goals_name: goals_name.value,
+          goals: goals.value,
+          shots_name: shots_name.value,
+          shots: shots.value,
+          saves_name: saves_name.value,
+          saves: saves.value,
+          assists_name: assists_name.value,
+          assists: assists.value,
+        })
+      } else if (name.value !== '') {
+        create('stats', {
+          name: name.value,
+          name_arabic: name_arabic.value,
+          name_jpn: name_jpn.value,
+          image: image.value,
+          image_full: image_full.value,
+          win_name: win_name.value,
+          win: win.value,
+          goals_name: goals_name.value,
+          goals: goals.value,
+          shots_name: shots_name.value,
+          shots: shots.value,
+          saves_name: saves_name.value,
+          saves: saves.value,
+          assists_name: assists_name.value,
+          assists: assists.value,
+        })
+      }
+      reset()
+    }
+
+    const delForm = () => {
+      if (item.value) {
+        del('stats', item.value)
+        reset()
+      }
+    }
+
+    return {
+      store,
+      item,
+      name,
+      name_arabic,
+      name_jpn,
+      image,
+      image_full,
+      win_name,
+      win,
+      goals_name,
+      goals,
+      shots_name,
+      shots,
+      saves_name,
+      saves,
+      assists_name,
+      assists,
+      setItem,
+      form,
+      delForm,
+    }
+  },
+}
+</script>
+
+<style>
+.item:hover {
+  @apply bg-gray-300 cursor-pointer;
+}
+.item.active {
+  @apply bg-gray-400;
+}
+</style>

src/components/Streams.vue

@@ -12,7 +12,7 @@
           <th class="border border-gray-400 text-left px-8 py-4">Event</th>
           <th class="border border-gray-400 text-left px-8 py-4">Matches</th>
           <th class="border border-gray-400 text-left px-8 py-4">Casters</th>
-          <th class="border border-gray-400 text-left px-8 py-4">Hosts</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Stats</th>
         </tr>
       </thead>
       <tbody>
@@ -41,10 +41,10 @@
             </table>
           </td>
           <td class="border border-gray-400 text-left px-8 py-4">
-            <table v-if="e.hosts">
+            <table v-if="e.stats">
               <tbody>
-                <tr v-for="p in e.hosts" :key="p">
+                <tr v-for="p in e.stats" :key="p">
-                  <td>{{ store.state.casters.filter(x => x._id === p)[0]?.name }}</td>
+                  <td class="border border-gray-400">{{ store.state.stats.filter(x => x._id === p)[0]?.name }}</td>
                 </tr>
               </tbody>
             </table>
@@ -76,11 +76,11 @@
         <option v-for="r in store.state.casters" :key="r._id" :value="r._id">{{ r.name }}</option>
       </select>
       <button @click.prevent="addCaster()" class="block w-64 h-10 my-4 text-white bg-red-700 rounded-lg hover:bg-red-600">Add caster</button>
-      <p class="mt-4">Hosts</p>
+      <p class="mt-4">Stats</p>
       <select v-for="(n, i) in hosts.length" :key="i" v-model="hosts[n - 1]" class="block my-4 border border-gray-500 rounded-lg bg-white w-64 h-8 px-4">
-        <option v-for="r in store.state.casters" :key="r._id" :value="r._id">{{ r.name }}</option>
+        <option v-for="r in store.state.stats" :key="r._id" :value="r._id" :selected="hosts[i] == r._id">{{ r.name }}</option>
       </select>
-      <button @click.prevent="addHost()" class="block w-64 h-10 my-4 text-white bg-red-700 rounded-lg hover:bg-red-600">Add host</button>
+      <button @click.prevent="addHost()" class="block w-64 h-10 my-4 text-white bg-red-700 rounded-lg hover:bg-red-600">Add Stat</button>
       <button class="block w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">Submit</button>
       <button @click.prevent="delForm" v-if="item" class="block mt-4 w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">Delete</button>
     </form>
@@ -134,8 +134,8 @@ export default {
           casters.value.push(m)
         }
       })
-      e.hosts.forEach(m => {
+      e.stats.forEach(m => {
-        if (hosts.value.length !== e.hosts.length) {
+        if (hosts.value.length !== e.stats.length) {
           hosts.value.push(m)
         }
       })
@@ -161,7 +161,7 @@ export default {
           event: event.value,
           matches: matches.value,
           casters: casters.value,
-          hosts: hosts.value,
+          stats: hosts.value,
         })
       } else if (name.value !== '') {
         create('streams', {
@@ -171,7 +171,7 @@ export default {
           event: event.value,
           matches: matches.value,
           casters: casters.value,
-          hosts: hosts.value,
+          stats: hosts.value,
         })
       }
       reset()

src/store.js

@@ -19,6 +19,7 @@ const state = reactive({
   matches: [],
   casters: [],
   hosts: [],
+  stats: [],
   streams: [],
   streamsFull: [],
   brackets: [],

src/utils/websocket.js

@@ -13,6 +13,7 @@ const channels = [
   'matches',
   'casters',
   'hosts',
+  'stats',
   'streams',
   'brackets',
 ]

src/views/Home.vue

@@ -7,7 +7,7 @@
     <p class="nav-item" @click="nav = 'rosters'" :class="nav === 'rosters' ? 'active' : ''">Rosters</p>
     <p class="nav-item" @click="nav = 'matches'" :class="nav === 'matches' ? 'active' : ''">Matches</p>
     <p class="nav-item" @click="nav = 'casters'" :class="nav === 'casters' ? 'active' : ''">Casters / Hosts</p>
-    <!-- <p class="nav-item" @click="nav = 'hosts'" :class="nav === 'hosts' ? 'active' : ''">Hosts</p> -->
+    <p class="nav-item" @click="nav = 'stats'" :class="nav === 'stats' ? 'active' : ''">Stats</p>
     <p class="nav-item" @click="nav = 'streams'" :class="nav === 'streams' ? 'active' : ''">Streams</p>
     <p class="nav-item" @click="nav = 'brackets'" :class="nav === 'brackets' ? 'active' : ''">Brackets</p>
     <img class="block w-16 h-16 absolute bottom-10" src="https://cms.aplesports.com/storage/uploads/2020/04/23/5ea178d6570e1APL_New.png" alt="APL Logo">
@@ -36,6 +36,7 @@
     <Rosters v-if="nav === 'rosters'" />
     <Matches v-if="nav === 'matches'" />
     <Casters v-if="nav === 'casters'" />
+    <Stats v-if="nav === 'stats'" />
     <Streams v-if="nav === 'streams'" />
     <Brackets v-if="nav === 'brackets'" />
   </div>
@@ -50,6 +51,7 @@ import Rosters from '@/components/Rosters.vue'
 import Matches from '@/components/Matches.vue'
 import Casters from '@/components/Casters.vue'
 import Hosts from '@/components/Hosts.vue'
+import Stats from '@/components/Stats.vue'
 import Streams from '@/components/Streams.vue'
 import Brackets from '@/components/Brackets.vue'
 
@@ -60,6 +62,7 @@ export default {
     Matches,
     Casters,
     Hosts,
+    Stats,
     Streams,
     Brackets,
   },