From: Art Cancro <ajc@citadel.org>
Date: Tue, 26 Sep 2023 04:13:35 +0000 (-0400)
Subject: view_mail.js: throbber and "Processing dropped files..." message appears
X-Git-Tag: v995~4
X-Git-Url: https://code.citadel.org/?a=commitdiff_plain;h=2cefddaf7ab4f90b44a5d9080605cb613e2ea59a;p=citadel.git

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 e63fff6d0..6c2260020 100644
--- 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);
 }