// On referencie toutes les sections 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') }, create: { text: '#CONTAINER > section[data-sublink="create"] ', element: document.querySelector('#CONTAINER > section[data-sublink="create"]') }, remove: { text: '#CONTAINER > section[data-sublink="remove"] ', element: document.querySelector('#CONTAINER > section[data-sublink="remove"]') }, edit: { text: '#CONTAINER > section[data-sublink="edit"] ', element: document.querySelector('#CONTAINER > section[data-sublink="edit"]') }, members: { text: '#CONTAINER > section[data-sublink="members"] ', element: document.querySelector('#CONTAINER > section[data-sublink="members"]'), chooser: { text: '#CONTAINER > section[data-sublink="members"] form#choose-cluster ', element: document.querySelector('#CONTAINER > section[data-sublink="members"] form#choose-cluster') } }, permissions: { text: '#CONTAINER > section[data-sublink="permissions"] ', element: document.querySelector('#CONTAINER > section[data-sublink="permissions"]'), searchbar: document.querySelector('#CONTAINER > section[data-sublink="permissions"] > .searchbar') } }; /* GESTION DE L'AFFICHAGE DES GROUPES * */ if( section.view.element != null ){ /* (0) On gère le zoom sur un utilisateur via URL */ if( pageManager.vars.length > 1 && /^(u|m)\d+$/.test(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 vers des sous-sections */ section.view.link = { edit: document.querySelectorAll(section.view.text + '.link_edit[data-cluster]'), remove: document.querySelectorAll(section.view.text + '.link_remove[data-cluster]') }; /* (2) On récupère toutes les actions de groupes */ section.view.group = { rem: document.querySelectorAll(section.view.text + '.rem-member[data-cluster][data-member]'), add: document.querySelectorAll(section.view.text + '.add-member[data-cluster]') }; /* (3) Gestion de la recherche instantannee */ section.view.searchbar.addEventListener('keyup', function(e){ var search = { path: 'clusterDefault/search', keywords: section.view.searchbar.value }; // On envoie la requete api.send(search, function(result){ if( result.error == 0 ){ // si aucune erreur // On enregistre tous les UID dans un tableau var uid_list = []; for( var i = 0 ; i < result.clusters.length ; i++ ) if( result.clusters[i].hasOwnProperty('id_user_cluster') ) uid_list.push( 'u'+result.clusters[i].id_user_cluster); else uid_list.push( 'm'+result.clusters[i].id_machine_cluster); // On recupere la liste des elements correspondants aux utilisateurs var cluster_list = document.querySelectorAll(section.view.text + '> article.inline-box[id]'); // Pour chaque cluster for( var i = 0 ; i < cluster_list.length ; i++ ){ // Si doit etre visible if( uid_list.indexOf(cluster_list[i].id) > -1 ) cluster_list[i].remClass('hidden'); // Si ne doit pas etre visible else cluster_list[i].addClass('hidden'); } } }); }, false); var i; /* (4) On gere la "redirection" vers la modification */ for( i = 0 ; i < section.view.link.edit.length ; i++ ){ section.view.link.edit[i].addEventListener('click', function(e){ pageManager.vars = [ 'edit', e.target.getData('cluster') ]; pageManager.refresh(); }, false); } /* (5) On gere la "redirection" vers la suppression */ for( i = 0 ; i < section.view.link.remove.length ; i++ ){ section.view.link.remove[i].addEventListener('click', function(e){ pageManager.vars = [ 'remove', e.target.getData('cluster') ]; pageManager.refresh(); }, false); } /* (6) On gere la "suppression" d'un groupe */ for( i = 0 ; i < section.view.group.rem.length ; i++ ){ section.view.group.rem[i].addEventListener('click', function(e){ var prefix = e.target.getData('cluster')[0]; var cluster = e.target.getData('cluster').slice(1); console.log(e.target); // {1} On rédige la requête // var request = {}; request.path = (prefix=='u') ? 'userDefault/unlink' : 'machineDefault/unlink'; request.id_cluster = cluster; if( prefix == 'u' ) request.id_user = e.target.getData('member'); else request.id_machine = e.target.getData('member'); // {2} On envoie la requête // api.send(request, function(response){ // {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 ); }); }, false); } /* (7) On gere la "modification" des membres d'un groupe */ for( i = 0 ; i < section.view.group.add.length ; i++ ){ // Si bouton pour choisir un autre groupe, on l'indexe section.view.group.change = $('members-change-group') || null; // on crée le lien if( section.view.group.change !== null ) section.view.group.change.addEventListener('click', function(e){ pageManager.vars = [ 'members' ]; pageManager.refresh(); }, false); section.view.group.add[i].addEventListener('mouseup', function(e){ pageManager.vars = [ 'members', e.target.getData('cluster') ]; pageManager.refresh(); }, false); } } /* GESTION DE LA CREATION D'UN GROUPE * */ if( section.create.element != null ){ // On recupere tous les champs section.create.input = { name: document.querySelector(section.create.text + '#create_name'), class: document.querySelector(section.create.text + '#create_class'), submit: document.querySelector(section.create.text + '#create_submit') } /* (n) Gestion de l'envoi du formulaire */ section.create.input.submit.addEventListener('click', function(e){ // On annule l'envoi de base (PHP) e.preventDefault(); var request = { path: 'clusterDefault/create', // On veut creer un utilisateur name: section.create.input.name.value, class: section.create.input.class.value }; api.send(request, function(answer){ if( answer.error == 0 ){ // Tout s'est bien deroule console.log('Groupe cree!'); section.create.input.submit.anim('active', 1500); // On vide les champs section.create.input.name.value = ''; section.create.input.class.children[0].selected = 'selected'; } }); }, false); } /* [3] remove -> Suppression de cluster =========================================================*/ if( section.remove.element != null ){ /* (1) Definition des champs */ section.remove.input = { search: { view: document.querySelector(section.remove.text + '.remove_search_view'), num: document.querySelector(section.remove.text + '.remove_search_num'), sum: document.querySelector(section.remove.text + '.remove_search_sum'), keyword: document.querySelector(section.remove.text + '#remove_search_keyword'), id: document.querySelector(section.remove.text + '#remove_search_id'), submit: document.querySelector(section.remove.text + '#remove_search_submit') }, name: document.querySelector(section.remove.text + '#remove_name'), class: document.querySelector(section.remove.text + '#remove_class'), submit: document.querySelector(section.remove.text + '#remove_submit') }; var lastkeywords_remove = ''; var found_remove = []; var searchindex_remove = 0; /* (2) Gestion de l'auto-remplissage par lien ---------------------------------------------------------*/ function autofill_remove(){ /* (0) Valeurs par défaut */ var cluster_data = { id_cluster: '', class: '', name: '', disable_input: true }; // {1} Si aucun résultat // if( found_remove[searchindex_remove] == null ){ // Mise a jour des indices des resultats section.remove.input.search.num.innerHTML = 0; searchindex_remove = 0; // {2} Si au moins 1 résultat // }else{ var tmpIdCluster; var clusterClass = ''; // Si groupe utilisateur if( found_remove[searchindex_remove].hasOwnProperty('id_user_cluster') ){ tmpIdCluster = found_remove[searchindex_remove].id_user_cluster; clusterClass = 0; // Sinon groupe machine }else if( found_remove[searchindex_remove].hasOwnProperty('id_machine_cluster') ){ tmpIdCluster = found_remove[searchindex_remove].id_machine_cluster; clusterClass = 1; } // On recupere les données de la user selectionnee cluster_data = { id_cluster: tmpIdCluster, class: clusterClass, name: found_remove[searchindex_remove]['name'], disable_input: false }; // Mise a jour des indices des resultats section.remove.input.search.num.innerHTML = searchindex_remove+1; } // {3} On auto-remplit le formulaire // // On enregistre l'UID du groupe section.remove.input.search.id.value = cluster_data.id_cluster; // Auto-remplissage du formulaire section.remove.input.name.value = cluster_data.name; if( [0,1].indexOf(cluster_data.class) > -1 ) section.remove.input.class.value = cluster_data.class == 0 ? 'utilisateur' : 'machine'; else section.remove.input.class.value = ''; // On gere le caractere "inactif" du submit section.remove.input.submit.disabled = cluster_data.disable_input; } /* (3) Gestion de la recherche ---------------------------------------------------------*/ section.remove.input.search.submit.addEventListener('click', function(e){ // On annule l'envoi de base (PHP) e.preventDefault(); /* (1) Si le champ n'est pas vide */ if( section.remove.input.search.keyword.value != '' ){ /* (2) Si même mots-clés, on passe au prochain résultat */ if( section.remove.input.search.keyword.value == lastkeywords_remove ){ // on affiche le prochain (decalage cyclique) searchindex_remove = (searchindex_remove+1) % found_remove.length; // On met à jour l'auto-remplissage autofill_remove(); /* (3) Nouveaux mots-clés, on lance la recherche */ }else{ /* (4) Redaction de la requete */ var getClusters = { path: 'clusterDefault/search', keywords: section.remove.input.search.keyword.value }; /* (5) On envoie la requête */ api.send(getClusters, function(getClustersResponse){ if( getClustersResponse.error == 0 ){ // si pas d'erreur // On notifie que la recherche est terminée section.remove.input.search.submit.anim('active', 1000); /* (6) On met à jour les données des users, et le compteur */ searchindex_remove = 0; found_remove = getClustersResponse.clusters; section.remove.input.search.sum.innerHTML = found_remove.length; // On met à jour l'auto-remplissage autofill_remove(); } // On met à jour la dernière recherche lastkeywords_remove = getClusters.keywords; }); } } }, false); /* (n) Gestion de l'envoi du formulaire */ section.remove.input.submit.addEventListener('click', function(e){ // On annule l'envoi de base (PHP) e.preventDefault(); // Si l'id est defini if( section.remove.input.search.id.value != '' ){ var clusterClass = (found_remove[searchindex_remove].hasOwnProperty('id_user_cluster')) ? 0 : 1; /* (2) On supprime la cluster */ var request = { path: 'clusterDefault/delete', // On veut supprimer cet utilisateur id_cluster: section.remove.input.search.id.value, class: clusterClass }; api.send(request, function(answer){ if( answer.error == 0 && answer.status == true ){ // Tout s'est bien deroule console.log('Groupe supprimee!'); section.remove.input.submit.anim('active', 1500); /* [1] On actualise la recherche =========================================================*/ if( section.remove.input.search.keyword.value.length == 0 ){ // Si aucun champ de recherche, on efface juste l'entrée // On supprime toutes les valeurs found_remove = []; searchindex_remove = 0; }else{ var getClusters = { path: 'clusterDefault/search', keywords: section.remove.input.search.keyword.value }; api.send(getClusters, function(getClustersResponse){ if( getClustersResponse.error == 0 ){ // si pas d'erreur searchindex_remove = 0; found_remove = getClustersResponse.clusters; section.remove.input.search.sum.innerHTML = found_remove.length; } }); } autofill_remove(); }else // Erreur console.error('ModuleError::'+answer.error); }); } }, false); } /* [4] edit -> Modification de cluster =========================================================*/ if( section.edit.element != null ){ // Definition des champs section.edit.input = { search: { view: document.querySelector(section.edit.text + '.edit_search_view'), num: document.querySelector(section.edit.text + '.edit_search_num'), sum: document.querySelector(section.edit.text + '.edit_search_sum'), keyword: document.querySelector(section.edit.text + '#edit_search_keyword'), id: document.querySelector(section.edit.text + '#edit_search_id'), submit: document.querySelector(section.edit.text + '#edit_search_submit') }, name: document.querySelector(section.edit.text + '#edit_name'), class: document.querySelector(section.edit.text + '#edit_class'), submit: document.querySelector(section.edit.text + '#edit_submit') }; var lastkeywords_edit = ''; var found_edit = []; var searchindex_edit = 0; /* (2) Gestion de l'auto-remplissage par lien ---------------------------------------------------------*/ function autofill_edit(){ /* (0) Valeurs par défaut */ var cluster_data = { id_cluster: '', class: '', name: '', disable_input: true }; // {1} Si aucun résultat // if( found_edit[searchindex_edit] == null ){ // Mise a jour des indices des resultats section.edit.input.search.num.innerHTML = 0; searchindex_edit = 0; // {2} Si au moins 1 résultat // }else{ var tmpIdCluster, clusterClass; // Si groupe utilisateur if( found_edit[searchindex_remove].hasOwnProperty('id_user_cluster') ){ tmpIdCluster = found_edit[searchindex_remove].id_user_cluster; clusterClass = 0; // Sinon groupe machine }else if( found_edit[searchindex_edit].hasOwnProperty('id_machine_cluster') ){ tmpIdCluster = found_edit[searchindex_remove].id_machine_cluster; clusterClass = 1; } // On recupere les données de la user selectionnee cluster_data = { id_cluster: tmpIdCluster, class: clusterClass, name: found_edit[searchindex_remove]['name'], disable_input: false }; // Mise a jour des indices des resultats section.edit.input.search.num.innerHTML = searchindex_edit+1; } // {3} On auto-remplit le formulaire // // On enregistre l'UID du groupe section.edit.input.search.id.value = cluster_data.id_cluster; // Auto-remplissage du formulaire section.edit.input.name.value = cluster_data.name; if( [0,1].indexOf(cluster_data.class) > -1 ) section.edit.input.class.value = cluster_data.class == 0 ? 'utilisateur' : 'machine'; else section.edit.input.class.value = ''; // On gere le caractere "inactif" du submit section.edit.input.submit.disabled = cluster_data.disable_input; } /* (3) Gestion de la recherche ---------------------------------------------------------*/ section.edit.input.search.submit.addEventListener('click', function(e){ // On annule l'envoi de base (PHP) e.preventDefault(); /* (1) Si le champ n'est pas vide */ if( section.edit.input.search.keyword.value != '' ){ /* (2) Si même mots-clés, on passe au prochain résultat */ if( section.edit.input.search.keyword.value == lastkeywords_edit ){ // on affiche le prochain (decalage cyclique) searchindex_edit = (searchindex_edit+1) % found_edit.length; // On met à jour l'auto-remplissage autofill_edit(); /* (3) Nouveaux mots-clés, on lance la recherche */ }else{ /* (4) Redaction de la requete */ var getClusters = { path: 'clusterDefault/search', keywords: section.edit.input.search.keyword.value }; /* (5) On envoie la requête */ api.send(getClusters, function(getClustersResponse){ if( getClustersResponse.error == 0 ){ // si pas d'erreur // On notifie que la recherche est terminée section.edit.input.search.submit.anim('active', 1000); /* (6) On met à jour les données des users, et le compteur */ searchindex_edit = 0; found_edit = getClustersResponse.clusters; section.edit.input.search.sum.innerHTML = found_edit.length; // On met à jour l'auto-remplissage autofill_edit(); } // On met à jour la dernière recherche lastkeywords_edit = getClusters.keywords; }); } } }, false); /* (n) Gestion de l'envoi du formulaire */ section.edit.input.submit.addEventListener('click', function(e){ // On annule l'envoi de base (PHP) e.preventDefault(); // Si l'id est defini if( section.edit.input.search.id.value != '' ){ var clusterClass = (found_edit[searchindex_edit].hasOwnProperty('id_user_cluster')) ? 0 : 1; var request = { path: 'clusterDefault/edit', // On veut creer une cluster id_cluster: section.edit.input.search.id.value, name: section.edit.input.name.value, class: clusterClass }; api.send(request, function(answer){ if( answer.error == 0 && answer.status == true ){ // Tout s'est bien deroule console.log('Groupe modifiee!'); section.edit.input.submit.anim('active', 1500); /* (1) On actualise le groupe modifié ---------------------------------------------------------*/ // On met a jour le cluster var request2 = { path: 'clusterDefault/getById', id_cluster: request.id_cluster, class: clusterClass }; // On récupère la user d'uid donné dans l'URL api.send(request2, function(response){ // Si aucune erreur et un résultat if( response.error == 0 ){ found_edit[searchindex_edit] = response.cluster; // On récupère le résultat autofill_edit(); // On auto-remplit } }); }else // Erreur console.error('ModuleError::'+answer.error); }); } }, false); } /* [5] chargement du groupe courant (depuis url) =========================================================*/ // gestion automatique au chargement de la page si id_clusterdans url "/groups/.+/(u|m):id_cluster:" if( pageManager.vars.length >= 2 && /^(u|m)\d+$/.test(pageManager.vars[1]) ){ var prefix = pageManager.vars[1][0]; var cluster = pageManager.vars[1].slice(1); var request = { path: 'clusterDefault/getById', id_cluster: cluster, class: (prefix=='u') ? 0 : 1 }; // On récupère la user d'uid donné dans l'URL api.send(request, function(response){ // Si aucune erreur et un résultat if( response.error == 0 ){ found_edit = [ response.cluster ]; // on récupère le résultat searchindex_edit = 0; // on remet le compteur à 0 autofill_edit(); // on auto-remplit /* (2) On pré-remplis le formulaire de suppression */ found_remove = [ response.cluster ]; // on récupère le résultat searchindex_remove = 0; // on remet le compteur à 0 autofill_remove(); // on auto-remplit // On auto-remplit } }); } /* GESTION DU CHOIX DU GROUPE AUQUEL MODIFIER LA COMPOSITION DES MEMBRES * */ if( section.members.element != null && section.members.chooser.element != null ){ /* [1] Initialisation et gestion statique =========================================================*/ /* (1) On initialise le deflater */ section.members.chooser.deflater = new FormDeflater( section.members.chooser.element, ['select'], ['data-name'] ); /* (2) On récupère le bouton */ section.members.chooser.submit = document.querySelector(section.members.chooser.text+'#choose-cluster'); /* [2] Gestion de l'évènement =========================================================*/ section.members.chooser.submit.addEventListener('click', function(e){ /* (0) On annule l'action par défaut (PHP) */ e.preventDefault(); /* (1) On récupère les données */ var data = section.members.chooser.deflater.deflate()['cluster']; // Vérification du type if( !/^(u|m)\d+$/.test(data) ) return; /* (2) Redirection */ pageManager.vars = [ 'members', data ]; pageManager.refresh(); }, false); } /* GESTION DE LA MODIFICATION DES MEMBRES * */ if( section.members.element != null && section.members.chooser.element == null ){ /* (1) On initialise le Deflater() */ section.members.deflater = new FormDeflater( section.members.element, ['input'], ['data-name'] ); /* (2) On enregistre les données initiales */ section.members.baseData = section.members.deflater.deflate()['members']; /* (3) On enregistre les données in-HTML */ section.members.class = document.querySelector('#members-member-class').value; section.members.idcluster = document.querySelector('#members-member-idcluster').value; /* [1] Dès qu'une valeur est modifiée dans le formulaire =========================================================*/ section.members.element.addEventListener('click', function(e){ /* (0) On récupère les données + initialise les variables */ var i; var linked = []; var unlinked = []; var data = section.members.deflater.deflate()['members']; // Si c'est pas un tableau, on le met en tableau if( !(data instanceof Array) ) data = [data]; /* (1) Si on a ajouté des liens */ for( i = 0 ; i < data.length ; i++ ) if( section.members.baseData.indexOf(data[i]) == -1 ) // Si pas dans les données initiales, on ajoute linked.push( data[i] ); /* (2) Si on a supprimé des liens */ for( i = 0 ; i < section.members.baseData.length ; i++ ) if( data.indexOf(section.members.baseData[i]) == -1 ) // Si pas dans les données modifiées, on ajoute unlinked.push( section.members.baseData[i] ); /* (3) Gestion de l'ajout de liens */ for( i = 0 ; i < linked.length ; i++ ){ // {1} On rédige la requête // var linkReq = {}; linkReq.path = (section.members.class==0) ? 'userDefault/link' : 'machineDefault/link'; linkReq.id_cluster = section.members.idcluster; if( section.members.class == 0 ) linkReq.id_user = linked[i]; else linkReq.id_machine = linked[i]; // {2} On envoie la requête // api.send(linkReq, function(linkRes){ if( linkRes.error != 0 ) console.error('Erreur d\'ajout de membre'); }); } /* (4) Gestion de la suppression de liens */ for( i = 0 ; i < unlinked.length ; i++ ){ // {1} On rédige la requête // var unlinkReq = {}; unlinkReq.path = (section.members.class==0) ? 'userDefault/unlink' : 'machineDefault/unlink'; unlinkReq.id_cluster = section.members.idcluster; if( section.members.class == 0 ) unlinkReq.id_user = unlinked[i]; else unlinkReq.id_machine = unlinked[i]; // {2} On envoie la requête // api.send(unlinkReq, function(unlinkRes){ if( unlinkRes.error != 0 ) console.error('Erreur d\'ajout de membre'); }); } /* (5) On met à jour les données initiales */ section.members.baseData = data; }, false); } /* GESTION DES PERMISSIONS * */ if( section.permissions.element != null ){ /* (1) On récupère toutes les actions de groupes */ section.permissions.group = { rem: document.querySelectorAll(section.permissions.text + '.rem-permission[data-target][data-permission][data-source]'), add: document.querySelectorAll(section.permissions.text + '.add-permission[data-target][data-permission]') }; /* (2) Gestion de la recherche instantannee */ section.permissions.searchbar.addEventListener('keyup', function(e){ var search = { path: 'clusterDefault/search', keywords: section.permissions.searchbar.value, class: 1 }; // On envoie la requete api.send(search, function(result){ if( result.error == 0 ){ // si aucune erreur // On enregistre tous les UID dans un tableau var uid_list = []; for( var i = 0 ; i < result.clusters.length ; i++ ) uid_list.push( result.clusters[i].id_machine_cluster ); // On recupere la liste des elements correspondants aux utilisateurs var cluster_list = document.querySelectorAll(section.permissions.text + '> article.inline-box[id]'); // Pour chaque cluster for( var i = 0 ; i < cluster_list.length ; i++ ){ // Si doit etre visible if( uid_list.indexOf( parseInt(cluster_list[i].id) ) > -1 ) cluster_list[i].remClass('hidden'); // Si ne doit pas etre visible else cluster_list[i].addClass('hidden'); } } }); }, false); var i; /* (3) On gere la "suppression" d'une permission */ for( i = 0 ; i < section.permissions.group.rem.length ; i++ ){ section.permissions.group.rem[i].addEventListener('click', function(e){ // {1} On rédige la requête // var request = { path: 'clusterDefault/remPermission', id_target: e.target.getData('target'), id_source: e.target.getData('source'), id_action: e.target.getData('permission') }; // {2} On envoie la requête // api.send(request, function(response){ // {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 ); }); }, false); } /* (4) On gere la "modification" des membres d'une permission d'un groupe */ for( i = 0 ; i < section.permissions.group.add.length ; i++ ){ section.permissions.group.add[i].addEventListener('click', function(e){ pageManager.vars = [ 'permissions', 'm'+e.target.getData('target'), 'a'+e.target.getData('permission') ]; pageManager.refresh(); }, false); } }