feat: add multi-task progress tracking

This commit is contained in:
Matthias 2024-11-17 11:37:41 +01:00
parent c86b47b9e2
commit c908bef966

View File

@ -1,20 +1,50 @@
<script setup lang="ts"> <script setup lang="ts">
const { runningJobs } = useBackgroundJob(); const { runningJobs, clearJobs } = useBackgroundJob();
</script> </script>
<template> <template>
<BListGroup class="ms-2"> <div class="d-flex flex-row align-items-end gap-1">
<BListGroupItem v-for="(job, key) in runningJobs" :key="key" class="d-flex gap-2" :title="key"> <BListGroup class="ms-2 w-100 flex-grow">
<i-mdi-download-box-outline v-if="job.job_category === 'download_data'" /> <BListGroupItem
v-for="(job, key) in runningJobs"
<span v-else>{{ job.job_category }}</span> :key="key"
<div class="d-flex justify-content-between w-25"> class="d-flex gap-2 align-items-center"
<i-mdi-check v-if="job.status === 'success'" class="text-success" title="" /> :title="key"
<span v-else>{{ job.status }} </span> >
<i-mdi-download-box-outline v-if="job.taskStatus?.job_category === 'download_data'" />
<span class="w-25">{{ job.progress }}</span> <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> </div>
<BProgress class="w-100 flex-grow" :value="job.progress" show-progress :max="100" striped />
</BListGroupItem> </BListGroupItem>
</BListGroup> </BListGroup>
<BButton size="sm" class="ms-auto" @click="clearJobs"><i-mdi-delete /></BButton>
</div>
</template> </template>