Display UI version if possible

src/components/layout/NavBar.vue

@@ -29,6 +29,7 @@
           </li>
           <li v-if="loggedIn" class="nav-item">
             <b-nav-item-dropdown right>
+              <b-dropdown-item>V: {{ getUiVersion }}</b-dropdown-item>
               <template #button-content>
                 <b-avatar size="2em" button>FT</b-avatar>
               </template>
@@ -51,7 +52,7 @@
 <script lang="ts">
 import { Component, Vue, Watch } from 'vue-property-decorator';
 import LoginModal from '@/views/LoginModal.vue';
-import { State, Action, namespace } from 'vuex-class';
+import { State, Action, namespace, Getter } from 'vuex-class';
 import userService from '@/shared/userService';
 import BootswatchThemeSelect from '@/components/BootswatchThemeSelect.vue';
 import { LayoutActions, LayoutGetters } from '@/store/modules/layout';
@@ -75,6 +76,10 @@ export default class NavBar extends Vue {
 
   @Action setLoggedIn;
 
+  @Action loadUIVersion;
+
+  @Getter getUiVersion!: string;
+
   @ftbot.Action ping;
 
   @ftbot.Action getState;
@@ -99,6 +104,7 @@ export default class NavBar extends Vue {
 
   mounted() {
     this.ping();
+    this.loadUIVersion();
     this.pingInterval = window.setInterval(this.ping, 60000);
 
     if (this.loggedIn) {

src/store/index.ts

@@ -3,7 +3,7 @@ import Vuex from 'vuex';
 
 import userService from '@/shared/userService';
 import { getCurrentTheme, getTheme, storeCurrentTheme } from '@/shared/themes';
-import { AxiosInstance } from 'axios';
+import axios, { AxiosInstance } from 'axios';
 import ftbotModule, { BotStoreGetters } from './modules/ftbot';
 import alertsModule from './modules/alerts';
 import layoutModule from './modules/layout';
@@ -22,6 +22,7 @@ export default new Vuex.Store({
     autoRefresh: JSON.parse(localStorage.getItem(AUTO_REFRESH) || '{}'),
     isBotOnline: false,
     currentTheme: initCurrentTheme,
+    uiVersion: 'dev',
   },
   getters: {
     isDarkTheme(state) {
@@ -34,6 +35,9 @@ export default new Vuex.Store({
     getChartTheme(state, getters) {
       return getters.isDarkTheme ? 'dark' : 'light';
     },
+    getUiVersion(state) {
+      return state.uiVersion;
+    },
   },
   modules: {
     ftbot: ftbotModule,
@@ -63,6 +67,9 @@ export default new Vuex.Store({
       storeCurrentTheme(newTheme);
       state.currentTheme = newTheme;
     },
+    setUIVersion(state, uiVersion: string) {
+      state.uiVersion = uiVersion;
+    },
   },
   actions: {
     setCurrentTheme({ commit }, newTheme: string) {
@@ -85,6 +92,18 @@ export default new Vuex.Store({
     refreshOnce({ dispatch }) {
       dispatch('ftbot/getVersion');
     },
+    async loadUIVersion({ commit }) {
+      if (process.env.NODE_ENV !== 'development') {
+        try {
+          const result = await axios.get('/ui_version');
+          const { version } = result.data;
+
+          commit('setUIVersion', version);
+        } catch (error) {
+          //
+        }
+      }
+    },
     async refreshAll({ dispatch, state, commit }, forceUpdate = false) {
       if (state.refreshing) {
         return;