From d935a8910008dc0dae2ac9c91d481104fe392091 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 22 Jul 2023 11:07:03 +0200
Subject: [PATCH 01/13] Add BtStore

---
 src/stores/btStore.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 src/stores/btStore.ts

diff --git a/src/stores/btStore.ts b/src/stores/btStore.ts
new file mode 100644
index 00000000..748d6f14
--- /dev/null
+++ b/src/stores/btStore.ts
@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia';
+
+export const useBtStore = defineStore('btStore', {
+  state: () => {
+    return {
+      strategy: '',
+      selectedTimeframe: '',
+      freqAI: {
+        enabled: false,
+        model: '',
+        identifier: '',
+      },
+    };
+  },
+  getters: {},
+  actions: {},
+});

From 359934f4bc2c9966dbf2cd68d0cb6e2271970742 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 22 Jul 2023 11:11:07 +0200
Subject: [PATCH 02/13] Move strategy to btStore

---
 src/views/BacktestingView.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/views/BacktestingView.vue b/src/views/BacktestingView.vue
index 344f8a97..a55142d8 100644
--- a/src/views/BacktestingView.vue
+++ b/src/views/BacktestingView.vue
@@ -99,7 +99,7 @@
       <div v-if="btFormMode == 'run'" class="flex-fill row d-flex flex-column bt-config">
         <div class="mb-2">
           <span>Strategy</span>
-          <StrategySelect v-model="strategy"></StrategySelect>
+          <StrategySelect v-model="btStore.strategy"></StrategySelect>
         </div>
         <b-card :disabled="botStore.activeBot.backtestRunning">
           <!-- Backtesting parameters -->
@@ -312,7 +312,7 @@
     >
       <BacktestResultChart
         :timeframe="timeframe"
-        :strategy="strategy"
+        :strategy="btStore.strategy"
         :timerange="timerange"
         :pairlist="botStore.activeBot.selectedBacktestResult.pairlist"
         :trades="botStore.activeBot.selectedBacktestResult.trades"
@@ -339,8 +339,10 @@ import { BacktestPayload } from '@/types';
 import { formatPercent } from '@/shared/formatters';
 import { computed, ref, onMounted, watch } from 'vue';
 import { useBotStore } from '@/stores/ftbotwrapper';
+import { useBtStore } from '@/stores/btStore';
 
 const botStore = useBotStore();
+const btStore = useBtStore();
 
 const hasBacktestResult = computed(() =>
   botStore.activeBot.backtestHistory
@@ -355,7 +357,6 @@ const timeframe = computed((): string => {
   }
 });
 
-const strategy = ref('');
 const selectedTimeframe = ref('');
 const selectedDetailTimeframe = ref('');
 const timerange = ref('');
