[fix] Fixed search trouble (broadband overload) to search only if no new char in 500ms after

This commit is contained in:
xdrm-brackets 2017-07-29 19:15:00 +02:00
parent e0f20cdd85
commit c9da8708ae
3 changed files with 120 additions and 39 deletions

View File

@ -2,9 +2,13 @@
var section = { var section = {
view: { view: {
text: '#CONTAINER > section[data-sublink="view"] ', text: '#CONTAINER > section[data-sublink="view"] ',
element: document.querySelector('#CONTAINER > section[data-sublink="view"]'), element: document.querySelector('#CONTAINER > section[data-sublink="view"]'),
searchbar: document.querySelector('#CONTAINER > section[data-sublink="view"] > .searchbar') search: {
}, bar: document.querySelector('#CONTAINER > section[data-sublink="view"] > .searchbar'),
func: null,
time: null // search time manager (interval)
},
},
details: { details: {
text: '#CONTAINER > section[data-sublink="details"] ', text: '#CONTAINER > section[data-sublink="details"] ',
@ -24,18 +28,24 @@ var section = {
*/ */
if( section.view.element != null ){ if( section.view.element != null ){
/* (0) On gère le zoom sur un log via URL */
if( pageManager.vars.length > 1 && !isNaN(pageManager.vars[1]) ){
document.location = '#'+pageManager.vars[1];
if( document.getElementById(pageManager.vars[1]) != null )
document.getElementById(pageManager.vars[1]).addClass('selected');
}
/* (1) On recupere tous les liens */ /* (1) On recupere tous les liens */
section.view.link = { section.view.link = {
details: document.querySelectorAll(section.view.text + 'button[data-details]') details: document.querySelectorAll(section.view.text + 'button[data-details]')
}; };
/* (2) Gestion de la recherche instantannee */ /* (2) Gestion de la recherche instantannee */
section.view.searchbar.addEventListener('keyup', function(e){ section.view.search.func = function(){
var search = {
var search = {
path: 'historyDefault/search', path: 'historyDefault/search',
keywords: section.view.searchbar.value keywords: section.view.search.bar.value
}; };
// On envoie la requete // On envoie la requete
@ -62,10 +72,29 @@ if( section.view.element != null ){
} }
} }
}); });
};
section.view.search.bar.addEventListener('keyup', function(e){
if( section.view.search.time != null )
clearTimeout(section.view.search.time);
section.view.search.time = setTimeout(section.view.search.func, 500);
}, false); }, false);
/* (3) On gere la "redirection" vers les détail */
for( var i = 0 ; i < section.view.link.details.length ; i++ ){
section.view.link.details[i].addEventListener('click', function(e){
pageManager.vars = [ 'details', e.target.getData('details') ];
pageManager.refresh();
}, false);
}
} }

View File

