Copy common JS code from 'add-phenotypes-raw-files.html' template.

The code to generate resumable elements and to preview file contents
is very similar. Copy it to a JS module that is importable in multiple
files and use that instead.

1 files changed, 215 insertions, 0 deletions

diff --git a/uploader/static/js/files.js b/uploader/static/js/files.js
index 0bde6f7..7cb3d0e 100644
--- a/uploader/static/js/files.js
+++ b/uploader/static/js/files.js
@@ -116,3 +116,218 @@ var makeResumableElement = (targeturi, fileinput, droparea, uploadbutton, filety
 
     return resumable;
 };
+
+
+var CSVFilesMetadata = () => {
+    return {
+        "separator": $("#txt-file-separator").val(),
+        "comment_char": $(
+            "#txt-file-comment-character").val(),
+        "na_strings": $("#txt-file-na").val()
+    }
+};
+
+
+var updatePreview = (table, filedata, formdata, numrows) => {
+    table.find("thead tr").remove()
+    table.find(".data-row").remove();
+    var linenum = 0;
+    var tableheader = table.find("thead");
+    var tablebody = table.find("tbody");
+    var numheadings = 0;
+    var comment_chars = formdata
+        .comment_char
+        .split(" ")
+        .map((v) => {return v.trim();})
+        .filter((v) => {return Boolean(v);});
+    var navalues = formdata
+        .na_strings
+        .split(" ")
+        .map((v) => {return v.trim();})
+        .filter((v) => {return Boolean(v);});
+    filedata.forEach((line) => {
+        if(comment_chars.includes(line[0]) || linenum >= numrows) {
+            return false;
+        }
+        var row = $("<tr></tr>");
+        line.split(formdata.separator)
+            .map((field) => {
+                var value = field.trim();
+                if(navalues.includes(value)) {
+                    return "[NO-VALUE]";
+                }
+                return value;
+            })
+            .filter((field) => {
+                return (field !== "" && field != undefined && field != null);
+            })
+            .forEach((field) => {
+                if(linenum == 0) {
+                    numheadings += 1;
+                    var tablefield = $("<th></th>");
+                    tablefield.text(field);
+                    row.append(tablefield);
+                } else {
+                    add_class(row, "data-row");
+                    var tablefield = $("<td></td>");
+                    tablefield.text(field);
+                    row.append(tablefield);
+                }
+            });
+
+        if(linenum == 0) {
+            tableheader.append(row);
+        } else {
+            tablebody.append(row);
+        }
+        linenum += 1;
+    });
+
+    if(table.find("tbody tr.data-row").length > 0) {
+        add_class(table.find(".data-row-template"), "visually-hidden");
+    } else {
+        remove_class(table.find(".data-row-template"), "visually-hidden");
+    }
+};
+
+
+var makePreviewUpdater = (preview_table, preview_rows) => {
+    return (data) => {
+        updatePreview(
+            preview_table,
+            data,
+            CSVFilesMetadata(),
+            preview_rows);
+    };
+};
+
+
+var resumableDisplayFiles = (display_area, files) => {
+    files.forEach((file) => {
+        display_area.find(".file-display").remove();
+        var display_element = display_area
+            .find(".file-display-template")
+            .clone();
+        remove_class(display_element, "visually-hidden");
+        remove_class(display_element, "file-display-template");
+        add_class(display_element, "file-display");
+        display_element.find(".filename").text(file.name
+                                               || file.fileName
+                                               || file.relativePath
+                                               || file.webkitRelativePath);
+        display_element.find(".filesize").text(
+            (file.size / (1024*1024)).toFixed(2) + "MB");
+        display_element.find(".fileuniqueid").text(file.uniqueIdentifier);
+        display_element.find(".filemimetype").text(file.file.type);
+        display_area.append(display_element);
+    });
+};
+
+
+var indicateProgress = (resumable, progress_bar) => {
+    return () => {/*Has no event!*/
+        var progress = (resumable.progress() * 100).toFixed(2);
+        var pbar = progress_bar.find(".progress-bar");
+        remove_class(progress_bar, "visually-hidden");
+        pbar.css("width", progress+"%");
+        pbar.attr("aria-valuenow", progress);
+        pbar.text("Uploading: " + progress + "%");
+    };
+};
+
+
+var retryUpload = (retry_button, cancel_button) => {
+    retry_button.on("click", (event) => {
+        resumable.files.forEach((file) => {file.retry();});
+        add_class(retry_button, "visually-hidden");
+        remove_class(cancel_button, "visually-hidden");
+        add_class(browse_button, "visually-hidden");
+    });
+};
+
+
+var cancelUpload = (cancel_button, retry_button) => {
+    cancel_button.on("click", (event) => {
+        resumable.files.forEach((file) => {
+            if(file.isUploading()) {
+                file.abort();
+            }
+        });
+        add_class(cancel_button, "visually-hidden");
+        remove_class(retry_button, "visually-hidden");
+        remove_class(browse_button, "visually-hidden");
+    });
+};
+
+
+var startUpload = (browse_button, retry_button, cancel_button) => {
+    return (event) => {
+        remove_class(cancel_button, "visually-hidden");
+        add_class(retry_button, "visually-hidden");
+        add_class(browse_button, "visually-hidden");
+    };
+};
+
+
+var uploadSuccess = (file_input_name) => {
+    return (file, message) => {
+        submitForm({...JSON.parse(message), "file-input-name": file_input_name});
+    };
+};
+
+
+var uploadError = () => {
+    return (message, file) => {
+        $("#frm-add-phenotypes input[type=submit]").removeAttr("disabled");
+        console.log("THE FILE:", file);
+        console.log("THE ERROR MESSAGE:", message);
+    };
+};
+
+var makeResumableObject = (form_id, file_input_id, resumable_element_id, preview_table_id, filetypes=["csv", "tsv", "txt"], preview_rows=5) => {
+    var the_form = $("#" + form_id);
+    var file_input = $("#" + file_input_id);
+    var submit_button = the_form.find("input[type=submit]");
+    if(file_input.length != 1) {
+        return false;
+    }
+    var r = errorHandler(
+        fileSuccessHandler(
+            uploadStartHandler(
+                filesAddedHandler(
+                    markResumableDragAndDropElement(
+                        makeResumableElement(
+                            the_form.attr("data-resumable-target"),
+                            file_input.parent(),
+                            $("#" + resumable_element_id),
+                            submit_button,
+                            filetypes),
+                        file_input.parent(),
+                        $("#" + resumable_element_id),
+                        $("#" + resumable_element_id + "-browse-button")),
+                    (files) => {
+                        // TODO: Also trigger preview!
+                        resumableDisplayFiles(
+                            $("#" + resumable_element_id + "-selected-files"), files);
+                        files.forEach((file) => {
+                            readFirstNLines(
+                                file.file,
+                                100,
+                                [makePreviewUpdater(
+                                    $("#" + preview_table_id),
+                                    preview_rows)])
+                        });
+                    }),
+                startUpload($("#" + resumable_element_id + "-browse-button"),
+                            $("#" + resumable_element_id + "-retry-button"),
+                            $("#" + resumable_element_id + "-cancel-button"))),
+            uploadSuccess(file_input.attr("name"))),
+        uploadError());
+
+    /** Setup progress indicator **/
+    progressHandler(
+        r,
+        indicateProgress(r, $("#" + resumable_element_id + "-progress-bar")));
+
+    return r;
+};