Prevent browser to request reconnection for the eventStream + Added dynamic data loading in the dataTable of BrowseImportantPastes

var/www/Flask_server.py

@@ -97,8 +97,7 @@ def event_stream_getImportantPasteByModule(module_name):
         data["date"] = curr_date
         data["char_to_display"] = max_preview_modal
         data["finished"] = True if index == len(all_pastes_list) else False
-        time.sleep(0.002) #So that the front end client is not flooded by data
+        yield 'retry: 100000\ndata: %s\n\n' % json.dumps(data) #retry to avoid reconnection of the browser
-        yield 'data: %s\n\n' % json.dumps(data)
 
 
 def get_queues(r):

var/www/templates/important_paste_by_module.html

@@ -1,4 +1,3 @@
-<img id="loading_gif_browse" src="{{url_for('static', filename='image/loading.gif') }}" heigt="20" width="20" style="margin: 2px; {{ finished }}">
 <table class="table table-striped table-bordered table-hover" id="myTable_{{ moduleName }}">
     <thead>
          <tr>
@@ -24,18 +23,74 @@
     </tbody>
 </table>
 </br>
+<div id="nbr_entry" class="alert alert-info">
+ 
+</div>
+<div id="div_stil_data">
+    <button id="load_more_json_button1" type="button" class="btn btn-default" onclick="add_entries(100)" style="display: none">Load 100 entries</button>
+    <button id="load_more_json_button2" type="button" class="btn btn-warning" onclick="add_entries(500)" style="display: none">Load 500 entries</button>
+    <img id="loading_gif_browse" src="{{url_for('static', filename='image/loading.gif') }}" heigt="20" width="20" style="margin: 2px; {{ finished }}"></div>
 </br>
 
 
+
 <script>
+var json_array = [];
+var all_data_received = false;
+var curr_numElem;
+var elem_added = 0;
+var tot_num_entry = 0;
+
 function deploy_source() {
+    var button_load_more_displayed = false;
+
     if(typeof(EventSource) !== "undefined" && typeof(source) !== "") {
         var source = new EventSource("{{ url_for('getImportantPasteByModule') }}"+"?moduleName="+moduleName);
         source.onmessage = function(event) {
             var feed = jQuery.parseJSON( event.data );
-            var curr_numElem = parseInt($("#myTable_"+moduleName).attr('data-numElem'));
+            curr_numElem = parseInt($("#myTable_"+moduleName).attr('data-numElem'));
             if (feed.index > curr_numElem & feed.module == moduleName) { // Avoid doubling the pastes
-                // Add the row to the table
+                json_array.push(feed);
+                tot_num_entry++;
+                $("#load_more_json_button1").show();
+                $("#load_more_json_button2").show();
+                $("#nbr_entry").text(tot_num_entry + " entries available, " + (tot_num_entry - elem_added) + " not displayed");
+
+                $("#myTable_"+moduleName).attr('data-numElem', curr_numElem+1);
+
+                if(feed.index > 100 && !button_load_more_displayed) {
+                    button_load_more_displayed = true;
+                    add_entries_X(20);
+                }
+                if(feed.finished) {
+                    $("#loading_gif_browse").hide();
+                    source.close();
+                    all_data_received = true;
+                    add_entries_X(10);
+                }
+            }
+        };
+    } else {
+        console.log("Sorry, your browser does not support server-sent events...");
+    }
+}
+
+function add_entries(iter) { //Used to disable the button before going to the big loop
+    $("#load_more_json_button1").attr('disabled','disabled');
+    $("#load_more_json_button2").attr('disabled','disabled');
+    setTimeout(function() { add_entries_X(iter);}, 50);
+}
+
+function add_entries_X(to_add) {
+    for(i=0; i<to_add; i++) {
+        if(json_array.length == 0 && all_data_received) {
+            $("#load_more_json_button1").hide();
+            $("#load_more_json_button2").hide();
+            $("#nbr_entry").hide();
+            return false;
+        } else {
+            var feed = json_array.shift();
+            elem_added++;
              search_table.row.add( [
                  feed.index,
                 "<a target=\"_blank\" href=\"{{ url_for('showsavedpaste') }}?paste="+feed.path+"&num="+feed.index+"\"> "+ feed.path +"</a>",
@@ -44,15 +99,17 @@ function deploy_source() {
                  "<p><span class=\"glyphicon glyphicon-info-sign\" data-toggle=\"tooltip\" data-placement=\"left\" title=\""+feed.content.replace(/\"/g, "\'").replace(/\r/g, "\'").replace(/\n/g, "\'")+"\"></span> <button type=\"button\" class=\"btn-link\" data-num=\""+feed.index+"\" data-toggle=\"modal\" data-target=\"#mymodal\" data-url=\"{{ url_for('showsavedpaste') }}?paste="+feed.path+"&num="+feed.index+"\" data-path=\""+feed.path+"\"><span class=\"fa fa-search-plus\"></span></button></p>"
              ] ).draw( false );
              $("#myTable_"+moduleName).attr('data-numElem', curr_numElem+1);
-                if(feed.finished) {
-                    $("#loading_gif_browse").hide();
         }
     }
-        };
+    $("#load_more_json_button1").removeAttr('disabled');
-    } else {
+    $("#load_more_json_button2").removeAttr('disabled');
-        console.log("Sorry, your browser does not support server-sent events...");
+    $("#nbr_entry").text(tot_num_entry + " entries available, " + (tot_num_entry - elem_added) + " not displayed");
-    }
+    return true;
 }
+
+
+
+
 </script>