diff options
author | Marcello Stanisci <stanisci.m@gmail.com> | 2018-06-05 17:10:48 +0200 |
---|---|---|
committer | Marcello Stanisci <stanisci.m@gmail.com> | 2018-06-05 17:10:48 +0200 |
commit | 439864cf7208857c3e90096bbfa134bffd3e4db2 (patch) | |
tree | bafb4537614532e34a6dd68e7a46de184018869e /js/backoffice.js | |
parent | 188b21026024cd79a2b6942f5d9d309fd7640371 (diff) | |
download | backoffice-439864cf7208857c3e90096bbfa134bffd3e4db2.tar.gz backoffice-439864cf7208857c3e90096bbfa134bffd3e4db2.tar.bz2 backoffice-439864cf7208857c3e90096bbfa134bffd3e4db2.zip |
addressing usability issues and some incompleteness.
Diffstat (limited to 'js/backoffice.js')
-rw-r--r-- | js/backoffice.js | 95 |
1 files changed, 60 insertions, 35 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("tr[@class='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("tr[@class='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("tr[@class='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) { |