Add bot connection indicator

Signed-off-by: Knut Ahlers <knut@ahlers.me>

src/components/_headNav.vue

@@ -24,6 +24,14 @@
       >
         <ul class="navbar-nav me-auto mb-2 mb-lg-0" />
         <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+          <li
+            v-if="!socketConnected"
+            class="nav-item d-flex align-content-center"
+          >
+            <span class="navbar-text me-2">
+              <i class="fas fa-cloud fa-fw text-warning" />
+            </span>
+          </li>
           <li
             v-if="isLoggedIn"
             class="nav-item dropdown"
@@ -58,6 +66,7 @@
 </template>
 
 <script lang="ts">
+import BusEventTypes from '../helpers/busevents'
 import { defineComponent } from 'vue'
 import { Dropdown } from 'bootstrap'
 
@@ -68,6 +77,12 @@ export default defineComponent({
     },
   },
 
+  data() {
+    return {
+      socketConnected: false,
+    }
+  },
+
   methods: {
     logout() {
       this.bus.emit('logout')
@@ -75,6 +90,14 @@ export default defineComponent({
   },
 
   mounted() {
+    this.bus.on(BusEventTypes.NotifySocketConnected, () => {
+      this.socketConnected = true
+    })
+
+    this.bus.on(BusEventTypes.NotifySocketDisconnected, () => {
+      this.socketConnected = false
+    })
+
     if (this.isLoggedIn) {
       new Dropdown(this.$refs.userMenuToggle as Element)
     }

src/helpers/busevents.ts

@@ -7,6 +7,8 @@ enum BusEventTypes {
   FetchError = 'fetchError',
   LoadingData = 'loadingData',
   LoginProcessing = 'loginProcessing',
+  NotifySocketConnected = 'notifySocketConnected',
+  NotifySocketDisconnected = 'notifySocketDisconnected',
   RaffleChanged = 'raffleChanged',
   RaffleEntryChanged = 'raffleEntryChanged',
   Toast = 'toast',

src/helpers/configNotify.ts

@@ -1,12 +1,14 @@
+import BusEventTypes from './busevents'
+
 class ConfigNotifyListener {
   private backoff: number = 100
 
-  private listener: Function
+  private eventListener: Function
 
   private socket: WebSocket | null = null
 
   constructor(listener: Function) {
-    this.listener = listener
+    this.eventListener = listener
     this.connect()
   }
 
@@ -21,6 +23,7 @@ class ConfigNotifyListener {
 
     this.socket.onopen = () => {
       console.debug('[notify] Socket connected')
+      this.eventListener(BusEventTypes.NotifySocketConnected)
     }
 
     this.socket.onmessage = evt => {
@@ -30,12 +33,13 @@ class ConfigNotifyListener {
       this.backoff = 100 // We've received a message, reset backoff
 
       if (msg.msg_type !== 'ping') {
-        this.listener(msg.msg_type)
+        this.eventListener(msg.msg_type)
       }
     }
 
     this.socket.onclose = evt => {
       console.debug(`[notify] Socket was closed wasClean=${evt.wasClean}`)
+      this.eventListener(BusEventTypes.NotifySocketDisconnected)
       this.updateBackoffAndReconnect()
     }
   }