Better handle backup progress in site item

This commit is contained in:
Johannes Zellner
2025-09-22 17:26:49 +02:00
parent 4686e38a5e
commit 69d92ba0a8
2 changed files with 16 additions and 12 deletions
+1 -1
View File
@@ -358,7 +358,7 @@ onMounted(async () => {
</Dialog>
<template #header-buttons>
<Button v-if="sites.length === 1" @click="onBackup(sites[0].id)" :loading="backupBusy" :disabled="backupBusy">{{ $t('backups.listing.backupNow') }}</Button>
<Button v-if="sites.length <= 1" @click="onBackup(sites[0].id)" :loading="backupBusy" :disabled="sites.length || backupBusy">{{ $t('backups.listing.backupNow') }}</Button>
<Button v-else :menu="sitesMenu" :loading="backupBusy" :disabled="backupBusy">{{ $t('backups.listing.backupNow') }}</Button>
<Button tool secondary :menu="taskLogsMenu" :disabled="!taskLogsMenu.length">{{ $t('main.action.logs') }}</Button>
</template>
+15 -11
View File
@@ -228,18 +228,19 @@ onMounted(async () => {
<div>
<ProgressBar mode="indeterminate" v-if="busy" slim :show-label="false" />
<div class="backup-site" v-for="site in sites" :key="site.id">
<div style="display: flex; align-items: center; gap: 10px">
<div style="display: flex; align-items: center;">
<StateLED :busy="site.status.busy" :state="site.status.state"/>
<div class="backup-site-details">
<div><b style="font-size: 16px">{{ site.name }}</b><i v-if="site.primary" style="padding-left: 5px" class="fa-solid fa-star"></i></div>
<div>
{{ $t('backups.configureBackupStorage.provider') }}: <b>{{ site.provider }}</b> - {{ $t('backups.configureBackupStorage.format') }}: <b>{{ site.format }}</b> <i v-if="site.encrypted" class="fa-solid fa-lock"></i></div>
<div class="backup-site-task">
<div v-if="site.task && site.task.success">Last backup: <b>{{ prettyLongDate(site.task.ts) }}</b></div>
<div v-if="site.task && site.task.error">Error: <b>{{ site.task.error }}</b></div>
<div v-else-if="site.task && site.task.running">
<ProgressBar :value="site.task.percent" /> {{ site.task.message }}
</div>
</div>
<div class="backup-site-details">
<div><b style="font-size: 16px">{{ site.name }}</b><i v-if="site.primary" style="padding-left: 5px" class="fa-solid fa-star"></i></div>
<div>
{{ $t('backups.configureBackupStorage.provider') }}: <b>{{ site.provider }}</b> - {{ $t('backups.configureBackupStorage.format') }}: <b>{{ site.format }}</b> <i v-if="site.encrypted" class="fa-solid fa-lock"></i></div>
<div class="backup-site-task">
<div v-if="site.task && site.task.success">Last backup: <b>{{ prettyLongDate(site.task.ts) }}</b></div>
<div v-if="site.task && site.task.error">Error: <b>{{ site.task.error }}</b></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;">{{ site.task.percent }}% {{ site.task.message }}</div>
</div>
</div>
</div>
@@ -258,6 +259,7 @@ onMounted(async () => {
display: flex;
border-radius: var(--pankow-border-radius);
padding: 10px;
gap: 10px;
margin-bottom: 10px;
justify-content: space-between;
}
@@ -270,6 +272,8 @@ onMounted(async () => {
display: flex;
flex-direction: column;
gap: 6px;
flex-grow: 1;
overflow: hidden;
}
.backup-site-action {