From 2f8ce4174df6fdea1dc28dca71b8a8e2ba2b2e54 Mon Sep 17 00:00:00 2001
From: Diogo Silva <dbtdsilva@gmail.com>
Date: Sat, 24 Dec 2022 02:22:40 +0100
Subject: [PATCH 1/3] Added torrent listing to the qBittorrent

---
 src/widgets/qbittorrent/component.jsx | 116 ++++++++++++++++++++++++--
 1 file changed, 110 insertions(+), 6 deletions(-)

diff --git a/src/widgets/qbittorrent/component.jsx b/src/widgets/qbittorrent/component.jsx
index d3836a6ba1a..e64791f9636 100644
--- a/src/widgets/qbittorrent/component.jsx
+++ b/src/widgets/qbittorrent/component.jsx
@@ -1,9 +1,106 @@
+import { BsDownload, BsPause, BsUpload, BsExclamationTriangle, BsThreeDots, BsCheckLg } from "react-icons/bs";
 import { useTranslation } from "next-i18next";
 
 import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
+function secondsToTime(totalSeconds) {
+  const seconds = Math.floor((totalSeconds) % 60);
+  const minutes = Math.floor((totalSeconds / 60) % 60);
+  const hours = Math.floor((totalSeconds / (60 * 60)) % 24);
+  return { hours, minutes, seconds };
+}
+
+function secondsToString(totalSeconds) {
+  const { hours, minutes, seconds } = secondsToTime(totalSeconds);
+  const parts = [];
+  if (hours > 0) {
+    parts.push(hours);
+  }
+  parts.push(minutes);
+  parts.push(seconds);
+
+  return parts.map((part) => part.toString().padStart(2, "0")).join(":");
+}
+
+function getIconFromTorrentState(state) {
+  switch(state) {
+    case 'pausedUP':
+    case 'pausedDL':
+      return <BsPause className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80" />;
+    case 'uploading':
+    case 'queuedUP':
+    case 'stalledUP':
+    case 'checkingUP':
+    case 'forcedUP':
+      return <BsUpload className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80" />;
+    case 'allocating':
+    case 'downloading':
+    case 'metaDL':
+    case 'queuedDL':
+    case 'stalledDL':
+    case 'checkingDL':
+    case 'forcedDL':
+      return <BsDownload className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80" />;
+    case 'checkingResumeData':
+    case 'moving':
+      return <BsThreeDots className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80" />;
+    case 'missingFiles':
+    case 'error':
+    default:
+      return <BsExclamationTriangle className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80" />;
+  }
+}
+
+function readEtaFromTorrent(state) {
+  switch(state) {
+    case 'allocating':
+    case 'downloading':
+    case 'metaDL':
+    case 'queuedDL':
+    case 'stalledDL':
+    case 'checkingDL':
+    case 'forcedDL':
+      return true;
+    case 'error':
+    default:
+      return false;
+  }
+}
+
+function TorrentEntry({ torrent }) {
+  const { state, name, progress, eta, upspeed, dlspeed } = torrent;
+  const { t } = useTranslation();
+
+  return (
+    <div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex">
+      <div
+        className="absolute h-5 rounded-md bg-theme-200 dark:bg-theme-900/40 z-0"
+        style={{
+          width: `${progress * 100}%`,
+        }}
+      />
+      <div className="text-xs z-10 self-center ml-1">
+        {getIconFromTorrentState(state)}
+      </div>
+      <div className="text-xs z-10 self-center ml-2 relative w-full h-4 grow mr-2">
+        <div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden">{name}</div>
+      </div>
+      <div className="self-center text-xs flex justify-end w-28 mr-2 z-10">
+        {t("common.byterate", { value: dlspeed, decimals: 1 })}
+      </div>
+      <div className="self-center text-xs flex justify-end w-28 mr-2 z-10">
+        {t("common.byterate", { value: upspeed, decimals: 1 })}
+      </div>
+      <div className="self-center text-xs flex justify-end w-28 mr-2 z-10">
+        {readEtaFromTorrent(state) === true ? secondsToString(eta) :
+          <BsCheckLg className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80" />}
+      </div>
+    </div>
+  );
+}
+
 export default function Component({ service }) {
   const { t } = useTranslation();
 
@@ -42,11 +139,18 @@ export default function Component({ service }) {
   const leech = torrentData.length - completed;
 
   return (
-    <Container service={service}>
-      <Block label="qbittorrent.leech" value={t("common.number", { value: leech })} />
-      <Block label="qbittorrent.download" value={t("common.bibyterate", { value: rateDl, decimals: 1 })} />
-      <Block label="qbittorrent.seed" value={t("common.number", { value: completed })} />
-      <Block label="qbittorrent.upload" value={t("common.bibyterate", { value: rateUl, decimals: 1 })} />
-    </Container>
+    <>
+      <Container service={service}>
+        <Block label="qbittorrent.leech" value={t("common.number", { value: leech })} />
+        <Block label="qbittorrent.download" value={t("common.byterate", { value: rateDl, decimals: 1 })} />
+        <Block label="qbittorrent.seed" value={t("common.number", { value: completed })} />
+        <Block label="qbittorrent.upload" value={t("common.byterate", { value: rateUl, decimals: 1 })} />
+      </Container>
+      <div className={service.widget.fields?.includes('torrents') ? "flex flex-col w-full p-1" : "hidden"}>
+        {torrentData.map((torrent) => (
+          <TorrentEntry key={torrent.Id} torrent={torrent} />
+        ))}
+      </div>
+    </>
   );
 }

From e9aeed1f926162c88b982287422c10e8989685be Mon Sep 17 00:00:00 2001
From: Diogo Silva <dbtdsilva@gmail.com>
Date: Sat, 24 Dec 2022 02:48:33 +0100
Subject: [PATCH 2/3] Show torrents when requested in fields

---
 src/widgets/qbittorrent/component.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/qbittorrent/component.jsx b/src/widgets/qbittorrent/component.jsx
index e64791f9636..f8a938efbb0 100644
--- a/src/widgets/qbittorrent/component.jsx
+++ b/src/widgets/qbittorrent/component.jsx
@@ -137,7 +137,7 @@ export default function Component({ service }) {
   }
 
   const leech = torrentData.length - completed;
-
+  const torrentsEnabled = service.widget.fields === null || service.widget.fields?.includes('torrents');
   return (
     <>
       <Container service={service}>
@@ -146,7 +146,7 @@ export default function Component({ service }) {
         <Block label="qbittorrent.seed" value={t("common.number", { value: completed })} />
         <Block label="qbittorrent.upload" value={t("common.byterate", { value: rateUl, decimals: 1 })} />
       </Container>
-      <div className={service.widget.fields?.includes('torrents') ? "flex flex-col w-full p-1" : "hidden"}>
+      <div className={torrentsEnabled ? "flex flex-col w-full p-1" : "hidden"}>
         {torrentData.map((torrent) => (
           <TorrentEntry key={torrent.Id} torrent={torrent} />
         ))}

From 15b78a2f739e3480a22b3e2164c51dee0ca80950 Mon Sep 17 00:00:00 2001
From: Diogo Silva <dbtdsilva@gmail.com>
Date: Sat, 24 Dec 2022 03:01:41 +0100
Subject: [PATCH 3/3] Provided a more unique key to the rendering in
 qBittorrent widget

---
 src/widgets/qbittorrent/component.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/widgets/qbittorrent/component.jsx b/src/widgets/qbittorrent/component.jsx
index f8a938efbb0..1b10edeb10e 100644
--- a/src/widgets/qbittorrent/component.jsx
+++ b/src/widgets/qbittorrent/component.jsx
@@ -139,7 +139,7 @@ export default function Component({ service }) {
   const leech = torrentData.length - completed;
   const torrentsEnabled = service.widget.fields === null || service.widget.fields?.includes('torrents');
   return (
-    <>
+    <div>
       <Container service={service}>
         <Block label="qbittorrent.leech" value={t("common.number", { value: leech })} />
         <Block label="qbittorrent.download" value={t("common.byterate", { value: rateDl, decimals: 1 })} />
@@ -148,9 +148,9 @@ export default function Component({ service }) {
       </Container>
       <div className={torrentsEnabled ? "flex flex-col w-full p-1" : "hidden"}>
         {torrentData.map((torrent) => (
-          <TorrentEntry key={torrent.Id} torrent={torrent} />
+          <TorrentEntry key={torrent.name + torrent.added_on} torrent={torrent} />
         ))}
       </div>
-    </>
+    </div>
   );
 }