Move reloading from ReloadComponent to Store

src/components/ftbot/ReloadControl.vue

@@ -15,8 +15,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Watch } from 'vue-property-decorator';
-import { Getter, State, namespace } from 'vuex-class';
+import { Component, Vue } from 'vue-property-decorator';
+import { Getter, namespace } from 'vuex-class';
 import RefreshIcon from 'vue-material-design-icons/Refresh.vue';
 
 const ftbot = namespace('ftbot');
@@ -50,14 +50,14 @@ export default class ReloadControl extends Vue {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   @ftbot.Action setAutoRefresh!: (newValue: boolean) => void;
 
-  @ftbot.Action refreshSlow;
-
-  @ftbot.Action refreshFrequent;
-
   @ftbot.Action refreshAll;
 
   @ftbot.Action refreshOnce;
 
+  @ftbot.Action startRefresh;
+
+  @ftbot.Action stopRefresh;
+
   get autoRefreshLoc() {
     return this.autoRefresh;
   }
@@ -65,49 +65,6 @@ export default class ReloadControl extends Vue {
   set autoRefreshLoc(newValue: boolean) {
     this.setAutoRefresh(newValue);
   }
-
-  startRefresh(runNow: boolean) {
-    if (this.loggedIn !== true) {
-      console.log('Not logged in.');
-      return;
-    }
-    console.log('Starting automatic refresh.');
-    if (runNow) {
-      this.refreshFrequent(false);
-    }
-    if (this.autoRefresh) {
-      this.refreshInterval = window.setInterval(() => {
-        this.refreshFrequent();
-      }, 5000);
-    }
-    if (runNow) {
-      this.refreshSlow(true);
-    }
-    if (this.autoRefresh) {
-      this.refreshIntervalSlow = window.setInterval(() => {
-        this.refreshSlow(false);
-      }, 60000);
-    }
-  }
-
-  stopRefresh() {
-    console.log('Stopping automatic refresh.');
-    if (this.refreshInterval) {
-      window.clearInterval(this.refreshInterval);
-    }
-    if (this.refreshIntervalSlow) {
-      window.clearInterval(this.refreshIntervalSlow);
-    }
-  }
-
-  @Watch('autoRefresh')
-  watchAutoRefresh(val) {
-    if (val) {
-      this.startRefresh(true);
-    } else {
-      this.stopRefresh();
-    }
-  }
 }
 </script>
 

src/components/layout/NavBar.vue

@@ -6,6 +6,8 @@
         <span class="navbar-brand-title d-sm-none d-md-inline">Freqtrade UI</span>
       </router-link>
 
+      <!-- TODO: For XS breakpoint, this should be here...  -->
+      <!-- <ReloadControl class="mr-3" /> -->
       <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
 
       <b-collapse id="nav-collapse" is-nav>
@@ -26,8 +28,10 @@
           >
           <BootswatchThemeSelect />
         </b-navbar-nav>
+
         <!-- Right aligned nav items -->
         <b-navbar-nav class="ml-auto">
+          <ReloadControl class="mr-3" />
           <li class="nav-item text-secondary mr-2">
             <b-nav-text class="verticalCenter small mr-2">
               {{ botName || 'No bot selected' }}
@@ -81,13 +85,14 @@ import { BotStoreGetters } from '@/store/modules/ftbot';
 import Favico from 'favico.js';
 import { OpenTradeVizOptions, SettingsGetters } from '@/store/modules/settings';
 import { MultiBotStoreGetters } from '@/store/modules/botStoreWrapper';
+import ReloadControl from '@/components/ftbot/ReloadControl.vue';
 
 const ftbot = namespace('ftbot');
 const layoutNs = namespace('layout');
 const uiSettingsNs = namespace('uiSettings');
 
 @Component({
-  components: { LoginModal, BootswatchThemeSelect },
+  components: { LoginModal, BootswatchThemeSelect, ReloadControl },
 })
 export default class NavBar extends Vue {
   pingInterval: number | null = null;

src/store/modules/botStoreWrapper.ts

@@ -9,6 +9,8 @@ interface FTMultiBotState {
   availableBots: BotDescriptors;
   autoRefresh: boolean;
   refreshing: boolean;
+  refreshInterval: number | null;
+  refreshIntervalSlow: number | null;
 }
 
 export enum MultiBotStoreGetters {
@@ -27,6 +29,8 @@ export default function createBotStore(store) {
     availableBots: {},
     autoRefresh: JSON.parse(localStorage.getItem(AUTO_REFRESH) || '{}'),
     refreshing: false,
+    refreshInterval: null,
+    refreshIntervalSlow: null,
   };
 
   // All getters working on all bots should be prefixed with all.
@@ -91,6 +95,12 @@ export default function createBotStore(store) {
         delete state.availableBots[botId];
       }
     },
+    setRefreshInterval(state: FTMultiBotState, interval: number | null) {
+      state.refreshInterval = interval;
+    },
+    setRefreshIntervalSlow(state: FTMultiBotState, interval: number | null) {
+      state.refreshIntervalSlow = interval;
+    },
   };
 
   const actions = {
@@ -125,8 +135,16 @@ export default function createBotStore(store) {
     selectBot({ commit }, botId: string) {
       commit('selectBot', botId);
     },
-    setAutoRefresh({ commit }, newRefreshValue) {
+    setAutoRefresh({ dispatch, commit }, newRefreshValue) {
+      console.log('setAutoRefresh', newRefreshValue);
       commit('setAutoRefresh', newRefreshValue);
+      // TODO: Investigate this -
+      // this ONLY works if ReloadControl is only visible once,otherwise it triggers twice
+      if (newRefreshValue) {
+        dispatch('startRefresh', true);
+      } else {
+        dispatch('stopRefresh');
+      }
       localStorage.setItem(AUTO_REFRESH, JSON.stringify(newRefreshValue));
     },
     async refreshAll({ dispatch, state, commit }, forceUpdate = false) {
@@ -177,6 +195,46 @@ export default function createBotStore(store) {
     refreshOnce({ dispatch }) {
       dispatch('getVersion');
     },
+    startRefresh({ getters, state, dispatch, commit }, runNow: boolean) {
+      console.log('starting refresh');
+      // Start refresh timer
+      if (getters.hasBots !== true) {
+        console.log('Not logged in.');
+        return;
+      }
+      console.log('Starting automatic refresh.');
+      if (runNow) {
+        dispatch('refreshFrequent', false);
+      }
+      if (state.autoRefresh && !state.refreshInterval) {
+        // Set interval for refresh
+        const refreshInterval = window.setInterval(() => {
+          dispatch('refreshFrequent');
+        }, 5000);
+        commit('setRefreshInterval', refreshInterval);
+      }
+      if (runNow) {
+        dispatch('refreshSlow', true);
+      }
+      if (state.autoRefresh && !state.refreshIntervalSlow) {
+        const refreshIntervalSlow = window.setInterval(() => {
+          dispatch('refreshSlow', false);
+        }, 60000);
+        commit('setRefreshIntervalSlow', refreshIntervalSlow);
+      }
+    },
+    stopRefresh({ state, commit }: { state: FTMultiBotState; commit: any }) {
+      console.log('Stopping automatic refresh.');
+      if (state.refreshInterval) {
+        window.clearInterval(state.refreshInterval);
+        commit('setRefreshInterval', null);
+      }
+      if (state.refreshIntervalSlow) {
+        window.clearInterval(state.refreshIntervalSlow);
+        commit('setRefreshIntervalSlow', null);
+      }
+    },
+
     pingAll({ getters, dispatch }) {
       getters.allAvailableBotsList.forEach((e) => {
         dispatch(`${e}/ping`);

src/views/Trading.vue

@@ -18,8 +18,7 @@
       drag-allow-from=".card-header"
     >
       <DraggableContainer header="Bot Controls">
-        <ReloadControl class="mt-2" />
-        <BotControls />
+        <!-- <ReloadControl class="mr-3" /> -->
       </DraggableContainer>
     </GridItem>
     <GridItem
@@ -31,7 +30,9 @@
       drag-allow-from=".card-header"
     >
       <DraggableContainer header="Multi Pane">
-        <b-tabs content-class="mt-3" class="mt-3">
+        <BotControls class="mt-1" />
+
+        <b-tabs content-class="mt-3" class="mt-1">
           <b-tab title="Pairs combined" active>
             <PairSummary :pairlist="whitelist" :current-locks="currentLocks" :trades="openTrades" />
           </b-tab>