not sure when the last one was

package.json

@@ -1,6 +1,8 @@
 {
-  "name": "apl-slapdash",
+  "name": "slapdash",
-  "version": "0.1.0",
+  "version": "1.2.0",
+  "author": "Ayush Mukherjee",
+  "description": "Dashboard for APL-Nuke cum APL-Boost data manager",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/background.js

@@ -6,7 +6,7 @@ import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
 import path from 'path'
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
-import { start, status, stop, state, sub } from './utils/server'
+import { start, status, stop, state, sub, sendAll } from './utils/server'
 
 // Scheme must be registered before the app is ready
 protocol.registerSchemesAsPrivileged([
@@ -62,13 +62,13 @@ app.on('activate', () => {
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.on('ready', async () => {
-  if (isDevelopment && !process.env.IS_TEST) {
-    // Install Vue Devtools
   try {
-      await installExtension(VUEJS_DEVTOOLS)
+    await installExtension('ljjemllljcmogpfapbkkighbhhppjdbg')
   } catch (e) {
     console.error('Vue Devtools failed to install:', e.toString())
   }
+  if (isDevelopment && !process.env.IS_TEST) {
+    // Install Vue Devtools
   }
   createWindow()
 })
@@ -103,3 +103,8 @@ ipcMain.handle('server', async (e, arg) => {
     stop()
   }
 })
+
+ipcMain.handle('massSend', async () => {
+  console.log('Sending refreshed data')
+  sendAll()
+})

src/components/Casters.vue

@@ -0,0 +1,118 @@
+<template>
+<h1 class="text-2xl font-bold uppercase mb-10">casters management</h1>
+<div class="grid grid-cols-2 gap-x-8">
+  <table class="table-auto">
+    <thead>
+      <tr>
+        <th class="border border-gray-400 text-left px-8 py-4">Name Tag</th>
+        <th class="border border-gray-400 text-left px-8 py-4">Real Name</th>
+        <th class="border border-gray-400 text-left px-8 py-4">Twitter</th>
+        <th class="border border-gray-400 text-left px-8 py-4">Image</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="item" :class="item === e._id ? 'active' : ''" @click="setItem(e)" v-for="e in store.state.casters" :key="e._id">
+        <td class="border border-gray-400 text-left px-8 py-4">{{ e.username }}</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">{{ e.twitter }}</td>
+        <td class="border border-gray-400 text-left px-8 py-4"><img :src="e.image" :alt="e.name"></td>
+      </tr>
+    </tbody>
+  </table>
+  <div>
+    <h2 class="text-lg font-bold">Create / Update</h2>
+    <form name="form" @submit.prevent="form">
+      <p class="mt-4">Caster name tag</p>
+      <input v-model="username" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
+      <p class="mt-4">Caster real 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">Caster twitter</p>
+      <input v-model="twitter" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
+      <p class="mt-4">Caster 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" />
+      <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 username = ref('')
+    const name = ref('')
+    const twitter = ref('')
+    const image = ref('')
+
+    const reset = () => {
+      item.value = ''
+      username.value = ''
+      name.value = ''
+      twitter.value = ''
+      image.value = ''
+    }
+
+    const setItem = (e) => {
+      item.value = e._id
+      username.value = e.username
+      name.value = e.name
+      twitter.value = e.twitter
+      image.value = e.image
+    }
+
+    const form = () => {
+      if (item.value !== '') {
+        update('casters', item.value, {
+          username: username.value,
+          name: name.value,
+          twitter: twitter.value,
+          image: image.value,
+        })
+      } else if (name.value !== '') {
+        create('casters', {
+          username: username.value,
+          name: name.value,
+          twitter: twitter.value,
+          image: image.value,
+        })
+      }
+      reset()
+    }
+
+    const delForm = () => {
+      if (item.value) {
+        del('casters', item.value)
+        reset()
+      }
+    }
+
+    return {
+      store,
+      item,
+      username,
+      name,
+      twitter,
+      image,
+      setItem,
+      form,
+      delForm,
+    }
+  },
+}
+</script>
+
+<style>
+.item:hover {
+  @apply bg-gray-300 cursor-pointer;
+}
+.item.active {
+  @apply bg-gray-400;
+}
+</style>

src/components/Hosts.vue

@@ -0,0 +1,118 @@
+<template>
+<h1 class="text-2xl font-bold uppercase mb-10">hosts management</h1>
+<div class="grid grid-cols-2 gap-x-8">
+  <table class="table-auto">
+    <thead>
+      <tr>
+        <th class="border border-gray-400 text-left px-8 py-4">Name Tag</th>
+        <th class="border border-gray-400 text-left px-8 py-4">Real Name</th>
+        <th class="border border-gray-400 text-left px-8 py-4">Twitter</th>
+        <th class="border border-gray-400 text-left px-8 py-4">Image</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="item" :class="item === e._id ? 'active' : ''" @click="setItem(e)" v-for="e in store.state.hosts" :key="e._id">
+        <td class="border border-gray-400 text-left px-8 py-4">{{ e.username }}</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">{{ e.twitter }}</td>
+        <td class="border border-gray-400 text-left px-8 py-4"><img :src="e.image" :alt="e.name"></td>
+      </tr>
+    </tbody>
+  </table>
+  <div>
+    <h2 class="text-lg font-bold">Create / Update</h2>
+    <form name="form" @submit.prevent="form">
+      <p class="mt-4">Host name tag</p>
+      <input v-model="username" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
+      <p class="mt-4">Host real 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">Host twitter</p>
+      <input v-model="twitter" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
+      <p class="mt-4">Host 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" />
+      <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 username = ref('')
+    const name = ref('')
+    const twitter = ref('')
+    const image = ref('')
+
+    const reset = () => {
+      item.value = ''
+      username.value = ''
+      name.value = ''
+      twitter.value = ''
+      image.value = ''
+    }
+
+    const setItem = (e) => {
+      item.value = e._id
+      username.value = e.username
+      name.value = e.name
+      twitter.value = e.twitter
+      image.value = e.image
+    }
+
+    const form = () => {
+      if (item.value !== '') {
+        update('hosts', item.value, {
+          username: username.value,
+          name: name.value,
+          twitter: twitter.value,
+          image: image.value,
+        })
+      } else if (name.value !== '') {
+        create('hosts', {
+          username: username.value,
+          name: name.value,
+          twitter: twitter.value,
+          image: image.value,
+        })
+      }
+      reset()
+    }
+
+    const delForm = () => {
+      if (item.value) {
+        del('hosts', item.value)
+        reset()
+      }
+    }
+
+    return {
+      store,
+      item,
+      username,
+      name,
+      twitter,
+      image,
+      setItem,
+      form,
+      delForm,
+    }
+  },
+}
+</script>
+
+<style>
+.item:hover {
+  @apply bg-gray-300 cursor-pointer;
+}
+.item.active {
+  @apply bg-gray-400;
+}
+</style>

src/components/Matches.vue

@@ -5,14 +5,14 @@
     <table class="table-auto">
       <thead>
         <tr>
-          <th class="border border-gray-400 text-left px-8 py-4">Type</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Round name</th>
           <th class="border border-gray-400 text-left px-8 py-4">Blue</th>
           <th class="border border-gray-400 text-left px-8 py-4">Orange</th>
+          <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">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">Game scores</th>
         </tr>
       </thead>
       <tbody>
@@ -20,11 +20,12 @@
           <td class="border border-gray-400 text-left px-8 py-4">{{ e.type }}</td>
           <td class="border border-gray-400 text-left px-8 py-4">{{ e.blue.name }}</td>
           <td class="border border-gray-400 text-left px-8 py-4">{{ e.orange.name }}</td>
+          <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.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">
+          <!-- <td class="border border-gray-400 text-left px-8 py-4">
             <table v-if="e.games">
               <tbody>
                 <tr v-for="(g, idx) in e.games" :key="g._id">
@@ -32,7 +33,7 @@
                 </tr>
               </tbody>
             </table>
-          </td>
+          </td> -->
         </tr>
       </tbody>
     </table>
@@ -40,7 +41,7 @@
   <div>
     <h2 class="text-lg font-bold">Create / Update</h2>
     <form name="form" @submit.prevent="form">
-      <p class="mt-4">Match type</p>
+      <p class="mt-4">Round name</p>
       <input v-model="type" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
       <p class="mt-4">Blue team</p>
       <select v-model="blue" class="block my-4 border border-gray-500 rounded-lg bg-white w-64 h-8 px-4">
@@ -50,16 +51,21 @@
       <select v-model="orange" 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.rosters" :key="r._id" :value="r._id">{{ r.name }}</option>
       </select>
+      <p class="mt-4">Current game</p>
+      <input v-model="current" class="my-4 border border-gray-500 rounded-lg w-6 h-6" type="checkbox" />
       <p class="mt-4">Started</p>
-      <input :checked="started" class="my-4 border border-gray-500 rounded-lg w-6 h-6" type="checkbox" />
+      <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 :checked="done" class="my-4 border border-gray-500 rounded-lg w-6 h-6" type="checkbox" />
+      <input v-model="done" 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 />
-      <!-- <p v-if="item" class="mt-4">Series Score</p> -->
+      <fieldset v-if="item" class="border border-gray-400 rounded px-6 my-4">
-      <!-- <input v-if="item" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="number" required /> -->
+      <legend>Series Score</legend>
-      <!-- <p v-if="item" class="mt-4">Game Scores</p> -->
+      <p class="mt-4">Blue team</p>
-
+      <input v-model="blueSeries" 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="orangeSeries" 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>
@@ -79,18 +85,24 @@ export default {
     const type = ref('')
     const blue = ref('')
     const orange = ref('')
+    const current = ref(false)
     const started = ref(false)
     const done = ref(false)
     const bestof = ref(0)
+    const blueSeries = ref(0)
+    const orangeSeries = ref(0)
 
     const setItem = (e) => {
       item.value = e._id
       type.value = e.type
-      blue.value = e.blue
+      blue.value = e.blue._id
-      orange.value = e.orange
+      orange.value = e.orange.
+      current.value = e.current
       started.value = e.started
       done.value = e.done
-      bestof.value = e.bestof
+      bestof.value = e.bestOf
+      blueSeries.value = e.series.blue
+      orangeSeries.value = e.series.orange
     }
 
     const reset = () => {
@@ -98,10 +110,12 @@ export default {
       type.value = ''
       blue.value = ''
       orange.value = ''
-      orange.value = ''
+      current.value = false
       started.value = false
       done.value = false
-      bestof.value = ''
+      bestof.value = 0
+      blueSeries.value = 0
+      orangeSeries.value = 0
     }
 
     const form = () => {
@@ -110,15 +124,21 @@ export default {
           type: type.value,
           blue: blue.value,
           orange: orange.value,
+          current: current.value,
           started: started.value,
           done: done.value,
           bestOf: bestof.value,
+          series: {
+            blue: blueSeries.value,
+            orange: orangeSeries.value,
+          }
         })
       } else if (type.value !== '') {
         create('matches', {
           type: type.value,
           blue: blue.value,
           orange: orange.value,
+          current: current.value,
           started: started.value,
           done: done.value,
           bestOf: bestof.value,
@@ -140,6 +160,9 @@ export default {
       type,
       blue,
       orange,
+      blueSeries,
+      orangeSeries,
+      current,
       started,
       done,
       bestof,

src/components/Rosters.vue

@@ -32,12 +32,12 @@
       <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">Roster logo</p>
       <input v-model="logo" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
-      <fieldset v-for="(n, i) in players.length" :key="i" class="border border-gray-400 rounded px-6 my-4">
+      <fieldset v-for="(n, i) in playersLocal.length" :key="i" class="border border-gray-400 rounded px-6 my-4">
         <legend>Player Info</legend>
         <p class="mt-4">Player name</p>
-        <input v-model="players[n - 1].name" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
+        <input v-model="playersLocal[n - 1].name" @change="logThis" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
         <p class="mt-4">Player account name</p>
-        <input v-model="players[n - 1].account" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
+        <input v-model="playersLocal[n - 1].account" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
       </fieldset>
       <button @click.prevent="addPlayer()" class="block w-64 h-10 my-4 text-white bg-red-700 rounded-lg hover:bg-red-600">Add player</button>
       <button class="block w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">Submit</button>
@@ -48,7 +48,7 @@
 </template>
 
 <script>
-import { inject, ref } from 'vue'
+import { inject, ref, toRaw } from 'vue'
 import { create, update, del } from '../utils/websocket'
 
 export default {
@@ -58,27 +58,41 @@ export default {
     const item = ref('')
     const name = ref('')
     const logo = ref('')
-    const players = ref([])
+    const playersLocal = ref([])
+
+    console.log(playersLocal)
 
     const setItem = (e) => {
       item.value = e._id
       name.value = e.name
       logo.value = e.logo
-      players.value = e.players
+      e.players.forEach(p => {
+        if (playersLocal.value.length !== e.players.length) {
+          playersLocal.value.push({
+            _id: p._id,
+            name: p.name,
+            account: p.account,
+          })
+        }
+      })
     }
     
     const addPlayer = () => {
-      players.value.push({
+      playersLocal.value.push({
         name: '',
         account: '', 
       })
     }
 
+    const logThis = () => {
+      console.log(store.state.rosters)
+    }
+
     const reset = () => {
       item.value = ''
       name.value = ''
       logo.value = ''
-      players.value = []
+      playersLocal.value = []
     }
 
     const form = () => {
@@ -86,13 +100,13 @@ export default {
         update('rosters', item.value, {
           name: name.value,
           logo: logo.value,
-          players: players.value,
+          players: playersLocal.value,
         })
       } else if (name.value !== '') {
         create('rosters', {
           name: name.value,
           logo: logo.value,
-          players: players.value,
+          players: playersLocal.value,
         })
       }
       reset()
@@ -110,11 +124,12 @@ export default {
       item,
       name,
       logo,
-      players,
+      playersLocal,
       setItem,
       form,
       delForm,
       addPlayer,
+      logThis,
     }
   },
 }

src/components/Streams.vue

@@ -0,0 +1,192 @@
+<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">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>
+          <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>
+        </tr>
+      </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.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>
+          <td class="border border-gray-400 text-left px-8 py-4">
+            <table v-if="e.casters">
+              <tbody>
+                <tr v-for="p in e.casters" :key="p">
+                  <td>{{ store.state.casters.filter(x => x._id === p)[0]?.name }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </td>
+          <td class="border border-gray-400 text-left px-8 py-4">
+            <table v-if="e.hosts">
+              <tbody>
+                <tr v-for="p in e.hosts" :key="p">
+                  <td>{{ store.state.hosts.filter(x => x._id === p)[0]?.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">Stream 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>
+      <p class="mt-4">Casters</p>
+      <select v-for="(n, i) in casters.length" :key="i" v-model="casters[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>
+      </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>
+      <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.hosts" :key="r._id" :value="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 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 casters = ref([])
+    const hosts = ref([])
+
+    const addMatch = () => {
+      matches.value.push('')
+    }
+
+    const addCaster = () => {
+      casters.value.push('')
+    }
+
+    const addHost = () => {
+      hosts.value.push('')
+    }
+
+    const setItem = (e) => {
+      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)
+        }
+      })
+      e.casters.forEach(m => {
+        if (casters.value.length !== e.casters.length) {
+          casters.value.push(m)
+        }
+      })
+      e.hosts.forEach(m => {
+        if (hosts.value.length !== e.hosts.length) {
+          hosts.value.push(m)
+        }
+      })
+    }
+
+    const reset = () => {
+      item.value = ''
+      name.value = ''
+      event.value = ''
+      matches.value = []
+      casters.value = []
+      hosts.value = []
+    }
+
+    const form = () => {
+      if (item.value !== '') {
+        update('streams', item.value, {
+          name: name.value,
+          event: event.value,
+          matches: matches.value,
+          casters: casters.value,
+          hosts: hosts.value,
+        })
+      } else if (name.value !== '') {
+        create('streams', {
+          name: name.value,
+          event: event.value,
+          matches: matches.value,
+          casters: casters.value,
+          hosts: hosts.value,
+        })
+      }
+      reset()
+    }
+
+    const delForm = () => {
+      if (item.value) {
+        del('streams', item.value)
+        reset()
+      }
+    }
+    
+    return {
+        store,
+        item,
+        name,
+        event,
+        matches,
+        casters,
+        hosts,
+        setItem,
+        addMatch,
+        addCaster,
+        addHost,
+        form,
+        delForm,
+    }
+  },
+}
+</script>
+
+<style>
+.item:hover {
+  @apply bg-gray-300 cursor-pointer;
+}
+.item.active {
+  @apply bg-gray-400;
+}
+</style>

src/preload.js

@@ -0,0 +1,3 @@
+import { ipcRenderer } from 'electron'
+
+window.ipcRenderer = ipcRenderer

src/store.js

@@ -1,8 +1,9 @@
-import { reactive } from 'vue'
+import { reactive, readonly } from 'vue'
 import axios from 'axios'
 import { handleMsg, sendSub } from './utils/websocket'
 
 const state = reactive({
+  name: '',
   token: '',
   session: '',
   loggedIn: false,
@@ -19,12 +20,14 @@ const state = reactive({
 })
 
 const methods = {
-  authenticate: async () => {
+  authenticate: async (token) => {
+    console.log(token)
     return axios.post('http://178.79.128.135:5000/api/v1', {
-      token: state.token,
+      token,
     })
       .then((res) => {
         state.session = res.data.session
+        state.name = res.data.name
         state.loggedIn = true
         return true
       })

src/utils/server.js

@@ -0,0 +1,91 @@
+import ws  from 'ws'
+import { v4 } from 'uuid'
+import store from '../store'
+
+let wss = null
+
+const connections = {}
+
+export const sub = []
+
+let overlayStream = null
+
+export const state = (data) => {
+    overlayStream = data
+}
+
+export const start = () => {
+    if (!store.state.server) {
+        store.state.server = true
+
+        console.warn('WS SERVER STARTED.')
+
+        wss = new ws.Server({
+            port: 8001,
+        })
+    
+        wss.on('connection', handle)
+    }
+
+}
+
+export const stop = () => {
+    Object.keys(connections).forEach((k) => {
+        delete connections[k]
+    })
+    wss.close(() => {
+        wss = null
+    })
+    console.warn('WS SERVER CLOSED')
+}
+
+export const status = () => {
+    if (wss !== null)
+        return true
+    return false
+}
+
+export const sendAll = () => {
+    Object.values(connections).forEach(v => {
+        sendData(v)
+    })
+}
+
+const handle = (w) => {
+    console.warn('NEW WS CONNECTION')
+    const id = v4()
+    connections[id] = w
+
+    sendData(w)
+
+    w.on('message', msg => onMsg(msg, id))
+
+    w.on('close', () => {
+        delete connections[id]
+    })
+}
+
+const onMsg = (msg, id) => {
+    const d = JSON.parse(msg)
+    if (d.hasOwnProperty('event')) {
+        if (d.event === 'read') {
+            sendData(connections[id])
+        } else if (d.event === 'update') {
+            console.warn('RECEIVED UPDATE')
+            sub.forEach(x => {
+                x(d.data)
+            })
+        }
+    }
+}
+
+const sendData = (w) => {
+    console.log('SENDING DATA')
+    if (overlayStream !== null) {
+        console.log(overlayStream)
+        w.send(JSON.stringify({
+            event: 'read',
+            data: overlayStream,
+        }))
+    }
+}

src/utils/websocket.js

@@ -1,5 +1,4 @@
 import store from '../store'
-import { sendAll } from './server'
 
 const events = [
   'create',
@@ -28,6 +27,8 @@ channels.forEach((x) => {
   })
 })
 
+export const sub = []
+
 export const handleMsg = (msg) => {
   if (channelEvents.indexOf(msg.event) !== -1) {
     const ev = msg.event.split(':')
@@ -36,10 +37,12 @@ export const handleMsg = (msg) => {
     console.log(c, e)
     if (e === 'read') {
       store.state[c] = msg.data
+      console.log(msg.data)
     } else if (e === 'full') {
       store.state.streamsFull = msg.data
-      console.log(msg.data)
+      sub.forEach(x => {
-      sendAll()
+        x()
+      })
     }
   } else {
     console.warn('received unknown event!', msg)

src/views/Home.vue

@@ -13,7 +13,7 @@
   </div>
   <div class="bg-gray-200 w-full px-10 py-4 overflow-y-auto">
     <div v-if="nav === 'dash'" class="flex flex-col justify-center items-center h-full">
-      <h1 class="text-4xl font-bold mb-4"> Welcome, Ayush</h1>
+      <h1 class="text-4xl font-bold mb-4"> Welcome, {{ store.state.name }}</h1>
       <p class="text-xl">Select Stream for ingame overlay</p>
       <select v-model="streamid" class="block my-4 border border-gray-500 rounded-lg bg-white w-64 h-8 px-4">
         <option v-for="s in store.state.streams" :value="s._id" :key="s._id">{{ s.name }}</option>
@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import { update } from '../utils/websocket'
+import { update, sub } from '../utils/websocket'
 import { inject, ref } from 'vue'
 import Events from '@/components/Events.vue'
 import Rosters from '@/components/Rosters.vue'
@@ -74,9 +74,23 @@ export default {
 
     const streamid = ref('')
 
+    const sendData = async () => {
+      await window.ipcRenderer.invoke('massSend')
+    }
+
+    const updateServer = async () => {
+      if (streamid.value) {
+        const s = store.state.streamsFull.filter(x => x._id === streamid.value)[0]
+        store.state.overlayStream = s
+        await window.ipcRenderer.invoke('state', JSON.stringify(s))
+      }
+    }
+
+    sub.push(updateServer)
+    sub.push(sendData)
+
     window.ipcRenderer.on('test', (e, msg) => {
       const data = JSON.parse(msg)
-      const m = store.state.matches.filter(x => x._id === data.id)[0]
 
       // const games = m.hasOwnProperty('games') ? m.games.push(data.game) : [data.game]
 
@@ -86,15 +100,18 @@ export default {
         series: data.series,
       })
       
+      updateServer()
+
+      window.ipcRenderer.invoke('massSend')
+
       console.warn('RUNNING UPDATE!', data)
     })
 
     const serverDo = (x) => {
       if (x === true) {
-        console.log(streamid.value)
+        const s = store.state.streamsFull.filter(x => x._id === streamid.value)[0]
-        store.state.overlayStream = store.state.streamsFull.filter(x => x._id === streamid.value)[0]
+        store.state.overlayStream = s
-        console.log(store.state.overlayStream)
+        window.ipcRenderer.invoke('state', JSON.stringify(s))
-        window.ipcRenderer.invoke('state', JSON.stringify(store.state.overlayStream))
         if (!store.state.server) {
           window.ipcRenderer.invoke('server', true)
           store.state.server = true

src/views/Login.vue

@@ -1,10 +1,10 @@
 <template>
-<div class="w-screen h-screen mx-auto py-10 flex flex-col justify-center items-center">
+<div class="bg-gray-200 w-screen h-screen mx-auto py-10 flex flex-col justify-center items-center">
   <h1 class="text-2xl uppercase text-red-600 font-black text-center">APL Slapdash</h1>
   <h2 class="my-4 text-lg">Welcome to Slapdash!</h2>
   <p class="my-8">Please enter your token to continue</p>
   <div class="input w-96 flex flex-col justify-center items-center">
-    <input :disabled="disable" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="password" v-model="store.state.token" name="token" id="token">
+    <input :disabled="disable" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="password" v-model="token" name="token" id="token">
     <button :disabled="disable" @click.prevent="doAuth" class="block w-64 h-8 text-white bg-red-700 rounded-lg hover:bg-red-600">Submit</button>
   </div>
 </div>
@@ -18,12 +18,13 @@ export default {
   setup() {
     const store = inject('store')
     const disable = ref(false)
+    const token = ref('')
     const router = useRouter()
 
     const doAuth = async () => {
       try {
         disable.value = true
-        const res = await store.methods.authenticate()
+        const res = await store.methods.authenticate(token.value)
         if (res) {
           router.push({ name: 'Home' })
         }
@@ -37,6 +38,7 @@ export default {
     return {
       store,
       disable,
+      token,
       doAuth,
     }
   },

vue.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    pluginOptions: {
+        electronBuilder: {
+            preload: 'src/preload.js'
+        }
+    }
+}