From 31d9c611d13d92b4f07326b592735e3449433a97 Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Fri, 20 Dec 2024 12:53:34 -0600
Subject: Activate initial PoC for chunked uploads.

---
 .../phenotypes/add-phenotypes-raw-files.html       | 137 ++++++++++++++++++++-
 1 file changed, 136 insertions(+), 1 deletion(-)

(limited to 'uploader/templates')

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%}
-- 
cgit v1.2.3