From 5d7120d1cab3a3be93205cf250979b07f2e43d1a Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 23 Nov 2024 08:46:39 +0100
Subject: [PATCH] feat: Improve download-main settings

---
 src/components/ftbot/DownloadDataMain.vue | 80 ++++++++++++++++-------
 1 file changed, 55 insertions(+), 25 deletions(-)

diff --git a/src/components/ftbot/DownloadDataMain.vue b/src/components/ftbot/DownloadDataMain.vue
index 5de203a3..e03b989d 100644
--- a/src/components/ftbot/DownloadDataMain.vue
+++ b/src/components/ftbot/DownloadDataMain.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DownloadDataPayload } from '@/types';
+import { DownloadDataPayload, ExchangeSelection, MarginMode, TradingMode } from '@/types';
 
 const botStore = useBotStore();
 const pairs = ref<string[]>(['XRP/USDT', 'BTC/USDT']);
@@ -7,27 +7,29 @@ const timeframes = ref<string[]>(['5m', '1h']);
 
 const { pairTemplates } = usePairTemplates();
 
-const exchange = ref({
+const exchange = ref<{
+  customExchange: boolean;
+  selectedExchange: ExchangeSelection;
+}>({
   customExchange: false,
   selectedExchange: {
     exchange: 'binance',
     trade_mode: {
-      margin_mode: '',
-      trading_mode: 'spot',
+      margin_mode: MarginMode.NONE,
+      trading_mode: TradingMode.SPOT,
     },
   },
 });
 
-function addPair() {
-  pairs.value.push('');
-}
+const erase = ref(false);
+const downloadTrades = ref(false);
+
+// State to track the collapse status
+const isAdvancedOpen = ref(false);
 
 function addPairs(_pairs: string[]) {
   pairs.value.push(..._pairs);
 }
-function addTimeframe() {
-  timeframes.value.push('');
-}
 
 async function startDownload() {
   const payload: DownloadDataPayload = {
@@ -35,12 +37,19 @@ async function startDownload() {
     timeframes: timeframes.value.filter((tf) => tf !== ''),
     timerange: '20240101-',
   };
-  if (exchange.value.customExchange) {
-    console.log('setting custom exchange props');
-    payload.exchange = exchange.value.selectedExchange.exchange;
-    payload.trading_mode = exchange.value.selectedExchange.trade_mode.trading_mode;
-    payload.margin_mode = exchange.value.selectedExchange.trade_mode.margin_mode;
+
+  // Include advanced options only if the section is open
+  if (isAdvancedOpen.value) {
+    payload.erase = erase.value;
+    payload.download_trades = downloadTrades.value;
+
+    if (exchange.value.customExchange) {
+      payload.exchange = exchange.value.selectedExchange.exchange;
+      payload.trading_mode = exchange.value.selectedExchange.trade_mode.trading_mode;
+      payload.margin_mode = exchange.value.selectedExchange.trade_mode.margin_mode;
+    }
   }
+
   console.log(payload);
   await botStore.activeBot.startDataDownload(payload);
 }
@@ -78,20 +87,41 @@ async function startDownload() {
             </div>
           </div>
         </div>
+
         <div class="mb-2 border rounded-1 p-2 text-start">
-          <BFormCheckbox v-model="exchange.customExchange" class="mb-2">
-            Custom Exchange
-          </BFormCheckbox>
-          <ExchangeSelect v-if="exchange.customExchange" v-model="exchange.selectedExchange" />
+          <BButton
+            v-b-toggle.advanced-options
+            class="mb-2"
+            @click="isAdvancedOpen = !isAdvancedOpen"
+          >
+            Advanced Options
+            <i-mdi-chevron-down v-if="!isAdvancedOpen" />
+            <i-mdi-chevron-up v-else />
+          </BButton>
+          <BCollapse id="advanced-options">
+            <div class="mb-2 border rounded-1 p-2 text-start">
+              <BFormCheckbox v-model="erase" class="mb-2">Erase existing data</BFormCheckbox>
+              <BFormCheckbox v-model="downloadTrades" class="mb-2">
+                Download Trades instead of OHLCV data
+              </BFormCheckbox>
+            </div>
+            <div class="mb-2 border rounded-1 p-2 text-start">
+              <BFormCheckbox
+                v-model="exchange.customExchange"
+                v-b-toggle.custom-exchange
+                class="mb-2"
+              >
+                Custom Exchange
+              </BFormCheckbox>
+              <BCollapse id="custom-exchange">
+                <ExchangeSelect v-model="exchange.selectedExchange" />
+              </BCollapse>
+            </div>
+          </BCollapse>
         </div>
+
         <BButton variant="primary" @click="startDownload">Start Download</BButton>
       </div>
     </BCard>
   </div>
 </template>
-
-<style scoped>
-.mb-3 {
-  margin-bottom: 1rem;
-}
-</style>