diff options
Diffstat (limited to 'uploader/templates/phenotypes')
| -rw-r--r-- | uploader/templates/phenotypes/add-phenotypes-raw-files.html | 137 |
1 files changed, 136 insertions, 1 deletions
diff --git a/uploader/templates/phenotypes/add-phenotypes-raw-files.html b/uploader/templates/phenotypes/add-phenotypes-raw-files.html index 27e71c9..b88d16a 100644 --- a/uploader/templates/phenotypes/add-phenotypes-raw-files.html +++ b/uploader/templates/phenotypes/add-phenotypes-raw-files.html @@ -3,6 +3,7 @@ {%from "macro-table-pagination.html" import table_pagination%} {%from "phenotypes/macro-display-pheno-dataset-card.html" import display_pheno_dataset_card%} {%from "phenotypes/macro-display-preview-table.html" import display_preview_table%} +{%from "phenotypes/macro-display-resumable-elements.html" import display_resumable_elements%} {%block title%}Phenotypes{%endblock%} @@ -107,7 +108,7 @@ <fieldset id="fldset-data-files"> <legend>Data File(s)</legend> - <div class="form-group"> + <div class="form-group non-resumable-elements"> <label for="finput-phenotype-descriptions" class="form-label"> Phenotype Descriptions</label> <input id="finput-phenotype-descriptions" @@ -123,6 +124,16 @@ the documentation for the expected format of the file</a>.</span> </div> + {{display_resumable_elements( + "resumable-phenotype-descriptions", + "phenotype descriptions", + '<p>You can drop a CSV file that contains the phenotype descriptions here, + or you can click the "Browse" button to select it from your computer.</p> + <p>The CSV file must conform to some standards, as documented in the + <a href="#docs-file-phenotype-description" + title="Documentation of the phenotype data file format."> + "Phenotypes Descriptions" documentation</a> section below.</p>')}} + <div class="form-group"> <label for="finput-phenotype-data" class="form-label">Phenotype Data</label> <input id="finput-phenotype-data" @@ -311,6 +322,8 @@ {%block more_javascript%} +<script src="{{url_for('base.node_modules', + filename='resumablejs/resumable.js')}}"></script> <script type="text/javascript" src="/static/js/files.js"></script> <script type="text/javascript"> @@ -449,5 +462,127 @@ }]); }); }); + + + var resumableDisplayFiles = (display_area, files) => { + files.forEach((file) => { + var display_element = display_area + .find(".file-display-template") + .clone(); + remove_class(display_element, "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 (event) => { + var progress = (resumable.progress() * 100).toFixed(2); + var pbar = progress_bar.find(".progress-bar"); + remove_class(progress_bar, "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, "hidden"); + remove_class(cancel_button, "hidden"); + add_class(browse_button, "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, "hidden"); + remove_class(retry_button, "hidden"); + remove_class(browse_button, "hidden"); + }); + }; + + + var startUpload = (browse_button, retry_button, cancel_button) => { + return (event) => { + remove_class(cancel_button, "hidden"); + add_class(retry_button, "hidden"); + add_class(browse_button, "hidden"); + }; + }; + + + var uploadSuccess = () => { + return (file, message) => { + console.log("THE FILE:", file); + console.log("THE SUCCESS MESSAGE:", message); + // TODOS: + // * Save filename/filepath somewhere + // * Trigger some function that will run when all files have succeeded + }; + }; + + + var uploadError = () => { + return (message, file) => { + console.log("THE FILE:", file); + console.log("THE ERROR MESSAGE:", message); + }; + }; + + + var r = errorHandler( + fileSuccessHandler( + uploadStartHandler( + filesAddedHandler( + markResumableDragAndDropElement( + makeResumableElement( + $("#frm-add-phenotypes").attr("data-resumable-target"), + $("#finput-phenotype-descriptions").parent(), + $("#resumable-phenotype-descriptions"), + $("#frm-add-phenotypes input[type=submit]"), + ["csv", "tsv"]), + $("#finput-phenotype-descriptions").parent(), + $("#resumable-phenotype-descriptions"), + $("#resumable-phenotype-descriptions-browse-button")), + (files) => { + // TODO: Also trigger preview! + resumableDisplayFiles( + $("#resumable-phenotype-descriptions-selected-files"), files); + }), + startUpload($("#resumable-phenotype-descriptions-browse-button"), + $("#resumable-phenotype-descriptions-retry-button"), + $("#resumable-phenotype-descriptions-cancel-button"))), + uploadSuccess()), + uploadError()); + + progressHandler( + r, + indicateProgress(r, $("#resumable-phenotype-descriptions-progress-bar"))); + + + $("#frm-add-phenotypes input[type=submit]").on("click", (event) => { + event.preventDefault(); + // TODO: Check all the relevant files exist + // TODO: Check all fields + // Start the uploads. + r.upload(); + }); </script> {%endblock%} |