sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-12-25 02:44:18 +00:00
Code Issues Projects Releases Wiki Activity

Use modals instead of toasts for progress indication.

Browse Source
This commit is contained in:
Patrick Jentsch 2019-09-17 10:56:56 +02:00
parent 70c97d44f9
commit 07c4e31510
3 changed files with 56 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
app/static/js/opaque.js
View File

@ -1,30 +1,32 @@
function sendNewJobFormData(form, progress) { function sendNewJobFormData(newJobFormElement, progressModalElement) {
var XHR = new XMLHttpRequest(); var formData;
var FD = new FormData(form); var progress;
XHR.upload.addEventListener("progress", function(event) { var progressModal;
progress.querySelector(".determinate").style.width = ((event.loaded / event.total) * 100).toString() + "%"; var request;
formData = new FormData(newJobFormElement);
progressModal = M.Modal.getInstance(progressModalElement);
request = new XMLHttpRequest();
progressModal.options.dismissible = false;
progressModalElement.querySelector(".title").innerHTML = newJobFormElement.title.value;
request.upload.addEventListener("progress", function(event) {
progressModalElement.querySelector(".loaded").innerHTML = event.loaded.toString();
progressModalElement.querySelector(".total").innerHTML = event.total.toString();
progressModalElement.querySelector(".determinate").style.width = ((event.loaded / event.total) * 100).toString() + "%";
}); });
XHR.addEventListener("loadend", function(event) { request.addEventListener("loadend", function(event) {
form.reset(); newJobFormElement.reset();
location.reload(); location.reload();
}); });
XHR.open("POST", window.location.href);
XHR.send(FD); progressModal.open();
request.open("POST", window.location.href);
request.send(formData);
} }
function initNewJobForm(newJobFormElement) { function initNewJobForm(newJobFormElement, progressModalElement) {
newJobFormElement.addEventListener("submit", function(event) { newJobFormElement.addEventListener("submit", function(event) {
event.preventDefault(); event.preventDefault();
var toast = M.toast( sendNewJobFormData(newJobFormElement, progressModalElement);
{html: `<div class="row">
<div class="col s12">${this.title.value}</div>
<div class="col s12">
<div class="progress">
<div class="determinate" style="width: 0%"></div>
</div>
</div>
</div>`,
displayLength: Infinity}
);
sendNewJobFormData(this, toast.el.querySelector(".progress"));
}); });
} }

17
app/templates/services/nlp.html.j2
View File

@ -121,7 +121,22 @@
</form> </form>
</div> </div>
</div> </div>
<div id="progress-modal" class="modal">
<div class="modal-content">
<h4 class="title"></h4>
<p>Uploading files... <span class="loaded"></span>/<span class="total"></span></p>
<div class="progress">
<div class="determinate" style="width: 0%"></div>
</div>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat disabled">Cancel</a>
</div>
</div>
<script> <script>
initNewJobForm(document.getElementById("new-nlp-job-form")); initNewJobForm(document.getElementById("new-nlp-job-form"),
document.getElementById("progress-modal"));
</script> </script>
{% endblock %} {% endblock %}

17
app/templates/services/ocr.html.j2
View File

@ -138,7 +138,22 @@
</form> </form>
</div> </div>
</div> </div>
<div id="progress-modal" class="modal">
<div class="modal-content">
<h4 class="title"></h4>
<p>Uploading files... <span class="loaded"></span>/<span class="total"></span></p>
<div class="progress">
<div class="determinate" style="width: 0%"></div>
</div>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat disabled">Cancel</a>
</div>
</div>
<script> <script>
initNewJobForm(document.getElementById("new-ocr-job-form")); initNewJobForm(document.getElementById("new-ocr-job-form"),
document.getElementById("progress-modal"));
</script> </script>
{% endblock %} {% endblock %}