136 lines
3.4 KiB
Vue
136 lines
3.4 KiB
Vue
<template>
|
|
<v-card class="dm-details-card">
|
|
<v-card-actions>
|
|
<v-text-field :model-value="dm_download_location" readonly @click="$qt.callMethod('change_path')"></v-text-field>
|
|
</v-card-actions>
|
|
<v-divider/>
|
|
<v-card-text class="scrollable-content">
|
|
<!-- Liste des fichiers en téléchargement -->
|
|
<div v-if="Object.keys(filterFiles.downloading).length > 0">
|
|
<h3>Fichiers en téléchargement</h3>
|
|
<v-list density="compact">
|
|
<v-list-item v-for="(file, key) in filterFiles.downloading" :key="key">
|
|
<template v-slot:title>
|
|
{{ file.rel_path }}
|
|
</template>
|
|
<template v-slot:subtitle>
|
|
<v-progress-linear
|
|
:model-value="file.stats.percent" height="12" color="blue">
|
|
</v-progress-linear>
|
|
</template>
|
|
</v-list-item>
|
|
</v-list>
|
|
</div>
|
|
<!-- Liste des fichiers en attente -->
|
|
<div>
|
|
<h3>Fichiers en attente</h3>
|
|
<v-list density="compact">
|
|
<v-list-item v-for="(file, key) in filterFiles.waiting" :key="key">
|
|
<template v-slot:title>
|
|
{{ file.rel_path }}
|
|
</template>
|
|
<template v-slot:subtitle>
|
|
En attente
|
|
</template>
|
|
</v-list-item>
|
|
</v-list>
|
|
</div>
|
|
|
|
<!-- Liste des fichiers terminés -->
|
|
<div>
|
|
<h3>Fichiers terminés</h3>
|
|
<v-list density="compact">
|
|
<v-list-item v-for="(file, key) in filterFiles.finished" :key="key">
|
|
<template v-slot:title>
|
|
{{ file.rel_path }}
|
|
</template>
|
|
<template v-slot:subtitle>
|
|
|
|
</template>
|
|
</v-list-item>
|
|
</v-list>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {fs_format, fs_speed_format} from "@/plugins/utils.js";
|
|
</script>
|
|
|
|
<script>
|
|
|
|
|
|
export default {
|
|
|
|
props: {
|
|
dm_files: {
|
|
required: true,
|
|
type: Object
|
|
},
|
|
dm_status: {
|
|
required: true,
|
|
type: Object
|
|
},
|
|
dm_download_location: {
|
|
required: true,
|
|
type: String
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
|
|
}
|
|
},
|
|
mounted(){
|
|
|
|
},
|
|
methods: {
|
|
|
|
},
|
|
computed: {
|
|
filterFiles(){
|
|
let waiting = {},
|
|
downloading = {},
|
|
finished = {};
|
|
|
|
for(const [file_id, file] of Object.entries(this.dm_files)){
|
|
if(file.downloaded){
|
|
finished[file_id] = file;
|
|
}else if(file_id in this.dm_status.downloading){
|
|
downloading[file_id] = file;
|
|
if(file_id in this.dm_status["downloader_stats"]){
|
|
downloading[file_id]["stats"] = this.dm_status["downloader_stats"][file_id];
|
|
}else{
|
|
downloading[file_id]["stats"] = {
|
|
total_size: file.size,
|
|
downloaded_size: 0,
|
|
speed: 0,
|
|
percent: 0,
|
|
eta: 0,
|
|
};
|
|
}
|
|
}else{
|
|
waiting[file_id] = file;
|
|
}
|
|
}
|
|
|
|
return {waiting, downloading, finished};
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.scrollable-content {
|
|
max-height: 400px; /* Définissez la hauteur maximale souhaitée */
|
|
overflow-y: auto; /* Active le défilement vertical quand nécessaire */
|
|
overflow-x: hidden; /* Empêche le défilement horizontal */
|
|
padding-right: 8px; /* Espace pour la barre de défilement */
|
|
}
|
|
|
|
.dm-details-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
</style> |