Update progress modal

This commit is contained in:
Patrick Jentsch 2019-09-17 16:15:37 +02:00
parent 09f7d7ac68
commit d7e71638a2
3 changed files with 11 additions and 7 deletions

View File

@ -10,14 +10,18 @@ function sendNewJobFormData(newJobFormElement, progressModalElement, request) {
progressModal.options.dismissible = false; progressModal.options.dismissible = false;
progressModalElement.querySelector(".title").innerHTML = newJobFormElement.title.value; progressModalElement.querySelector(".title").innerHTML = newJobFormElement.title.value;
request.upload.addEventListener("progress", function(event) { request.upload.addEventListener("progress", function(event) {
progressModalElement.querySelector(".loaded").innerHTML = event.loaded.toString(); progressInPercent = Math.floor(100 * event.loaded / event.total).toString() + "%";
progressModalElement.querySelector(".total").innerHTML = event.total.toString(); progressModalElement.querySelector(".progress-in-percent").innerHTML = progressInPercent;
progressModalElement.querySelector(".determinate").style.width = ((event.loaded / event.total) * 100).toString() + "%"; progressModalElement.querySelector(".determinate").style.width = progressInPercent;
}); });
request.addEventListener("load", function(event) { request.addEventListener("load", function(event) {
newJobFormElement.reset(); newJobFormElement.reset();
location.reload(); location.reload();
}); });
request.addEventListener("abort", function(event) {
progressModalElement.querySelector(".progress-in-percent").innerHTML = "0%";
progressModalElement.querySelector(".determinate").style.width = "0%";
});
progressModal.open(); progressModal.open();
request.open("POST", window.location.href); request.open("POST", window.location.href);

View File

@ -124,11 +124,11 @@
<div id="progress-modal" class="modal"> <div id="progress-modal" class="modal">
<div class="modal-content"> <div class="modal-content">
<h4 class="title"></h4> <h4><i class="material-icons prefix">file_upload</i> Uploading files for <span class="title"></span></h4>
<p>Uploading files... <span class="loaded"></span>/<span class="total"></span></p>
<div class="progress"> <div class="progress">
<div class="determinate" style="width: 0%"></div> <div class="determinate" style="width: 0%"></div>
</div> </div>
<p><span class="progress-in-percent"></span> uploaded</p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn red cancel">Cancel</a> <a href="#!" class="modal-close waves-effect waves-green btn red cancel">Cancel</a>

View File

@ -141,11 +141,11 @@
<div id="progress-modal" class="modal"> <div id="progress-modal" class="modal">
<div class="modal-content"> <div class="modal-content">
<h4 class="title"></h4> <h4><i class="material-icons prefix">file_upload</i> Uploading files for <span class="title"></span></h4>
<p>Uploading files... <span class="loaded"></span>/<span class="total"></span></p>
<div class="progress"> <div class="progress">
<div class="determinate" style="width: 0%"></div> <div class="determinate" style="width: 0%"></div>
</div> </div>
<p><span class="progress-in-percent"></span> uploaded</p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn red cancel">Cancel</a> <a href="#!" class="modal-close waves-effect waves-green btn red cancel">Cancel</a>