mirror of
https://github.com/ail-project/ail-framework.git
synced 2024-11-27 00:07:16 +00:00
Prevent browser to request reconnection for the eventStream + Added dynamic data loading in the dataTable of BrowseImportantPastes
This commit is contained in:
parent
768fb6f2df
commit
80ca49f018
2 changed files with 68 additions and 12 deletions
|
@ -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 'data: %s\n\n' % json.dumps(data)
|
||||
yield 'retry: 100000\ndata: %s\n\n' % json.dumps(data) #retry to avoid reconnection of the browser
|
||||
|
||||
|
||||
def get_queues(r):
|
||||
|
|
|
@ -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,28 +23,50 @@
|
|||
</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
|
||||
search_table.row.add( [
|
||||
feed.index,
|
||||
"<a target=\"_blank\" href=\"{{ url_for('showsavedpaste') }}?paste="+feed.path+"&num="+feed.index+"\"> "+ feed.path +"</a>",
|
||||
feed.date,
|
||||
feed.linenum,
|
||||
"<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 );
|
||||
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);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -53,6 +74,42 @@ function deploy_source() {
|
|||
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>",
|
||||
feed.date,
|
||||
feed.linenum,
|
||||
"<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);
|
||||
}
|
||||
}
|
||||
$("#load_more_json_button1").removeAttr('disabled');
|
||||
$("#load_more_json_button2").removeAttr('disabled');
|
||||
$("#nbr_entry").text(tot_num_entry + " entries available, " + (tot_num_entry - elem_added) + " not displayed");
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
|
Loading…
Reference in a new issue