From 11c769ea1d0022a6cdab60d8ed49ac3e36294b26 Mon Sep 17 00:00:00 2001
From: vcheckzen <18008498+vcheckzen@users.noreply.github.com>
Date: Sat, 21 Sep 2024 21:32:59 +0800
Subject: [PATCH] refactor: make the width of starting and ending indicator of
 upload log responsive

---
 back-end-cf/index.js |  8 ++---
 front-end/index.html | 72 ++++++++++++++++++++++++--------------------
 2 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/back-end-cf/index.js b/back-end-cf/index.js
index e4c23ad8..092f8a0d 100644
--- a/back-end-cf/index.js
+++ b/back-end-cf/index.js
@@ -56,7 +56,7 @@ async function handleRequest(request) {
     );
   }
   if (queryString) querySplited = queryString.split('=');
-  if ((querySplited && querySplited[0] === 'file')) {
+  if (querySplited && querySplited[0] === 'file') {
     const file = querySplited[1];
     const fileName = file.split('/').pop();
     if (fileName.toLowerCase() === PASSWD_FILENAME.toLowerCase())
@@ -278,9 +278,9 @@ async function uploadFiles(fileJsonList) {
     requests: fileList.map((file, index) => ({
       id: `${index + 1}`,
       method: file['fileSize'] ? 'POST' : 'PUT',
-      url: `/me/drive/root:${encodeURI(
-        EXPOSE_PATH + file['remotePath']
-      )}${file['fileSize'] ? ':/createUploadSession' : ':/content'}`,
+      url: `/me/drive/root:${encodeURI(EXPOSE_PATH + file['remotePath'])}${
+        file['fileSize'] ? ':/createUploadSession' : ':/content'
+      }`,
       headers: { 'Content-Type': 'application/json' },
       body: {},
     })),
diff --git a/front-end/index.html b/front-end/index.html
index 248b5886..d0884749 100644
--- a/front-end/index.html
+++ b/front-end/index.html
@@ -232,6 +232,13 @@
         padding: 1em;
         background-color: rgb(245, 245, 245);
         overflow: auto;
+        white-space: nowrap;
+        display: grid;
+      }
+
+      .file-upload-progress .log-separator {
+        background-image: url("data:image/svg+xml;utf8,<svg width='9' height='9' xmlns='http://www.w3.org/2000/svg' version='1.1'><text y='10'>=</text></svg>");
+        padding: 5px 0;
       }
 
       pre * {
@@ -1642,7 +1649,7 @@
         );
         const odPath = window.backFordwardCache.current;
         const upFileList = fileInput.map((f) => ({
-          remotePath: `${odPath}/${f.webkitRelativePath || f.name}`,
+          remotePath: `${odPath}/${relativePath(f)}`,
           fileSize: f.size ? 1 : 0,
         }));
 
@@ -1659,7 +1666,7 @@
         function sendPage(pageIndex = 0) {
           if (pageIndex >= paginatedUpFileList.length) {
             window.fileCache.delete(window.backFordwardCache.current);
-            createUploadLogLine().innerHTML = '='.repeat(70);
+            createUploadLogLine().className = 'log-separator';
             return;
           }
 
@@ -1672,27 +1679,27 @@
             (response) => {
               const uploadLinks = JSON.parse(response).files;
               Promise.all(
-                uploadLinks
-                  .filter((link) => link.uploadUrl)
-                  .map(({ remotePath, uploadUrl }) =>
-                    uploadFileWithProgress(
-                      fileInput.find(
-                        (f) =>
-                          `${odPath}/${f.webkitRelativePath || f.name}` ===
-                          remotePath
-                      ),
-                      uploadUrl
-                    )
+                uploadLinks.map(({ remotePath, uploadUrl }) =>
+                  uploadFileWithProgress(
+                    fileInput.find(
+                      (f) => `${odPath}/${relativePath(f)}` === remotePath
+                    ),
+                    uploadUrl
                   )
+                )
               ).finally(() => sendPage(pageIndex + 1));
             }
           );
         }
 
-        createUploadLogLine().innerHTML = '='.repeat(70);
+        createUploadLogLine().className = 'log-separator';
         document.querySelector('.file-upload-progress').dataset.hidden = '0';
         sendPage(0);
 
+        function relativePath(file) {
+          return `${file.webkitRelativePath || file.name}`;
+        }
+
         function createUploadLogLine() {
           const progressDiv = document.querySelector('.file-upload-progress');
           const progressText = document.createElement('div');
@@ -1709,23 +1716,22 @@
           let start = 0;
 
           const progressText = createUploadLogLine();
-          while (start < fileSize) {
-            try {
-              await uploadChunk(start);
-              start = Math.min(start + chunkSize, fileSize);
-            } catch (error) {
-              if (!(await handleUploadError(error))) {
-                progressText.innerHTML += ' <mark>Upload failed!</mark>';
-                return;
-              }
-            }
-          }
-
           if (fileSize === 0) {
-            progressText.innerHTML = `${file.name}: Upload completed!`;
+            updateTotalProgress();
           } else {
-            progressText.innerHTML += ' Upload completed!';
+            while (start < fileSize) {
+              try {
+                await uploadChunk(start);
+                start = Math.min(start + chunkSize, fileSize);
+              } catch (error) {
+                if (!(await handleUploadError(error))) {
+                  progressText.innerHTML += ' <mark>Upload failed!</mark>';
+                  return;
+                }
+              }
+            }
           }
+          progressText.innerHTML += ' Upload completed!';
 
           async function uploadChunk(start) {
             const xhr = new XMLHttpRequest();
@@ -1791,15 +1797,17 @@
           }
 
           function updateTotalProgress() {
-            const percentComplete = Math.round(
-              (uploadedBytes / fileSize) * 100
-            );
+            const percentComplete = fileSize
+              ? Math.round((uploadedBytes / fileSize) * 100)
+              : 100;
             const progressBar =
               '[' +
               '='.repeat(percentComplete / 5) +
               ' '.repeat(20 - percentComplete / 5) +
               ']';
-            progressText.textContent = `${file.name}: ${progressBar} ${percentComplete}%`;
+            progressText.textContent = `${relativePath(
+              file
+            )}: ${progressBar} ${percentComplete}%`;
           }
         }
       }