diff --git a/tools/proxy_node.html b/tools/proxy_node.html index e221a55bb8e7e144153afc720aaa5f51895e4c84..735f0ed78c44ca5e2a84b8798eb2dc4cc4109374 100644 --- a/tools/proxy_node.html +++ b/tools/proxy_node.html @@ -9,16 +9,16 @@ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript">"use strict"; -var onGet; -var onPut; -var setServer; +let onGet; +let onPut; +let setServer; const valueGetElement = function(o) { const d = window.atob(o.data); return d; }; $(function() { - var request = undefined; - var server; + let request = undefined; + let server; const getTools = $("#getTools"); const getBtn = $("#getBtn"); const getDropdown = $("#getDropdown"); @@ -46,6 +46,8 @@ $(function() { return false; const input = $("#getKey").val(); group.empty(); + let lastAppended = 0; + let start = new Date().getTime(); request = new XMLHttpRequest(); request.onreadystatechange = function(event) { if (this.readyState >= XMLHttpRequest.LOADING) { @@ -53,15 +55,20 @@ $(function() { clearGetRequest(); } if (this.status === 200) { - group.empty(); const elements = this.responseText.split("\n"); - elements.forEach(function(element) { + const elementsLength = elements.length; + const now = new Date().getTime(); + for (let i = lastAppended; i < elementsLength; i++) { + const element = elements[i]; if (!element || element.length == 0) return; const o = JSON.parse(element); const d = window.atob(o.data); - $('<li class="list-group-item"/>').append(valueGetElement(o)).appendTo(group); - }); + const delay = Math.max(0, start-now); + $('<li class="list-group-item"/>').append(valueGetElement(o)).appendTo(group).hide().delay(delay).slideDown(100); + lastAppended = i+1; + start = Math.max(start, now)+25; + } } else if (this.status !== 0) { group.empty().append($('<li class="list-group-item list-group-item-danger"/>').text("Error loading content: " + this.statusText)); } @@ -109,7 +116,7 @@ $(function() { serverStatus.empty(); serverBtn.button('loading'); $.getJSON(server, function(data){ - serverStatus.append('<b>Node</b> ').append(data.node_id); + $('<span><b>Node</b> '+data.node_id+'</span>').appendTo(serverStatus).hide().fadeIn(); }).fail(function(error) { serverStatus.html("<div class='alert alert-danger' style='margin-bottom: 0px;'><span class='glyphicon glyphicon-remove' aria-hidden='true'></span> Can't access node</div>"); }).always(function(error) { @@ -154,7 +161,6 @@ $(function() { <button id="getBtn" class="btn btn-default" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i>" type="submit">Get</button> <button id="getDropdown"type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> - <li><a id="getDropBtn" href="#">Get</a></li> <li><a id="listenBtn" href="#">Listen</a></li> </ul> <button id="getStopBtn" class="btn btn-default" type="submit"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>