oxpanel25/app/frontend/src/components/torrent/TorrentItem.vue

<template>
  <v-card @click="show_files = !show_files">
    <v-progress-linear height="20" :color="progressData.color" :model-value="progressData.value">
      <!-- barre de progression -->
<!--      <v-progress-circular-->
<!--        v-if="!torrent.transmission_data.rateDownload && !torrent.transmission_data.rateUpload"-->
<!--        size="15"-->
<!--        indeterminate-->
<!--        :color="torrent.transmission_data.progress < 100 ? 'green':'red'"-->
<!--      />-->

<!--      Si téléchargement en cours-->
      <v-chip variant="text" color="white" v-if="progressData.mode === 'download'">
        <v-icon
          v-if="torrent.transmission_data.rateDownload"
          color="green"
          icon="mdi-arrow-down-bold"
        />
        {{progressData.value}}%
        <strong style="padding-left: 5px" v-if="torrent.transmission_data.rateDownload">
          ({{fs_speed_format(torrent.transmission_data.rateDownload)}}/s)
        </strong>
      </v-chip>

<!--      Si téléchargement terminé-->
      <v-chip variant="text" color="red" v-else>
        <v-icon
          v-if="torrent.transmission_data.rateUpload"
          color="red"
          icon="mdi-arrow-up-bold"
        />
        {{fs_format(torrent.transmission_data.uploadedEver)}}
        <strong style="padding-left: 5px" v-if="torrent.transmission_data.rateUpload">
          ({{fs_speed_format(torrent.transmission_data.rateUpload)}}/s)
        </strong>
      </v-chip>
    </v-progress-linear>
    <v-row no-gutters>
      <!-- ligne du haut -->
      <v-col>
        <v-card-text v-text="torrent.name"></v-card-text>
      </v-col>
      <v-col lg="1">
        <v-card-text v-text="fs_format(torrent.size)"></v-card-text>
      </v-col>
    </v-row>
    <v-row v-if="torrent.transmission_data.progress < 100" justify="end" no-gutters>
      <!-- ligne du milieu -->
      <v-col lg="2">
        <v-card-text>remaining : {{fs_format(torrent.transmission_data.leftUntilDone)}}/{{progressData.eta}}</v-card-text>
      </v-col>
    </v-row>
    <v-card-actions>
      <v-btn :disabled="torrent.transmission_data.progress < 100" @click.stop="downloadClicked" color="green" :icon="torrent.count_files === 1 ? 'mdi-download':'mdi-folder-download'"/>
      <v-dialog v-model="share_modal" max-width="600">
        <template v-slot:activator="{props}">
          <v-btn icon="mdi-share-variant" v-bind="props"/>
        </template>
        <TorrentShare :torrent="torrent"/>
      </v-dialog>

      <v-spacer/>
      <v-btn @click.stop="deleteClicked" color="red" icon="mdi-delete-variant" :disabled="delete_disabled"/>
    </v-card-actions>
    <v-expand-transition>
      <div v-if="show_files">
        <v-divider />
        <FileList
          v-if="show_files"
          :torrent_id="torrent.id"
          :is_download_finished="torrent.transmission_data.progress >= 100"
        />
      </div>
    </v-expand-transition>
  </v-card>
</template>

<script setup>
import {fs_format, fs_speed_format} from "@/plugins/utils.js";
import FileList from "@/components/torrent/FileList.vue";
import TorrentShare from "@/components/torrent/TorrentShare.vue";
</script>

<script>
import Cookies from "js-cookie";
import {toHHMMSS} from "@/plugins/utils.js";
export default {
  emits: ["delete"],
  props: {
    torrent: {
      required: true,
      type: Object,
    },
    delete_disabled: {
      required: true,
      type: Boolean,
    }
  },
  data(){
    return {
      show_files: false,
      share_modal: false,
    }
  },
  methods: {
    async downloadClicked(){
      if(this.torrent.transmission_data.progress < 100) return;
      if(this.$qt.is_active){
        let response = await fetch(`/api/torrent/files/?torrent=${this.torrent.id}`);
        let files = await response.json();
        this.$qt.callMethod("add_files", files);
      }else{
        let a = document.createElement("a");
        a.href = this.torrent.download_url;
        a.setAttribute("download", "download");
        a.click();
      }
    },
    async deleteClicked(){
      this.$emit("delete", this.torrent.id);
      await fetch(`/api/torrents/${this.torrent.id}/`, {
        method: "DELETE",
        headers: {
          "X-CSRFToken": Cookies.get("csrftoken"),
        }
      })
    }
  },
  computed: {
    progressData(){
      let color = "red", value = 0, mode, eta;
      if(this.torrent.transmission_data.progress < 100){
        color = "blue";
        mode = "download";
        value = this.torrent.transmission_data.progress;
        if(this.torrent.transmission_data.eta !== -1){
          eta = toHHMMSS(this.torrent.transmission_data.eta);
        }else{
          eta = "-";
        }
      }else{
        color = "green";
        mode = "upload";
        value = Number((this.torrent.transmission_data.uploadRatio / 5) * 100).toFixed(2)
        if(value > 100) value = 100;
      }
      return {color, value, mode, eta};
    }
  }
}
</script>