view_mail.js: throbber and "Processing dropped files..." message appears

"Processing dropped files..." is not exactly the right message because
the upload message might have been clicked, but I don't want to throw
away the translations of that message.

Anyway, it's really cool, they appear in the list, and go away when the
uploads are complete.

diff --git a/webcit-ng/static/js/view_mail.js b/webcit-ng/static/js/view_mail.js
index e63fff6d030aabd21596649005476842ca7aaf6d..6c2260020ced461e81a7c76087a51e485ec4d697 100644 (file)
--- a/webcit-ng/static/js/view_mail.js
+++ b/webcit-ng/static/js/view_mail.js
@@ -14,6 +14,7 @@ var newmail_notify = {
         YES : 1                                                                        // yes, perform new mail notifications
 };
 var num_attachments = 0;                                                       // number of attachments in current composed msg
+var uploads_in_progress = 0;
 
 
 // This is the async back end for mail_delete_selected()
@@ -535,7 +536,7 @@ function activate_uploads(parent_div) {
                document.getElementById(parent_div).innerHTML += `
                        <div class="ctdl-upload" id="ctdl-upload">
                                <div id="ctdl_attachments_title" class="ctdl-compose-attachments-title">
-                                       <div><h1><i class="fa fa-paperclip" style="color:grey"></i>` + _("Attachments:") + " " + num_attachments + `</h1></div>
+                                       <div><h1><i class="fa fa-paperclip" style="color:grey"></i>` + _("Attachments:") + ` <span id="num_attachments">` + num_attachments + `</span></h1></div>
                                        <div><h1><i class="fas fa-window-close" style="color:red" onClick="show_or_hide_attachments()"></i></h1></div>
                                </div>
                                <br>
@@ -567,12 +568,6 @@ function activate_uploads(parent_div) {
                        dropArea.addEventListener(eventName, upload_unhighlight, false)
                })
                dropArea.addEventListener('drop', upload_handle_drop, false);
-
-               // make the modal smaller than the containing window but pretty big
-               //document.getElementById("ctdl-upload").style.width =
-                       //Math.trunc((document.getElementById("ctdl-editor-body").getBoundingClientRect().width) * 0.90).toString() + "px";
-               //document.getElementById("ctdl-upload").style.height =
-                       //Math.trunc((document.getElementById("ctdl-editor-body").getBoundingClientRect().height) * 0.90).toString() + "px";
 }
 
 
@@ -603,19 +598,34 @@ function upload_file(file) {
       
        xhr.addEventListener('readystatechange', function(e) {
                if (xhr.readyState == 4 && xhr.status == 200) {
-                       document.getElementById("ctdl-upload_list").innerHTML += "<li>succeeeeed</li>";
-                       console.log("upload succeeded");
+                       //document.getElementById("ctdl-upload_list").innerHTML += "<li>succeeeeed</li>";
                        num_attachments += 1;
+                       document.getElementById("num_attachments").innerHTML = num_attachments;
+
+                       // remove the "uploading in progress" message
+                       let li = document.getElementById("ctdl_uploading_" + uploads_in_progress.toString());
+                       li.parentNode.removeChild(li);
+                       uploads_in_progress -= 1;
                }
                else if (xhr.readyState == 4 && xhr.status != 200) {
-                       document.getElementById("ctdl-upload_list").innerHTML += "<li>EPIC FAIL</li>";
-                       console.log("upload failed");
+                       //document.getElementById("ctdl-upload_list").innerHTML += "<li>EPIC FAIL</li>";
+
+                       // remove the "uploading in progress" message (maybe we should replace it with an error?)
+                       let li = document.getElementById("ctdl_uploading_" + uploads_in_progress.toString());
+                       li.parentNode.removeChild(li);
+                       uploads_in_progress -= 1;
                }
        })
  
        formData.append('file', file);
        xhr.send(formData);
-       console.log("uploading...");
+       uploads_in_progress += 1;
+
+       // Make an "uploading in progress" message appear in the uploads list!
+       progress = document.createElement("li");
+       progress.setAttribute("id", "ctdl_uploading_" + uploads_in_progress.toString());
+       progress.innerHTML = `<img src="/ctdl/s/images/throbber.gif" /> ` + _("Processing dropped files...");
+       document.getElementById("ctdl-upload_list").appendChild(progress);
 }