From 32a4a753f9ac0a12bff7d906097f55aaa252438e Mon Sep 17 00:00:00 2001
From: Nicola Murino <nicola.murino@gmail.com>
Date: Thu, 3 Oct 2024 20:31:46 +0200
Subject: [PATCH] WebClient: improve readability of upload progress

Fixes #1773

Signed-off-by: Nicola Murino <nicola.murino@gmail.com>
---
 static/locales/en/translation.json   |  8 ++---
 static/locales/it/translation.json   |  8 ++---
 templates/common/base.html           | 13 +++++++-
 templates/webadmin/admins.html       |  4 +--
 templates/webadmin/configs.html      |  4 +--
 templates/webadmin/connections.html  |  2 +-
 templates/webadmin/defender.html     |  2 +-
 templates/webadmin/eventactions.html |  2 +-
 templates/webadmin/eventrules.html   |  4 +--
 templates/webadmin/folders.html      |  2 +-
 templates/webadmin/groups.html       |  2 +-
 templates/webadmin/iplists.html      |  2 +-
 templates/webadmin/roles.html        |  2 +-
 templates/webadmin/users.html        |  6 ++--
 templates/webclient/files.html       | 46 +++++++++++++---------------
 templates/webclient/shares.html      |  2 +-
 templates/webclient/shareupload.html | 13 ++++----
 17 files changed, 64 insertions(+), 58 deletions(-)

diff --git a/static/locales/en/translation.json b/static/locales/en/translation.json
index 154560c7a..7001b5e77 100644
--- a/static/locales/en/translation.json
+++ b/static/locales/en/translation.json
@@ -291,10 +291,10 @@
         "no_files_folders": "No files or folders",
         "invalid_name": "File or folder names cannot contain \"/\"",
         "folder_name_required": "Folder name is required",
-        "deleting": "Delete {{idx}}/{{total}}: {{- name}}",
-        "copying": "Copy {{idx}}/{{total}}: {{- name}}",
-        "moving": "Move {{idx}}/{{total}}: {{- name}}",
-        "uploading": "Upload {{idx}}/{{total}}: {{- name}}",
+        "deleting": "Delete {{idx}}/{{total}}",
+        "copying": "Copy {{idx}}/{{total}}",
+        "moving": "Move {{idx}}/{{total}}",
+        "uploading": "Upload {{idx}}/{{total}}",
         "err_403": "Permission denied",
         "err_429": "Too many concurrent requests",
         "err_generic": "Unable to access the requested resource",
diff --git a/static/locales/it/translation.json b/static/locales/it/translation.json
index 3e3de6f25..6d324eef2 100644
--- a/static/locales/it/translation.json
+++ b/static/locales/it/translation.json
@@ -291,10 +291,10 @@
         "no_files_folders": "Nessun file o cartella",
         "invalid_name": "I nomi di file o cartelle non possono contenere \"/\"",
         "folder_name_required": "Il nome della cartella è obbligatorio",
-        "deleting": "Eliminazione {{idx}}/{{total}}: {{- name}}",
-        "copying": "Copia {{idx}}/{{total}}: {{- name}}",
-        "moving": "Spostamento {{idx}}/{{total}}: {{- name}}",
-        "uploading": "Caricamento {{idx}}/{{total}}: {{- name}}",
+        "deleting": "Eliminazione {{idx}}/{{total}}",
+        "copying": "Copia {{idx}}/{{total}}",
+        "moving": "Spostamento {{idx}}/{{total}}",
+        "uploading": "Caricamento {{idx}}/{{total}}",
         "err_403": "Non si dispone delle autorizzazioni richieste",
         "err_429": "Troppe richieste contemporanee",
         "err_generic": "Impossibile accedere alla risorsa richiesta",
diff --git a/templates/common/base.html b/templates/common/base.html
index 02af5a303..bd281e766 100644
--- a/templates/common/base.html
+++ b/templates/common/base.html
@@ -311,6 +311,16 @@
         }
     }
 
