SMMP/public_html/view/js/machines.js

983 lines
26 KiB
JavaScript
Executable File

// 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"]')
},
groups: {
text: '#CONTAINER > section[data-sublink="groups"] ',
element: document.querySelector('#CONTAINER > section[data-sublink="groups"]'),
searchbar: document.querySelector('#CONTAINER > section[data-sublink="groups"] > .searchbar')
}
};
/* GESTION DE L'AFFICHAGE DES MACHINES
*
*/
if( section.view.element != null ){
/* (0) On gère le zoom sur un utilisateur 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 = {
edit: document.querySelectorAll(section.view.text + '.link_edit[data-machine]'),
remove: document.querySelectorAll(section.view.text + '.link_remove[data-machine]')
};
/* (2) On récupère toutes les actions de groupes */
section.view.group = {
rem: document.querySelectorAll(section.view.text + '.rem-group[data-machine][data-group]'),
add: document.querySelectorAll(section.view.text + '.add-group[data-machine]')
};
/* (3) Gestion de la recherche instantannee */
section.view.searchbar.addEventListener('keyup', function(e){
var search = {
path: 'machineDefault/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.machines.length ; i++ )
uid_list.push( result.machines[i].id_machine);
// On recupere la liste des elements correspondants aux utilisateurs
var machine_list = document.querySelectorAll(section.view.text + '> article.inline-box[id]');
// Pour chaque machine
for( var i = 0 ; i < machine_list.length ; i++ ){
// Si doit etre visible
if( uid_list.indexOf(parseInt(machine_list[i].id)) > -1 )
machine_list[i].remClass('hidden');
// Si ne doit pas etre visible
else
machine_list[i].addClass('hidden');
}
}
});
}, false);
/* (4) On gere la "redirection" vers la modification */
for( var i = 0 ; i < section.view.link.edit.length ; i++ ){
section.view.link.edit[i].addEventListener('click', function(e){
pageManager.vars = [ 'edit', e.target.getData('machine') ];
pageManager.refresh();
}, false);
}
/* (5) On gere la "redirection" vers la suppression */
for( var i = 0 ; i < section.view.link.remove.length ; i++ ){
section.view.link.remove[i].addEventListener('click', function(e){
pageManager.vars = [ 'remove', e.target.getData('machine') ];
pageManager.refresh();
}, false);
}
/* (6) On gere la "suppression" d'un groupe */
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')
};
// {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 );
});
};
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 = "<div class='dropdown'>";
for( j = 0 ; j < members.length ; j++ ){
if( already.indexOf(members[j].id_machine_cluster) > -1 )
continue;
dropdown += "<span data-groupid='"+members[j].id_machine_cluster+"'>"+members[j].name+"</span>";
}
dropdown += "</div>";
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);
}
}
/* GESTION DE LA CREATION D'UNE MACHINE
*
*/
if( section.create.element != null ){
/* (1) On recupere tous les champs */
section.create.input = {
name: document.querySelector(section.create.text + '#create_name'),
submit: document.querySelector(section.create.text + '#create_submit')
}
/* (2) Gestion de l'envoi du formulaire */
section.create.input.submit.addEventListener('click', function(e){
// On annule l'envoi de base (PHP)
e.preventDefault();
/* (3) On rédige la requête */
var request = {
path: 'machineDefault/create', // On veut creer un utilisateur
name: section.create.input.name.value
};
/* (4) On lance la requête */
api.send(request, function(answer){
if( answer.error == 0 ){ // Tout s'est bien deroule
console.log('Machine cree!');
// On vide le champs
section.create.input.name.value = '';
section.create.input.submit.anim('active', 1500);
}
});
}, false);
}
/* [3] remove -> Suppression de machine
=========================================================*/
if( section.remove.element != null ){
/* (1) Definition des champs et variables
---------------------------------------------------------*/
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'),
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 machine_data = {
id_machine: '',
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{
// On recupere les données de la machine selectionnee
machine_data = {
id_machine: found_remove[searchindex_remove]['id_machine'],
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 de la machine
section.remove.input.search.id.value = machine_data.id_machine;
// Auto-remplissage du formulaire
section.remove.input.name.value = machine_data.name;
// On gere le caractere "inactif" du submit
section.remove.input.submit.disabled = machine_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 getMachines = {
path: 'machineDefault/search',
keywords: section.remove.input.search.keyword.value
};
/* (5) On envoie la requête */
api.send(getMachines, function(getMachinesResponse){
if( getMachinesResponse.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 machines, et le compteur */
searchindex_remove = 0;
found_remove = getMachinesResponse.machines;
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 = getMachines.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 != '' ){
/* (2) On supprime la machine */
var request = {
path: 'machineDefault/delete', // On veut supprimer cet utilisateur
id_machine: section.remove.input.search.id.value
};
api.send(request, function(answer){
if( answer.error == 0 && answer.status == true ){ // Tout s'est bien deroule
console.log('Machine 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 getMachines = {
path: 'machineDefault/search',
keywords: section.remove.input.search.keyword.value
};
api.send(getMachines, function(getMachinesResponse){
if( getMachinesResponse.error == 0 ){ // si pas d'erreur
searchindex_remove = 0;
found_remove = getMachinesResponse.machines;
section.remove.input.search.sum.innerHTML = found_remove.length;
}
});
}
autofill_remove();
}else // Erreur
console.error('ModuleError::'+answer.error);
});
}
}, false);
}
/* [4] edit -> Modification de machine
=========================================================*/
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'),
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 machine_data = {
id_machine: '',
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{
// On recupere les données de la machine selectionnee
machine_data = {
id_machine: found_edit[searchindex_edit]['id_machine'],
name: found_edit[searchindex_edit]['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 de la machine
section.edit.input.search.id.value = machine_data.id_machine;
// Auto-remplissage du formulaire
section.edit.input.name.value = machine_data.name;
// On gere le caractere "inactif" du submit
section.edit.input.submit.disabled = machine_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 getMachines = {
path: 'machineDefault/search',
keywords: section.edit.input.search.keyword.value
};
/* (5) On envoie la requête */
api.send(getMachines, function(getMachinesResponse){
if( getMachinesResponse.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 machines, et le compteur */
searchindex_edit = 0;
found_edit = getMachinesResponse.machines;
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 = getMachines.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 request = {
path: 'machineDefault/edit', // On veut creer une machine
id_machine: section.edit.input.search.id.value,
name: section.edit.input.name.value
};
api.send(request, function(answer){
if( answer.error == 0 && answer.status == true ){ // Tout s'est bien deroule
console.log('Machine modifiee!');
section.edit.input.submit.anim('active', 1500);
/* [1] On met à jour les données machine
=========================================================*/
// On récupère la machine d'uid donné dans l'URL
api.send({path:'machineDefault/getById', id_machine:request.id_machine}, function(response){
// Si aucune erreur et un résultat
if( response.error == 0 ){
found_edit[searchindex_edit] = response.machine; // On récupère le résultat
autofill_edit(); // On auto-remplit
}
});
}else // Erreur
console.error('ModuleError::'+answer.error);
});
}
}, false);
}
/* [5] chargement de la machine courante (depuis url)
=========================================================*/
// gestion automatique au chargement de la page si id_user dans url "/machines/.+/:id_machine:"
if( pageManager.vars.length >= 2 && !isNaN(pageManager.vars[1]) ){
// on récupère la machine d'uid donné dans l'url
api.send({path:'machineDefault/getById', id_machine:pageManager.vars[1]}, function(response){
// si aucune erreur et un résultat
if( response.error == 0 ){
/* (1) On pré-remplis le formulaire de modification */
found_edit = [ response.machine ]; // 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.machine ]; // on récupère le résultat
searchindex_remove = 0; // on remet le compteur à 0
autofill_remove(); // on auto-remplit
}
});
}
/* [5] groups -> Groupes de machines
=========================================================*/
if( section.groups.element != null ){
/* (1) On recupere tous les liens vers des sous-sections */
section.groups.link = {
remove: document.querySelectorAll(section.groups.text + '.link_remove[data-cluster]'),
edit: document.querySelectorAll(section.groups.text + '.link_edit[data-cluster]')
};
/* (2) On récupère toutes les actions de groupes */
section.groups.group = {
rem: document.querySelectorAll(section.groups.text + '.rem-member[data-cluster][data-member]'),
add: document.querySelectorAll(section.groups.text + '.add-member[data-cluster]')
};
/* (3) Gestion de la recherche instantannee */
section.groups.searchbar.addEventListener('keyup', function(e){
var search = {
path: 'clusterDefault/search',
keywords: section.groups.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.groups.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;
/* (4) On gere la "redirection" vers la modification */
for( i = 0 ; i < section.groups.link.edit.length ; i++ ){
section.groups.link.edit[i].addEventListener('click', function(e){
pageManager.vars = [ 'edit', 'm'+e.target.getData('cluster') ];
navMenu('groups', true);
}, false);
}
/* (5) On gere la "redirection" vers la suppression */
for( i = 0 ; i < section.groups.link.remove.length ; i++ ){
section.groups.link.remove[i].addEventListener('click', function(e){
pageManager.vars = [ 'remove', 'm'+e.target.getData('cluster') ];
navMenu('groups', true);
}, false);
}
/* (6) On gere la "suppression" d'un groupe */
section.groups.group.remfunc = function(e){
// {1} On rédige la requête //
var request = {
path: 'machineDefault/unlink',
id_cluster: e.target.getData('cluster'),
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 );
});
};
for( i = 0 ; i < section.groups.group.rem.length ; i++ )
section.groups.group.rem[i].addEventListener('click', section.groups.group.remfunc, false);
/* (7) On gere la "modification" des membres d'un groupe */
for( i = 0 ; i < section.groups.group.add.length ; i++ ){
section.groups.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.groups.group.add.length ; j++ )
section.groups.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('cluster')) )
return;
var cluster_id = parseInt(e.target.getData('cluster'));
/* (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('member') );
/* (3) Call list of members */
api.send({path: 'machineDefault/getAll'}, function(response){
// Manage error
if( response.error != 0 ){
console.warn('error loading list of members');
return;
}
// remove already members
var members = response.machines;
/* (4) Build dropdown content without already members */
dropdown = "<div class='dropdown'>";
for( j = 0 ; j < members.length ; j++ ){
if( already.indexOf(members[j].id_machine) > -1 )
continue;
dropdown += "<span data-memberid='"+members[j].id_machine+"'>"+members[j].name+"</span>";
}
dropdown += "</div>";
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 memberid = e2.target.getData('memberid');
var username = e2.target.innerHTML;
// manage error
if( memberid === false )
return;
// {2} Request : add member to group //
var request = {
path: 'machineDefault/link',
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');
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-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');
newMember.appendChild( document.createTextNode(username) );
newMember.appendChild(newMemberRemoveIcon);
e.target.parentNode.children[1].appendChild(newMember);
});
}, false);
});
}
}, false);
}
}