VIsual changes, new methods stopbuy and reload_conf

src/App.vue

@@ -61,3 +61,10 @@ nav a {
   color: #ccc;
 }
 </style>
+
+<style>
+/* Global styles - populating to child elementes */
+.card-header {
+  font-size: 1.3em;
+}
+</style>

src/ftbot/BotControls.vue

@@ -3,6 +3,8 @@
     <div class="row">
       <button class="btn-primary" @click="startBot()">Start</button>
       <button class="btn-primary" @click="stopBot()">Stop</button>
+      <button class="btn-primary" @click="stopBuy()">StopBuy</button>
+      <button class="btn-primary" @click="reloadConfig()">Reload Config</button>
     </div>
   </div>
 </template>
@@ -13,7 +15,7 @@ import { mapActions } from 'vuex';
 export default {
   name: 'BotControls',
   methods: {
-    ...mapActions('ftbot', ['stopBot', 'startBot']),
+    ...mapActions('ftbot', ['startBot', 'stopBot', 'stopBuy', 'reloadConfig']),
   },
 };
 </script>

src/ftbot/BotStatus.vue

@@ -6,17 +6,18 @@
     </p>
     <p>
       Running with
-      <b>
-        {{ botState.max_open_trades }}x{{ botState.stake_amount }}
-        {{ botState.stake_currency }}
-      </b>
+      <strong>
+        {{ botState.max_open_trades }}x{{ botState.stake_amount }} {{ botState.stake_currency }}
+      </strong>
       on
-      <b>{{ botState.exchange }}</b
-      >, with Strategy <b>{{ botState.strategy }}</b
-      >.
+      <strong>{{ botState.exchange }}</strong>
+      , with Strategy<strong>{{ botState.strategy }}</strong>
     </p>
     <p>
-      Currently <b>{{ botState.state }}</b>
+      Currently <strong>{{ botState.state }}</strong>
+    </p>
+    <p>
+      <strong>{{ botState.dry_run ? 'Dry-Run' : 'Live' }}</strong>
     </p>
   </div>
 </template>

src/ftbot/PerformanceView.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <h2>Performance</h2>
+  <div class="card">
+    <div class="card-header">Performance</div>
     <table v-if="performanceStats" class="table table-sm table-hover ">
       <thead>
         <tr>

src/ftbot/TradeList.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <h2>{{ title }}</h2>
+  <div class="card">
+    <div class="card-header">{{ title }}</div>
     <table v-if="trades" class="table table-sm table-hover">
       <thead>
         <tr>
@@ -9,8 +9,8 @@
           <th>Amount</th>
           <th>Stake amount</th>
           <th>Open rate</th>
-          <th>Close rate</th>
-          <th>Profit</th>
+          <th>{{ activeTrades ? 'Current rate' : 'Close rate' }}</th>
+          <th>{{ activeTrades ? 'Current Profit' : 'Profit' }}</th>
           <th>Open date</th>
           <th>Close date</th>
         </tr>
@@ -22,8 +22,8 @@
           <td>{{ trade.amount }}</td>
           <td>{{ trade.stake_amount }}</td>
           <td>{{ trade.open_rate }}</td>
-          <td>{{ trade.close_rate }}</td>
-          <td>{{ trade.close_profit }}</td>
+          <td>{{ activeTrades ? trade.current_rate : trade.close_rate }}</td>
+          <td>{{ activeTrades ? trade.current_profit : trade.close_profit.toFixed(3) }}%</td>
           <td>{{ trade.open_date }}</td>
           <td>{{ trade.close_date }}</td>
         </tr>
@@ -45,6 +45,11 @@ export default {
       required: false,
       default: 'Trades',
     },
+    activeTrades: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
   },
 };
 </script>

src/ftbot/TradeView.vue

@@ -4,12 +4,12 @@
       <div class="col-md-8">
         <div class="row">
           <div class="col-md-12">
-            <TradeList :trades="openTrades" title="Open trades" />
+            <TradeList :trades="openTrades" title="Open trades" activeTrades="True" />
           </div>
         </div>
         <div class="row">
           <div class="col-md-12">