@ -3,7 +3,11 @@ var section = {
view: { view: {
text: '#CONTAINER > section[data-sublink="view"] ', text: '#CONTAINER > section[data-sublink="view"] ',
element: document.querySelector('#CONTAINER > section[data-sublink="view"]'), element: document.querySelector('#CONTAINER > section[data-sublink="view"]'),
searchbar: document.querySelector('#CONTAINER > section[data-sublink="view"] > .searchbar') search: {
bar: document.querySelector('#CONTAINER > section[data-sublink="view"] > .searchbar'),
func: null,
time: null
}
}, },
create: { create: {
@ -24,7 +28,11 @@ var section = {
groups: { groups: {
text: '#CONTAINER > section[data-sublink="groups"] ', text: '#CONTAINER > section[data-sublink="groups"] ',
element: document.querySelector('#CONTAINER > section[data-sublink="groups"]'), element: document.querySelector('#CONTAINER > section[data-sublink="groups"]'),
searchbar: document.querySelector('#CONTAINER > section[data-sublink="groups"] > .searchbar') search: {
bar: document.querySelector('#CONTAINER > section[data-sublink="groups"] > .searchbar'),
func: null,
time: null
}
} }
}; };
@ -56,11 +64,11 @@ if( section.view.element != null ){
/* (3) Gestion de la recherche instantannee */ /* (3) Gestion de la recherche instantannee */
section.view.searchbar.addEventListener('keyup', function(e){ section.view.search.func = function(){
var search = { var search = {
path: 'machineDefault/search', path: 'machineDefault/search',
keywords: section.view.searchbar.value keywords: section.view.search.bar.value
}; };
// On envoie la requete // On envoie la requete
@ -87,6 +95,15 @@ if( section.view.element != null ){
} }
}); });
};
section.view.search.bar.addEventListener('keyup', function(e){
if( section.view.search.time != null )
clearTimeout(section.view.search.time);
section.view.search.time = setTimeout(section.view.search.func, 500);
}, false); }, false);
@ -179,7 +196,7 @@ if( section.view.element != null ){
console.warn('error loading list of members'); console.warn('error loading list of members');
return; return;
} }
// remove already members // remove already members
var members = response.clusters; var members = response.clusters;
@ -221,11 +238,11 @@ if( section.view.element != null ){
id_machine: machine_id, id_machine: machine_id,
id_cluster: groupid id_cluster: groupid
}; };
// {3} Call link // // {3} Call link //
api.send(request, function(response2){ api.send(request, function(response2){
// manage error // manage error
if( response2.error != 0 ){ if( response2.error != 0 ){
console.warn('cannot link user to group'); console.warn('cannot link user to group');
@ -240,7 +257,7 @@ if( section.view.element != null ){
newMemberRemoveIcon.setAttribute('class', 'rem-group'); newMemberRemoveIcon.setAttribute('class', 'rem-group');
newMemberRemoveIcon.setAttribute('data-group', groupid); newMemberRemoveIcon.setAttribute('data-group', groupid);
newMemberRemoveIcon.setAttribute('data-machine', e.target.getData('machine')); newMemberRemoveIcon.setAttribute('data-machine', e.target.getData('machine'));
newMemberRemoveIcon.addEventListener('click', section.view.group.remfunc, false); newMemberRemoveIcon.addEventListener('click', section.view.group.remfunc, false);
var newMember = document.createElement('span'); var newMember = document.createElement('span');
@ -772,11 +789,11 @@ if( section.groups.element != null ){
/* (3) Gestion de la recherche instantannee */ /* (3) Gestion de la recherche instantannee */
section.groups.searchbar.addEventListener('keyup', function(e){ section.groups.search.func = function(){
var search = { var search = {
path: 'clusterDefault/search', path: 'clusterDefault/search',
keywords: section.groups.searchbar.value, keywords: section.groups.search.bar.value,
class: 1 class: 1
}; };
@ -804,6 +821,15 @@ if( section.groups.element != null ){
} }
}); });
};
section.groups.search.bar.addEventListener('keyup', function(e){
if( section.groups.search.time != null )
clearTimeout(section.groups.search.time);
section.groups.search.time = setTimeout(section.groups.search.func, 500);
}, false); }, false);
var i; var i;
@ -896,7 +922,7 @@ if( section.groups.element != null ){
console.warn('error loading list of members'); console.warn('error loading list of members');
return; return;
} }
// remove already members // remove already members
var members = response.machines; var members = response.machines;
@ -938,11 +964,11 @@ if( section.groups.element != null ){
id_cluster: cluster_id, id_cluster: cluster_id,
id_machine: memberid id_machine: memberid
}; };
// {3} Call link // // {3} Call link //
api.send(request, function(response2){ api.send(request, function(response2){
// manage error // manage error
if( response2.error != 0 ){ if( response2.error != 0 ){
console.warn('cannot link user to group'); console.warn('cannot link user to group');
@ -957,7 +983,7 @@ if( section.groups.element != null ){
newMemberRemoveIcon.setAttribute('class', 'rem-member'); newMemberRemoveIcon.setAttribute('class', 'rem-member');
newMemberRemoveIcon.setAttribute('data-member', memberid); newMemberRemoveIcon.setAttribute('data-member', memberid);
newMemberRemoveIcon.setAttribute('data-cluster', e.target.getData('cluster')); newMemberRemoveIcon.setAttribute('data-cluster', e.target.getData('cluster'));
newMemberRemoveIcon.addEventListener('click', section.groups.group.remfunc, false); newMemberRemoveIcon.addEventListener('click', section.groups.group.remfunc, false);
var newMember = document.createElement('span'); var newMember = document.createElement('span');

View File

@ -3,7 +3,11 @@ var section = {
view: { view: {
text: '#CONTAINER > section[data-sublink="view"] ', text: '#CONTAINER > section[data-sublink="view"] ',
element: document.querySelector('#CONTAINER > section[data-sublink="view"]'), element: document.querySelector('#CONTAINER > section[data-sublink="view"]'),
searchbar: document.querySelector('#CONTAINER > section[data-sublink="view"] > .searchbar') search: {
bar: document.querySelector('#CONTAINER > section[data-sublink="view"] > .searchbar'),
func: null,
time: null
}
}, },
create: { create: {
@ -24,7 +28,11 @@ var section = {
groups: { groups: {
text: '#CONTAINER > section[data-sublink="groups"] ', text: '#CONTAINER > section[data-sublink="groups"] ',
element: document.querySelector('#CONTAINER > section[data-sublink="groups"]'), element: document.querySelector('#CONTAINER > section[data-sublink="groups"]'),
searchbar: document.querySelector('#CONTAINER > section[data-sublink="groups"] > .searchbar') search: {
bar: document.querySelector('#CONTAINER > section[data-sublink="groups"] > .searchbar'),
func: null,
time: null
}
} }
}; };
@ -61,11 +69,11 @@ if( section.view.element != null ){
/* (3) Gestion de la recherche instantannee */ /* (3) Gestion de la recherche instantannee */
section.view.searchbar.addEventListener('keyup', function(e){ section.view.search.func = function(){
var search = { var search = {
path: 'userDefault/search', path: 'userDefault/search',
keywords: section.view.searchbar.value keywords: section.view.search.bar.value
}; };
// On envoie la requete // On envoie la requete
@ -79,7 +87,7 @@ if( section.view.element != null ){
var uid_list = []; var uid_list = [];
for( var i = 0 ; i < result.users.length ; i++ ) for( var i = 0 ; i < result.users.length ; i++ )
uid_list.push( result.users[i].id_user); uid_list.push( result.users[i].id_user);
// On recupere la liste des elements correspondants aux utilisateurs // On recupere la liste des elements correspondants aux utilisateurs
var user_list = document.querySelectorAll(section.view.text + '> article.inline-box[id]'); var user_list = document.querySelectorAll(section.view.text + '> article.inline-box[id]');
@ -95,6 +103,15 @@ if( section.view.element != null ){
} }
}); });
}
section.view.search.bar.addEventListener('keyup', function(e){
if( section.view.search.time != null )
clearTimeout(section.view.search.time);
section.view.search.time = setTimeout(section.view.search.func, 500);
}, false); }, false);
@ -139,7 +156,7 @@ if( section.view.element != null ){
e.target.parentNode.parentNode.removeChild( e.target.parentNode ); e.target.parentNode.parentNode.removeChild( e.target.parentNode );
}); });
}; };
for( var i = 0 ; i < section.view.group.rem.length ; i++ ) for( var i = 0 ; i < section.view.group.rem.length ; i++ )
section.view.group.rem[i].addEventListener('click', section.view.group.remfunc, false); section.view.group.rem[i].addEventListener('click', section.view.group.remfunc, false);
@ -186,7 +203,7 @@ if( section.view.element != null ){
console.warn('error loading list of members'); console.warn('error loading list of members');
return; return;
} }
// remove already members // remove already members
var members = response.clusters; var members = response.clusters;
@ -228,11 +245,11 @@ if( section.view.element != null ){
id_user: user_id, id_user: user_id,
id_cluster: groupid id_cluster: groupid
}; };
// {3} Call link // // {3} Call link //
api.send(request, function(response2){ api.send(request, function(response2){
// manage error // manage error
if( response2.error != 0 ){ if( response2.error != 0 ){
console.warn('cannot link user to group'); console.warn('cannot link user to group');
@ -247,7 +264,7 @@ if( section.view.element != null ){
newMemberRemoveIcon.setAttribute('class', 'rem-group'); newMemberRemoveIcon.setAttribute('class', 'rem-group');
newMemberRemoveIcon.setAttribute('data-group', groupid); newMemberRemoveIcon.setAttribute('data-group', groupid);
newMemberRemoveIcon.setAttribute('data-user', e.target.getData('user')); newMemberRemoveIcon.setAttribute('data-user', e.target.getData('user'));
newMemberRemoveIcon.addEventListener('click', section.view.group.remfunc, false); newMemberRemoveIcon.addEventListener('click', section.view.group.remfunc, false);
var newMember = document.createElement('span'); var newMember = document.createElement('span');
@ -824,11 +841,11 @@ if( section.groups.element != null ){
/* (3) Gestion de la recherche instantannee */ /* (3) Gestion de la recherche instantannee */
section.groups.searchbar.addEventListener('keyup', function(e){ section.groups.search.func = function(){
var search = { var search = {
path: 'clusterDefault/search', path: 'clusterDefault/search',
keywords: section.groups.searchbar.value, keywords: section.groups.search.bar.value,
class: 0 class: 0
}; };
@ -856,6 +873,15 @@ if( section.groups.element != null ){
} }
}); });
};
section.groups.search.bar.addEventListener('keyup', function(e){
if( section.groups.search.time != null )
clearTimeout(section.groups.search.time);
section.groups.search.time = setTimeout(section.groups.search.func, 500);
}, false); }, false);
var i; var i;
@ -950,7 +976,7 @@ if( section.groups.element != null ){
console.warn('error loading list of members'); console.warn('error loading list of members');
return; return;
} }
// remove already members // remove already members
var members = response.users; var members = response.users;
@ -992,11 +1018,11 @@ if( section.groups.element != null ){
id_cluster: cluster_id, id_cluster: cluster_id,
id_user: memberid id_user: memberid
}; };
// {3} Call link // // {3} Call link //
api.send(request, function(response2){ api.send(request, function(response2){
// manage error // manage error
if( response2.error != 0 ){ if( response2.error != 0 ){
console.warn('cannot link user to group'); console.warn('cannot link user to group');
@ -1011,7 +1037,7 @@ if( section.groups.element != null ){
newMemberRemoveIcon.setAttribute('class', 'rem-member'); newMemberRemoveIcon.setAttribute('class', 'rem-member');
newMemberRemoveIcon.setAttribute('data-member', memberid); newMemberRemoveIcon.setAttribute('data-member', memberid);
newMemberRemoveIcon.setAttribute('data-cluster', e.target.getData('cluster')); newMemberRemoveIcon.setAttribute('data-cluster', e.target.getData('cluster'));
newMemberRemoveIcon.addEventListener('click', section.groups.group.remfunc, false); newMemberRemoveIcon.addEventListener('click', section.groups.group.remfunc, false);
var newMember = document.createElement('span'); var newMember = document.createElement('span');