Extract TimeframeSelect

src/components/ftbot/TimeframeSelect.vue

@@ -0,0 +1,59 @@
+<template>
+  <b-form-group
+    label-cols-sm="5"
+    label="Timeframe:"
+    label-align-sm="right"
+    label-for="timeframe-select"
+  >
+    <b-form-select
+      id="timeframe-select"
+      v-model="selectedTimeframe"
+      placeholder="Use strategy default"
+      :options="availableTimeframes"
+      @change="emitSelectedTimeframe"
+    ></b-form-select>
+  </b-form-group>
+</template>
+
+<script lang="ts">
+import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator';
+
+@Component({})
+export default class Template extends Vue {
+  selectedTimeframe = '';
+
+  @Prop({ default: '' }) value!: string;
+
+  @Emit('input')
+  emitSelectedTimeframe() {
+    return this.selectedTimeframe;
+  }
+
+  @Watch('value')
+  watchValue() {
+    this.selectedTimeframe = this.value;
+  }
+
+  availableTimeframes = [
+    '1m',
+    '3m',
+    '5m',
+    '15m',
+    '30m',
+    '1h',
+    '2h',
+    '4h',
+    '6h',
+    '8h',
+    '12h',
+    '1d',
+    '3d',
+    '1w',
+    '2w',
+    '1M',
+    '1y',
+  ];
+}
+</script>
+
+<style scoped></style>

src/views/Backtesting.vue

@@ -81,19 +81,7 @@
             label-class="font-weight-bold pt-0"
             class="mb-0"
           >
-            <b-form-group
-              label-cols-sm="5"
-              label="Timeframe:"
-              label-align-sm="right"
-              label-for="timeframe-select"
-            >
-              <b-form-select
-                id="timeframe-select"
-                v-model="selectedTimeframe"
-                placeholder="Use strategy default"
-                :options="availableTimeframes"
-              ></b-form-select>
-            </b-form-group>
+            <TimeframeSelect v-model="selectedTimeframe" />
 
             <b-form-group
               label-cols-sm="5"
@@ -266,6 +254,7 @@ import ValuePair from '@/components/general/ValuePair.vue';
 import CumProfitChart from '@/components/charts/CumProfitChart.vue';
 import TradesLogChart from '@/components/charts/TradesLog.vue';
 import PairSummary from '@/components/ftbot/PairSummary.vue';
+import TimeframeSelect from '@/components/ftbot/TimeframeSelect.vue';
 
 import {
   BacktestPayload,
@@ -291,31 +280,12 @@ const ftbot = namespace('ftbot');
     StrategyList,
     ValuePair,
     PairSummary,
+    TimeframeSelect,
   },
 })
 export default class Backtesting extends Vue {
   pollInterval: number | null = null;
 
-  availableTimeframes = [
-    '1m',
-    '3m',
-    '5m',
-    '15m',
-    '30m',
-    '1h',
-    '2h',
-    '4h',
-    '6h',
-    '8h',
-    '12h',
-    '1d',
-    '3d',
-    '1w',
-    '2w',
-    '1M',
-    '1y',
-  ];
-
   showLeftBar = false;
 
   selectedTimeframe = '';