mirror of
https://github.com/ail-project/ail-framework.git
synced 2024-11-23 06:37:15 +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["date"] = curr_date
|
||||||
data["char_to_display"] = max_preview_modal
|
data["char_to_display"] = max_preview_modal
|
||||||
data["finished"] = True if index == len(all_pastes_list) else False
|
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):
|
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 }}">
|
<table class="table table-striped table-bordered table-hover" id="myTable_{{ moduleName }}">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -24,28 +23,50 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</br>
|
</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>
|
</br>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
var json_array = [];
|
||||||
|
var all_data_received = false;
|
||||||
|
var curr_numElem;
|
||||||
|
var elem_added = 0;
|
||||||
|
var tot_num_entry = 0;
|
||||||
|
|
||||||
function deploy_source() {
|
function deploy_source() {
|
||||||
|
var button_load_more_displayed = false;
|
||||||
|
|
||||||
if(typeof(EventSource) !== "undefined" && typeof(source) !== "") {
|
if(typeof(EventSource) !== "undefined" && typeof(source) !== "") {
|
||||||
var source = new EventSource("{{ url_for('getImportantPasteByModule') }}"+"?moduleName="+moduleName);
|
var source = new EventSource("{{ url_for('getImportantPasteByModule') }}"+"?moduleName="+moduleName);
|
||||||
source.onmessage = function(event) {
|
source.onmessage = function(event) {
|
||||||
var feed = jQuery.parseJSON( event.data );
|
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
|
if (feed.index > curr_numElem & feed.module == moduleName) { // Avoid doubling the pastes
|
||||||
// Add the row to the table
|
json_array.push(feed);
|
||||||
search_table.row.add( [
|
tot_num_entry++;
|
||||||
feed.index,
|
$("#load_more_json_button1").show();
|
||||||
"<a target=\"_blank\" href=\"{{ url_for('showsavedpaste') }}?paste="+feed.path+"&num="+feed.index+"\"> "+ feed.path +"</a>",
|
$("#load_more_json_button2").show();
|
||||||
feed.date,
|
$("#nbr_entry").text(tot_num_entry + " entries available, " + (tot_num_entry - elem_added) + " not displayed");
|
||||||
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);
|
$("#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) {
|
if(feed.finished) {
|
||||||
$("#loading_gif_browse").hide();
|
$("#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...");
|
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>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue