sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-12-24 10:34:17 +00:00
Code Issues Projects Releases Wiki Activity

Add progress bar for file upload.

Browse Source
This commit is contained in:
Patrick Jentsch 2019-09-16 12:12:42 +02:00
parent 22a1223258
commit 9005c583ca
4 changed files with 39 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
app/static/js/opaque.js Normal file
View File

@ -0,0 +1,30 @@
function sendNewJobFormData(form, progress) {
var XHR = new XMLHttpRequest();
var FD = new FormData(form);
XHR.upload.addEventListener("progress", function(event) {
progress.querySelector(".determinate").style.width = ((event.loaded / event.total) * 100).toString() + "%";
});
XHR.addEventListener("loadend", function(event) {
form.reset();
location.reload();
});
XHR.open("POST", window.location.href);
XHR.send(FD);
}
function initNewJobForm(newJobFormElement) {
newJobFormElement.addEventListener("submit", function(event) {
event.preventDefault();
var toast = M.toast(
{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"));
});
}

1
app/templates/base.html.j2
View File

@ -12,6 +12,7 @@
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/materialize.min.css') }}" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/opaque.css') }}" media="screen,projection"/>
<script src="{{ url_for('static', filename='js/Animations.js') }}"></script>
<script src="{{ url_for('static', filename='js/opaque.js') }}"></script>
<script src="{{ url_for('static', filename='js/jsonpatch.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
<script src="{{ url_for('static', filename='js/list.js') }}"></script>

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

@ -53,7 +53,7 @@
<div class="col s12">
<div class="card">
<form method="POST" enctype="multipart/form-data">
<form method="POST" enctype="multipart/form-data" id="new-nlp-job-form">
<div class="card-content">
{{ new_nlp_job_form.hidden_tag() }}
<div class="row">
@ -121,4 +121,7 @@
</form>
</div>
</div>
<script>
initNewJobForm(document.getElementById("new-nlp-job-form"));
</script>
{% endblock %}

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

@ -54,7 +54,7 @@
<div class="col s12">
<div class="card">
<form method="POST" enctype="multipart/form-data">
<form method="POST" enctype="multipart/form-data" id="new-ocr-job-form">
<div class="card-content">
{{ new_ocr_job_form.hidden_tag() }}
<div class="row">
@ -138,4 +138,7 @@
</form>
</div>
</div>
<script>
initNewJobForm(document.getElementById("new-ocr-job-form"));
</script>
{% endblock %}