From 53baaec89d59f967fcd3cb06c524288ad1f56d6e Mon Sep 17 00:00:00 2001
From: =?utf8?q?Sven=20Sch=C3=B6ling?= <s.schoeling@googlemail.com>
Date: Fri, 14 May 2021 18:09:38 +0200
Subject: [PATCH] Image Upload: progress bar, success und error flash

---
 js/kivi.FileDB.js                             | 10 +++---
 js/kivi.ImageUpload.js                        | 35 +++++++++++++------
 .../image_upload/local_list.html              |  6 ++--
 3 files changed, 33 insertions(+), 18 deletions(-)

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 @@
 
 <h4>[% source.title | html %]</h4>
 
-  <div id="updoad_result"></div>
-
   <p>Schritt 1: Bilder machen</p>
 
   <div id="stored-images" class="container">
@@ -39,7 +37,7 @@
     <div class="row">
       [% P.M.input_tag("object_number", "", label=LxERP.t8("Number"), class="col s4", onkeyup="kivi.ImageUpload.resolve_object(event)") %]
       <div id="object_description" class="col s8">-</div>
-      [% 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") %]
     </div>
 
 
@@ -58,7 +56,7 @@
   <div class="modal-content">
     <h4>Uploading</h4>
 
-    <div class="progress">
+    <div id="upload_progress" class="progress">
       <div class="indeterminate"></div>
     </div>
   </div>
-- 
2.20.1