Add strategy list

src/components/ftbot/StrategyList.vue

@@ -0,0 +1,45 @@
+<template>
+  <b-form-group label="Strategy" label-for="strategyName" invalid-feedback="Strategy is required">
+    <b-form-select :options="strategyList" v-model="strategy" @change="strategyChanged">
+    </b-form-select>
+  </b-form-group>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Emit } from 'vue-property-decorator';
+import { namespace } from 'vuex-class';
+
+const ftbot = namespace('ftbot');
+
+@Component({})
+export default class StrategyList extends Vue {
+  @Prop() value!: string;
+
+  @ftbot.Action getStrategyList;
+
+  @ftbot.State strategyList;
+
+  @Emit('input')
+  emitStrategy(strategy: string) {
+    return strategy;
+  }
+
+  get strategy() {
+    return this.value;
+  }
+
+  set strategy(val) {
+    this.emitStrategy(val);
+  }
+
+  strategyChanged(newVal) {
+    this.value = newVal;
+  }
+
+  mounted() {
+    this.getStrategyList();
+  }
+}
+</script>
+
+<style></style>

src/store/modules/ftbot.ts

@@ -42,6 +42,7 @@ export default {
     history: {},
     strategyPlotConfig: {},
     customPlotConfig: { ...EMPTY_PLOTCONFIG },
+    strategyList: [],
   },
   getters: {
     [BotStoreGetters.openTrades](state) {
@@ -97,6 +98,9 @@ export default {
     setDetailTrade(state, trade: Trade) {
       state.detailTradeId = trade ? trade.trade_id : null;
     },
+    updateStrategyList(state, list) {
+      state.strategyList = list;
+    },
     updatePairCandles(state, { pair, timeframe, data }) {
       state.candleData = { ...state.candleData, [`${pair}__${timeframe}`]: data };
     },
@@ -191,6 +195,12 @@ export default {
         .then((result) => commit('updatePlotConfig', result.data))
         .catch(console.error);
     },
+    getStrategyList({ commit }) {
+      return api
+        .get('/strategies')
+        .then((result) => commit('updateStrategyList', result.data))
+        .catch(console.error);
+    },
     getPerformance({ commit }) {
       return api
         .get('/performance')

src/views/Graphs.vue

@@ -13,6 +13,7 @@
     </div>
     <div class="mt-2" v-if="historicView">
       <TimeRangeSelect v-model="timerange"></TimeRangeSelect>
+      <StrategyList v-model="strategy"></StrategyList>
     </div>
 
     <div class="row">
@@ -33,11 +34,13 @@ import { Component, Vue } from 'vue-property-decorator';
 import { namespace } from 'vuex-class';
 import CandleChart from '@/components/ftbot/CandleChart.vue';
 import TimeRangeSelect from '@/components/ftbot/TimeRangeSelect.vue';
+import StrategyList from '@/components/ftbot/StrategyList.vue';
 import { PairCandlePayload, PairHistoryPayload } from '@/store/types';
 
 const ftbot = namespace('ftbot');
+
 @Component({
-  components: { CandleChart, TimeRangeSelect },
+  components: { CandleChart, StrategyList, TimeRangeSelect },
 })
 export default class Graphs extends Vue {
   pair = 'XRP/USDT';