view_mail.js: more progress on upload dialog

diff --git a/citadel/utils/loadtest.c b/citadel/utils/loadtest.c
index 242d15522910f2a230cbc575888f43e41a2deceb..34ea27b88f344ba1fd2cd2689bc19a2c52eb046c 100644 (file)
--- 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 1ffb787b1426e6f1896fee526c8ab1f3665d28f5..90b6b674c273dd755fee542de8be7725d9264f1b 100644 (file)
--- 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 4553b8bff712dab3e1f3f9de5832ba64b74f0c08..2e05f7d6df7516643dadf8e0c33460613c33dde8 100644 (file)
--- 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";
        }
 }