+    function clearLoading() {
+        $('#loading_info').text("");
+        $('#loading_message').text("");
+    }
+
+    function setLoadingText(info, message) {
+        $('#loading_info').text(info);
+        $('#loading_message').text(message);
+    }
+
     KTUtil.onDOMContentLoaded(function () {
         var dismissErrorBtn = $('#id_dismiss_error_msg');
         if (dismissErrorBtn){
@@ -900,7 +910,8 @@
         </div>
         <div class="page-loader flex-column">
 			<span class="spinner-border text-primary" role="status"></span>
-			<span id="loading_message" class="text-muted fs-4 fw-semibold mt-5"></span>
+			<span id="loading_info" class="text-muted fs-4 fw-semibold mt-5"></span>
+            <span id="loading_message" class="text-muted fs-4 fw-semibold mt-5"></span>
 		</div>
 
         <div class="modal fade" tabindex="-1" id="modal_alert">
diff --git a/templates/webadmin/admins.html b/templates/webadmin/admins.html
index ff502383b..ea28f2c75 100644
--- a/templates/webadmin/admins.html
+++ b/templates/webadmin/admins.html
@@ -125,7 +125,7 @@ <h3 data-i18n="admin.view_manage" class="card-title section-title">View and mana
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.AdminURL}}' + "/" + encodeURIComponent(username);
 
@@ -187,7 +187,7 @@ <h3 data-i18n="admin.view_manage" class="card-title section-title">View and mana
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.AdminURL}}' + "/" + encodeURIComponent(username)+"/2fa/disable";
 
diff --git a/templates/webadmin/configs.html b/templates/webadmin/configs.html
index 896983744..f0c94d3d7 100644
--- a/templates/webadmin/configs.html
+++ b/templates/webadmin/configs.html
@@ -402,7 +402,7 @@ <h2 class="accordion-header" id="accordion_header_smtp">
             return;
         }
 
-        $('#loading_message').text("");
+        clearLoading();
         KTApp.showPageLoading();
 
         let data = {"base_redirect_url": getCurrentURI(), "provider": parseInt($('#idSMTPOAuth2Provider').val()),
@@ -499,7 +499,7 @@ <h2 class="accordion-header" id="accordion_header_smtp">
             }
         }
 
-        $('#loading_message').text("");
+        clearLoading();
         KTApp.showPageLoading();
         let debug = 0;
         if ($('#idSMTPDebug').is(':checked')){
diff --git a/templates/webadmin/connections.html b/templates/webadmin/connections.html
index 0e4c1b0b8..f75da80a5 100644
--- a/templates/webadmin/connections.html
+++ b/templates/webadmin/connections.html
@@ -82,7 +82,7 @@ <h3 data-i18n="connections.view_manage" class="card-title section-title">View an
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.ConnectionsURL}}' + "/" + encodeURIComponent(connectionID);
                 if (node) {
diff --git a/templates/webadmin/defender.html b/templates/webadmin/defender.html
index 9f0fd5697..85521f455 100644
--- a/templates/webadmin/defender.html
+++ b/templates/webadmin/defender.html
@@ -78,7 +78,7 @@ <h3 data-i18n="defender.view_manage" class="card-title section-title">View and m
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.DefenderHostsURL}}' + "/" + encodeURIComponent(id);
 
diff --git a/templates/webadmin/eventactions.html b/templates/webadmin/eventactions.html
index 960af1275..2d7f73115 100644
--- a/templates/webadmin/eventactions.html
+++ b/templates/webadmin/eventactions.html
@@ -78,7 +78,7 @@ <h3 data-i18n="actions.view_manage" class="card-title section-title">View and ma
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.EventActionURL}}' + "/" + encodeURIComponent(name);
 
diff --git a/templates/webadmin/eventrules.html b/templates/webadmin/eventrules.html
index 2eebf1bcb..a11756f43 100644
--- a/templates/webadmin/eventrules.html
+++ b/templates/webadmin/eventrules.html
@@ -80,7 +80,7 @@ <h3 data-i18n="rules.view_manage" class="card-title section-title">View and mana
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.EventRuleURL}}' + "/" + encodeURIComponent(name);
 
@@ -135,7 +135,7 @@ <h3 data-i18n="rules.view_manage" class="card-title section-title">View and mana
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.EventRuleURL}}' + "/run/" + encodeURIComponent(name);
 
diff --git a/templates/webadmin/folders.html b/templates/webadmin/folders.html
index 052b266f6..5f076c008 100644
--- a/templates/webadmin/folders.html
+++ b/templates/webadmin/folders.html
@@ -110,7 +110,7 @@ <h3 data-i18n="virtual_folders.view_manage" class="card-title section-title">Vie
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.FolderURL}}' + "/" + encodeURIComponent(name);
 
diff --git a/templates/webadmin/groups.html b/templates/webadmin/groups.html
index 5af6a3168..106ed1166 100644
--- a/templates/webadmin/groups.html
+++ b/templates/webadmin/groups.html
@@ -96,7 +96,7 @@ <h3 data-i18n="group.view_manage" class="card-title section-title">View and mana
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.GroupURL}}' + "/" + encodeURIComponent(name);
 
