add bracket reset thing to matches

package.json

@@ -1,6 +1,6 @@
 {
   "name": "slapdash",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "author": "Ayush Mukherjee",
   "description": "Dashboard for APL-Nuke cum APL-Boost data manager",
   "private": true,

src/components/Matches.vue

@@ -11,8 +11,10 @@
           <th class="border border-gray-400 text-left px-8 py-4">Current</th>
           <th class="border border-gray-400 text-left px-8 py-4">Started</th>
           <th class="border border-gray-400 text-left px-8 py-4">Done</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Reset</th>
           <th class="border border-gray-400 text-left px-8 py-4">Best Of</th>
           <th class="border border-gray-400 text-left px-8 py-4">Series score</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Reset score</th>
         </tr>
       </thead>
       <tbody>
@@ -23,8 +25,10 @@
           <td class="border border-gray-400 text-left px-8 py-4">{{ e.current }}</td>
           <td class="border border-gray-400 text-left px-8 py-4">{{ e.started }}</td>
           <td class="border border-gray-400 text-left px-8 py-4">{{ e.done }}</td>
+          <td class="border border-gray-400 text-left px-8 py-4">{{ e.reset }}</td>
           <td class="border border-gray-400 text-left px-8 py-4">{{ e.bestOf }}</td>
           <td class="border border-gray-400 text-left px-8 py-4">{{ e.series.blue }} - {{ e.series.orange }}</td>
+          <td class="border border-gray-400 text-left px-8 py-4">{{ e.resets.blue }} - {{ e.resets.orange }}</td>
           <!-- <td class="border border-gray-400 text-left px-8 py-4">
             <table v-if="e.games">
               <tbody>
@@ -57,6 +61,8 @@
       <input v-model="started" class="my-4 border border-gray-500 rounded-lg w-6 h-6" type="checkbox" />
       <p class="mt-4">Done</p>
       <input v-model="done" class="my-4 border border-gray-500 rounded-lg w-6 h-6" type="checkbox" />
+      <p class="mt-4">Reset</p>
+      <input v-model="reset" class="my-4 border border-gray-500 rounded-lg w-6 h-6" type="checkbox" />
       <p class="mt-4">Best Of</p>
       <input v-model="bestof" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="number" required />
       <fieldset v-if="item" class="border border-gray-400 rounded px-6 my-4">
@@ -66,6 +72,13 @@
         <p class="mt-4">Orange team</p>
         <input v-model="orangeSeries" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="number" required />
       </fieldset>
+      <fieldset v-if="item && reset === true" class="border border-gray-400 rounded px-6 my-4">
+        <legend>Reset Score</legend>
+        <p class="mt-4">Blue team</p>
+        <input v-model="blueReset" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="number" required />
+        <p class="mt-4">Orange team</p>
+        <input v-model="orangeReset" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="number" required />
+      </fieldset>
       <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>
@@ -88,9 +101,12 @@ export default {
     const current = ref(false)
     const started = ref(false)
     const done = ref(false)
+    const reset = ref(0)
     const bestof = ref(0)
     const blueSeries = ref(0)
     const orangeSeries = ref(0)
+    const blueReset = ref(0)
+    const orangeReset = ref(0)
 
     const setItem = (e) => {
       item.value = e._id
@@ -100,12 +116,15 @@ export default {
       current.value = e.current
       started.value = e.started
       done.value = e.done
+      reset.value = e.reset
       bestof.value = e.bestOf
       blueSeries.value = e.series.blue
       orangeSeries.value = e.series.orange
+      blueReset.value = e.resets.blue
+      orangeReset.value = e.resets.orange
     }
 
-    const reset = () => {
+    const resetf = () => {
       item.value = ''
       type.value = ''
       blue.value = ''
@@ -113,9 +132,12 @@ export default {
       current.value = false
       started.value = false
       done.value = false
+      reset.value = false
       bestof.value = 0
       blueSeries.value = 0
       orangeSeries.value = 0
+      blueReset.value = 0
+      orangeReset.value = 0
     }
 
     const form = () => {
@@ -127,11 +149,16 @@ export default {
           current: current.value,
           started: started.value,
           done: done.value,
+          reset: reset.value,
           bestOf: bestof.value,
           series: {
             blue: blueSeries.value,
             orange: orangeSeries.value,
-          }
+          },
+          resets: {
+            blue: blueReset.value,
+            orange: orangeReset.value,
+          },
         })
       } else if (type.value !== '') {
         create('matches', {
@@ -144,13 +171,13 @@ export default {
           bestOf: bestof.value,
         })
       }
-      reset()
+      resetf()
     }
     
     const delForm = () => {
       if (item.value) {
         del('matches', item.value)
-        reset()
+        resetf()
       }
     }
 
@@ -162,9 +189,12 @@ export default {
       orange,
       blueSeries,
       orangeSeries,
+      blueReset,
+      orangeReset,
       current,
       started,
       done,
+      reset,
       bestof,
       setItem,
       form,

src/components/Streams.vue

@@ -5,6 +5,7 @@
     <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>
@@ -14,6 +15,7 @@
       </thead>
       <tbody>
         <tr class="item" v-for="e in store.state.streams" :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">

src/store.js

@@ -2,7 +2,7 @@ import { reactive, readonly } from 'vue'
 import axios from 'axios'
 import { handleMsg, sendSub } from './utils/websocket'
 
-const token = localStorage.getItem('token')
+const token = window.localStorage.getItem('token')
 
 const state = reactive({
   name: '',
@@ -23,7 +23,7 @@ const state = reactive({
 
 const methods = {
   authenticate: async (token) => {
-    localStorage.setItem('token', token)
+    window.localStorage.setItem('token', token)
     return axios.post('http://178.79.128.135:5000/api/v1', {
       token,
     })

src/utils/server.js

@@ -1,6 +1,5 @@
 import ws  from 'ws'
 import { v4 } from 'uuid'
-import store from '../store'
 
 let wss = null
 
@@ -15,9 +14,6 @@ export const state = (data) => {
 }
 
 export const start = () => {
-    if (!store.state.server) {
-        store.state.server = true
-
     console.warn('WS SERVER STARTED.')
 
     wss = new ws.Server({
@@ -27,8 +23,6 @@ export const start = () => {
     wss.on('connection', handle)
 }
 
-}
-
 export const stop = () => {
     Object.keys(connections).forEach((k) => {
         delete connections[k]