From a330a39fe04aff1ea56df6bbd1ef1340f65d20c0 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sun, 29 Aug 2021 11:07:41 +0200
Subject: [PATCH] Update BotList to be a proper list

---
 src/components/BotList.vue           | 30 +++++++++++++++++++---------
 src/store/modules/botStoreWrapper.ts |  3 +++
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/components/BotList.vue b/src/components/BotList.vue
index 29f9c3c4..9452978a 100644
--- a/src/components/BotList.vue
+++ b/src/components/BotList.vue
@@ -1,15 +1,23 @@
 <template>
   <div>
     <h3>Available bots</h3>
-    <div v-for="bot in allAvailableBots" :key="bot">
-      {{ bot }}
-      <b-button class="btn-xs ml-1" size="sm" title="Delete trade" @click="clickRemoveBot(bot)">
-        <EditIcon :size="16" title="Delete trade" />
-      </b-button>
-      <b-button class="btn-xs ml-1" size="sm" title="Delete bot" @click="clickRemoveBot(bot)">
-        <DeleteIcon :size="16" title="Delete trade" />
-      </b-button>
-    </div>
+    <b-list-group>
+      <b-list-group-item
+        v-for="bot in allAvailableBots"
+        :key="bot"
+        button
+        :active="bot === selectedBot"
+        @click="selectBot(bot)"
+      >
+        {{ bot }}
+        <b-button class="btn-xs ml-1" size="sm" title="Delete trade" @click="clickRemoveBot(bot)">
+          <EditIcon :size="16" title="Delete trade" />
+        </b-button>
+        <b-button class="btn-xs ml-1" size="sm" title="Delete bot" @click="clickRemoveBot(bot)">
+          <DeleteIcon :size="16" title="Delete trade" />
+        </b-button>
+      </b-list-group-item>
+    </b-list-group>
     <LoginModal class="mt-2" login-text="Add new bot" />
   </div>
 </template>
@@ -26,10 +34,14 @@ const ftbot = namespace('ftbot');
 
 @Component({ components: { LoginModal, DeleteIcon, EditIcon } })
 export default class BotList extends Vue {
+  @ftbot.Getter [MultiBotStoreGetters.selectedBot]: string;
+
   @ftbot.Getter [MultiBotStoreGetters.allAvailableBots]: string[];
 
   @ftbot.Action removeBot;
 
+  @ftbot.Action selectBot;
+
   clickRemoveBot(botId) {
     //
     this.$bvModal.msgBoxConfirm(`Really remove (logout) from ${botId}?`).then((value: boolean) => {
diff --git a/src/store/modules/botStoreWrapper.ts b/src/store/modules/botStoreWrapper.ts
index 8b2831c9..6fe116b0 100644
--- a/src/store/modules/botStoreWrapper.ts
+++ b/src/store/modules/botStoreWrapper.ts
@@ -89,6 +89,9 @@ export default function createBotStore(store) {
         commit('selectBot', getters.allAvailableBots[0]);
       }
     },
+    selectBot({ commit }, botId: string) {
+      commit('selectBot', botId);
+    },
   };
   // Autocreate Actions
   Object.keys(BotStoreActions).forEach((e) => {