Add online indicator

src/components/layout/NavBar.vue

@@ -16,6 +16,11 @@
         </b-navbar-nav>
         <!-- Right aligned nav items -->
         <b-navbar-nav class="ml-auto">
+          <li class="nav-item text-secondary mr-2">
+            <b-nav-text class="verticalCenter">
+              {{ isBotOnline ? 'Online' : 'Offline' }}
+            </b-nav-text>
+          </li>
           <li class="nav-item" v-if="loggedIn">
             <b-nav-item-dropdown right>
               <template v-slot:button-content>
@@ -48,6 +53,8 @@ import BootswatchThemeSelect from '@/components/BootswatchThemeSelect.vue';
 export default class NavBar extends Vue {
   @State loggedIn!: boolean;
 
+  @State isBotOnline!: boolean;
+
   @Mutation setLoggedIn;
 
   logout(): void {
@@ -57,7 +64,7 @@ export default class NavBar extends Vue {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .logo {
   vertical-align: middle;
   height: 30px;
@@ -74,4 +81,9 @@ export default class NavBar extends Vue {
 .nav-link:active {
   color: white;
 }
+.verticalCenter {
+  align-items: center;
+  display: inline-flex;
+  height: 100%;
+}
 </style>

src/store/index.ts

@@ -13,7 +13,8 @@ export default new Vuex.Store({
   state: {
     ping: '',
     loggedIn: userService.loggedIn(),
-    autoRefresh: JSON.parse(localStorage.getItem(AUTO_REFRESH) || 'false'),
+    autoRefresh: JSON.parse(localStorage.getItem(AUTO_REFRESH) || '{}'),
+    isBotOnline: true,
   },
   modules: {
     ftbot: ftbotModule,
@@ -31,12 +32,22 @@ export default new Vuex.Store({
     setAutoRefresh(state, newRefreshValue: boolean) {
       state.autoRefresh = newRefreshValue;
     },
+    setIsBotOnline(state, isBotOnline: boolean) {
+      state.isBotOnline = isBotOnline;
+    },
   },
   actions: {
     setAutoRefresh({ commit }, newRefreshValue) {
       commit('setAutoRefresh', newRefreshValue);
       localStorage.setItem(AUTO_REFRESH, JSON.stringify(newRefreshValue));
     },
+    setIsBotOnline({ commit, dispatch }, isOnline) {
+      commit('setIsBotOnline', isOnline);
+      if (isOnline === false) {
+        console.log('disabling autorun');
+        dispatch('setAutoRefresh', false);
+      }
+    },
     refreshOnce({ dispatch }) {
       dispatch('ftbot/getVersion');
     },