add brackets

package.json

@@ -1,9 +1,9 @@
 {
   "name": "slapdash",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "author": "Ayush Mukherjee",
   "description": "Dashboard for APL-Nuke cum APL-Boost data manager",
-  "private": true,
+  "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

src/components/Brackets.vue

@@ -0,0 +1,135 @@
+<template>
+<h1 class="text-2xl font-bold uppercase mb-10">streams 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">ID</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Name</th>
+          <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>
+        </tr>
+      </thead>
+      <tbody>
+        <tr class="item" v-for="e in store.state.brackets" :key="e._id" :class="item === e._id ? 'active' : ''" @click="setItem(e)">
+          <td class="border border-gray-400 text-left px-8 py-4">{{ e._id }}</td>
+          <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">{{ store.state.events.filter(x => x._id === e.event)[0].name }}</td>
+          <td class="border border-gray-400 text-left">
+            <table v-if="e.matches" class="border border-gray-400 border-collapse mx-auto w-full h-full">
+              <tbody>
+                <tr v-for="p in e.matches" :key="p">
+                  <td class="border border-gray-400">{{ store.state.matches.filter((x) => x._id === p)[0]?.type || '' }}: {{ store.state.matches.filter((x) => x._id === p)[0]?.blue?.name || '' }} VS {{ store.state.matches.filter((x) => x._id === p)[0]?.orange?.name || '' }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </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">Bracket 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">Event</p>
+      <select v-model="event" 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.events" :key="r._id" :value="r._id">{{ r.name }}</option>
+      </select>
+      <p class="mt-4">Matches</p>
+      <select v-for="(n, i) in matches.length" :key="i" v-model="matches[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.matches" :key="r._id" :value="r._id"><span v-if="r">{{ r.type }}: {{ r.blue.name }} VS {{ r.orange.name }}</span></option>
+      </select>
+      <button @click.prevent="addMatch()" class="block w-64 h-10 my-4 text-white bg-red-700 rounded-lg hover:bg-red-600">Add match</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>
+  </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 event = ref('')
+    const matches = ref([])
+
+    const addMatch = () => {
+      matches.value.push('')
+    }
+
+    const setItem = (e) => {
+      reset()
+      item.value = e._id
+      name.value = e.name
+      event.value = e.event
+      e.matches.forEach(m => {
+        if (matches.value.length !== e.matches.length) {
+          matches.value.push(m)
+        }
+      })
+    }
+
+    const reset = () => {
+      item.value = ''
+      name.value = ''
+      event.value = ''
+      matches.value = []
+    }
+
+    const form = () => {
+      if (item.value !== '') {
+        update('brackets', item.value, {
+          name: name.value,
+          event: event.value,
+          matches: matches.value,
+        })
+      } else if (name.value !== '') {
+        create('brackets', {
+          name: name.value,
+          event: event.value,
+          matches: matches.value,
+        })
+      }
+      reset()
+    }
+
+    const delForm = () => {
+      if (item.value) {
+        del('brackets', item.value)
+        reset()
+      }
+    }
+    
+    return {
+      store,
+      item,
+      name,
+      event,
+      matches,
+      setItem,
+      addMatch,
+      form,
+      delForm,
+    }
+  },
+}
+</script>
+
+<style>
+.item:hover {
+  @apply bg-gray-300 cursor-pointer;
+}
+.item.active {
+  @apply bg-gray-400;
+}
+</style>

src/store.js

@@ -17,6 +17,7 @@ const state = reactive({
   hosts: [],
   streams: [],
   streamsFull: [],
+  brackets: [],
   overlayStream: null,
   server: false,
 })

src/utils/websocket.js

@@ -14,6 +14,7 @@ const channels = [
   'casters',
   'hosts',
   'streams',
+  'brackets',
 ]
 
 const channelEvents = [

src/views/Home.vue

@@ -9,6 +9,7 @@
     <p class="nav-item" @click="nav = 'casters'" :class="nav === 'casters' ? 'active' : ''">Casters</p>
     <p class="nav-item" @click="nav = 'hosts'" :class="nav === 'hosts' ? 'active' : ''">Hosts</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">
   </div>
   <div class="bg-gray-200 w-full px-10 py-4 overflow-y-auto">
@@ -33,6 +34,7 @@
     <Casters v-if="nav === 'casters'" />
     <Hosts v-if="nav === 'hosts'" />
     <Streams v-if="nav === 'streams'" />
+    <Brackets v-if="nav === 'brackets'" />
   </div>
 </div>
 </template>
@@ -46,6 +48,7 @@ import Matches from '@/components/Matches.vue'
 import Casters from '@/components/Casters.vue'
 import Hosts from '@/components/Hosts.vue'
 import Streams from '@/components/Streams.vue'
+import Brackets from '@/components/Brackets.vue'
 
 export default {
   components: {
@@ -55,6 +58,7 @@ export default {
     Casters,
     Hosts,
     Streams,
+    Brackets,
   },
   setup() {
     const store = inject('store')