diff options
| -rw-r--r-- | qc_app/static/js/upload_progress.js | 5 | ||||
| -rw-r--r-- | qc_app/templates/select_species.html | 5 | ||||
| -rw-r--r-- | qc_app/templates/upload_progress_indicator.html | 45 |
3 files changed, 37 insertions, 18 deletions
diff --git a/qc_app/static/js/upload_progress.js b/qc_app/static/js/upload_progress.js index 22dbda8..9638b36 100644 --- a/qc_app/static/js/upload_progress.js +++ b/qc_app/static/js/upload_progress.js @@ -40,7 +40,6 @@ function setup_cancel_upload(request, indicator_elt) { "click", function(event) { event.preventDefault(); request.abort(); - indicator_elt.setAttribute("class", "hidden"); }); } @@ -80,12 +79,10 @@ function make_data_uploader(setup_formdata) { } return false; } - pindicator.setAttribute("class", "modal"); var formdata = setup_formdata(form); document.getElementById("progress-filename").innerHTML = the_file.name; - var request = setup_request( - the_file, document.getElementById("upload-progress-indicator")); + var request = setup_request(the_file, pindicator); request.open(form.getAttribute("method"), form.getAttribute("action")); request.send(formdata); return false; diff --git a/qc_app/templates/select_species.html b/qc_app/templates/select_species.html index 35850de..b813248 100644 --- a/qc_app/templates/select_species.html +++ b/qc_app/templates/select_species.html @@ -57,7 +57,10 @@ class="form-control"/> </div> - <button type="submit" class="btn btn-primary">upload file</button> + <button type="submit" + class="btn btn-primary" + data-toggle="modal" + data-target="#upload-progress-indicator">upload file</button> </form> </div> {%endblock%} diff --git a/qc_app/templates/upload_progress_indicator.html b/qc_app/templates/upload_progress_indicator.html index 9855c2d..e274e83 100644 --- a/qc_app/templates/upload_progress_indicator.html +++ b/qc_app/templates/upload_progress_indicator.html @@ -1,16 +1,35 @@ {%macro upload_progress_indicator()%} -<div id="upload-progress-indicator" class="hidden"> - <h3>Uploading file</h3> - <p id="progress-filename">the-file</p> - <progress id="progress-bar" value="0" max="100"> - 0 - </progress> - <p id="progress-text">Uploading 0%</p> - <p id="progress-extra-text">Processing</p> - <form id="frm-cancel-upload" style="border-style: none;"> - <button id="btn-cancel-upload" type="submit" class="btn btn-danger"> - Cancel - </button> - </form> +<div id="upload-progress-indicator" class="modal fade" tabindex="-1" role="dialog"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h3 class="modal-title">Uploading file</h3> + </div> + + <div class="modal-body"> + <form id="frm-cancel-upload" style="border-style: none;"> + <div class="form-group"> + <span id="progress-filename" class="form-text">No file selected!</span> + <progress id="progress-bar" value="0" max="100" class="form-control"> + 0</progress> + </div> + + <div class="form-group"> + <span class="form-text text-muted" id="progress-text"> + Uploading 0%</span> + <span class="form-text text-muted" id="progress-extra-text"> + Processing</span> + </div> + </form> + </div> + + <div class="modal-footer"> + <button id="btn-cancel-upload" + type="button" + class="btn btn-danger" + data-dismiss="modal">Cancel</button> + </div> + </div> + </div> </div> {%endmacro%} |