Improve and simplify pairlist view

This commit is contained in:
Matthias 2023-09-01 20:29:43 +02:00
parent 0fe3d9f024
commit ca15512598

View File

@ -1,21 +1,28 @@
<template> <template>
<!-- TODO We could move the list into a component since we are reusing the same code for both lists. -->
<div> <div>
<div> <div>
<h3>Whitelist Methods</h3> <h3>Whitelist Methods</h3>
<div v-if="botStore.activeBot.pairlistMethods.length" class="list"> <div v-if="botStore.activeBot.pairlistMethods.length" class="list wide">
<b-list-group v-for="(method, key) in botStore.activeBot.pairlistMethods" :key="key"> <div
<b-list-group-item href="#" class="pair white">{{ method }}</b-list-group-item> v-for="(method, key) in botStore.activeBot.pairlistMethods"
</b-list-group> :key="key"
class="pair white align-middle border border-secondary"
>
{{ method }}
</div>
</div> </div>
</div> </div>
<!-- Show Whitelist --> <!-- Show Whitelist -->
<h3 :title="`${botStore.activeBot.whitelist.length} pairs`">Whitelist</h3> <h3 :title="`${botStore.activeBot.whitelist.length} pairs`">Whitelist</h3>
<div v-if="botStore.activeBot.whitelist.length" class="list"> <div v-if="botStore.activeBot.whitelist.length" class="list">
<b-list-group v-for="(pair, key) in botStore.activeBot.whitelist" :key="key"> <div
<b-list-group-item class="pair white">{{ pair }}</b-list-group-item> v-for="(pair, key) in botStore.activeBot.whitelist"
</b-list-group> :key="key"
class="pair white align-middle border border-secondary text-small"
>
{{ pair }}
</div>
</div> </div>
<p v-else>List Unavailable. Please Login and make sure server is running.</p> <p v-else>List Unavailable. Please Login and make sure server is running.</p>
<hr /> <hr />
@ -76,14 +83,15 @@
</b-popover> </b-popover>
</div> </div>
<div v-if="botStore.activeBot.blacklist.length" class="list"> <div v-if="botStore.activeBot.blacklist.length" class="list">
<b-list-group v-for="(pair, key) in botStore.activeBot.blacklist" :key="key"> <div
<b-list-group-item v-for="(pair, key) in botStore.activeBot.blacklist"
class="pair black" :key="key"
:active="blacklistSelect.indexOf(key) > -1" class="pair black border border-secondary"
@click="blacklistSelectClick(key)" :class="blacklistSelect.indexOf(key) > -1 ? 'active' : ''"
><span class="check"><i-mdi-check-circle /></span>{{ pair }}</b-list-group-item @click="blacklistSelectClick(key)"
> >
</b-list-group> <span class="check"><i-mdi-check-circle /></span>{{ pair }}
</div>
</div> </div>
<p v-else>BlackList Unavailable. Please Login and make sure server is running.</p> <p v-else>BlackList Unavailable. Please Login and make sure server is running.</p>
<!-- Pagination --> <!-- Pagination -->
@ -119,7 +127,6 @@ const addBlacklistPair = () => {
}; };
const blacklistSelectClick = (key) => { const blacklistSelectClick = (key) => {
console.log(key);
const index = blacklistSelect.value.indexOf(key); const index = blacklistSelect.value.indexOf(key);
if (index > -1) { if (index > -1) {
blacklistSelect.value.splice(index, 1); blacklistSelect.value.splice(index, 1);
@ -162,7 +169,7 @@ onMounted(() => {
transition: opacity 0.2s; transition: opacity 0.2s;
} }
.list-group-item.active .check { .pair.active .check {
opacity: 1; opacity: 1;
} }
@ -172,14 +179,14 @@ onMounted(() => {
grid-gap: 0.5rem; grid-gap: 0.5rem;
padding-bottom: 1rem; padding-bottom: 1rem;
} }
.wide {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.pair { .pair {
border: 1px solid #ccc;
background: #41b883; background: #41b883;
padding: 0.5rem; padding: 0.5rem;
border-radius: 5px; border-radius: 5px;
text-align: center;
position: relative;
cursor: pointer; cursor: pointer;
} }