From c9da8708aeddc58e055a475e91eece1532c48029 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Sat, 29 Jul 2017 19:15:00 +0200 Subject: [PATCH] [fix] Fixed search trouble (broadband overload) to search only if no new char in 500ms after --- public_html/view/js/history.js | 47 +++++++++++++++++++++----- public_html/view/js/machines.js | 54 ++++++++++++++++++++++-------- public_html/view/js/users.js | 58 ++++++++++++++++++++++++--------- 3 files changed, 120 insertions(+), 39 deletions(-) diff --git a/public_html/view/js/history.js b/public_html/view/js/history.js index d5c5dc2..79d564d 100644 --- a/public_html/view/js/history.js +++ b/public_html/view/js/history.js @@ -2,9 +2,13 @@ var section = { view: { text: '#CONTAINER > section[data-sublink="view"] ', - element: document.querySelector('#CONTAINER > section[data-sublink="view"]'), - searchbar: document.querySelector('#CONTAINER > section[data-sublink="view"] > .searchbar') - }, + element: document.querySelector('#CONTAINER > section[data-sublink="view"]'), + search: { + bar: document.querySelector('#CONTAINER > section[data-sublink="view"] > .searchbar'), + func: null, + time: null // search time manager (interval) + }, + }, details: { text: '#CONTAINER > section[data-sublink="details"] ', @@ -24,18 +28,24 @@ var section = { */ 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 */ 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 */ - section.view.searchbar.addEventListener('keyup', function(e){ - - var search = { + /* (2) Gestion de la recherche instantannee */ + section.view.search.func = function(){ + var search = { path: 'historyDefault/search', - keywords: section.view.searchbar.value + keywords: section.view.search.bar.value }; // 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); + /* (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); + + } + + } diff --git a/public_html/view/js/machines.js b/public_html/view/js/machines.js index 084501b..25cf7bc 100755 --- a/public_html/view/js/machines.js +++ b/public_html/view/js/machines.js @@ -3,7 +3,11 @@ var section = { view: { text: '#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: { @@ -24,7 +28,11 @@ var section = { groups: { text: '#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 */ - section.view.searchbar.addEventListener('keyup', function(e){ + section.view.search.func = function(){ var search = { path: 'machineDefault/search', - keywords: section.view.searchbar.value + keywords: section.view.search.bar.value }; // 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); @@ -179,7 +196,7 @@ if( section.view.element != null ){ console.warn('error loading list of members'); return; } - + // remove already members var members = response.clusters; @@ -221,11 +238,11 @@ if( section.view.element != null ){ id_machine: machine_id, id_cluster: groupid }; - + // {3} Call link // api.send(request, function(response2){ - + // manage error if( response2.error != 0 ){ console.warn('cannot link user to group'); @@ -240,7 +257,7 @@ if( section.view.element != null ){ newMemberRemoveIcon.setAttribute('class', 'rem-group'); newMemberRemoveIcon.setAttribute('data-group', groupid); newMemberRemoveIcon.setAttribute('data-machine', e.target.getData('machine')); - + newMemberRemoveIcon.addEventListener('click', section.view.group.remfunc, false); var newMember = document.createElement('span'); @@ -772,11 +789,11 @@ if( section.groups.element != null ){ /* (3) Gestion de la recherche instantannee */ - section.groups.searchbar.addEventListener('keyup', function(e){ + section.groups.search.func = function(){ var search = { path: 'clusterDefault/search', - keywords: section.groups.searchbar.value, + keywords: section.groups.search.bar.value, 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); var i; @@ -896,7 +922,7 @@ if( section.groups.element != null ){ console.warn('error loading list of members'); return; } - + // remove already members var members = response.machines; @@ -938,11 +964,11 @@ if( section.groups.element != null ){ id_cluster: cluster_id, id_machine: memberid }; - + // {3} Call link // api.send(request, function(response2){ - + // manage error if( response2.error != 0 ){ console.warn('cannot link user to group'); @@ -957,7 +983,7 @@ if( section.groups.element != null ){ newMemberRemoveIcon.setAttribute('class', 'rem-member'); newMemberRemoveIcon.setAttribute('data-member', memberid); newMemberRemoveIcon.setAttribute('data-cluster', e.target.getData('cluster')); - + newMemberRemoveIcon.addEventListener('click', section.groups.group.remfunc, false); var newMember = document.createElement('span'); diff --git a/public_html/view/js/users.js b/public_html/view/js/users.js index 1f8e30d..5c2dd84 100755 --- a/public_html/view/js/users.js +++ b/public_html/view/js/users.js @@ -3,7 +3,11 @@ var section = { view: { text: '#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: { @@ -24,7 +28,11 @@ var section = { groups: { text: '#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 */ - section.view.searchbar.addEventListener('keyup', function(e){ + section.view.search.func = function(){ var search = { path: 'userDefault/search', - keywords: section.view.searchbar.value + keywords: section.view.search.bar.value }; // On envoie la requete @@ -79,7 +87,7 @@ if( section.view.element != null ){ var uid_list = []; for( var i = 0 ; i < result.users.length ; i++ ) uid_list.push( result.users[i].id_user); - + // On recupere la liste des elements correspondants aux utilisateurs 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); @@ -139,7 +156,7 @@ if( section.view.element != null ){ e.target.parentNode.parentNode.removeChild( e.target.parentNode ); }); }; - + for( var i = 0 ; i < section.view.group.rem.length ; i++ ) 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'); return; } - + // remove already members var members = response.clusters; @@ -228,11 +245,11 @@ if( section.view.element != null ){ id_user: user_id, id_cluster: groupid }; - + // {3} Call link // api.send(request, function(response2){ - + // manage error if( response2.error != 0 ){ console.warn('cannot link user to group'); @@ -247,7 +264,7 @@ if( section.view.element != null ){ newMemberRemoveIcon.setAttribute('class', 'rem-group'); newMemberRemoveIcon.setAttribute('data-group', groupid); newMemberRemoveIcon.setAttribute('data-user', e.target.getData('user')); - + newMemberRemoveIcon.addEventListener('click', section.view.group.remfunc, false); var newMember = document.createElement('span'); @@ -824,11 +841,11 @@ if( section.groups.element != null ){ /* (3) Gestion de la recherche instantannee */ - section.groups.searchbar.addEventListener('keyup', function(e){ + section.groups.search.func = function(){ var search = { path: 'clusterDefault/search', - keywords: section.groups.searchbar.value, + keywords: section.groups.search.bar.value, 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); var i; @@ -950,7 +976,7 @@ if( section.groups.element != null ){ console.warn('error loading list of members'); return; } - + // remove already members var members = response.users; @@ -992,11 +1018,11 @@ if( section.groups.element != null ){ id_cluster: cluster_id, id_user: memberid }; - + // {3} Call link // api.send(request, function(response2){ - + // manage error if( response2.error != 0 ){ console.warn('cannot link user to group'); @@ -1011,7 +1037,7 @@ if( section.groups.element != null ){ newMemberRemoveIcon.setAttribute('class', 'rem-member'); newMemberRemoveIcon.setAttribute('data-member', memberid); newMemberRemoveIcon.setAttribute('data-cluster', e.target.getData('cluster')); - + newMemberRemoveIcon.addEventListener('click', section.groups.group.remfunc, false); var newMember = document.createElement('span');