Add trades list

src/App.vue

@@ -1,14 +1,15 @@
 <template>
   <div id="app">
-     <header class="bg-secondary">
+    <header class="bg-secondary">
       <nav class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
         <ul>
           <li class="nav-item text-white">
-              <img class="logo" src="./assets/freqtrade-logo.png" alt />
-              Freqtrade UI
+            <img class="logo" src="./assets/freqtrade-logo.png" alt />
+            Freqtrade UI
           </li>
         </ul>
       </nav>
+      <div class="text-white">{{ ping }}</div>
     </header>
     <main>
       <TradeView />
@@ -17,12 +18,17 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 import TradeView from './ftbot/TradeView.vue';
 
 export default {
   name: 'App',
   components: {
-    'TradeView': TradeView,
+    TradeView,
+  },
+  computed: {
+    ...mapState({ ping: 'ping' }),
   },
 };
 </script>
@@ -36,7 +42,6 @@ export default {
   color: #2c3e50;
 }
 
-
 main {
   margin: 0 auto;
   /* padding: 30px; */
@@ -58,5 +63,4 @@ ul {
   font-size: 22px;
   /* border-right: 1px solid #bbb; */
 }
-
 </style>

src/ftbot/TradeList.vue

@@ -0,0 +1,40 @@
+<template>
+  <table v-if="trades" class="table table-sm table-hover">
+    <thead>
+      <tr>
+        <th>Pair</th>
+        <th>Amount</th>
+        <th>Open rate</th>
+        <th>Current rate</th>
+        <th>Stake amount</th>
+        <th>Profit</th>
+        <th>Open date</th>
+        <th>Close date</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(trade, index) in trades" :key="index">
+        <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.close_profit }}</td>
+        <td>{{ trade.open_date }}</td>
+        <td>{{ trade.close_date }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+export default {
+  name: 'TradeList',
+  props: {
+    trades: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>

src/ftbot/TradeView.vue

@@ -1,15 +1,39 @@
 <template>
-  <div>
-    TradeViewContent
+  <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>
+    <div class="row">
+      <TradeList v-if="trades" :trades="trades" />
+    </div>
   </div>
 </template>
 
 <script>
+import { mapActions, mapState } from 'vuex';
+
+import TradeList from './TradeList.vue';
+
 export default {
   name: 'TradeView',
-}
+  components: { TradeList },
+  created() {
+    this.ping();
+    this.getTrades();
+  },
+  computed: {
+    ...mapState('trades', ['trades']),
+  },
+  methods: {
+    ...mapActions('trades', ['getTrades']),
+    ...mapActions(['ping']),
+  },
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/store/index.js

@@ -1,18 +1,33 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import axios from 'axios';
 
 import tradesModule from './modules/trades';
 
+
+import { apiBase } from './modules/config';
+
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    ping: 'ddd',
   },
   modules: {
     trades: tradesModule
   },
   mutations: {
+    setPing(state, ping) {
+      console.log(ping);
+      const now = Date(Date.now());
+      state.ping = `${ping.status} ${now.toString()}`  ;
+    }
   },
   actions: {
-  },
+    ping({ commit }) {
+      axios.get(`${apiBase}/ping`)
+        .then((result) => commit('setPing', result.data))
+        .catch(console.error);
+    }
+  }
 })

src/store/modules/config.js

@@ -1,5 +1,11 @@
-const apiBase = '/api/v1/'
-
-export default {
-  apiBase,
+const apiBase = '/api/v1'
+const apiAuth =  {auth: {
+    username: 'xxxx',
+    password: 'xxxx!',
+  }
+}
+
+module.exports = {
+
+  apiBase, apiAuth
 }

src/store/modules/trades.js

@@ -1,21 +1,25 @@
 import axios from 'axios';
 
-const apiBase = require('./config.js')
+import { apiBase, apiAuth } from './config';
 
 export default {
   namespaced: true,
   state: {
     trades: [],
+    trade_count: 0,
 
   },
   mutations: {
     updateTrades(state, trades) {
-      state.trades = trades;
+      state.trades = trades.trades;
+      state.trade_count = trades.trade_count;
     }
   },
   actions: {
     getTrades({ commit }) {
-      axios.get(`${apiBase}/trades`)
+      axios.get(`${apiBase}/trades`, {
+        ...apiAuth
+      })
         .then((result) => commit('updateTrades', result.data))
         .catch(console.error);
     }

vue.config.js

@@ -2,7 +2,7 @@ module.exports = {
   devServer: {
     proxy: {
       '/api': {
-        target: 'http://localhost:8081',
+        target: 'http://127.0.0.1:8081',
         changeOrigin: true,
       },
     },