frequi_origin/src/components/ftbot/FTBotAPIPairList.vue

212 lines
5.7 KiB
Vue
Raw Normal View History

<template>
<!-- TODO We could move the list into a component since we are reusing the same code for both lists. -->
<div>
2020-05-23 08:23:01 +00:00
<div>
<h3>Whitelist Methods</h3>
2022-04-19 05:05:34 +00:00
<div v-if="botStore.activeBot.pairlistMethods.length" class="list">
<b-list-group v-for="(method, key) in botStore.activeBot.pairlistMethods" :key="key">
2020-05-23 08:23:01 +00:00
<b-list-group-item href="#" class="pair white">{{ method }}</b-list-group-item>
</b-list-group>
</div>
</div>
<!-- Show Whitelist -->
<h3>Whitelist</h3>
2022-04-19 05:05:34 +00:00
<div v-if="botStore.activeBot.whitelist.length" class="list">
<b-list-group v-for="(pair, key) in botStore.activeBot.whitelist" :key="key">
2021-12-11 16:21:19 +00:00
<b-list-group-item 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 -->
2020-05-27 19:13:48 +00:00
<div>
2021-12-11 16:21:19 +00:00
<label
class="mr-auto h3"
title="Blacklist - Select (followed by a click on '-') to remove pairs"
>Blacklist</label
>
<div class="float-right d-flex d-flex-columns pr-1">
<b-button
id="blacklist-add-btn"
class="mr-1"
2022-04-19 05:05:34 +00:00
:class="botStore.activeBot.botApiVersion >= 1.12 ? 'col-6' : ''"
size="sm"
2022-04-16 18:09:52 +00:00
>+
</b-button>
<b-button
2022-04-19 05:05:34 +00:00
v-if="botStore.activeBot.botApiVersion >= 1.12"
2021-12-11 16:21:19 +00:00
size="sm"
class="col-6"
title="Select pairs to delete pairs from your blacklist."
:disabled="blacklistSelect.length === 0"
@click="deletePairs"
>
<DeleteIcon :size="16" title="Delete Bot" />
</b-button>
</div>
2021-11-24 19:36:42 +00:00
<b-popover
title="Add to blacklist"
target="blacklist-add-btn"
2021-12-11 16:21:19 +00:00
triggers="click blur"
2021-11-24 19:36:42 +00:00
:show.sync="blackListShow"
>
2020-05-28 04:36:08 +00:00
<form ref="form" @submit.prevent>
2020-05-27 19:13:48 +00:00
<div>
<b-form-group label-cols="2" label="Pair" label-for="pair-input">
<b-form-input
id="pair-input"
v-model="newblacklistpair"
required
autofocus
></b-form-input>
</b-form-group>
<b-button
id="blacklist-submit"
2020-08-31 15:43:44 +00:00
class="float-right mb-2"
2020-05-27 19:13:48 +00:00
size="sm"
2020-05-28 04:36:08 +00:00
type="submit"
2020-05-27 19:13:48 +00:00
@click="addBlacklistPair"
2022-04-16 18:09:52 +00:00
>
Add</b-button
2020-05-27 19:13:48 +00:00
>
</div>
</form>
</b-popover>
</div>
2022-04-19 05:05:34 +00:00
<div v-if="botStore.activeBot.blacklist.length" class="list">
<b-list-group v-for="(pair, key) in botStore.activeBot.blacklist" :key="key">
2021-12-11 16:21:19 +00:00
<b-list-group-item
class="pair black"
:active="blacklistSelect.indexOf(key) > -1"
@click="blacklistSelectClick(key)"
><span class="check">&#x2714;</span>{{ pair }}</b-list-group-item
2021-12-11 16:21:19 +00:00
>
</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 lang="ts">
2021-12-11 16:21:19 +00:00
import DeleteIcon from 'vue-material-design-icons/Delete.vue';
2022-04-16 18:09:52 +00:00
import { defineComponent, ref, onMounted } from '@vue/composition-api';
2022-04-19 05:05:34 +00:00
import { useBotStore } from '@/stores/ftbotwrapper';
2022-04-16 18:09:52 +00:00
export default defineComponent({
name: 'FTBotAPIPairList',
components: { DeleteIcon },
setup() {
const newblacklistpair = ref('');
const blackListShow = ref(false);
const blacklistSelect = ref<number[]>([]);
2022-04-19 05:05:34 +00:00
const botStore = useBotStore();
2022-04-16 18:09:52 +00:00
const initBlacklist = () => {
2022-04-19 05:05:34 +00:00
if (botStore.activeBot.whitelist.length === 0) {
botStore.activeBot.getWhitelist();
2022-04-16 18:09:52 +00:00
}
2022-04-19 05:05:34 +00:00
if (botStore.activeBot.blacklist.length === 0) {
botStore.activeBot.getBlacklist();
2022-04-16 18:09:52 +00:00
}
};
const addBlacklistPair = () => {
if (newblacklistpair.value) {
blackListShow.value = false;
2022-04-19 05:05:34 +00:00
botStore.activeBot.addBlacklist({ blacklist: [newblacklistpair.value] });
2022-04-16 18:09:52 +00:00
newblacklistpair.value = '';
}
};
const blacklistSelectClick = (key) => {
console.log(key);
const index = blacklistSelect.value.indexOf(key);
if (index > -1) {
blacklistSelect.value.splice(index, 1);
} else {
blacklistSelect.value.push(key);
}
};
const deletePairs = () => {
if (blacklistSelect.value.length === 0) {
console.log('nothing to delete');
return;
}
// const pairlist = blacklistSelect.value;
2022-04-19 05:05:34 +00:00
const pairlist = botStore.activeBot.blacklist.filter(
2022-04-16 18:09:52 +00:00
(value, index) => blacklistSelect.value.indexOf(index) > -1,
);
console.log('Deleting pairs: ', pairlist);
2022-04-19 05:05:34 +00:00
botStore.activeBot.deleteBlacklist(pairlist);
2022-04-16 18:09:52 +00:00
blacklistSelect.value = [];
};
onMounted(() => {
initBlacklist();
});
return {
addBlacklistPair,
deletePairs,
initBlacklist,
blacklistSelectClick,
2022-04-19 05:05:34 +00:00
botStore,
2022-04-16 18:09:52 +00:00
newblacklistpair,
blackListShow,
blacklistSelect,
};
},
});
</script>
2021-12-11 16:21:19 +00:00
<style scoped lang="scss">
.check {
// Hidden checkbox on blacklist selection
2021-12-11 16:21:19 +00:00
background: #41b883;
opacity: 0;
border-radius: 50%;
z-index: 5;
width: 1.3em;
height: 1.3em;
top: -0.2em;
left: -0.2em;
position: absolute;
transition: opacity 0.2s;
}
2022-04-16 18:09:52 +00:00
.list-group-item.active .check {
opacity: 1;
2021-12-11 16:21:19 +00:00
}
2022-04-16 18:09:52 +00:00
.list {
display: grid;
2020-05-23 08:23:01 +00:00
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
grid-gap: 0.5rem;
padding-bottom: 1rem;
}
2022-04-16 18:09:52 +00:00
.pair {
border: 1px solid #ccc;
background: #41b883;
padding: 0.5rem;
border-radius: 5px;
text-align: center;
position: relative;
cursor: pointer;
}
2022-04-16 18:09:52 +00:00
.white {
background: white;
color: black;
}
.black {
background: black;
color: white;
}
</style>