Improve Botselection view

This commit is contained in:
Matthias 2021-08-29 20:17:34 +02:00
parent b23c122629
commit a96eb11812
5 changed files with 88 additions and 31 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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];

View File

@ -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 -

View File

@ -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 />