diff options
| author | Frederick Muriuki Muriithi | 2025-03-21 13:04:28 -0500 |
|---|---|---|
| committer | Frederick Muriuki Muriithi | 2025-03-21 13:04:28 -0500 |
| commit | 8b6ae4a103df26e923143ef3fbecb84ac4c74d2f (patch) | |
| tree | e1ba784ddfdc6e38d266ec2de47a0dfd529e3c5d | |
| parent | 9df7ff0d54630ae214f94f9625d2e7a78f6b98bf (diff) | |
| download | gn-uploader-8b6ae4a103df26e923143ef3fbecb84ac4c74d2f.tar.gz | |
Add "Busy" indicator
When the user clicks "Bulk Edit (Download Data)" button, it could take
a while to actually process and download the data. In that time, the
visual indicator that the system is busy is helpful to the user. This
commit adds the "busy" indicator.
| -rw-r--r-- | uploader/templates/phenotypes/view-dataset.html | 32 |
1 files changed, 26 insertions, 6 deletions
diff --git a/uploader/templates/phenotypes/view-dataset.html b/uploader/templates/phenotypes/view-dataset.html index fa1044b..ed59d76 100644 --- a/uploader/templates/phenotypes/view-dataset.html +++ b/uploader/templates/phenotypes/view-dataset.html @@ -147,6 +147,8 @@ }, { text: "Bulk Edit (Download Data)", + className: "btn btn-info btn-bulk-edit", + titleAttr: "Click to download data for editing.", action: (event, dt, node, config) => { var phenoids = []; var selected = dt.rows({selected: true, page: "all"}).data(); @@ -160,6 +162,19 @@ alert("No record selected. Nothing to do!"); return false; } + + $(".btn-bulk-edit").prop("disabled", true); + $(".btn-bulk-edit").addClass("d-none"); + var spinner = $( + "<div id='bulk-edit-spinner' class='spinner-grow text-info'>"); + spinner_content = $( + "<span class='visually-hidden'>"); + spinner_content.html( + "Downloading data …"); + spinner.append(spinner_content) + $(".btn-bulk-edit").parent().append( + spinner); + $.ajax( (`/species/${species_id}/populations/` + `${population_id}/phenotypes/datasets/` + @@ -185,19 +200,24 @@ console.log("Experienced an error: ", textStatus); console.log("The ERROR: ", errorThrown); }, + complete: (jqXHR, textStatus) => { + $("#bulk-edit-spinner").remove(); + $(".btn-bulk-edit").removeClass( + "d-none"); + $(".btn-bulk-edit").prop( + "disabled", false); + }, contentType: "application/json" }); - }, - className: "btn btn-info", - titleAttr: "Click to download data for editing." + } }, { text: "Bulk Edit (Upload Data)", + className: "btn btn-info btn-bulk-edit", + titleAttr: "Click to upload edited data you got by clicking the `Bulk Edit (Download Data)` button.", action: (event, dt, node, config) => { alert("Not implemented yet!") - }, - className: "btn btn-info", - titleAttr: "Click to upload edited data you got by clicking the `Bulk Edit (Download Data)` button." + } } ] }, |