housekeeping, reconnect on ws break, change server

package.json

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

src/components/Streams.vue

@@ -40,7 +40,7 @@
             <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>
+                  <td>{{ store.state.casters.filter(x => x._id === p)[0]?.name }}</td>
                 </tr>
               </tbody>
             </table>
@@ -70,7 +70,7 @@
       <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>
+        <option v-for="r in store.state.casters" :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>

src/store.js

@@ -4,6 +4,8 @@ import { handleMsg, sendSub } from './utils/websocket'
 
 const token = window.localStorage.getItem('token')
 
+const server = 'slap.aplesports.com:5000'
+
 const state = reactive({
   name: '',
   token: token || '',
@@ -22,10 +24,13 @@ const state = reactive({
   server: false,
 })
 
+let interval = 0
+
 const methods = {
   authenticate: async (token) => {
+    state.session = null
     window.localStorage.setItem('token', token)
-    return axios.post('http://178.79.128.135:5000/api/v1', {
+    return axios.post(`http://${server}/api/v1`, {
       token,
     })
       .then((res) => {
@@ -35,14 +40,29 @@ const methods = {
         return true
       })
   },
-  connect: (uri) => {
-    state.ws = new WebSocket(`ws://178.79.128.135:5000/ws/${state.session}`)
-    state.ws.onopen = () => {
-      sendSub(state.ws)
-    }
-    state.ws.onmessage = (e) => {
-      const data = JSON.parse(e.data)
-      handleMsg(data)
+  connect: () => {
+    if (state.session !== null) {
+      state.ws = new WebSocket(`ws://${server}/ws/${state.session}`)
+      state.ws.onopen = () => {
+        clearInterval(interval)
+        sendSub(state.ws)
+        state.ws.onclose = () => {
+          console.warn('Lost connection to nuke. Attempting to reconnect every 5 seconds...')
+          interval = setInterval(() => {
+            methods.authenticate(state.token)
+              .then(() => {
+                methods.connect()
+              })
+              .catch((_) => {
+                console.warn('Error reconnecting! Trying again')
+              })
+          }, 5000)
+        }
+      }
+      state.ws.onmessage = (e) => {
+        const data = JSON.parse(e.data)
+        handleMsg(data)
+      }
     }
   }
 }

src/views/Home.vue

@@ -6,8 +6,8 @@
     <p class="nav-item" @click="nav = 'events'" :class="nav === 'events' ? 'active' : ''">Events</p>
     <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</p>
-    <p class="nav-item" @click="nav = 'hosts'" :class="nav === 'hosts' ? 'active' : ''">Hosts</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 = '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">
@@ -32,7 +32,6 @@
     <Rosters v-if="nav === 'rosters'" />
     <Matches v-if="nav === 'matches'" />
     <Casters v-if="nav === 'casters'" />
-    <Hosts v-if="nav === 'hosts'" />
     <Streams v-if="nav === 'streams'" />
     <Brackets v-if="nav === 'brackets'" />
   </div>