[GNUnet-SVN] [taler-backoffice] branch master updated: addressing usability issues and some incompleteness.

[gnunet]

This is an automated email from the git hooks/post-receive script.

marcello pushed a commit to branch master
in repository backoffice.

The following commit(s) were added to refs/heads/master by this push:
     new 439864c  addressing usability issues and some incompleteness.
439864c is described below

commit 439864cf7208857c3e90096bbfa134bffd3e4db2
Author: Marcello Stanisci <address@hidden>
AuthorDate: Tue Jun 5 17:10:48 2018 +0200

    addressing usability issues and some incompleteness.
---
 js/backoffice.js                                   | 95 ++++++++++++++--------
 talerbackoffice/backoffice/static/backoffice.css   |  1 +
 .../backoffice/templates/backoffice.html           |  2 +-
 3 files changed, 62 insertions(+), 36 deletions(-)

diff --git a/js/backoffice.js b/js/backoffice.js
index ba04d80..205a3bd 100644
--- a/js/backoffice.js
+++ b/js/backoffice.js
@@ -137,11 +137,11 @@ function make_marker(wtid){
  * 'fill_table()'.
  */
 var track_transfer = function(exchange, wtid, cb){
-
   /* Remove any previous errors, if there are any.  */
   var info_bar = document.getElementById("information-bar");
   info_bar.style.visibility = "hidden"; 
-
+  /* Will be untoggled by the 'cb' */
+  toggle_loader();
   var qs = `/track/transfer?` +
            `exchange=${exchange}&` +
            `wtid=${wtid}&` +
@@ -153,10 +153,13 @@ var track_transfer = function(exchange, wtid, cb){
       switch(req.status){
       case 200:
         var tracks = JSON.parse(req.responseText);
-        cb(true, tracks.deposits_sums, tracks.execution_time, wtid);
+        cb(true,
+           tracks.deposits_sums,
+           tracks.execution_time,
+           wtid);
         break;
       default:
-        show_error(req.responseText);
+        show_error(req.responseText, true);
       }
     }
   }
@@ -166,9 +169,14 @@ var track_transfer = function(exchange, wtid, cb){
 
 /* Fill the information bar on the top of the page with
  * error messages.  */
-var show_error = function(response_text){
-  var msg = response_text;
+var show_error = function(response_text, keep_history){
+
+  toggle_loader();
+  if (!keep_history)
+    clean_results();
+  close_popup();
 
+  var msg = response_text;
   try{
     var parse = JSON.parse(response_text);
     console.log("Response was at least JSON");
@@ -204,7 +212,8 @@ var track_order = function(order_id, cb){
   /* Remove any previous errors, if there are any.  */
   var info_bar = document.getElementById("information-bar");
   info_bar.style.visibility = "hidden"; 
-
+  /* Will be untoggled by the 'cb' */
+  toggle_loader();
   var req = new XMLHttpRequest();
   var url = `/track/order?` +
             `order_id=${order_id}&` +
@@ -215,7 +224,7 @@ var track_order = function(order_id, cb){
       if ((200 == req.status) || (202 == req.status))
         cb(JSON.parse(req.responseText), req.status);
       else
-        show_error(req.responseText);
+        show_error(req.responseText, true);
       return;
     }
   }
@@ -227,6 +236,7 @@ var track_order = function(order_id, cb){
  */
 function fill_box(tracks, http_code)
 {
+  toggle_loader();
 
   if (http_code == 404){
     alert("No tracks for that order.");
@@ -278,7 +288,7 @@ function fill_box(tracks, http_code)
                                    `\'${entry.wtid}\')"` +
             `href="#${i}">${subject.substring(0, 20)}...` +
         `</a>` +
-      `</td>`
+      `</td>` +
       `<td class="amount">` +
         `${amount_to_string(entry.amount)}` +
       `</td>` +
@@ -327,19 +337,21 @@ function xpath_get(xpath, ctx){
  * /track/tranfer results are being shown, it indicates the time
  * the exchange wire transferred this order's amount.
  */
-function fill_table(refresh, data, execution_time, wtid_marker){
-  toggle_loader();
+function fill_table(scroll, data, execution_time, wtid_marker){
   var table = document.getElementById("history");
   var tbody = xpath_get("tbody", table).snapshotItem(0);
   var nr = xpath_get("address@hidden'no-records']", tbody)
   .snapshotItem(0)
-  if (refresh){
+
+  /* not append data, erase!  */
+  if (!scroll){
     clean_results();
     if(0 == data.length){
+      /* make NO RESULTS visible and hide tab headers */
       nr.style.display = "block";
       xpath_get("address@hidden'headers']", tbody)
         .snapshotItem(0).style.visibility = "hidden";
-      window.setTimeout(remove_loader, 900);
+      toggle_loader();
       console.log("Nothing gotten!");
       return;
     }
@@ -350,7 +362,10 @@ function fill_table(refresh, data, execution_time, 
wtid_marker){
 
   /* Make table's header visible */
   xpath_get("address@hidden'headers']", tbody)
-    .snapshotItem(0).style.visibility = "";
+    .snapshotItem(0).style.visibility = "visible";
+  /* Will only be effective on page first load; afterwards
+   * it is just idempotent.  */
+  table.style.visibility = "visible";
 
   for (var i=0; i<data.length; i++){
     var entry = data[i];
@@ -383,18 +398,15 @@ function fill_table(refresh, data, execution_time, 
wtid_marker){
     tbody.appendChild(row);
     tbody.appendChild(row_summary);
     }
+
   if (wtid_marker){
     // close popup showing wire transfer information
     close_popup();
-    // draw a line @ the bottom, mentioning the WTID.
+    // draw a line at the bottom, mentioning the WTID.
     var marker = make_marker(wtid_marker);
     tbody.appendChild(marker);
   }
-
-  window.setTimeout(function(){
-    toggle_loader();
-    table.style.visibility = ""; 
-  }, 900);
+  toggle_loader();
 }
 
 /**
@@ -403,11 +415,17 @@ function fill_table(refresh, data, execution_time, 
wtid_marker){
  */
 function toggle_loader(){
   var loader = document.getElementsByClassName("loader")[0]; 
-  if (loader.style.visibility == "hidden")
-    loader.style.visibility = ""
-  else
+  if (loader.style.visibility != "hidden")
+  {
     loader.style.visibility = "hidden";
+    console.log("toggle_loader: visible>hidden");
   }
+  else
+  {
+    loader.style.visibility = "visible";
+    console.log("toggle_loader: hidden>visible");
+  }
+} 
 
 /**
  * Issue a /track/order (/track/transfer) depending on
@@ -477,7 +495,8 @@ function get_instance(){
 }
 
 /**
- * Remove tracks from the main page table.
+ * Remove tracks from the main page table, but do NOT remove
+ * the table headers
  */
 function clean_results(){
   var table = document.getElementById("history");
@@ -492,7 +511,11 @@ function clean_results(){
  * selected one.
  */
 function change_instance(){
-  get_history(false, cb);
+  /* Restore values.  Changing instance should have
+   * the same effect of reloading the whole page.  */
+  START = 0;
+  LAST = 0;
+  get_history(false, fill_table);
 }
 
 /**
@@ -504,12 +527,14 @@ function change_instance(){
  * 'cb' is a UI transforming function.  Typically, it is set
  * to 'fill_table()'.
  */
-function get_history(refresh, cb){
+function get_history(scroll, cb){
   var qs = `/history?instance=${get_instance()}&delta=${DELTA}`;
-  if(!refresh){
+  if(scroll){
     START = LAST;
     qs += `&start=${START}`;
   }
+  /* Will be untoggled by the 'cb' */
+  toggle_loader();
   var req = new XMLHttpRequest();
   req.open("GET", qs, true);
   req.onload = function(){
@@ -524,11 +549,12 @@ function get_history(refresh, cb){
           console.log(history);
           LAST = history[history.length - 1].row_id;
         }
-        cb(refresh, history);
+        cb(scroll, history);
       }
       else{
         console.log("error: status != 200");
         console.log("response", req.responseText);
+        show_error(req.responseText, true);
       }
     }
   }
@@ -538,16 +564,15 @@ function get_history(refresh, cb){
 document.addEventListener
   ("DOMContentLoaded",
    function(){
-     toggle_loader();
-     get_history(true, fill_table);});
-document.addEventListener("scroll", function(){
+     get_history(false, fill_table);});
+
+document.addEventListener
+  ("scroll", function(){
   /* If page bottom is hit */
   if(window.innerHeight + window.scrollY
        >= document.body.offsetHeight)
-    window.setTimeout(function(){
-      toggle_loader();
-      get_history(false, fill_table);},
-      400);});
+    get_history(true, fill_table);
+  });
 
 /* Close dialog on ESC press */
 document.onkeydown = function(e) {
diff --git a/talerbackoffice/backoffice/static/backoffice.css 
b/talerbackoffice/backoffice/static/backoffice.css
index 910e6b9..bb18163 100644
--- a/talerbackoffice/backoffice/static/backoffice.css
+++ b/talerbackoffice/backoffice/static/backoffice.css
@@ -106,6 +106,7 @@ th {
 }
 
 .loader {
+  /* only let the JS to toggle/untoggle it */
   margin-left: 30%;
   border: 7px solid #f3f3f3; /* Light grey */
   border-top: 7px solid #696969; /* Blue */
diff --git a/talerbackoffice/backoffice/templates/backoffice.html 
b/talerbackoffice/backoffice/templates/backoffice.html
index 72ab74e..d904531 100644
--- a/talerbackoffice/backoffice/templates/backoffice.html
+++ b/talerbackoffice/backoffice/templates/backoffice.html
@@ -62,7 +62,7 @@
       </tbody>
     </table>
     <br/>
-    <div class="loader"></div>
+    <div class="loader" style="visibility: hidden;"></div>
   </div>
 
   <div id="popup1" class="overlay">

-- 
To stop receiving notification emails like this one, please contact
address@hidden