From 11ece5b52f97c4a8afa7827d97d033644f3811b6 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Sat, 18 Feb 2017 16:53:35 +0100 Subject: [PATCH] [Done] Dropdown to add groups to view:users/view" [Done] Dropdown to add groups to view:machines/view --- build/viewer/view/machine/view.twig | 16 +-- build/viewer/view/user/view.twig | 18 ++-- public_html/view/js/machines.js | 161 ++++++++++++++++++++++++---- public_html/view/js/users.js | 159 +++++++++++++++++++++++---- 4 files changed, 304 insertions(+), 50 deletions(-) diff --git a/build/viewer/view/machine/view.twig b/build/viewer/view/machine/view.twig index 500403e..47aac65 100755 --- a/build/viewer/view/machine/view.twig +++ b/build/viewer/view/machine/view.twig @@ -11,12 +11,16 @@ {{ p_icon.group | raw }} - {% for cluster in f_clusters(machine.id_machine) %} - - {{ cluster.name }} - - - {% endfor %} + + {% for cluster in f_clusters(machine.id_machine) %} + + {{ cluster.name }} + + + {% endfor %} + + + + diff --git a/build/viewer/view/user/view.twig b/build/viewer/view/user/view.twig index 024070e..abef64a 100755 --- a/build/viewer/view/user/view.twig +++ b/build/viewer/view/user/view.twig @@ -25,15 +25,19 @@ {{ p_icon.group | raw }} - {% for cluster in f_clusters(user.id_user) %} - + + {% for cluster in f_clusters(user.id_user) %} - - {{ cluster.name }} - - + + + {{ cluster.name }} + + - {% endfor %} + {% endfor %} + + + + diff --git a/public_html/view/js/machines.js b/public_html/view/js/machines.js index e2fdc4c..084501b 100755 --- a/public_html/view/js/machines.js +++ b/public_html/view/js/machines.js @@ -111,33 +111,156 @@ if( section.view.element != null ){ } /* (6) On gere la "suppression" d'un groupe */ - for( var i = 0 ; i < section.view.group.rem.length ; i++ ){ + section.view.group.remfunc = function(e){ + // {1} On rédige la requête // + var request = { + path: 'machineDefault/unlink', + id_machine: e.target.getData('machine'), + id_cluster: e.target.getData('group') + }; - section.view.group.rem[i].addEventListener('click', function(e){ - // {1} On rédige la requête // - var request = { - path: 'machineDefault/unlink', - id_machine: e.target.getData('machine'), - id_cluster: e.target.getData('group') - }; + // {2} On envoie la requête // + api.send(request, function(response){ - // {2} On envoie la requête // - api.send(request, function(response){ - - // {3} Si erreur, on ne fait rien // - if( response.error != 0 ) - return false; + // {3} Si erreur, on ne fait rien // + if( response.error != 0 ) + return false; - // {4} Si tout s'est bien passé // - e.target.parentNode.parentNode.removeChild( e.target.parentNode ); - }); + // {4} Si tout s'est bien passé // + 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); + + + + + + + /* (6) On gere la "modification" (ajout) des groupes */ + for( var i = 0 ; i < section.view.group.add.length ; i++ ){ + + section.view.group.add[i].addEventListener('mouseup', function(e){ + + /* (1) Check if already opened */ + var opened = e.target.innerHTML != '+'; + + /* (2) Hide all dropdowns */ + for( j = 0 ; j < section.view.group.add.length ; j++ ) + section.view.group.add[j].innerHTML = '+'; + + /* (3) Try to show dropdown if not already */ + if( !opened ){ + + /* (1) Get the group id/type */ + if( !/^\d+$/.test(e.target.getData('machine')) ) + return; + + var machine_id = parseInt(e.target.getData('machine')); + + /* (2) Get already members ids */ + var brothers = e.target.parentNode.children[1].children; + var already = []; // will contain already ids + + + for( j = 0 ; j < brothers.length ; j++ ) + already += parseInt( brothers[j].children[0].getData('group') ); + + /* (3) Call list of members */ + api.send({path: 'clusterDefault/getAll', class: 1}, function(response){ + + // Manage error + if( response.error != 0 ){ + console.warn('error loading list of members'); + return; + } + + + // remove already members + var members = response.clusters; + + + /* (4) Build dropdown content without already members */ + dropdown = "
"; + + for( j = 0 ; j < members.length ; j++ ){ + if( already.indexOf(members[j].id_machine_cluster) > -1 ) + continue; + + dropdown += ""+members[j].name+""; + + } + + dropdown += "
"; + + e.target.innerHTML = '+'+dropdown; + + + /* (5) Attach events to dropdown elements */ + var dropdownElements = e.target.children[0].children; + + for( j = 0 ; j < dropdownElements.length ; j++ ) + dropdownElements[j].addEventListener('mousedown', function(e2){ + + // {1} Get member id/username // + var groupid = e2.target.getData('groupid'); + var groupname = e2.target.innerHTML; + + // manage error + if( groupid === false ) + return; + + // {2} Request : add member to group // + var request = { + path: 'machineDefault/link', + 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'); + return; + } + + // Remove dropdown (in order to be reloaded with new members); + e.target.innerHTML = '+'; + + // {4} Update display // + var newMemberRemoveIcon = document.createElement('span'); + 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'); + newMember.appendChild( document.createTextNode(groupname) ); + newMember.appendChild(newMemberRemoveIcon); + + e.target.parentNode.children[1].appendChild(newMember); + + + }); + + }, false); + + }); + + } }, false); } - - } diff --git a/public_html/view/js/users.js b/public_html/view/js/users.js index 93bce06..099cc33 100755 --- a/public_html/view/js/users.js +++ b/public_html/view/js/users.js @@ -119,33 +119,156 @@ if( section.view.element != null ){ } /* (6) On gere la "suppression" d'un groupe */ - for( var i = 0 ; i < section.view.group.rem.length ; i++ ){ + section.view.group.remfunc = function(e){ + // {1} On rédige la requête // + var request = { + path: 'userDefault/unlink', + id_user: e.target.getData('user'), + id_cluster: e.target.getData('group') + }; - section.view.group.rem[i].addEventListener('click', function(e){ - // {1} On rédige la requête // - var request = { - path: 'userDefault/unlink', - id_user: e.target.getData('user'), - id_cluster: e.target.getData('group') - }; + // {2} On envoie la requête // + api.send(request, function(response){ - // {2} On envoie la requête // - api.send(request, function(response){ - - // {3} Si erreur, on ne fait rien // - if( response.error != 0 ) - return false; + // {3} Si erreur, on ne fait rien // + if( response.error != 0 ) + return false; - // {4} Si tout s'est bien passé // - e.target.parentNode.parentNode.removeChild( e.target.parentNode ); - }); + // {4} Si tout s'est bien passé // + 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); + + + + + + + /* (6) On gere la "modification" (ajout) des groupes */ + for( var i = 0 ; i < section.view.group.add.length ; i++ ){ + + section.view.group.add[i].addEventListener('mouseup', function(e){ + + /* (1) Check if already opened */ + var opened = e.target.innerHTML != '+'; + + /* (2) Hide all dropdowns */ + for( j = 0 ; j < section.view.group.add.length ; j++ ) + section.view.group.add[j].innerHTML = '+'; + + /* (3) Try to show dropdown if not already */ + if( !opened ){ + + /* (1) Get the group id/type */ + if( !/^\d+$/.test(e.target.getData('user')) ) + return; + + var user_id = parseInt(e.target.getData('user')); + + /* (2) Get already members ids */ + var brothers = e.target.parentNode.children[1].children; + var already = []; // will contain already ids + + + for( j = 0 ; j < brothers.length ; j++ ) + already += parseInt( brothers[j].children[0].getData('group') ); + + /* (3) Call list of members */ + api.send({path: 'clusterDefault/getAll', class: 0}, function(response){ + + // Manage error + if( response.error != 0 ){ + console.warn('error loading list of members'); + return; + } + + + // remove already members + var members = response.clusters; + + + /* (4) Build dropdown content without already members */ + dropdown = "
"; + + for( j = 0 ; j < members.length ; j++ ){ + if( already.indexOf(members[j].id_user_cluster) > -1 ) + continue; + + dropdown += ""+members[j].name+""; + + } + + dropdown += "
"; + + e.target.innerHTML = '+'+dropdown; + + + /* (5) Attach events to dropdown elements */ + var dropdownElements = e.target.children[0].children; + + for( j = 0 ; j < dropdownElements.length ; j++ ) + dropdownElements[j].addEventListener('mousedown', function(e2){ + + // {1} Get member id/username // + var groupid = e2.target.getData('groupid'); + var groupname = e2.target.innerHTML; + + // manage error + if( groupid === false ) + return; + + // {2} Request : add member to group // + var request = { + path: 'userDefault/link', + 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'); + return; + } + + // Remove dropdown (in order to be reloaded with new members); + e.target.innerHTML = '+'; + + // {4} Update display // + var newMemberRemoveIcon = document.createElement('span'); + 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'); + newMember.appendChild( document.createTextNode(groupname) ); + newMember.appendChild(newMemberRemoveIcon); + + e.target.parentNode.children[1].appendChild(newMember); + + + }); + + }, false); + + }); + + } }, false); } - };