diff --git a/templates/webadmin/iplists.html b/templates/webadmin/iplists.html
index d8d1dd6d8..c7aa85e56 100644
--- a/templates/webadmin/iplists.html
+++ b/templates/webadmin/iplists.html
@@ -210,7 +210,7 @@ <h3 data-i18n="ip_list.view_manage" class="card-title section-title">View and ma
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.IPListURL}}' + "/" + encodeURIComponent(listType)+ "/" + encodeURIComponent(ipNet);
                 axios.delete(path, {
diff --git a/templates/webadmin/roles.html b/templates/webadmin/roles.html
index 6a59d951e..9183ea093 100644
--- a/templates/webadmin/roles.html
+++ b/templates/webadmin/roles.html
@@ -97,7 +97,7 @@ <h3 data-i18n="role.view_manage" class="card-title section-title">View and manag
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.RoleURL}}' + "/" + encodeURIComponent(name);
 
diff --git a/templates/webadmin/users.html b/templates/webadmin/users.html
index f0d7884fa..d8fc866da 100644
--- a/templates/webadmin/users.html
+++ b/templates/webadmin/users.html
@@ -145,7 +145,7 @@ <h3 data-i18n="user.view_manage" class="card-title section-title">View and manag
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.UserURL}}' + "/" + encodeURIComponent(username);
 
@@ -200,7 +200,7 @@ <h3 data-i18n="user.view_manage" class="card-title section-title">View and manag
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.UserURL}}' + "/" + encodeURIComponent(username)+"/2fa/disable";
 
