From b050546e39b8e7ad031a0a97585c3ef767c4d99f Mon Sep 17 00:00:00 2001
From: Terry Geng <terry@terriex.com>
Date: Sat, 16 May 2020 22:24:10 +0800
Subject: [PATCH] feat: safeguard against mistakenly cancelling uploading.

---
 static/js/custom.js  | 29 +++++++++++++++++++++--------
 templates/index.html |  4 +++-
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/static/js/custom.js b/static/js/custom.js
index e36be55..c768501 100644
--- a/static/js/custom.js
+++ b/static/js/custom.js
@@ -754,7 +754,7 @@ let volume_popover_show = false;
 volume_popover_btn.addEventListener('click', function(e){ e.stopPropagation(); })
 
 function toggleVolumePopover(){
-    if (volume_popover_show){
+    if (!volume_popover_show){
         volume_popover_instance = new Popper(volume_popover_btn, volume_popover_div, {
             placement: 'top',
             modifiers: {
@@ -776,6 +776,7 @@ function toggleVolumePopover(){
         if (volume_popover_instance){
             volume_popover_instance.destroy();
             volume_popover_instance = null;
+            volume_popover_show = !volume_popover_show;
         }
     }, { once: true } );
 }
@@ -809,13 +810,18 @@ let filesToProceed = [];
 let filesProgressItem = {};
 let runningXHR = null;
 
-uploadSubmitBtn.addEventListener("click", uploadStart)
+let areYouSureToCancelUploading = false;
+
+uploadSubmitBtn.addEventListener("click", uploadStart);
+uploadCancelBtn.addEventListener("click", uploadCancel)
 
 function uploadStart(){
     uploadModalList.textContent = '';
     uploadSuccessAlert.style.display = 'none';
     uploadCancelBtn.style.display = 'none';
     uploadCloseBtn.style.display = 'block';
+    areYouSureToCancelUploading = false;
+    $(uploadCancelBtn).tooltip('hide');
     const file_list = uploadFileInput.files;
 
     if (file_list.length) {
@@ -928,12 +934,19 @@ function uploadNextFile(){
 }
 
 function uploadCancel(){
-    runningXHR.abort()
-    filesToProceed = [];
-    uploadModal.modal('hide');
-    uploadFileInput.value = '';
-    request('post', {action : 'rescan'});
-    updateResults();
+    if (!areYouSureToCancelUploading){
+        $(uploadCancelBtn).tooltip('show');
+    } else {
+        $(uploadCancelBtn).tooltip('hide');
+        uploadModal.modal('hide');
+        runningXHR.abort()
+        filesToProceed = [];
+        uploadFileInput.value = '';
+        request('post', {action : 'rescan'});
+        updateResults();
+    }
+
+    areYouSureToCancelUploading = !areYouSureToCancelUploading;
 }
 
 themeInit();
diff --git a/templates/index.html b/templates/index.html
index aabb782..c7c13d5 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -488,7 +488,9 @@
                 <div class="modal-footer">
                     <button type="button" id="uploadClose" class="btn btn-success" data-dismiss="modal">
                         <i class="fas fa-times mr-1"></i> Close</button>
-                    <button type="button" id="uploadCancel" class="btn btn-danger">
+                    <button type="button" id="uploadCancel" class="btn btn-danger" data-toggle="tooltip"
+                            data-html="true"
+                            title="<strong>Are you really sure?</strong> <br /> Click again to abort uploading.">
                         <i class="fas fa-trash-alt mr-1" aria-hidden="true"></i> Cancel</button>
                 </div>
             </div>