frequi_origin/src/components/ftbot/PairlistConfigResults.vue

<template>
  <b-container fluid>
    <b-row v-if="whitelist.length > 0">
      <b-col cols="12" md="2">
        <b-list-group>
          <b-list-group-item
            v-for="(pair, i) in whitelist"
            :key="pair.pair"
            button
            class="d-flex justify-content-between align-items-center py-1"
            :active="pair.pair === botStore.activeBot.selectedPair"
            :title="pair.pair"
            @click="botStore.activeBot.selectedPair = pair.pair"
          >
            <b-form-checkbox v-model="whitelist[i].enabled"></b-form-checkbox>
            {{ pair.pair }}
          </b-list-group-item>
        </b-list-group>
      </b-col>
      <b-col>
        <!-- probably needs changes in backend to work properly -->
        <CandleChartContainer :available-pairs="inputWhitelist" timeframe="5m" />
      </b-col>
      <b-col cols="12" md="2">
        <pre
          class="text-start"
        ><code>{{ whitelist.filter(p => p.enabled === true).map(p => p.pair) }}</code></pre>
      </b-col>
    </b-row>
    <b-row v-else>
      <b-col>
        <p>Evaluation returned 0 pairs</p>
      </b-col>
    </b-row>
  </b-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useBotStore } from '@/stores/ftbotwrapper';
import CandleChartContainer from '../charts/CandleChartContainer.vue';

const props = defineProps<{
  inputWhitelist: string[];
}>();
const botStore = useBotStore();

const whitelist = ref(
  props.inputWhitelist.map((p) => {
    return {
      enabled: true,
      pair: p,
    };
  }),
);
</script>