@@ -230,7 +230,7 @@ <h3 data-i18n="user.view_manage" class="card-title section-title">View and manag
     }
 
     function quotaScanAction(username) {
-        $('#loading_message').text("");
+        clearLoading();
         KTApp.showPageLoading();
         let path = '{{.QuotaScanURL}}' + "/" + encodeURIComponent(username);
         axios.post(path, null, {
diff --git a/templates/webclient/files.html b/templates/webclient/files.html
index bec318d73..a84deebfc 100644
--- a/templates/webclient/files.html
+++ b/templates/webclient/files.html
@@ -1168,7 +1168,7 @@ <h4 class="gslide-title"></h4>
                             if (selectedRowsIdx.length == 0){
                                 return;
                             }
-                            $('#loading_message').text("");
+                            clearLoading();
                             KTApp.showPageLoading();
 
                             function deleteSelected() {
@@ -1190,15 +1190,14 @@ <h4 class="gslide-title"></h4>
                                 }
                                 path+='?path={{.CurrentDir}}'+encodeURIComponent("/"+itemName);
 
-                                let deleteTxt = "";
                                 if (selectedRowsIdx.length > 1){
-                                    deleteTxt = $.t('fs.deleting', {
+                                    let info = $.t('fs.deleting', {
                                         idx : index + 1,
-                                        total: selectedRowsIdx.length,
-                                        name: itemName
+                                        total: selectedRowsIdx.length
                                     });
+                                    setLoadingText(info,itemName);
                                 }
-                                $('#loading_message').text(deleteTxt);
+
                                 axios.delete(path,{
                                     timeout: 15000,
                                     headers: {
@@ -1400,7 +1399,7 @@ <h4 class="gslide-title"></h4>
         let hasError = false;
         let index = 0;
 
-        $('#loading_message').text("");
+        clearLoading();
         KTApp.showPageLoading();
 
         function copyItem() {
@@ -1425,12 +1424,11 @@ <h4 class="gslide-title"></h4>
             targetPath+=item.targetName;
 
             if (items.length > 1) {
-                msgTxt = $.t('fs.copying', {
+                let info = $.t('fs.copying', {
                     idx: index + 1,
-                    total: items.length,
-                    name: `${sourcePath} => ${targetPath}`
+                    total: items.length
                 });
-                $('#loading_message').text(msgTxt);
+                setLoadingText(info,`${sourcePath} => ${targetPath}`);
             }
             let path = '{{.FileActionsURL}}/copy';
             path+='?path={{.CurrentDir}}'+encodeURIComponent("/"+item.sourceName)+'&target='+item.targetDir+encodeURIComponent("/"+item.targetName);
@@ -1550,7 +1548,7 @@ <h4 class="gslide-title"></h4>
         let hasError = false;
         let index = 0;
 
-        $('#loading_message').text("");
+        clearLoading();
         KTApp.showPageLoading();
 
         function moveItem() {
@@ -1575,12 +1573,11 @@ <h4 class="gslide-title"></h4>
             targetPath+=item.targetName;
 
             if (items.length > 1) {
-                msgTxt = $.t('fs.moving', {
+                let info = $.t('fs.moving', {
                     idx: index + 1,
-                    total: items.length,
-                    name: `${sourcePath} => ${targetPath}`
+                    total: items.length
                 });
-                $('#loading_message').text(msgTxt);
+                setLoadingText(info,`${sourcePath} => ${targetPath}`);
             }
             let path = '{{.FileActionsURL}}/move';
             path+='?path={{.CurrentDir}}'+encodeURIComponent("/"+item.sourceName)+'&target='+item.targetDir+encodeURIComponent("/"+item.targetName);
@@ -1690,7 +1687,7 @@ <h4 class="gslide-title"></h4>
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let isDir = (getTypeFromMeta(meta) == "1");
                 let path;
@@ -1822,7 +1819,7 @@ <h4 class="gslide-title"></h4>
             return;
         }
 
-        $('#loading_message').text("");
+        clearLoading();
         KTApp.showPageLoading();
 
         function executeRename() {
@@ -1985,7 +1982,7 @@ <h4 class="gslide-title"></h4>
         let success = 0;
         let checkedDirs = [];
         $('#errorMsg').addClass("d-none");
-        $('#loading_message').text("");
+        clearLoading();
         KTApp.showPageLoading();
 
         function uploadFile() {
@@ -2024,16 +2021,15 @@ <h4 class="gslide-title"></h4>
                 lastModified = "";
             }
 
-            let uploadTxt = f.name;
+            let info = "";
             if (files.length > 1){
-                uploadTxt = $.t('fs.uploading', {
+                info = $.t('fs.uploading', {
                     idx: index + 1,
-                    total: files.length,
-                    name: uploadTxt
+                    total: files.length
                 });
             }
 
-            $('#loading_message').text(uploadTxt);
+            setLoadingText(info,f.name);
 
             axios.post(uploadPath, f, {
                 headers: {
@@ -2046,7 +2042,7 @@ <h4 class="gslide-title"></h4>
                     }
                     const percentage = Math.round((100 * progressEvent.loaded) / progressEvent.total);
                     if (percentage > 0 && percentage < 100){
-                        $('#loading_message').text(`${uploadTxt} ${percentage}%`);
+                        setLoadingText(info,`${f.name} ${percentage}%`);
                     }
                 },
                 validateStatus: function (status) {
diff --git a/templates/webclient/shares.html b/templates/webclient/shares.html
index a50db99c9..8733ebf45 100644
--- a/templates/webclient/shares.html
+++ b/templates/webclient/shares.html
@@ -176,7 +176,7 @@ <h4 data-i18n="share.link_uncompressed_title">Uncompressed file</h4>
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.ShareURL}}' + "/" + encodeURIComponent(shareID);
 
diff --git a/templates/webclient/shareupload.html b/templates/webclient/shareupload.html
index eaeb5e7de..56cda411e 100644
--- a/templates/webclient/shareupload.html
+++ b/templates/webclient/shareupload.html
@@ -60,7 +60,7 @@ <h3 data-i18n="fs.upload.message" class="fs-5 fw-bold text-gray-900 mb-1">Drop f
         let success = 0;
         let checkedDirs = [];
         $('#errorMsg').addClass("d-none");
-        $('#loading_message').text("");
+        clearLoading();
         KTApp.showPageLoading();
 
         function uploadFile() {
@@ -103,16 +103,15 @@ <h3 data-i18n="fs.upload.message" class="fs-5 fw-bold text-gray-900 mb-1">Drop f
                 lastModified = "";
             }
 
-            let uploadTxt = f.name;
+            let info = "";
             if (files.length > 1){
-                uploadTxt = $.t('fs.uploading', {
+                info = $.t('fs.uploading', {
                     idx: index + 1,
-                    total: files.length,
-                    name: uploadTxt
+                    total: files.length
                 });
             }
 
-            $('#loading_message').text(uploadTxt);
+            setLoadingText(info,f.name);
 
             axios.post(uploadPath, f, {
                 headers: {
@@ -125,7 +124,7 @@ <h3 data-i18n="fs.upload.message" class="fs-5 fw-bold text-gray-900 mb-1">Drop f
                     }
                     const percentage = Math.round((100 * progressEvent.loaded) / progressEvent.total);
                     if (percentage > 0 && percentage < 100){
-                        $('#loading_message').text(`${uploadTxt} ${percentage}%`);
+                        setLoadingText(info,`${f.name} ${percentage}%`);
                     }
                 },
                 validateStatus: function (status) {