From: Sven Schöling Date: Fri, 14 May 2021 16:09:38 +0000 (+0200) Subject: Image Upload: progress bar, success und error flash X-Git-Tag: kivitendo-mebil_0.1-0~9^2~71 X-Git-Url: http://wagnertech.de/git?a=commitdiff_plain;h=53baaec89d59f967fcd3cb06c524288ad1f56d6e;p=kivitendo-erp.git Image Upload: progress bar, success und error flash --- diff --git a/js/kivi.FileDB.js b/js/kivi.FileDB.js index 15e5d5a01..7ee0701e2 100644 --- a/js/kivi.FileDB.js +++ b/js/kivi.FileDB.js @@ -75,13 +75,15 @@ namespace("kivi.FileDB", function(ns) { }); }; - ns.delete_all= function() { - ns.retrieve_all_keys((keys) => { - keys.forEach((key) => ns.delete_key(key)); + ns.delete_all = function(success) { + ns.open_rw_store((store) => { + let request = store.clear(); + request.onsuccess = success; + request.onerror = ns.error; }); }; - ns.delete_key= function(key, success) { + ns.delete_key = function(key, success) { ns.open_rw_store((store) => { let request = store.delete(key); request.onsuccess = (event) => { if (success) success(event.target.result); }; diff --git a/js/kivi.ImageUpload.js b/js/kivi.ImageUpload.js index 3ae00b20d..5d22a0a3f 100644 --- a/js/kivi.ImageUpload.js +++ b/js/kivi.ImageUpload.js @@ -2,6 +2,7 @@ namespace("kivi.ImageUpload", function(ns) { "use strict"; const MAXSIZE = 15*1024*1024; // 5MB size limit + const M = kivi.Materialize; let num_images = 0; @@ -73,7 +74,8 @@ namespace("kivi.ImageUpload", function(ns) { myfiles.forEach(file => { filesize += file.size; if (filesize > maxsize) { - $("#upload_result").html(kivi.t8("filesize too big: ") + filesize+ kivi.t8(" bytes, max=") + maxsize ); + M.flash(kivi.t8("filesize too big: ") + ns.format_si(filesize) + kivi.t8(" > ") + ns.format_si(maxsize)); + $("#upload_modal").modal("close"); return; } @@ -89,10 +91,10 @@ namespace("kivi.ImageUpload", function(ns) { let xhr = new XMLHttpRequest; xhr.open('POST', 'controller.pl', true); - xhr.success = ns.attSuccess; - xhr.progress = ns.attProgress; - xhr.error = ns.attFailed; - xhr.abort = ns.attCanceled; + xhr.onload = ns.attSuccess; + xhr.upload.onprogress = ns.attProgress; + xhr.upload.onerror = ns.attFailed; + xhr.upload.onabort = ns.attCanceled; xhr.send(data); }); }); @@ -100,24 +102,25 @@ namespace("kivi.ImageUpload", function(ns) { ns.attProgress = function(event) { if (event.lengthComputable) { - var percentComplete = (event.loaded / event.total) * 100; - $("#upload_result").html(percentComplete+" % "+ kivi.t8("uploaded")); + var percent_complete = (event.loaded / event.total) * 100; + $("#upload_progress div").removeClass("indeterminate").addClass("determinate").attr("style", "width: " + percent_complete + "%"); } }; ns.attFailed = function() { $('#upload_modal').modal('close'); - $("#upload_result").html(kivi.t8("An error occurred while transferring the file.")); + M.flash(kivi.t8("An error occurred while transferring the file.")); }; ns.attCanceled = function() { $('#upload_modal').modal('close'); - $("#upload_result").html(kivi.t8("The transfer has been canceled by the user.")); + M.flash(kivi.t8("The transfer has been canceled by the user.")); }; ns.attSuccess = function() { $('#upload_modal').modal('close'); - $("#upload_result").html(kivi.t8("Files have been uploaded successfully.")); + M.flash(kivi.t8("Files have been uploaded successfully.")); + kivi.FileDB.delete_all(ns.reload_images); }; ns.resolve_object = function(event) { @@ -150,6 +153,18 @@ namespace("kivi.ImageUpload", function(ns) { }); }; + /* this tries to format the number human readable. 3 significant digits, si suffix, */ + ns.format_si = function(n) { + const prefixes = ["", "K" , "M", "G", "T", "P"]; + let i = 0; + while (n >= 1024) { + n /= 1024; + i++; + } + + return kivi.format_amount(n, 3 - (n|0).toString().length) + prefixes[i] + "B"; + }; + ns.init = function() { ns.reload_images(); }; diff --git a/templates/mobile_webpages/image_upload/local_list.html b/templates/mobile_webpages/image_upload/local_list.html index ceb6e8864..bc3af8029 100644 --- a/templates/mobile_webpages/image_upload/local_list.html +++ b/templates/mobile_webpages/image_upload/local_list.html @@ -5,8 +5,6 @@

[% source.title | html %]

-
-

Schritt 1: Bilder machen

@@ -39,7 +37,7 @@
[% P.M.input_tag("object_number", "", label=LxERP.t8("Number"), class="col s4", onkeyup="kivi.ImageUpload.resolve_object(event)") %]
-
- [% P.M.button_tag("kivi.ImageUpload.upload_files()", LxERP.t8("Upload Images"), class="col s12") %] + [% P.M.button_tag("kivi.ImageUpload.upload_files()", LxERP.t8("Upload Images"), id="upload_images_submit", class="col s12") %]
@@ -58,7 +56,7 @@