Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | <template>
<v-fade-transition>
<div
v-if="infos.length"
class="download-center"
>
<v-card
elevation="10"
class="pa-3"
>
<div class="text-subtitle-1 mb-2">Downloads</div>
<div
v-for="info in infos"
:key="info.Id"
class="d-flex align-center ga-3 mb-3"
>
<div class="flex-grow-1">
<div class="text-body-2">{{ label(info) }}</div>
<div class="text-caption mb-1">{{ detail(info) }}</div>
<v-progress-linear
:indeterminate="isIndeterminate(info)"
:model-value="pct(info)"
/>
</div>
<div class="d-flex ga-1">
<v-btn
size="small"
icon="pause"
@click="pause(info)"
/>
<v-btn
size="small"
icon="play_arrow"
@click="resume(info)"
/>
<v-btn
size="small"
icon="close"
@click="cancel(info)"
/>
</div>
</div>
</v-card>
</div>
</v-fade-transition>
</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useDownloadStore } from '@/stores/download.store';
const store = useDownloadStore();
const { infos } = storeToRefs(store);
function pct(info: any) {
const p = Math.round(info.Percentage ?? 0);
return p < 0 ? 0 : p > 100 ? 100 : p;
}
function isIndeterminate(info: any) {
return (
info.Total === 0 &&
(info.Percentage == null || Number.isNaN(info.Percentage))
);
}
function label(info: any) {
return (
info.Name ||
info.Title ||
info.FileName ||
info.filename ||
(info.Id ?? info.id)
);
}
function detail(info: any) {
if (info.Message) return info.Message;
if (info.Total && info.Completed != null)
return `${info.Completed} / ${info.Total}`;
return '';
}
function pause(info: any) {
store.requestPause(info.Id ?? info.id);
}
function resume(info: any) {
store.requestResume(info.Id ?? info.id);
}
function cancel(info: any) {
store.requestCancel(info.Id ?? info.id);
}
</script>
<style scoped>
.download-center {
position: absolute;
bottom: 16px;
left: 16px;
right: 16px;
z-index: 6;
}
</style>
|