From e012da9d182ee4fbf44513fc8864d02aa963b08d Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sun, 3 Nov 2024 09:32:58 +0100
Subject: [PATCH] feat: add backgroundJobTracking initial view

---
 src/components.d.ts                            |  4 ++++
 src/components/ftbot/BackgroundJobTracking.vue | 14 ++++++++++++++
 src/components/ftbot/DownloadDataMain.vue      |  1 +
 3 files changed, 19 insertions(+)
 create mode 100644 src/components/ftbot/BackgroundJobTracking.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index 143ad191..e08f3a1e 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    BackgroundJobTracking: typeof import('./components/ftbot/BackgroundJobTracking.vue')['default']
     BacktestGraphs: typeof import('./components/ftbot/BacktestGraphs.vue')['default']
     BacktestHistoryLoad: typeof import('./components/ftbot/BacktestHistoryLoad.vue')['default']
     BacktestResultAnalysis: typeof import('./components/ftbot/BacktestResultAnalysis.vue')['default']
@@ -62,6 +63,8 @@ declare module 'vue' {
     BotStatus: typeof import('./components/ftbot/BotStatus.vue')['default']
     BPagination: typeof import('bootstrap-vue-next/components/BPagination')['BPagination']
     BPopover: typeof import('bootstrap-vue-next/components/BPopover')['BPopover']
+    BProgress: typeof import('bootstrap-vue-next/components/BProgress')['BProgress']
+    BProgressBar: typeof import('bootstrap-vue-next/components/BProgress')['BProgressBar']
     BRow: typeof import('bootstrap-vue-next/components/BContainer')['BRow']
     BSpinner: typeof import('bootstrap-vue-next/components/BSpinner')['BSpinner']
     BTab: typeof import('bootstrap-vue-next/components/BTabs')['BTab']
@@ -117,6 +120,7 @@ declare module 'vue' {
     IMdiContentSave: typeof import('~icons/mdi/content-save')['default']
     IMdiDelete: typeof import('~icons/mdi/delete')['default']
     IMdiDiceMultiple: typeof import('~icons/mdi/dice-multiple')['default']
+    IMdiDownloadBoxOutline: typeof import('~icons/mdi/download-box-outline')['default']
     IMdiEye: typeof import('~icons/mdi/eye')['default']
     IMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
     IMdiFolderLock: typeof import('~icons/mdi/folder-lock')['default']
diff --git a/src/components/ftbot/BackgroundJobTracking.vue b/src/components/ftbot/BackgroundJobTracking.vue
new file mode 100644
index 00000000..064dda32
--- /dev/null
+++ b/src/components/ftbot/BackgroundJobTracking.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const { runningJobs } = useBackgroundJob();
+</script>
+
+<template>
+  <BListGroup class="ms-2">
+    <BListGroupItem v-for="(job, key) in runningJobs" :key="key" class="d-flex gap-2" :title="key">
+      <i-mdi-download-box-outline v-if="job.job_category === 'download_data'" />
+
+      <div>{{ job.job_category }} {{ job.status }} {{ job.progress }}</div>
+      <BProgress class="w-100 flex-grow" :value="job.progress" show-progress :max="100" striped />
+    </BListGroupItem>
+  </BListGroup>
+</template>
diff --git a/src/components/ftbot/DownloadDataMain.vue b/src/components/ftbot/DownloadDataMain.vue
index 3f3bfca3..fb69fc26 100644
--- a/src/components/ftbot/DownloadDataMain.vue
+++ b/src/components/ftbot/DownloadDataMain.vue
@@ -42,6 +42,7 @@ async function startDownload() {
 
 <template>
   <div class="container">
+    <BackgroundJobTracking />
     <BCard header="Downloading Data">
       <div class="d-flex px-3 mb-3 gap-3 flex-column flex-lg-column">
         <div class="d-flex flex-row gap-5">