@@ -376,8 +377,8 @@ const pollInterval = ref<number | null>(null);
 
 const selectBacktestResult = () => {
   // Set parameters for this result
-  strategy.value = botStore.activeBot.selectedBacktestResult.strategy_name;
-  botStore.activeBot.getStrategy(strategy.value);
+  btStore.strategy = botStore.activeBot.selectedBacktestResult.strategy_name;
+  botStore.activeBot.getStrategy(btStore.strategy);
   selectedTimeframe.value = botStore.activeBot.selectedBacktestResult.timeframe;
   selectedDetailTimeframe.value = botStore.activeBot.selectedBacktestResult.timeframe_detail || '';
   // TODO: maybe this should not use timerange, but the actual backtest start/end results instead?
@@ -393,7 +394,7 @@ watch(
 
 const clickBacktest = () => {
   const btPayload: BacktestPayload = {
-    strategy: strategy.value,
+    strategy: btStore.strategy,
     timerange: timerange.value,
     enable_protections: enableProtections.value,
   };

From 888ba6faf86a3d3f4b768cb4bd9946b5f8c644b7 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 22 Jul 2023 11:13:35 +0200
Subject: [PATCH 03/13] Move Timeframe refs to btStore

---
 src/stores/btStore.ts         |  1 +
 src/views/BacktestingView.vue | 21 ++++++++++-----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/stores/btStore.ts b/src/stores/btStore.ts
index 748d6f14..d18beaa0 100644
--- a/src/stores/btStore.ts
+++ b/src/stores/btStore.ts
@@ -5,6 +5,7 @@ export const useBtStore = defineStore('btStore', {
     return {
       strategy: '',
       selectedTimeframe: '',
+      selectedDetailTimeframe: '',
       freqAI: {
         enabled: false,
         model: '',
diff --git a/src/views/BacktestingView.vue b/src/views/BacktestingView.vue
index a55142d8..79a17cc7 100644
--- a/src/views/BacktestingView.vue
+++ b/src/views/BacktestingView.vue
@@ -116,7 +116,7 @@
               label-align-sm="right"
               label-for="timeframe-select"
             >
-              <TimeframeSelect id="timeframe-select" v-model="selectedTimeframe" />
+              <TimeframeSelect id="timeframe-select" v-model="btStore.selectedTimeframe" />
             </b-form-group>
             <b-form-group
               label-cols-sm="5"
@@ -127,8 +127,8 @@
             >
               <TimeframeSelect
                 id="timeframe-detail-select"
-                v-model="selectedDetailTimeframe"
-                :below-timeframe="selectedTimeframe"
+                v-model="btStore.selectedDetailTimeframe"
+                :below-timeframe="btStore.selectedTimeframe"
               />
             </b-form-group>
 
@@ -357,8 +357,6 @@ const timeframe = computed((): string => {
   }
 });
 
-const selectedTimeframe = ref('');
-const selectedDetailTimeframe = ref('');
 const timerange = ref('');
 const showLeftBar = ref(false);
 const freqAI = ref({
@@ -379,8 +377,9 @@ const selectBacktestResult = () => {
   // Set parameters for this result
   btStore.strategy = botStore.activeBot.selectedBacktestResult.strategy_name;
   botStore.activeBot.getStrategy(btStore.strategy);
-  selectedTimeframe.value = botStore.activeBot.selectedBacktestResult.timeframe;
-  selectedDetailTimeframe.value = botStore.activeBot.selectedBacktestResult.timeframe_detail || '';
+  btStore.selectedTimeframe = botStore.activeBot.selectedBacktestResult.timeframe;
+  btStore.selectedDetailTimeframe =
+    botStore.activeBot.selectedBacktestResult.timeframe_detail || '';
   // TODO: maybe this should not use timerange, but the actual backtest start/end results instead?
   timerange.value = botStore.activeBot.selectedBacktestResult.timerange;
 };
@@ -416,11 +415,11 @@ const clickBacktest = () => {
     btPayload.dry_run_wallet = startingCapitalLoc;
   }
 
-  if (selectedTimeframe.value) {
-    btPayload.timeframe = selectedTimeframe.value;
+  if (btStore.selectedTimeframe) {
+    btPayload.timeframe = btStore.selectedTimeframe;
   }
-  if (selectedDetailTimeframe.value) {
-    btPayload.timeframe_detail = selectedDetailTimeframe.value;
+  if (btStore.selectedDetailTimeframe) {
+    btPayload.timeframe_detail = btStore.selectedDetailTimeframe;
   }
   if (!allowCache.value) {
     btPayload.backtest_cache = 'none';

From 06f64c9ab9bd6736a60b83c6177683fc413acd08 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 22 Jul 2023 11:15:17 +0200
Subject: [PATCH 04/13] Move Timerange to btStore

---
 src/stores/btStore.ts         | 1 +
 src/views/BacktestingView.vue | 9 ++++-----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/stores/btStore.ts b/src/stores/btStore.ts
index d18beaa0..8977861a 100644
--- a/src/stores/btStore.ts
+++ b/src/stores/btStore.ts
@@ -6,6 +6,7 @@ export const useBtStore = defineStore('btStore', {
       strategy: '',
       selectedTimeframe: '',
       selectedDetailTimeframe: '',
+      timerange: '',
       freqAI: {
         enabled: false,
         model: '',
diff --git a/src/views/BacktestingView.vue b/src/views/BacktestingView.vue
index 79a17cc7..8ff9414e 100644
--- a/src/views/BacktestingView.vue
+++ b/src/views/BacktestingView.vue
@@ -253,7 +253,7 @@
               ></b-form-input>
             </b-form-group> -->
             <hr />
-            <TimeRangeSelect v-model="timerange" class="mt-2"></TimeRangeSelect>
+            <TimeRangeSelect v-model="btStore.timerange" class="mt-2"></TimeRangeSelect>
           </b-form-group>
         </b-card>
 
@@ -313,7 +313,7 @@
       <BacktestResultChart
         :timeframe="timeframe"
         :strategy="btStore.strategy"
-        :timerange="timerange"
+        :timerange="btStore.timerange"
         :pairlist="botStore.activeBot.selectedBacktestResult.pairlist"
         :trades="botStore.activeBot.selectedBacktestResult.trades"
         :freqai-model="freqAI.enabled ? freqAI.model : undefined"
@@ -357,7 +357,6 @@ const timeframe = computed((): string => {
   }
 });
 
-const timerange = ref('');
 const showLeftBar = ref(false);
 const freqAI = ref({
   enabled: false,
@@ -381,7 +380,7 @@ const selectBacktestResult = () => {
   btStore.selectedDetailTimeframe =
     botStore.activeBot.selectedBacktestResult.timeframe_detail || '';
   // TODO: maybe this should not use timerange, but the actual backtest start/end results instead?
-  timerange.value = botStore.activeBot.selectedBacktestResult.timerange;
+  btStore.timerange = botStore.activeBot.selectedBacktestResult.timerange;
 };
 
 watch(
@@ -394,7 +393,7 @@ watch(
 const clickBacktest = () => {
   const btPayload: BacktestPayload = {
     strategy: btStore.strategy,
-    timerange: timerange.value,
+    timerange: btStore.timerange,
     enable_protections: enableProtections.value,
   };
   const openTradesInt = parseInt(maxOpenTrades.value, 10);

From 07798d2d216cf71c08b73ddd75d13a5bdb9ca81f Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 22 Jul 2023 11:16:13 +0200
Subject: [PATCH 05/13] freqAi to btStore

---
 src/views/BacktestingView.vue | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/views/BacktestingView.vue b/src/views/BacktestingView.vue
index 8ff9414e..af5bb089 100644
--- a/src/views/BacktestingView.vue
+++ b/src/views/BacktestingView.vue
@@ -218,10 +218,13 @@
                     />
                   </div>
                 </template>
-                <b-form-checkbox id="enable-freqai" v-model="freqAI.enabled"></b-form-checkbox>
+                <b-form-checkbox
+                  id="enable-freqai"
+                  v-model="btStore.freqAI.enabled"
+                ></b-form-checkbox>
               </b-form-group>
               <b-form-group
-                v-if="freqAI.enabled"
+                v-if="btStore.freqAI.enabled"
                 label-cols-sm="5"
                 label="FreqAI identifier:"
                 label-align-sm="right"
@@ -229,18 +232,21 @@
               >
                 <b-form-input
                   id="freqai-identifier"
-                  v-model="freqAI.identifier"
+                  v-model="btStore.freqAI.identifier"
                   placeholder="Use config default"
                 ></b-form-input>
               </b-form-group>
               <b-form-group
-                v-if="freqAI.enabled"
+                v-if="btStore.freqAI.enabled"
                 label-cols-sm="5"
                 label="FreqAI Model"
                 label-align-sm="right"
                 label-for="freqai-model"
               >
-                <FreqaiModelSelect id="freqai-model" v-model="freqAI.model"></FreqaiModelSelect>
+                <FreqaiModelSelect
+                  id="freqai-model"
+                  v-model="btStore.freqAI.model"
+                ></FreqaiModelSelect>
               </b-form-group>
             </template>
 
@@ -316,7 +322,7 @@
         :timerange="btStore.timerange"
         :pairlist="botStore.activeBot.selectedBacktestResult.pairlist"
         :trades="botStore.activeBot.selectedBacktestResult.trades"
-        :freqai-model="freqAI.enabled ? freqAI.model : undefined"
+        :freqai-model="btStore.freqAI.enabled ? btStore.freqAI.model : undefined"
       />
     </div>
   </div>
@@ -358,11 +364,6 @@ const timeframe = computed((): string => {
 });
 
 const showLeftBar = ref(false);
-const freqAI = ref({
-  enabled: false,
-  model: '',
-  identifier: '',
-});
 const enableProtections = ref(false);
 const stakeAmountUnlimited = ref(false);
 const allowCache = ref(true);
@@ -423,10 +424,10 @@ const clickBacktest = () => {
   if (!allowCache.value) {
     btPayload.backtest_cache = 'none';
   }
-  if (freqAI.value.enabled) {
-    btPayload.freqaimodel = freqAI.value.model;
-    if (freqAI.value.identifier !== '') {
-      btPayload.freqai = { identifier: freqAI.value.identifier };
+  if (btStore.freqAI.enabled) {
+    btPayload.freqaimodel = btStore.freqAI.model;
+    if (btStore.freqAI.identifier !== '') {
+      btPayload.freqai = { identifier: btStore.freqAI.identifier };
     }
   }
 

From 2d3f1c73918206eef846cc3fa78693d63b4e58cb Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 22 Jul 2023 11:18:04 +0200
Subject: [PATCH 06/13] More refs to btStore

---
 src/stores/btStore.ts         |  4 ++++
 src/views/BacktestingView.vue | 21 +++++++++------------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/stores/btStore.ts b/src/stores/btStore.ts
index 8977861a..47344650 100644
--- a/src/stores/btStore.ts
+++ b/src/stores/btStore.ts
@@ -7,6 +7,10 @@ export const useBtStore = defineStore('btStore', {
       selectedTimeframe: '',
       selectedDetailTimeframe: '',
       timerange: '',
+      maxOpenTrades: '',
+      stakeAmount: '',
+      startingCapital: '',
+      allowCache: true,
       freqAI: {
         enabled: false,
         model: '',
diff --git a/src/views/BacktestingView.vue b/src/views/BacktestingView.vue
index af5bb089..67c90a00 100644
--- a/src/views/BacktestingView.vue
+++ b/src/views/BacktestingView.vue
@@ -140,7 +140,7 @@
             >
               <b-form-input
                 id="max-open-trades"
-                v-model="maxOpenTrades"
+                v-model="btStore.maxOpenTrades"
                 placeholder="Use strategy default"
                 type="number"
               ></b-form-input>
@@ -153,7 +153,7 @@
             >
               <b-form-input
                 id="starting-capital"
-                v-model="startingCapital"
+                v-model="btStore.startingCapital"
                 type="number"
                 step="0.001"
               ></b-form-input>
@@ -174,7 +174,7 @@
 
                 <b-form-input
                   id="stake-amount"
-                  v-model="stakeAmount"
+                  v-model="btStore.stakeAmount"
                   type="number"
                   placeholder="Use strategy default"
                   step="0.01"
@@ -201,7 +201,7 @@
               label-align-sm="right"
               label-for="enable-cache"
             >
-              <b-form-checkbox id="enable-cache" v-model="allowCache"></b-form-checkbox>
+              <b-form-checkbox id="enable-cache" v-model="btStore.allowCache"></b-form-checkbox>
             </b-form-group>
             <template v-if="botStore.activeBot.botApiVersion >= 2.22">
               <b-form-group
@@ -364,12 +364,9 @@ const timeframe = computed((): string => {
 });
 
 const showLeftBar = ref(false);
+
 const enableProtections = ref(false);
 const stakeAmountUnlimited = ref(false);
-const allowCache = ref(true);
-const maxOpenTrades = ref('');
-const stakeAmount = ref('');
-const startingCapital = ref('');
 const btFormMode = ref('run');
 const pollInterval = ref<number | null>(null);
 
@@ -397,20 +394,20 @@ const clickBacktest = () => {
     timerange: btStore.timerange,
     enable_protections: enableProtections.value,
   };
-  const openTradesInt = parseInt(maxOpenTrades.value, 10);
+  const openTradesInt = parseInt(btStore.maxOpenTrades, 10);
   if (openTradesInt) {
     btPayload.max_open_trades = openTradesInt;
   }
   if (stakeAmountUnlimited.value) {
     btPayload.stake_amount = 'unlimited';
   } else {
-    const stakeAmountLoc = Number(stakeAmount.value);
+    const stakeAmountLoc = Number(btStore.stakeAmount);
     if (stakeAmountLoc) {
       btPayload.stake_amount = stakeAmountLoc.toString();
     }
   }
 
-  const startingCapitalLoc = Number(startingCapital.value);
+  const startingCapitalLoc = Number(btStore.startingCapital);
   if (startingCapitalLoc) {
     btPayload.dry_run_wallet = startingCapitalLoc;
   }
@@ -421,7 +418,7 @@ const clickBacktest = () => {
   if (btStore.selectedDetailTimeframe) {
     btPayload.timeframe_detail = btStore.selectedDetailTimeframe;
   }
-  if (!allowCache.value) {
+  if (!btStore.allowCache) {
     btPayload.backtest_cache = 'none';
   }
   if (btStore.freqAI.enabled) {

From 68171faf8da89b8f6eb4003c921f154cace0d1f2 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 22 Jul 2023 11:19:18 +0200
Subject: [PATCH 07/13] More backtesting refs to btStore

---
 src/stores/btStore.ts         |  2 ++
 src/views/BacktestingView.vue | 12 +++++-------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/stores/btStore.ts b/src/stores/btStore.ts
index 47344650..b8df2251 100644
--- a/src/stores/btStore.ts
+++ b/src/stores/btStore.ts
@@ -11,6 +11,8 @@ export const useBtStore = defineStore('btStore', {
       stakeAmount: '',
       startingCapital: '',
       allowCache: true,
+      enableProtections: false,
+      stakeAmountUnlimited: false,
       freqAI: {
         enabled: false,
         model: '',
diff --git a/src/views/BacktestingView.vue b/src/views/BacktestingView.vue
index 67c90a00..fc7f1d9d 100644
--- a/src/views/BacktestingView.vue
+++ b/src/views/BacktestingView.vue
@@ -167,7 +167,7 @@
               <div class="d-flex">
                 <b-form-checkbox
                   id="stake-amount-bool"
-                  v-model="stakeAmountUnlimited"
+                  v-model="btStore.stakeAmountUnlimited"
                   class="col-md-6"
                   >Unlimited stake</b-form-checkbox
                 >
@@ -178,7 +178,7 @@
                   type="number"
                   placeholder="Use strategy default"
                   step="0.01"
-                  :disabled="stakeAmountUnlimited"
+                  :disabled="btStore.stakeAmountUnlimited"
                 ></b-form-input>
               </div>
             </b-form-group>
@@ -191,7 +191,7 @@
             >
               <b-form-checkbox
                 id="enable-protections"
-                v-model="enableProtections"
+                v-model="btStore.enableProtections"
               ></b-form-checkbox>
             </b-form-group>
             <b-form-group
@@ -365,8 +365,6 @@ const timeframe = computed((): string => {
 
 const showLeftBar = ref(false);
 
-const enableProtections = ref(false);
-const stakeAmountUnlimited = ref(false);
 const btFormMode = ref('run');
 const pollInterval = ref<number | null>(null);
 
@@ -392,13 +390,13 @@ const clickBacktest = () => {
   const btPayload: BacktestPayload = {
     strategy: btStore.strategy,
     timerange: btStore.timerange,
-    enable_protections: enableProtections.value,
+    enable_protections: btStore.enableProtections,
   };
   const openTradesInt = parseInt(btStore.maxOpenTrades, 10);
   if (openTradesInt) {
     btPayload.max_open_trades = openTradesInt;
   }
-  if (stakeAmountUnlimited.value) {
+  if (btStore.stakeAmountUnlimited) {
     btPayload.stake_amount = 'unlimited';
   } else {
     const stakeAmountLoc = Number(btStore.stakeAmount);

From 511fce74c74344b963696563ab411cabd3f62e21 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 22 Jul 2023 11:24:24 +0200
Subject: [PATCH 08/13] Extract backtest Running from BacktestView

---
 src/components/ftbot/BacktestRun.vue | 258 ++++++++++++++++++++++++++
 src/views/BacktestingView.vue        | 264 +--------------------------
 2 files changed, 265 insertions(+), 257 deletions(-)
 create mode 100644 src/components/ftbot/BacktestRun.vue

diff --git a/src/components/ftbot/BacktestRun.vue b/src/components/ftbot/BacktestRun.vue
new file mode 100644
index 00000000..5e1e48b1
--- /dev/null
+++ b/src/components/ftbot/BacktestRun.vue
@@ -0,0 +1,258 @@
+<template>
+  <div class="mb-2">
+    <span>Strategy</span>
+    <StrategySelect v-model="btStore.strategy"></StrategySelect>
+  </div>
+  <b-card :disabled="botStore.activeBot.backtestRunning">
+    <!-- Backtesting parameters -->
+    <b-form-group
+      label-cols-lg="2"
+      label="Backtest params"
+      label-size="sm"
+      label-class="fw-bold pt-0"
+      class="mb-0"
+    >
+      <b-form-group
+        label-cols-sm="5"
+        label="Timeframe:"
+        label-align-sm="right"
+        label-for="timeframe-select"
+      >
+        <TimeframeSelect id="timeframe-select" v-model="btStore.selectedTimeframe" />
+      </b-form-group>
+      <b-form-group
+        label-cols-sm="5"
+        label="Detail Timeframe:"
+        label-align-sm="right"
+        label-for="timeframe-detail-select"
+        title="Detail timeframe, to simulate intra-candle results. Not setting this will not use this functionality."
+      >
+        <TimeframeSelect
+          id="timeframe-detail-select"
+          v-model="btStore.selectedDetailTimeframe"
+          :below-timeframe="btStore.selectedTimeframe"
+        />
+      </b-form-group>
+
+      <b-form-group
+        label-cols-sm="5"
+        label="Max open trades:"
+        label-align-sm="right"
+        label-for="max-open-trades"
+      >
+        <b-form-input
+          id="max-open-trades"
+          v-model="btStore.maxOpenTrades"
+          placeholder="Use strategy default"
+          type="number"
+        ></b-form-input>
+      </b-form-group>
+      <b-form-group
+        label-cols-sm="5"
+        label="Starting capital:"
+        label-align-sm="right"
+        label-for="starting-capital"
+      >
+        <b-form-input
+          id="starting-capital"
+          v-model="btStore.startingCapital"
+          type="number"
+          step="0.001"
+        ></b-form-input>
+      </b-form-group>
+      <b-form-group
+        label-cols-sm="5"
+        label="Stake amount:"
+        label-align-sm="right"
+        label-for="stake-amount"
+      >
+        <div class="d-flex">
+          <b-form-checkbox
+            id="stake-amount-bool"
+            v-model="btStore.stakeAmountUnlimited"
+            class="col-md-6"
+            >Unlimited stake</b-form-checkbox
+          >
+
+          <b-form-input
+            id="stake-amount"
+            v-model="btStore.stakeAmount"
+            type="number"
+            placeholder="Use strategy default"
+            step="0.01"
+            :disabled="btStore.stakeAmountUnlimited"
+          ></b-form-input>
+        </div>
+      </b-form-group>
+
+      <b-form-group
+        label-cols-sm="5"
+        label="Enable Protections:"
+        label-align-sm="right"
+        label-for="enable-protections"
+      >
+        <b-form-checkbox
+          id="enable-protections"
+          v-model="btStore.enableProtections"
+        ></b-form-checkbox>
+      </b-form-group>
+      <b-form-group
+        v-if="botStore.activeBot.botApiVersion >= 2.22"
+        label-cols-sm="5"
+        label="Cache Backtest results:"
+        label-align-sm="right"
+        label-for="enable-cache"
+      >
+        <b-form-checkbox id="enable-cache" v-model="btStore.allowCache"></b-form-checkbox>
+      </b-form-group>
+      <template v-if="botStore.activeBot.botApiVersion >= 2.22">
+        <b-form-group
+          label-cols-sm="5"
+          label="Enable FreqAI:"
+          label-align-sm="right"
+          label-for="enable-freqai"
+        >
+          <template #label>
+            <div class="d-flex justify-content-center">
+              <span class="me-2">Enable FreqAI:</span>
+              <InfoBox
+                hint="Assumes freqAI configuration is setup in the configuration, and the strategy is a freqAI strategy. Will fail if that's not the case."
+              />
+            </div>
+          </template>
+          <b-form-checkbox id="enable-freqai" v-model="btStore.freqAI.enabled"></b-form-checkbox>
+        </b-form-group>
+        <b-form-group
+          v-if="btStore.freqAI.enabled"
+          label-cols-sm="5"
+          label="FreqAI identifier:"
+          label-align-sm="right"
+          label-for="freqai-identifier"
+        >
+          <b-form-input
+            id="freqai-identifier"
+            v-model="btStore.freqAI.identifier"
+            placeholder="Use config default"
+          ></b-form-input>
+        </b-form-group>
+        <b-form-group
+          v-if="btStore.freqAI.enabled"
+          label-cols-sm="5"
+          label="FreqAI Model"
+          label-align-sm="right"
+          label-for="freqai-model"
+        >
+          <FreqaiModelSelect id="freqai-model" v-model="btStore.freqAI.model"></FreqaiModelSelect>
+        </b-form-group>
+      </template>
+
+      <!-- <b-form-group label-cols-sm="5" label="Fee:" label-align-sm="right" label-for="fee">
+              <b-form-input
+                id="fee"
+                type="number"
+                placeholder="Use exchange default"
+                step="0.01"
+              ></b-form-input>
+            </b-form-group> -->
+      <hr />
+      <TimeRangeSelect v-model="btStore.timerange" class="mt-2"></TimeRangeSelect>
+    </b-form-group>
+  </b-card>
+
+  <h3 class="mt-3">Backtesting summary</h3>
+  <div class="d-flex flex-wrap flex-md-nowrap justify-content-between justify-content-md-center">
+    <b-button
+      id="start-backtest"
+      variant="primary"
+      :disabled="botStore.activeBot.backtestRunning || !botStore.activeBot.canRunBacktest"
+      class="mx-1"
+      @click="clickBacktest"
+    >
+      Start backtest
+    </b-button>
+    <b-button
+      variant="primary"
+      :disabled="botStore.activeBot.backtestRunning || !botStore.activeBot.canRunBacktest"
+      class="mx-1"
+      @click="botStore.activeBot.pollBacktest"
+    >
+      Load backtest result
+    </b-button>
+    <b-button
+      variant="primary"
+      class="mx-1"
+      :disabled="!botStore.activeBot.backtestRunning"
+      @click="botStore.activeBot.stopBacktest"
+      >Stop Backtest</b-button
+    >
+    <b-button
+      variant="primary"
+      class="mx-1"
+      :disabled="botStore.activeBot.backtestRunning || !botStore.activeBot.canRunBacktest"
+      @click="botStore.activeBot.removeBacktest"
+      >Reset Backtest</b-button
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+import TimeRangeSelect from '@/components/ftbot/TimeRangeSelect.vue';
+
+import FreqaiModelSelect from '@/components/ftbot/FreqaiModelSelect.vue';
+import StrategySelect from '@/components/ftbot/StrategySelect.vue';
+import TimeframeSelect from '@/components/ftbot/TimeframeSelect.vue';
+
+import InfoBox from '@/components/general/InfoBox.vue';
+
+import { useBotStore } from '@/stores/ftbotwrapper';
+import { BacktestPayload } from '@/types';
+
+import { useBtStore } from '@/stores/btStore';
+const botStore = useBotStore();
+const btStore = useBtStore();
+
+function clickBacktest() {
+  const btPayload: BacktestPayload = {
+    strategy: btStore.strategy,
+    timerange: btStore.timerange,
+    enable_protections: btStore.enableProtections,
+  };
+  const openTradesInt = parseInt(btStore.maxOpenTrades, 10);
+  if (openTradesInt) {
+    btPayload.max_open_trades = openTradesInt;
+  }
+  if (btStore.stakeAmountUnlimited) {
+    btPayload.stake_amount = 'unlimited';
+  } else {
+    const stakeAmountLoc = Number(btStore.stakeAmount);
+    if (stakeAmountLoc) {
+      btPayload.stake_amount = stakeAmountLoc.toString();
+    }
+  }
+
+  const startingCapitalLoc = Number(btStore.startingCapital);
+  if (startingCapitalLoc) {
+    btPayload.dry_run_wallet = startingCapitalLoc;
+  }
+
+  if (btStore.selectedTimeframe) {
+    btPayload.timeframe = btStore.selectedTimeframe;
+  }
+  if (btStore.selectedDetailTimeframe) {
+    btPayload.timeframe_detail = btStore.selectedDetailTimeframe;
+  }
+  if (!btStore.allowCache) {
+    btPayload.backtest_cache = 'none';
+  }
+  if (btStore.freqAI.enabled) {
+    btPayload.freqaimodel = btStore.freqAI.model;
+    if (btStore.freqAI.identifier !== '') {
+      btPayload.freqai = { identifier: btStore.freqAI.identifier };
+    }
+  }
+
+  botStore.activeBot.startBacktest(btPayload);
+}
+</script>
+
+<style scoped></style>
diff --git a/src/views/BacktestingView.vue b/src/views/BacktestingView.vue
index fc7f1d9d..5eb653e6 100644
--- a/src/views/BacktestingView.vue
+++ b/src/views/BacktestingView.vue
@@ -97,208 +97,7 @@
         <backtest-history-load />
       </div>
       <div v-if="btFormMode == 'run'" class="flex-fill row d-flex flex-column bt-config">
-        <div class="mb-2">
-          <span>Strategy</span>
-          <StrategySelect v-model="btStore.strategy"></StrategySelect>
-        </div>
-        <b-card :disabled="botStore.activeBot.backtestRunning">
-          <!-- Backtesting parameters -->
-          <b-form-group
-            label-cols-lg="2"
-            label="Backtest params"
-            label-size="sm"
-            label-class="fw-bold pt-0"
-            class="mb-0"
-          >
-            <b-form-group
-              label-cols-sm="5"
-              label="Timeframe:"
-              label-align-sm="right"
-              label-for="timeframe-select"
-            >
-              <TimeframeSelect id="timeframe-select" v-model="btStore.selectedTimeframe" />
-            </b-form-group>
-            <b-form-group
-              label-cols-sm="5"
-              label="Detail Timeframe:"
-              label-align-sm="right"
-              label-for="timeframe-detail-select"
-              title="Detail timeframe, to simulate intra-candle results. Not setting this will not use this functionality."
-            >
-              <TimeframeSelect
-                id="timeframe-detail-select"
-                v-model="btStore.selectedDetailTimeframe"
-                :below-timeframe="btStore.selectedTimeframe"
-              />
-            </b-form-group>
-
-            <b-form-group
-              label-cols-sm="5"
-              label="Max open trades:"
-              label-align-sm="right"
-              label-for="max-open-trades"
-            >
-              <b-form-input
-                id="max-open-trades"
-                v-model="btStore.maxOpenTrades"
-                placeholder="Use strategy default"
-                type="number"
-              ></b-form-input>
-            </b-form-group>
-            <b-form-group
-              label-cols-sm="5"
-              label="Starting capital:"
-              label-align-sm="right"
-              label-for="starting-capital"
-            >
-              <b-form-input
-                id="starting-capital"
-                v-model="btStore.startingCapital"
-                type="number"
-                step="0.001"
-              ></b-form-input>
-            </b-form-group>
-            <b-form-group
-              label-cols-sm="5"
-              label="Stake amount:"
-              label-align-sm="right"
-              label-for="stake-amount"
-            >
-              <div class="d-flex">
-                <b-form-checkbox
-                  id="stake-amount-bool"
-                  v-model="btStore.stakeAmountUnlimited"
-                  class="col-md-6"
-                  >Unlimited stake</b-form-checkbox
-                >
-
-                <b-form-input
-                  id="stake-amount"
-                  v-model="btStore.stakeAmount"
-                  type="number"
-                  placeholder="Use strategy default"
-                  step="0.01"
-                  :disabled="btStore.stakeAmountUnlimited"
-                ></b-form-input>
-              </div>
-            </b-form-group>
-
-            <b-form-group
-              label-cols-sm="5"
-              label="Enable Protections:"
-              label-align-sm="right"
-              label-for="enable-protections"
-            >
-              <b-form-checkbox
-                id="enable-protections"
-                v-model="btStore.enableProtections"
-              ></b-form-checkbox>
-            </b-form-group>
-            <b-form-group
-              v-if="botStore.activeBot.botApiVersion >= 2.22"
-              label-cols-sm="5"
-              label="Cache Backtest results:"
-              label-align-sm="right"
-              label-for="enable-cache"
-            >
-              <b-form-checkbox id="enable-cache" v-model="btStore.allowCache"></b-form-checkbox>
-            </b-form-group>
-            <template v-if="botStore.activeBot.botApiVersion >= 2.22">
-              <b-form-group
-                label-cols-sm="5"
-                label="Enable FreqAI:"
-                label-align-sm="right"
-                label-for="enable-freqai"
-              >
-                <template #label>
-                  <div class="d-flex justify-content-center">
-                    <span class="me-2">Enable FreqAI:</span>
-                    <InfoBox
-                      hint="Assumes freqAI configuration is setup in the configuration, and the strategy is a freqAI strategy. Will fail if that's not the case."
-                    />
-                  </div>
-                </template>
-                <b-form-checkbox
-                  id="enable-freqai"
-                  v-model="btStore.freqAI.enabled"
-                ></b-form-checkbox>
-              </b-form-group>
-              <b-form-group
-                v-if="btStore.freqAI.enabled"
-                label-cols-sm="5"
-                label="FreqAI identifier:"
-                label-align-sm="right"
-                label-for="freqai-identifier"
-              >
-                <b-form-input
-                  id="freqai-identifier"
-                  v-model="btStore.freqAI.identifier"
-                  placeholder="Use config default"
-                ></b-form-input>
-              </b-form-group>
-              <b-form-group
-                v-if="btStore.freqAI.enabled"
-                label-cols-sm="5"
-                label="FreqAI Model"
-                label-align-sm="right"
-                label-for="freqai-model"
-              >
-                <FreqaiModelSelect
-                  id="freqai-model"
-                  v-model="btStore.freqAI.model"
-                ></FreqaiModelSelect>
-              </b-form-group>
-            </template>
-
-            <!-- <b-form-group label-cols-sm="5" label="Fee:" label-align-sm="right" label-for="fee">
-              <b-form-input
-                id="fee"
-                type="number"
-                placeholder="Use exchange default"
-                step="0.01"
-              ></b-form-input>
-            </b-form-group> -->
-            <hr />
-            <TimeRangeSelect v-model="btStore.timerange" class="mt-2"></TimeRangeSelect>
-          </b-form-group>
-        </b-card>
-
-        <h3 class="mt-3">Backtesting summary</h3>
-        <div
-          class="d-flex flex-wrap flex-md-nowrap justify-content-between justify-content-md-center"
-        >
-          <b-button
-            id="start-backtest"
-            variant="primary"
-            :disabled="botStore.activeBot.backtestRunning || !botStore.activeBot.canRunBacktest"
-            class="mx-1"
-            @click="clickBacktest"
-          >
-            Start backtest
-          </b-button>
-          <b-button
-            variant="primary"
-            :disabled="botStore.activeBot.backtestRunning || !botStore.activeBot.canRunBacktest"
-            class="mx-1"
-            @click="botStore.activeBot.pollBacktest"
-          >
-            Load backtest result
-          </b-button>
-          <b-button
-            variant="primary"
-            class="mx-1"
-            :disabled="!botStore.activeBot.backtestRunning"
-            @click="botStore.activeBot.stopBacktest"
-            >Stop Backtest</b-button
-          >
-          <b-button
-            variant="primary"
-            class="mx-1"
-            :disabled="botStore.activeBot.backtestRunning || !botStore.activeBot.canRunBacktest"
-            @click="botStore.activeBot.removeBacktest"
-            >Reset Backtest</b-button
-          >
-        </div>
+        <backtest-run />
       </div>
       <BacktestResultView
         v-if="hasBacktestResult && btFormMode == 'results'"
@@ -329,23 +128,17 @@
 </template>
 
 <script setup lang="ts">
-import TimeRangeSelect from '@/components/ftbot/TimeRangeSelect.vue';
-import BacktestResultView from '@/components/ftbot/BacktestResultView.vue';
-import BacktestResultSelect from '@/components/ftbot/BacktestResultSelect.vue';
-import StrategySelect from '@/components/ftbot/StrategySelect.vue';
-import FreqaiModelSelect from '@/components/ftbot/FreqaiModelSelect.vue';
-import TimeframeSelect from '@/components/ftbot/TimeframeSelect.vue';
-import BacktestHistoryLoad from '@/components/ftbot/BacktestHistoryLoad.vue';
 import BacktestGraphsView from '@/components/ftbot/BacktestGraphsView.vue';
+import BacktestHistoryLoad from '@/components/ftbot/BacktestHistoryLoad.vue';
 import BacktestResultChart from '@/components/ftbot/BacktestResultChart.vue';
-import InfoBox from '@/components/general/InfoBox.vue';
-
-import { BacktestPayload } from '@/types';
+import BacktestResultSelect from '@/components/ftbot/BacktestResultSelect.vue';
+import BacktestResultView from '@/components/ftbot/BacktestResultView.vue';
+import BacktestRun from '@/components/ftbot/BacktestRun.vue';
 
 import { formatPercent } from '@/shared/formatters';
-import { computed, ref, onMounted, watch } from 'vue';
-import { useBotStore } from '@/stores/ftbotwrapper';
 import { useBtStore } from '@/stores/btStore';
+import { useBotStore } from '@/stores/ftbotwrapper';
+import { computed, onMounted, ref, watch } from 'vue';
 
 const botStore = useBotStore();
 const btStore = useBtStore();
@@ -386,49 +179,6 @@ watch(
   },
 );
 
-const clickBacktest = () => {
-  const btPayload: BacktestPayload = {
-    strategy: btStore.strategy,
-    timerange: btStore.timerange,
-    enable_protections: btStore.enableProtections,
-  };
-  const openTradesInt = parseInt(btStore.maxOpenTrades, 10);
-  if (openTradesInt) {
-    btPayload.max_open_trades = openTradesInt;
-  }
-  if (btStore.stakeAmountUnlimited) {
-    btPayload.stake_amount = 'unlimited';
-  } else {
-    const stakeAmountLoc = Number(btStore.stakeAmount);
-    if (stakeAmountLoc) {
-      btPayload.stake_amount = stakeAmountLoc.toString();
-    }
-  }
-
-  const startingCapitalLoc = Number(btStore.startingCapital);
-  if (startingCapitalLoc) {
-    btPayload.dry_run_wallet = startingCapitalLoc;
-  }
-
-  if (btStore.selectedTimeframe) {
-    btPayload.timeframe = btStore.selectedTimeframe;
-  }
-  if (btStore.selectedDetailTimeframe) {
-    btPayload.timeframe_detail = btStore.selectedDetailTimeframe;
-  }
-  if (!btStore.allowCache) {
-    btPayload.backtest_cache = 'none';
-  }
-  if (btStore.freqAI.enabled) {
-    btPayload.freqaimodel = btStore.freqAI.model;
-    if (btStore.freqAI.identifier !== '') {
-      btPayload.freqai = { identifier: btStore.freqAI.identifier };
-    }
-  }
-
-  botStore.activeBot.startBacktest(btPayload);
-};
-
 onMounted(() => botStore.activeBot.getState());
 watch(
   () => botStore.activeBot.backtestRunning,

From fdb068e2ffa1a4005befc995760e3e41cd68cdbb Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 22 Jul 2023 11:27:01 +0200
Subject: [PATCH 09/13] Improve Backtest view naming

---
 .../ftbot/{BacktestGraphsView.vue => BacktestGraphs.vue}      | 0
 src/views/BacktestingView.vue                                 | 4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename src/components/ftbot/{BacktestGraphsView.vue => BacktestGraphs.vue} (100%)

diff --git a/src/components/ftbot/BacktestGraphsView.vue b/src/components/ftbot/BacktestGraphs.vue
similarity index 100%
rename from src/components/ftbot/BacktestGraphsView.vue
rename to src/components/ftbot/BacktestGraphs.vue
diff --git a/src/views/BacktestingView.vue b/src/views/BacktestingView.vue
index 5eb653e6..ab1081c3 100644
--- a/src/views/BacktestingView.vue
+++ b/src/views/BacktestingView.vue
@@ -105,7 +105,7 @@
         class="flex-fill"
       />
 
-      <BacktestGraphsView
+      <BacktestGraphs
         v-if="hasBacktestResult && btFormMode == 'visualize-summary'"
         :trades="botStore.activeBot.selectedBacktestResult.trades"
       />
@@ -128,7 +128,7 @@
 </template>
 
 <script setup lang="ts">
-import BacktestGraphsView from '@/components/ftbot/BacktestGraphsView.vue';
+import BacktestGraphs from '@/components/ftbot/BacktestGraphs.vue';
 import BacktestHistoryLoad from '@/components/ftbot/BacktestHistoryLoad.vue';
 import BacktestResultChart from '@/components/ftbot/BacktestResultChart.vue';
 import BacktestResultSelect from '@/components/ftbot/BacktestResultSelect.vue';

From 50bdd6e7b4542d4c973cb125ea545d448424e6c4 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 22 Jul 2023 11:35:37 +0200
Subject: [PATCH 10/13] Improve naming

---
 .../{BacktestResultView.vue => BacktestResultAnalysis.vue}    | 0
 src/views/BacktestingView.vue                                 | 4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename src/components/ftbot/{BacktestResultView.vue => BacktestResultAnalysis.vue} (100%)

diff --git a/src/components/ftbot/BacktestResultView.vue b/src/components/ftbot/BacktestResultAnalysis.vue
similarity index 100%
rename from src/components/ftbot/BacktestResultView.vue
rename to src/components/ftbot/BacktestResultAnalysis.vue
diff --git a/src/views/BacktestingView.vue b/src/views/BacktestingView.vue
index ab1081c3..8433e04e 100644
--- a/src/views/BacktestingView.vue
+++ b/src/views/BacktestingView.vue
@@ -99,7 +99,7 @@
       <div v-if="btFormMode == 'run'" class="flex-fill row d-flex flex-column bt-config">
         <backtest-run />
       </div>
-      <BacktestResultView
+      <BacktestResultAnalysis
         v-if="hasBacktestResult && btFormMode == 'results'"
         :backtest-result="botStore.activeBot.selectedBacktestResult"
         class="flex-fill"
@@ -132,7 +132,7 @@ import BacktestGraphs from '@/components/ftbot/BacktestGraphs.vue';
 import BacktestHistoryLoad from '@/components/ftbot/BacktestHistoryLoad.vue';
 import BacktestResultChart from '@/components/ftbot/BacktestResultChart.vue';
 import BacktestResultSelect from '@/components/ftbot/BacktestResultSelect.vue';
-import BacktestResultView from '@/components/ftbot/BacktestResultView.vue';
+import BacktestResultAnalysis from '@/components/ftbot/BacktestResultAnalysis.vue';
 import BacktestRun from '@/components/ftbot/BacktestRun.vue';
 
 import { formatPercent } from '@/shared/formatters';

From ee8831ed14180335f626079b19c7daa15e543f15 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 22 Jul 2023 11:37:30 +0200
Subject: [PATCH 11/13] Fix casing

---
 src/views/BacktestingView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/BacktestingView.vue b/src/views/BacktestingView.vue
index 8433e04e..895913e6 100644
--- a/src/views/BacktestingView.vue
+++ b/src/views/BacktestingView.vue
@@ -94,10 +94,10 @@
         v-if="btFormMode == 'historicResults'"
         class="flex-fill row d-flex flex-column bt-config"
       >
-        <backtest-history-load />
+        <BacktestHistoryLoad />
       </div>
       <div v-if="btFormMode == 'run'" class="flex-fill row d-flex flex-column bt-config">
-        <backtest-run />
+        <BacktestRun />
       </div>
       <BacktestResultAnalysis
         v-if="hasBacktestResult && btFormMode == 'results'"

From 2bfa2343625a893a1a6d48ba8b8f552548df4049 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 22 Jul 2023 11:40:41 +0200
Subject: [PATCH 12/13] use function for updateInput

---
 src/components/ftbot/TimeRangeSelect.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ftbot/TimeRangeSelect.vue b/src/components/ftbot/TimeRangeSelect.vue
index a4839dfe..440e3e80 100644
--- a/src/components/ftbot/TimeRangeSelect.vue
+++ b/src/components/ftbot/TimeRangeSelect.vue
@@ -61,7 +61,7 @@ const timeRange = computed(() => {
   return '';
 });
 
-const updateInput = () => {
+function updateInput() {
   const tr = props.modelValue.split('-');
   if (tr[0]) {
     dateFrom.value = timestampToDateString(dateFromString(tr[0], 'yyyyMMdd'));
@@ -74,7 +74,7 @@ const updateInput = () => {
     dateTo.value = '';
   }
   emit('update:modelValue', timeRange.value);
-};
+}
 
 watch(
   () => timeRange.value,

From f42dc9de07a1e2c0f495b6801c7cf66af4d26e95 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 22 Jul 2023 13:48:21 +0200
Subject: [PATCH 13/13] Fix timerangeselect crashing when it get's a epoch
 timerange

---
 src/components/ftbot/TimeRangeSelect.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/ftbot/TimeRangeSelect.vue b/src/components/ftbot/TimeRangeSelect.vue
index 440e3e80..f442562f 100644
--- a/src/components/ftbot/TimeRangeSelect.vue
+++ b/src/components/ftbot/TimeRangeSelect.vue
@@ -64,12 +64,16 @@ const timeRange = computed(() => {
 function updateInput() {
   const tr = props.modelValue.split('-');
   if (tr[0]) {
-    dateFrom.value = timestampToDateString(dateFromString(tr[0], 'yyyyMMdd'));
+    dateFrom.value = timestampToDateString(
+      tr[0].length === 8 ? dateFromString(tr[0], 'yyyyMMdd') : parseInt(tr[0]) * 1000,
+    );
   } else {
     dateFrom.value = '';
   }
   if (tr.length > 1 && tr[1]) {
-    dateTo.value = timestampToDateString(dateFromString(tr[1], 'yyyyMMdd'));
+    dateTo.value = timestampToDateString(
+      tr[1].length === 8 ? dateFromString(tr[1], 'yyyyMMdd') : parseInt(tr[1]) * 1000,
+    );
   } else {
     dateTo.value = '';
   }