Improve Botselection view

src/components/BotEntry.vue

@@ -0,0 +1,60 @@
+<template>
+  <div
+    class="flex-align-center justify-content-between w-100"
+    :class="noButtons ? 'd-inline' : 'd-flex'"
+  >
+    <span class="mr-2">{{ bot.botName || bot.botId }}</span>
+
+    <div class="flex-align-center" :class="noButtons ? 'd-inline' : 'd-flex'">
+      <span class="ml-2 align-middle">{{
+        allIsBotOnline[bot.botId] ? '&#128994;' : '&#128308;'
+      }}</span>
+      <div v-if="!noButtons" class="d-flex flex-align-cent">
+        <b-button class="ml-1" size="sm" title="Edit bot" @click="clickRemoveBot(bot)">
+          <EditIcon :size="16" title="Edit Button" />
+        </b-button>
+        <b-button class="ml-1" size="sm" title="Delete bot" @click.prevent="clickRemoveBot(bot)">
+          <DeleteIcon :size="16" title="Delete Bot" />
+        </b-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { namespace } from 'vuex-class';
+import { MultiBotStoreGetters } from '@/store/modules/botStoreWrapper';
+import LoginModal from '@/views/LoginModal.vue';
+import EditIcon from 'vue-material-design-icons/Cog.vue';
+import DeleteIcon from 'vue-material-design-icons/Delete.vue';
+import { BotDescriptor, BotDescriptors } from '@/types';
+
+const ftbot = namespace('ftbot');
+
+@Component({ components: { LoginModal, DeleteIcon, EditIcon } })
+export default class BotList extends Vue {
+  @Prop({ default: false, type: Object }) bot!: BotDescriptor;
+
+  @Prop({ default: false, type: Boolean }) noButtons!: boolean;
+
+  @ftbot.Getter [MultiBotStoreGetters.allIsBotOnline];
+
+  @ftbot.Getter [MultiBotStoreGetters.allAvailableBots]: BotDescriptors;
+
+  @ftbot.Action removeBot;
+
+  @ftbot.Action selectBot;
+
+  clickRemoveBot(botId: BotDescriptor) {
+    //
+    this.$bvModal.msgBoxConfirm(`Really remove (logout) from ${botId}?`).then((value: boolean) => {
+      if (value) {
+        this.removeBot(botId.botId);
+      }
+    });
+  }
+}
+</script>
+
+<style scoped></style>

src/components/BotList.vue

@@ -1,61 +1,42 @@
 <template>
   <div>
-    <h3>Available bots</h3>
+    <h3 v-if="!small">Available bots</h3>
     <b-list-group>
       <b-list-group-item
         v-for="bot in allAvailableBots"
         :key="bot.botId"
-        button
         :active="bot.botId === selectedBot"
         :title="`${bot.botId} - ${bot.botName} - ${bot.botUrl}`"
         @click="selectBot(bot.botId)"
       >
-        {{ bot.botName || bot.botId }}
-        {{ allIsBotOnline[bot.botId] ? 'Online' : 'Offline' }}
-
-        <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>
+        <bot-entry :bot="bot" :no-buttons="small" />
       </b-list-group-item>
     </b-list-group>
-    <LoginModal class="mt-2" login-text="Add new bot" />
+    <LoginModal v-if="!small" class="mt-2" login-text="Add new bot" />
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Component, Prop, Vue } from 'vue-property-decorator';
 import { namespace } from 'vuex-class';
 import { MultiBotStoreGetters } from '@/store/modules/botStoreWrapper';
 import LoginModal from '@/views/LoginModal.vue';
-import EditIcon from 'vue-material-design-icons/Cog.vue';
-import DeleteIcon from 'vue-material-design-icons/Delete.vue';
-import { BotDescriptor, BotDescriptors } from '@/types';
+import BotEntry from '@/components/BotEntry.vue';
+import { BotDescriptors } from '@/types';
 
 const ftbot = namespace('ftbot');
 