-            <TradeList :trades="trades" />
+            <TradeList :trades="closedtrades" title="Trade history" />
           </div>
         </div>
       </div>
@@ -58,27 +58,27 @@ export default {
   data() {
     return {
       refresh_interval: null,
-    }
+    };
   },
   computed: {
-    ...mapState('ftbot', ['trades', 'open_trades']),
-    ...mapGetters('ftbot', ['openTrades']),
+    ...mapState('ftbot', ['open_trades']),
+    ...mapGetters('ftbot', ['openTrades', 'closedtrades']),
   },
   methods: {
     ...mapActions(['refresh_all']),
     ...mapActions('ftbot', ['getTrades', 'getProfit', 'getState']),
   },
   mounted() {
-    console.log(`Starting automatic refresh.`)
+    console.log(`Starting automatic refresh.`);
     this.refresh_interval = setInterval(() => {
       this.refresh_all();
     }, 5000);
   },
   beforeDestroy() {
-    console.log(`Stopping automatic refresh.`)
+    console.log(`Stopping automatic refresh.`);
     clearInterval(this.refresh_interval);
-  }
+  },
 };
 </script>
 
-<style>
+<style></style>

src/store/index.js

@@ -30,7 +30,8 @@ export default new Vuex.Store({
     },
     refresh_all({dispatch}) {
       // Refresh all data
-      dispatch('ftbot/getState')
+      dispatch('ftbot/getState');
+      dispatch('ftbot/getOpentrades');
       dispatch('ftbot/getTrades');
       dispatch('ftbot/getPerformance');
       dispatch('ftbot/getProfit');

src/store/modules/ftbot.js

@@ -6,6 +6,7 @@ export default {
   namespaced: true,
   state: {
     trades: [],
+    openTrades: [],
     trade_count: 0,
     performanceStats: [],
     profit: {},
@@ -13,14 +14,21 @@ export default {
   },
   getters: {
     openTrades(state) {
-      return state.trades.filter((item) => item.is_open);
+      return state.openTrades;
+      // return state.trades.filter((item) => item.is_open);
     },
+    closedtrades(state) {
+      return state.trades.filter((item) => !item.is_open);
+    }
   },
   mutations: {
     updateTrades(state, trades) {
       state.trades = trades.trades;
       state.trade_count = trades.trade_count;
     },
+    updateOpenTrades(state, trades) {
+      state.openTrades = trades;
+    },
     updatePerformance(state, performance) {
       state.performanceStats = performance;
     },
@@ -40,6 +48,13 @@ export default {
         .then((result) => commit('updateTrades', result.data))
         .catch(console.error);
     },
+    getOpentrades({ commit }) {
+      axios.get(`${apiBase}/status`, {
+        ...apiAuth
+      })
+        .then((result) => commit('updateOpenTrades', result.data))
+        .catch(console.error);
+    },
     getPerformance({commit}) {
       axios.get(`${apiBase}/performance`, {
         ...apiAuth
@@ -62,13 +77,6 @@ export default {
         .catch(console.error);
     },
     // Post methods
-    stopBot() {
-      axios.post(`${apiBase}/stop`, {}, {
-        ...apiAuth
-      })
-        // .then((result) => )
-        .catch(console.error);
-    },
     startBot() {
       axios.post(`${apiBase}/start`, {}, {
         ...apiAuth
@@ -76,6 +84,26 @@ export default {
         // .then((result) => )
         .catch(console.error);
     },
-
+    stopBot() {
+      axios.post(`${apiBase}/stop`, {}, {
+        ...apiAuth
+      })
+        // .then((result) => )
+        .catch(console.error);
+    },
+    stopBuy() {
+      axios.post(`${apiBase}/stopbuy`, {}, {
+        ...apiAuth
+      })
+        // .then((result) => )
+        .catch(console.error);
+    },
+    reloadConfig() {
+      axios.post(`${apiBase}/reload_conf`, {}, {
+        ...apiAuth
+      })
+        // .then((result) => )
+        .catch(console.error);
+    },
   },
 };

src/views/Home.vue

@@ -18,4 +18,8 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.home {
+  margin-top: 1.5em;
+}
+</style>