Added pairlist component for better looking pairlists in UI.

src/components/ftbot/BotStatus.vue

@@ -20,8 +20,8 @@
     <p>
       <strong>{{ botState.dry_run ? 'Dry-Run' : 'Live' }}</strong>
     </p>
-    <p>Whitelist: {{ whitelist }}</p>
-    <p>Blacklist: {{ blacklist }}</p>
+    <!-- <p>Whitelist: {{ whitelist }}</p> -->
+    <!-- <p>Blacklist: {{ blacklist }}</p> -->
   </div>
 </template>
 

src/components/ftbot/FTBotAPIPairList.vue

@@ -0,0 +1,82 @@
+<template>
+  <!-- TODO We could move the list into a component since we are reusing the same code for both lists. -->
+  <div>
+    <!-- Show Whitelist -->
+    <h3>Whitelist</h3>
+    <div v-if="whitelist.length" class="list">
+      <b-list-group v-for="(pair, key) in whitelist" :key="key">
+        <b-list-group-item href="#" class="pair white">{{ pair }}</b-list-group-item>
+      </b-list-group>
+    </div>
+    <p v-else>List Unavailable. Please Login and make sure server is running.</p>
+    <hr />
+
+    <!-- Blacklsit -->
+    <h3>Blacklist</h3>
+    <div v-if="blacklist.length" class="list">
+      <b-list-group v-for="(pair, key) in blacklist" :key="key">
+        <b-list-group-item href="#" class="pair black">{{ pair }}</b-list-group-item>
+      </b-list-group>
+    </div>
+    <p v-else>BlackList Unavailable. Please Login and make sure server is running.</p>
+    <!-- Pagination -->
+    <!-- TODO Add pagination support -->
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+
+export default {
+  name: 'FTBotAPIPairList',
+  data() {
+    return {};
+  },
+  created() {
+    this.init();
+  },
+  computed: {
+    ...mapGetters('ftbot', ['whitelist', 'blacklist']),
+  },
+  methods: {
+    ...mapActions('ftbot', ['getWhitelist', 'getBlacklist']),
+    init() {
+      if (this.whitelist.length === 0) {
+        this.getWhitelist();
+      }
+      if (this.blacklist.length === 0) {
+        this.getBlacklist();
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  grid-gap: 0.5rem;
+  padding-bottom: 1rem;
+}
+.pair {
+  border: 1px solid #ccc;
+  background: #41b883;
+  padding: 0.5rem;
+  border-radius: 5px;
+  text-align: center;
+  position: relative;
+  cursor: pointer;
+}
+.white {
+  /* border: 1px solid black; */
+  background: white;
+  color: black;
+}
+
+.black {
+  /* border: 1px solid white; */
+  background: black;
+  color: white;
+}
+</style>

src/store/modules/ftbot.js

@@ -22,6 +22,12 @@ export default {
     closedtrades(state) {
       return state.trades.filter((item) => !item.is_open);
     },
+    whitelist(state) {
+      return state.whitelist;
+    },
+    blacklist(state) {
+      return state.blacklist;
+    },
   },
   mutations: {
     updateTrades(state, trades) {

src/views/Trade.vue

@@ -23,7 +23,9 @@
                   <DailyStats />
                 </b-tab>
 
-                <b-tab title="Whitelist"> </b-tab>
+                <b-tab title="Pairlist">
+                  <FTBotAPIPairList />
+                </b-tab>
               </b-tabs>
             </div>
           </div>
@@ -59,6 +61,7 @@ import BotControls from '@/components/ftbot/BotControls.vue';
 import BotStatus from '@/components/ftbot/BotStatus.vue';
 import Balance from '@/components/ftbot/Balance.vue';
 import DailyStats from '@/components/ftbot/DailyStats.vue';
+import FTBotAPIPairList from '@/components/ftbot/FTBotAPIPairList.vue';
 
 export default {
   name: 'Trade',
@@ -69,6 +72,7 @@ export default {
     BotStatus,
     Balance,
     DailyStats,
+    FTBotAPIPairList,
   },
   created() {
     this.refreshAll();