-@Component({ components: { LoginModal, DeleteIcon, EditIcon } })
+@Component({ components: { LoginModal, BotEntry } })
 export default class BotList extends Vue {
+  @Prop({ default: false, type: Boolean }) small!: boolean;
+
   @ftbot.Getter [MultiBotStoreGetters.selectedBot]: string;
 
   @ftbot.Getter [MultiBotStoreGetters.allIsBotOnline];
 
   @ftbot.Getter [MultiBotStoreGetters.allAvailableBots]: BotDescriptors;
 
-  @ftbot.Action removeBot;
-
   @ftbot.Action selectBot;
-
-  clickRemoveBot(botId: BotDescriptor) {
-    //
-    this.$bvModal.msgBoxConfirm(`Really remove (logout) from ${botId}?`).then((value: boolean) => {
-      if (value) {
-        this.removeBot(botId.botId);
-      }
-    });
-  }
 }
 </script>
 

src/components/layout/NavBar.vue

@@ -30,7 +30,13 @@
         </b-navbar-nav>
 
         <!-- Right aligned nav items -->
-        <b-navbar-nav class="ml-auto">
+        <b-navbar-nav class="ml-auto" menu-class="w-100">
+          <b-dropdown size="sm" class="m-1" variant="outline-info">
+            <template #button-content>
+              <BotEntry class="d-inline" :bot="selectedBotObj" :no-buttons="true" />
+            </template>
+            <BotList :small="true" />
+          </b-dropdown>
           <ReloadControl class="mr-3" />
           <li class="nav-item text-secondary mr-2">
             <b-nav-text class="verticalCenter small mr-2">
@@ -86,13 +92,16 @@ import Favico from 'favico.js';
 import { OpenTradeVizOptions, SettingsGetters } from '@/store/modules/settings';
 import { MultiBotStoreGetters } from '@/store/modules/botStoreWrapper';
 import ReloadControl from '@/components/ftbot/ReloadControl.vue';
+import BotEntry from '@/components/BotEntry.vue';
+import BotList from '@/components/BotList.vue';
+import { BotDescriptor } from '@/types';
 
 const ftbot = namespace('ftbot');
 const layoutNs = namespace('layout');
 const uiSettingsNs = namespace('uiSettings');
 
 @Component({
-  components: { LoginModal, BootswatchThemeSelect, ReloadControl },
+  components: { LoginModal, BootswatchThemeSelect, ReloadControl, BotEntry, BotList },
 })
 export default class NavBar extends Vue {
   pingInterval: number | null = null;
@@ -119,6 +128,8 @@ export default class NavBar extends Vue {
 
   @ftbot.Getter [BotStoreGetters.canRunBacktest]!: boolean;
 
+  @ftbot.Getter [MultiBotStoreGetters.selectedBotObj]!: BotDescriptor;
+
   @layoutNs.Getter [LayoutGetters.getLayoutLocked]: boolean;
 
   @layoutNs.Action [LayoutActions.resetDashboardLayout];

src/store/modules/botStoreWrapper.ts

@@ -16,6 +16,7 @@ interface FTMultiBotState {
 export enum MultiBotStoreGetters {
   hasBots = 'hasBots',
   selectedBot = 'selectedBot',
+  selectedBotObj = 'selectedBotObj',
   allAvailableBots = 'allAvailableBots',
   allAvailableBotsList = 'allAvailableBotsList',
   allIsBotOnline = 'allIsBotOnline',
@@ -41,6 +42,9 @@ export default function createBotStore(store) {
     [MultiBotStoreGetters.selectedBot](state: FTMultiBotState): string {
       return state.selectedBot;
     },
+    [MultiBotStoreGetters.selectedBotObj](state: FTMultiBotState): BotDescriptor {
+      return state.availableBots[state.selectedBot];
+    },
     [MultiBotStoreGetters.allAvailableBots](state: FTMultiBotState): BotDescriptors {
       return state.availableBots;
     },
@@ -136,6 +140,7 @@ export default function createBotStore(store) {
       commit('selectBot', botId);
     },
     setAutoRefresh({ dispatch, commit }, newRefreshValue) {
+      // TODO: global autorefresh, or per subbot?
       console.log('setAutoRefresh', newRefreshValue);
       commit('setAutoRefresh', newRefreshValue);
       // TODO: Investigate this -

src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <div class="container">
+    <div class="container col-12 col-sm-6 col-lg-4">
       <bot-list />
     </div>
     <hr />