frequi_origin/src/components/ftbot/PairListLive.vue

203 lines
5.1 KiB
Vue
Raw Normal View History

<template>
<div>
2020-05-23 08:23:01 +00:00
<div>
<h3>Whitelist Methods</h3>
2023-09-01 18:29:43 +00:00
<div v-if="botStore.activeBot.pairlistMethods.length" class="list wide">
<div
v-for="(method, key) in botStore.activeBot.pairlistMethods"
:key="key"
class="pair white align-middle border border-secondary"
>
{{ method }}
</div>
2020-05-23 08:23:01 +00:00
</div>
</div>
<!-- Show Whitelist -->
<h3 :title="`${botStore.activeBot.whitelist.length} pairs`">Whitelist</h3>
2022-04-19 05:05:34 +00:00
<div v-if="botStore.activeBot.whitelist.length" class="list">
2023-09-01 18:29:43 +00:00
<div
v-for="(pair, key) in botStore.activeBot.whitelist"
:key="key"
class="pair white align-middle border border-secondary text-small"
>
{{ pair }}
</div>
</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
2022-10-30 13:26:23 +00:00
class="me-auto h3"
2021-12-11 16:21:19 +00:00
title="Blacklist - Select (followed by a click on '-') to remove pairs"
>Blacklist</label
>
2022-10-30 13:26:23 +00:00
<div class="float-end d-flex d-flex-columns pe-1">
2021-12-11 16:21:19 +00:00
<b-button
id="blacklist-add-btn"
class="me-1"
2022-04-19 05:05:34 +00:00
:class="botStore.activeBot.botApiVersion >= 1.12 ? 'col-6' : ''"
size="sm"
2023-05-09 18:31:33 +00:00
><i-mdi-plus-box-outline />
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"
>
2023-05-09 16:25:28 +00:00
<i-mdi-delete />
2021-12-11 16:21:19 +00:00
</b-button>
</div>
2021-11-24 19:36:42 +00:00
<b-popover
title="Add to blacklist"
target="blacklist-add-btn"
2022-11-30 18:48:46 +00:00
triggers="click"
2023-04-13 04:39:21 +00:00
:show="blackListShow"
2021-11-24 19:36:42 +00:00
>
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"
2022-10-30 13:26:23 +00:00
class="float-end 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">
2023-09-01 18:29:43 +00:00
<div
v-for="(pair, key) in botStore.activeBot.blacklist"
:key="key"
class="pair black border border-secondary"
:class="blacklistSelect.indexOf(key) > -1 ? 'active' : ''"
@click="blacklistSelectClick(key)"
>
<span class="check"><i-mdi-check-circle /></span>{{ pair }}
</div>
</div>
<p v-else>BlackList Unavailable. Please Login and make sure server is running.</p>
<!-- Pagination -->
<!-- TODO Add pagination support -->
</div>
</template>
2023-05-09 18:04:57 +00:00
<script setup lang="ts">
2022-04-19 05:05:34 +00:00
import { useBotStore } from '@/stores/ftbotwrapper';
2023-05-09 18:04:57 +00:00
import { onMounted, ref } from 'vue';
2022-04-16 18:09:52 +00:00
2023-05-09 18:04:57 +00:00
const newblacklistpair = ref('');
const blackListShow = ref(false);
const blacklistSelect = ref<number[]>([]);
const botStore = useBotStore();
2022-04-16 18:09:52 +00:00
2023-05-09 18:04:57 +00:00
const initBlacklist = () => {
if (botStore.activeBot.whitelist.length === 0) {
botStore.activeBot.getWhitelist();
}
if (botStore.activeBot.blacklist.length === 0) {
botStore.activeBot.getBlacklist();
}
};
2022-04-16 18:09:52 +00:00
2023-05-09 18:04:57 +00:00
const addBlacklistPair = () => {
if (newblacklistpair.value) {
blackListShow.value = false;
2022-04-16 18:09:52 +00:00
2023-05-09 18:04:57 +00:00
botStore.activeBot.addBlacklist({ blacklist: [newblacklistpair.value] });
newblacklistpair.value = '';
}
};
2022-04-16 18:09:52 +00:00
2023-05-09 18:04:57 +00:00
const blacklistSelectClick = (key) => {
const index = blacklistSelect.value.indexOf(key);
if (index > -1) {
blacklistSelect.value.splice(index, 1);
} else {
blacklistSelect.value.push(key);
}
};
2022-04-16 18:09:52 +00:00
2023-05-09 18:04:57 +00:00
const deletePairs = () => {
if (blacklistSelect.value.length === 0) {
console.log('nothing to delete');
return;
}
// const pairlist = blacklistSelect.value;
const pairlist = botStore.activeBot.blacklist.filter(
(value, index) => blacklistSelect.value.indexOf(index) > -1,
);
console.log('Deleting pairs: ', pairlist);
botStore.activeBot.deleteBlacklist(pairlist);
blacklistSelect.value = [];
};
onMounted(() => {
initBlacklist();
2022-04-16 18:09:52 +00:00
});
</script>
2021-12-11 16:21:19 +00:00
<style scoped lang="scss">
.check {
// Hidden checkbox on blacklist selection
2023-05-09 18:31:33 +00:00
// background: white;
color: #41b883;
opacity: 0;
2023-05-09 18:31:33 +00:00
// border-radius: 50%;
z-index: 5;
width: 1.3em;
height: 1.3em;
2023-05-09 18:31:33 +00:00
top: -0.3em;
left: -0.3em;
position: absolute;
transition: opacity 0.2s;
}
2022-04-16 18:09:52 +00:00
2023-09-01 18:29:43 +00:00
.pair.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;
}
2023-09-01 18:29:43 +00:00
.wide {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
2022-04-16 18:09:52 +00:00
.pair {
background: #41b883;
padding: 0.5rem;
border-radius: 5px;
cursor: pointer;
}
2022-04-16 18:09:52 +00:00
.white {
background: white;
color: black;
}
.black {
background: black;
color: white;
}
</style>