WebUI: Display torrent progress percentage in General tab

This PR adds torrent progress percentage next to pieces bar in General tab, as in the GUI. PR #21756.
qbittorrent · Nov 9, 2024 · 71f83cf · 71f83cf
1 parent 06fe3e5
commit 71f83cf
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 9 deletions.
diff --git a/src/webui/api/torrentscontroller.cpp b/src/webui/api/torrentscontroller.cpp
@@ -116,6 +116,7 @@ const QString KEY_PROP_SSL_CERTIFICATE = u"ssl_certificate"_s;
 const QString KEY_PROP_SSL_PRIVATEKEY = u"ssl_private_key"_s;
 const QString KEY_PROP_SSL_DHPARAMS = u"ssl_dh_params"_s;
 const QString KEY_PROP_HAS_METADATA = u"has_metadata"_s;
+const QString KEY_PROP_PROGRESS = u"progress"_s;
 
 
 // File keys
@@ -503,7 +504,8 @@ void TorrentsController::propertiesAction()
         {KEY_PROP_SAVE_PATH, torrent->savePath().toString()},
         {KEY_PROP_DOWNLOAD_PATH, torrent->downloadPath().toString()},
         {KEY_PROP_COMMENT, torrent->comment()},
-        {KEY_PROP_HAS_METADATA, torrent->hasMetadata()}
+        {KEY_PROP_HAS_METADATA, torrent->hasMetadata()},
+        {KEY_PROP_PROGRESS, torrent->progress()}
     };
 
     setResult(ret);

diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css
@@ -700,6 +700,22 @@ td.generalLabel {
     padding: 2px;
 }
 
+#propProgressWrapper {
+    align-items: center;
+    display: flex;
+    height: auto;
+    margin: 5px 2px;
+
+    & > span:not(:first-child, :empty) {
+        margin-left: 6px;
+        min-width: 3.5em;
+    }
+
+    & #progress {
+        flex: 1;
+    }
+}
+
 .piecesbarWrapper {
     position: relative;
     width: 100%;

diff --git a/src/webui/www/private/scripts/prop-general.js b/src/webui/www/private/scripts/prop-general.js
@@ -43,6 +43,7 @@ window.qBittorrent.PropGeneral ??= (() => {
     $("progress").appendChild(piecesBar);
 
     const clearData = () => {
+        document.getElementById("progressPercentage").textContent = "";
         $("time_elapsed").textContent = "";
         $("eta").textContent = "";
         $("nb_connections").textContent = "";
@@ -101,6 +102,8 @@ window.qBittorrent.PropGeneral ??= (() => {
                 if (data) {
                     // Update Torrent data
 
+                    document.getElementById("progressPercentage").textContent = window.qBittorrent.Misc.friendlyPercentage(data.progress);
+
                     const timeElapsed = (data.seeding_time > 0)
                         ? "QBT_TR(%1 (seeded for %2))QBT_TR[CONTEXT=PropertiesWidget]"
                         .replace("%1", window.qBittorrent.Misc.friendlyDuration(data.time_elapsed))

diff --git a/src/webui/www/private/views/properties.html b/src/webui/www/private/views/properties.html
@@ -1,12 +1,9 @@
 <div id="propGeneral" class="propertiesTabContent invisible unselectable">
-    <table style="width: 100%; padding: 3px 0 3px 2px;">
-        <tbody>
-            <tr>
-                <td style="text-align: right; white-space: nowrap">QBT_TR(Progress:)QBT_TR[CONTEXT=PropertiesWidget]</td>
-                <td id="progress" style="width: 100%"></td>
-            </tr>
-        </tbody>
-    </table>
+    <div id="propProgressWrapper">
+        <span>QBT_TR(Progress:)QBT_TR[CONTEXT=PropertiesWidget]</span>
+        <span id="progress"></span>
+        <span id="progressPercentage"></span>
+    </div>
     <hr>
     <fieldset>
         <legend><b>QBT_TR(Transfer)QBT_TR[CONTEXT=PropertiesWidget]</b></legend>