Add backup task cancel button if task is active

This commit is contained in:
Johannes Zellner
2025-10-08 11:01:56 +02:00
parent 8c786f38ab
commit 71c52a87ec
+16 -6
View File
@@ -190,6 +190,11 @@ async function waitForSiteTask(site) {
}
}
async function onCancelTask(taskId) {
const [error] = await tasksModel.stop(taskId);
if (error) console.error('Failed to cancel task:', error);
}
async function refresh() {
busy.value = true;
@@ -262,7 +267,10 @@ onMounted(async () => {
<StateLED style="padding-top: 5px;" :busy="site.status.busy" :state="site.status.state"/>
</div>
<div class="backup-site-details">
<div style="margin-bottom: 5px;"><b style="font-size: 18px">{{ site.name }}</b><i style="margin-left: 10px">{{ prettyBackupContents(site.contents) }}</i></div>
<div style="margin-bottom: 5px; display: flex; justify-content: space-between; align-items: baseline;">
<div><b style="font-size: 18px">{{ site.name }}</b><i style="margin-left: 10px">{{ prettyBackupContents(site.contents) }}</i></div>
<Button tool plain secondary @click.capture="onActionMenu(site, $event)" icon="fa-solid fa-ellipsis" />
</div>
<div>
<i v-if="site.encrypted" class="fa-solid fa-lock"></i>
Storage: <b>{{ site.provider }} ({{ site.format }}) </b>
@@ -288,14 +296,16 @@ onMounted(async () => {
<div v-if="site.task && site.task.success">{{ $t('backup.sites.lastRun') }}: <b>{{ prettyLongDate(site.task.ts) }}</b></div>
<div v-if="site.task && site.task.error">{{ $t('backup.sites.lastRun') }}: <a :href="`/logs.html?taskId=${site.task.id}`" target="_blank"><span class="error-label">{{ site.task.error.message }} <Button small plain tool>Logs</Button></span></a></div>
<div v-if="site.task && site.task.running">
<ProgressBar :busy="true" :show-label="false" :value="site.task.percent" :mode="site.task.percent <= 0 ? 'indeterminate' : null" />
<div style="margin-top: 3px; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">{{ site.task.percent }}% {{ site.task.message }}</div>
<div style="margin-top: 10px; display: flex; align-items: center; gap: 10px; overflow: hidden;">
<div style="flex-grow: 1; overflow: hidden;">
<ProgressBar :busy="true" :show-label="false" :value="site.task.percent" :mode="site.task.percent <= 0 ? 'indeterminate' : null" />
<div style="margin-top: 3px; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">{{ site.task.percent }}% {{ site.task.message }}</div>
</div>
<Button danger plain tool icon="fa-solid fa-xmark" @click="onCancelTask(site.task.id)"></Button>
</div>
</div>
</div>
</div>
<div style="display: flex; align-items: center;">
<Button tool plain secondary @click.capture="onActionMenu(site, $event)" icon="fa-solid fa-ellipsis" />
</div>
</div>
</div>
</Section>