Show open trades

src/App.vue

@@ -8,17 +8,20 @@
             Freqtrade UI
           </li>
         </ul>
+        <li>
+          <button class="btn-primary pull-right" @click="refresh_data()">Refresh</button>
+        </li>
       </nav>
       <div class="text-white">{{ ping }}</div>
     </header>
-    <main>
+    <main class="container-fluid">
       <TradeView />
     </main>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 
 import TradeView from './ftbot/TradeView.vue';
 
@@ -30,6 +33,17 @@ export default {
   computed: {
     ...mapState({ ping: 'ping' }),
   },
+  methods: {
+    ...mapActions(['refresh_all']),
+    refresh_data() {
+      this.refresh_all();
+    },
+  },
+  mounted() {
+    setInterval(() => {
+      this.refresh_all();
+    }, 5000);
+  },
 };
 </script>
 

src/ftbot/TradeList.vue

@@ -1,12 +1,15 @@
 <template>
+  <div>
+    <h2>{{ title }}</h2>
     <table v-if="trades" class="table table-sm table-hover">
       <thead>
         <tr>
+          <th>id</th>
           <th>Pair</th>
           <th>Amount</th>
-        <th>Open rate</th>
-        <th>Current rate</th>
           <th>Stake amount</th>
+          <th>Open rate</th>
+          <th>Close rate</th>
           <th>Profit</th>
           <th>Open date</th>
           <th>Close date</th>
@@ -14,17 +17,19 @@
       </thead>
       <tbody>
         <tr v-for="(trade, index) in trades" :key="index">
+          <td>{{ trade.trade_id }}</td>
           <td>{{ trade.pair }}</td>
           <td>{{ trade.amount }}</td>
-        <td>{{ trade.open_rate }}</td>
-        <td>{{ trade.current_rate }}</td>
           <td>{{ trade.stake_amount }}</td>
+          <td>{{ trade.open_rate }}</td>
+          <td>{{ trade.close_rate }}</td>
           <td>{{ trade.close_profit }}</td>
           <td>{{ trade.open_date }}</td>
           <td>{{ trade.close_date }}</td>
         </tr>
       </tbody>
     </table>
+  </div>
 </template>
 
 <script>
@@ -35,6 +40,11 @@ export default {
       type: Array,
       required: true,
     },
+    title: {
+      type: String,
+      required: false,
+      default: 'Trades',
+    },
   },
 };
 </script>

src/ftbot/TradeView.vue

@@ -1,21 +1,23 @@
 <template>
-  <div class=".container-fluid">
+  <div class="container-fluid">
     <div class="row">
       <div class="col-sm">Top left</div>
       <div class="col-sm">Performance</div>
     </div>
     <div class="row">
-      <div class="col-sm">Bottom left</div>
-      <div class="col-sm">Bottom right</div>
+      <div class="col-md-7"><TradeList :trades="openTrades" title="Open trades" /></div>
+      <div class="col-md-5">
+        Bottom right
+      </div>
     </div>
     <div class="row">
-      <TradeList v-if="trades" :trades="trades" />
+      <TradeList :trades="trades" />
     </div>
   </div>
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex';
+import { mapActions, mapState, mapGetters } from 'vuex';
 
 import TradeList from './TradeList.vue';
 
@@ -27,7 +29,8 @@ export default {
     this.getTrades();
   },
   computed: {
-    ...mapState('trades', ['trades']),
+    ...mapState('trades', ['trades', 'open_trades']),
+    ...mapGetters('trades', ['openTrades']),
   },
   methods: {
     ...mapActions('trades', ['getTrades']),

src/store/index.js

@@ -28,6 +28,10 @@ export default new Vuex.Store({
       axios.get(`${apiBase}/ping`)
         .then((result) => commit('setPing', result.data))
         .catch(console.error);
+    },
+    refresh_all({dispatch}) {
+      // Refresh all data
+      dispatch('trades/getTrades');
     }
   }
 })

src/store/modules/trades.js

@@ -9,6 +9,11 @@ export default {
     trade_count: 0,
 
   },
+  getters: {
+    openTrades(state) {
+      return state.trades.filter((item) => item.is_open);
+    },
+  },
   mutations: {
     updateTrades(state, trades) {
       state.trades = trades.trades;