init

app/frontend/src/components/torrent/DMDetails.vue

@@ -0,0 +1,123 @@
+<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>
+
+            </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;
+        }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>