From c908bef9667bc28ad46dc26a7421653e84e85ed9 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sun, 17 Nov 2024 11:37:41 +0100
Subject: [PATCH] feat: add multi-task progress tracking

---
 .../ftbot/BackgroundJobTracking.vue           | 60 ++++++++++++++-----
 1 file changed, 45 insertions(+), 15 deletions(-)

diff --git a/src/components/ftbot/BackgroundJobTracking.vue b/src/components/ftbot/BackgroundJobTracking.vue
index 438fe040..54264b1e 100644
--- a/src/components/ftbot/BackgroundJobTracking.vue
+++ b/src/components/ftbot/BackgroundJobTracking.vue
@@ -1,20 +1,50 @@
 <script setup lang="ts">
-const { runningJobs } = useBackgroundJob();
+const { runningJobs, clearJobs } = 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'" />
-
-      <span v-else>{{ job.job_category }}</span>
-      <div class="d-flex justify-content-between w-25">
-        <i-mdi-check v-if="job.status === 'success'" class="text-success" title="" />
-        <span v-else>{{ job.status }} </span>
-
-        <span class="w-25">{{ job.progress }}</span>
-      </div>
-      <BProgress class="w-100 flex-grow" :value="job.progress" show-progress :max="100" striped />
-    </BListGroupItem>
-  </BListGroup>
+  <div class="d-flex flex-row align-items-end gap-1">
+    <BListGroup class="ms-2 w-100 flex-grow">
+      <BListGroupItem
+        v-for="(job, key) in runningJobs"
+        :key="key"
+        class="d-flex gap-2 align-items-center"
+        :title="key"
+      >
+        <i-mdi-download-box-outline v-if="job.taskStatus?.job_category === 'download_data'" />
+        <span v-else>{{ job.taskStatus?.job_category }}</span>
+        <div class="d-flex justify-content-between">
+          <i-mdi-check v-if="job.taskStatus?.status === 'success'" class="text-success" title="" />
+          <span v-else>{{ job.taskStatus?.status }} </span>
+          <span v-if="job.taskStatus?.progress" class="w-25">{{ job.taskStatus?.progress }}</span>
+        </div>
+        <BProgress
+          v-if="job.taskStatus?.progress"
+          class="w-100 flex-grow"
+          :value="job.taskStatus?.progress"
+          show-progress
+          :max="100"
+          striped
+        />
+        <div v-if="job.taskStatus?.progress_tasks" class="d-flex flex-column w-100 flex-grow gap-2">
+          <div
+            v-for="[tkey, t] in Object.entries(job.taskStatus?.progress_tasks)"
+            :key="tkey"
+            class="w-100"
+          >
+            {{ t.description }}
+            <BProgress
+              class="w-100 flex-grow"
+              :value="t.progress"
+              show-progress
+              :variant="job.taskStatus?.status === 'success' ? 'success' : 'primary'"
+              :max="t.total"
+              striped
+            />
+          </div>
+        </div>
+      </BListGroupItem>
+    </BListGroup>
+    <BButton size="sm" class="ms-auto" @click="clearJobs"><i-mdi-delete /></BButton>
+  </div>
 </template>