From: Art Cancro <ajc@citadel.org>
Date: Mon, 25 Sep 2023 14:57:34 +0000 (-0400)
Subject: view_mail.js: more progress on upload dialog
X-Git-Tag: v995~9
X-Git-Url: https://code.citadel.org/?p=citadel.git;a=commitdiff_plain;h=c229674219844f86c2a4a538bdfec997e624aca1

view_mail.js: more progress on upload dialog
---

diff --git a/citadel/utils/loadtest.c b/citadel/utils/loadtest.c
index 242d15522..34ea27b88 100644
--- a/citadel/utils/loadtest.c
+++ b/citadel/utils/loadtest.c
@@ -1,4 +1,4 @@
-// unfinished load testing utility for Citadel Server
+// Load testing utility for Citadel Server
 //
 // Copyright (c) 1987-2023 by the citadel.org team
 //
@@ -210,6 +210,8 @@ int nrooms = sizeof(random_rooms) / sizeof(char *);
 char *test_user = "Load Test User";
 char test_pass[16];
 
+
+// These are our randomized load test operations: an even mix of changing rooms, posting messages, and deleting messages.
 void perform_random_thing(int serv_sock) {
 	int op = random() % 3;
 	char buf[SIZ];
@@ -273,6 +275,7 @@ void perform_random_thing(int serv_sock) {
 }
 
 
+// This is the main loop.  We log in as the load test user, and then perform random operations until stopped.
 void *loadtest(void *blah) {
 	char buf[SIZ];
 	int serv_sock;
@@ -296,6 +299,7 @@ void *loadtest(void *blah) {
 	serv_puts(serv_sock, buf);
 	serv_gets(serv_sock, buf);
 
+	// Find a nice spot on the screen to show the operation count for this thread.
 	int row = 10 + ((serv_sock-3) % 20);
 	int col = ((serv_sock-3) / 20) * 10;
 	long ops = 0;
@@ -309,6 +313,7 @@ void *loadtest(void *blah) {
 }
 
 
+// Create (or replace) the account used for load testing, then create the rooms in which we will load test.
 void setup_accounts(int serv_sock) {
 	int i;
 	char buf[SIZ];
@@ -367,7 +372,7 @@ int main(int argc, char **argv) {
 		exit(errno);
 	}
 
-	// Generate random password for load test user
+	// Generate a random password for load test user.  No one needs this password except us.
 	srand(time(NULL)+getpid());
 	for (i=0; i<sizeof(test_pass)-1; ++i) {
 		test_pass[i] = (rand() % 74) + 48;
diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index 1ffb787b1..90b6b674c 100644
--- a/webcit-ng/static/css/webcit.css
+++ b/webcit-ng/static/css/webcit.css
@@ -648,8 +648,21 @@ blockquote pre {
 	align-content: start
 }
 
-.ctdl_dfhtu {					/* "Drop Files Here To Upload" text */
-	text-align: center;
+.ctdl-upload-drop-area {			/* shamelessly swiped from https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/ */
+	border: 2px dashed #ccc;
+	border-radius: 20px;
+	width: 480px;
+	font-family: sans-serif;
+	margin: 100px auto;
+	padding: 20px;
+}
+
+.ctdl-upload-drop-area.highlight {
+	border-color: purple;
+}
+
+.my-form {
+	margin-bottom: 10px;
 }
 
 .ctdl-login-screen-grid-container {
diff --git a/webcit-ng/static/js/view_mail.js b/webcit-ng/static/js/view_mail.js
index 4553b8bff..2e05f7d6d 100644
--- a/webcit-ng/static/js/view_mail.js
+++ b/webcit-ng/static/js/view_mail.js
@@ -471,7 +471,7 @@ function mail_compose(is_quoted, references, quoted_msgnum, m_to, m_cc, m_subjec
 	// references	list of references, be sure to use this in a reply
 	// msgid	if a reply, the msgid of the most recent message in the chain, the one to which we are replying
 
-	// Now display the screen.
+	// Now display the screen.  (Yes, I combined regular strings + template literals.  I just learned template literals.  Converting to all template literals would be fine.)
 	compose_screen =
 		// Hidden values that we are storing right here in the document tree for later
 		  "<input id=\"ctdl_mc_is_quoted\" style=\"display:none\" value=\"" + is_quoted + "\"></input>"
@@ -525,9 +525,109 @@ function mail_compose(is_quoted, references, quoted_msgnum, m_to, m_cc, m_subjec
 		document.getElementById("ctdl-compose-cc-label").style.display = "block";
 		document.getElementById("ctdl-compose-cc-field").style.display = "block";
 	}
+
+	activate_uploads();
+}
+
+
+function activate_uploads() {
+		document.getElementById("ctdl_big_modal").innerHTML = `
+			<div id="ctdl_attachments_outer">
+				<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="fas fa-window-close" style="color:red" onClick="show_or_hide_attachments()"></i></h1></div>
+				</div>
+				<br>
+				<ul id="ctdl_upload_list">
+					<li>uploaded file</li>
+					<li>another uploaded file</li>
+					<li>philez and warez</li>
+				</ul>
+				<br>
+				<div id="drop-area" class="ctdl-upload-drop-area">
+					<form class="my-form">
+						<p>${_("Drop files here to upload")}</p>
+						<input type="file" id="fileElem" multiple acce=t="*/*" onChange="handleFiles(this.files)">
+						<label class="button" for="fileElem">Select some files</label>
+					</form>
+				</div>
+			</div>
+		`;
+
+		// activate drag and drop (shamelessly swiped from https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/ )
+		let dropArea = document.getElementById("drop-area");
+		;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+			dropArea.addEventListener(eventName, preventDefaults, false)
+		})
+		;["dragenter", "dragover"].forEach(eventName => {
+			dropArea.addEventListener(eventName, highlight, false)
+		})
+		;['dragleave', 'drop'].forEach(eventName => {
+			dropArea.addEventListener(eventName, unhighlight, false)
+		})
+		dropArea.addEventListener('drop', handleDrop, false);
+
+		// make the modal smaller than the containing window but pretty big
+		document.getElementById("ctdl_attachments_outer").style.width =
+			Math.trunc((document.getElementById("ctdl-editor-body").getBoundingClientRect().width) * 0.60).toString() + "px";
+		document.getElementById("ctdl_attachments_outer").style.height =
+			Math.trunc((document.getElementById("ctdl-editor-body").getBoundingClientRect().height) * 0.60).toString() + "px";
+}
+
+
+// prevent drag and drop events from propagating up through the DOM
+function preventDefaults(e) {
+	e.preventDefault();
+	e.stopPropagation();
+}
+
+
+function handleDrop(e) {
+	let dt = e.dataTransfer;
+	let files = dt.files;
+	handleFiles(files);
+}
+
+
+function handleFiles(files) {
+	([...files]).forEach(uploadFile)
 }
 
 
+function uploadFile(file) {
+	var url = '/ctdl/zzz/attach_it;'
+	var xhr = new XMLHttpRequest();
+	var formData = new FormData();
+	xhr.open('POST', url, true);
+      
+	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");
+		}
+		else if (xhr.readyState == 4 && xhr.status != 200) {
+			document.getElementById("ctdl_upload_list").innerHTML += "<li>EPIC FAIL</li>";
+			console.log("upload failed");
+		}
+	})
+ 
+	formData.append('file', file);
+	xhr.send(formData);
+}
+
+
+function highlight(e) {
+	let dropArea = document.getElementById("drop-area");
+	dropArea.classList.add('highlight')
+}
+      
+function unhighlight(e) {
+	let dropArea = document.getElementById("drop-area");
+	dropArea.classList.remove('highlight')
+}
+
+
+
 // Show or hide the attachments window in the composer
 function show_or_hide_attachments() {
 
@@ -536,26 +636,6 @@ function show_or_hide_attachments() {
 	}
 	else {
 		document.getElementById("ctdl_big_modal").style.display = "block";
-		document.getElementById("ctdl_big_modal").innerHTML = `
-			<div id="ctdl_attachments_outer">
-			<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="fas fa-window-close" style="color:red" onClick="show_or_hide_attachments()"></i></h1></div>
-			</div>
-			<br>
-			<span class="ctdl_dfhtu">` + _("Drop files here to upload") + `</span>
-			<br>
-			<ul>
-				<li>uploaded file</li>
-				<li>another uploaded file</li>
-				<li>philez and warez</li>
-			</ul>
-			</div>`
-		;
-		document.getElementById("ctdl_attachments_outer").style.width =
-			Math.trunc((document.getElementById("ctdl-editor-body").getBoundingClientRect().width) * 0.90).toString() + "px";
-		document.getElementById("ctdl_attachments_outer").style.height =
-			Math.trunc((document.getElementById("ctdl-editor-body").getBoundingClientRect().height) * 0.90).toString() + "px";
 	}
 }