mirror of
https://github.com/freqtrade/frequi.git
synced 2024-11-10 18:23:50 +00:00
Improve Botselection view
This commit is contained in:
parent
b23c122629
commit
a96eb11812
60
src/components/BotEntry.vue
Normal file
60
src/components/BotEntry.vue
Normal 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] ? '🟢' : '🔴'
|
||||
}}</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>
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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];
|
||||
|
|
|
@ -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 -
|
||||
|
|
|
@ -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 />
|
||||
|
|
Loading…
Reference in New Issue
Block a user