Remplacement du Drag&Drop par des <select> Fini et opérationnel
This commit is contained in:
xdrm-brackets
parent
5375d79a52
commit
53a6683b94
|
|
@ -57,7 +57,7 @@ function Shortcut(keyStore, handler){
|
|||
|
||||
// creation de la fonction d'évènement
|
||||
shortcutList[eventIndex].push( function(e, k, f, h){ /* k<keyCode> ; f<eventIndex> ; h<handler()> */
|
||||
console.log(f);
|
||||
// console.log(f);
|
||||
// on cherche l'avancée
|
||||
var step = shortcutStep[f];
|
||||
|
||||
|
|
@ -70,7 +70,7 @@ function Shortcut(keyStore, handler){
|
|||
for( var i = 0 ; i < shortcutStep[f].length ; i++ )
|
||||
shortcutStep[f][i] = 0;
|
||||
|
||||
console.log('ok');
|
||||
// console.log('ok');
|
||||
e.preventDefault();
|
||||
h(); // EXECUTION DE : handler();
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ var afficherCacherGroupesDefined = true;
|
|||
|
||||
|
||||
/* on définit le Drag'n'Drop */
|
||||
var dnd = new DragnDrop();
|
||||
// var dnd = new DragnDrop();
|
||||
|
||||
|
||||
|
||||
|
|
@ -43,38 +43,93 @@ var dnd = new DragnDrop();
|
|||
/* GESTION DU DRAG N DROP */
|
||||
if( document.querySelector('#CONTAINER section[name=movestudents]') != null ){ // si c'set l'admin
|
||||
|
||||
var members = document.querySelectorAll('#CONTAINER section[name=movestudents] table tr td:not(.more)');
|
||||
for( var i = 0 ; i < members.length ; i++ )
|
||||
dnd.setDraggable(members[i]);
|
||||
// var members = document.querySelectorAll('#CONTAINER section[name=movestudents] table tr td:not(.more)');
|
||||
// for( var i = 0 ; i < members.length ; i++ )
|
||||
// dnd.setDraggable(members[i]);
|
||||
|
||||
var groups = document.querySelectorAll('#CONTAINER section[name=movestudents] table thead th:first-child');
|
||||
for( var i = 0 ; i < groups.length ; i++ )
|
||||
dnd.setDroppable(groups[i]);
|
||||
// var groups = document.querySelectorAll('#CONTAINER section[name=movestudents] table thead th:first-child');
|
||||
// for( var i = 0 ; i < groups.length ; i++ )
|
||||
// dnd.setDroppable(groups[i]);
|
||||
|
||||
dnd.init(function(input, output){ // on demande un déplacement
|
||||
var id_etudiant = input.children[0].children[0].innerHTML;
|
||||
var nom_groupe = output.children[0].innerHTML;
|
||||
// dnd.init(function(input, output){ // on demande un déplacement
|
||||
// var id_etudiant = input.children[0].children[0].innerHTML;
|
||||
// var nom_groupe = output.children[0].innerHTML;
|
||||
|
||||
var request = { // on définit la requête pour API
|
||||
level_0: 'groups',
|
||||
level_1: 'move',
|
||||
etudiant: id_etudiant,
|
||||
groupe: nom_groupe
|
||||
// var request = { // on définit la requête pour API
|
||||
// level_0: 'groups',
|
||||
// level_1: 'move',
|
||||
// etudiant: id_etudiant,
|
||||
// groupe: nom_groupe
|
||||
// };
|
||||
|
||||
// // l'ordre n'est pas alphabétique mais va à la fin
|
||||
|
||||
// API.send(request, function(response){ // on gère la réponse de API
|
||||
// if( response.request == 'success' ){
|
||||
// input.parentNode.removeChild( input ); // on supprime le membre de l'ancien groupe
|
||||
|
||||
// var tableauDestination = output.parentNode.parentNode.parentNode.children[1]; // <tbody> destination
|
||||
// tableauDestination.appendChild( input ); // on ajoute le membre au nouveau groupe
|
||||
|
||||
// // selectSection( document.querySelector('#MENU span[data-link=groups]') );
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
//
|
||||
|
||||
/* DEPLACEMENT A L'AIDE DES <SELECT> */
|
||||
var deplacementElements = document.querySelectorAll('#CONTAINER section[name=movestudents] table tr td select');
|
||||
var deplacementObj = [];
|
||||
|
||||
// on référencie tous les select dans un objet
|
||||
for( var i = 0 ; i < deplacementElements.length ; i++ ){
|
||||
|
||||
deplacementElements[i].dataset.i = i; // le rang du <select> dans la liste
|
||||
|
||||
deplacementObj[i] = {
|
||||
select: deplacementElements[i], // le <select> en question
|
||||
initval: deplacementElements[i].value, // la valeur initiale du <select>
|
||||
button: deplacementElements[i].parentNode.children[1], // le bouton de validation pour ce <select>
|
||||
userid: deplacementElements[i].parentNode.parentNode.children[0].children[0].innerHTML // l'identifiant de l'utilisateur associé à ce <select>
|
||||
};
|
||||
|
||||
// l'ordre n'est pas alphabétique mais va à la fin
|
||||
// on créé l'évènement qui affiche le validateur dès le changement de valeur
|
||||
deplacementObj[i].select.addEventListener('change', function(e){
|
||||
// on récupère le rang dans la liste et qu'il s'agit du même élément
|
||||
if( e.target.dataset.hasOwnProperty('i') && deplacementObj[e.target.dataset.i].select == e.target ){
|
||||
var obj = deplacementObj[e.target.dataset.i];
|
||||
|
||||
API.send(request, function(response){ // on gère la réponse de API
|
||||
if( response.request == 'success' ){
|
||||
input.parentNode.removeChild( input ); // on supprime le membre de l'ancien groupe
|
||||
|
||||
var tableauDestination = output.parentNode.parentNode.parentNode.children[1]; // <tbody> destination
|
||||
tableauDestination.appendChild( input ); // on ajoute le membre au nouveau groupe
|
||||
|
||||
// selectSection( document.querySelector('#MENU span[data-link=groups]') );
|
||||
if( obj.initval != obj.select.value ) // si c'est une nouvelle valeur (nouveau groupe), on active le validateur (bouton)
|
||||
addClass( obj.button, 'active' );
|
||||
else
|
||||
remClass( obj.button, 'active' );
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
}, false);
|
||||
|
||||
|
||||
// on créé l'évènement de confirmation du déplacement
|
||||
deplacementObj[i].button.addEventListener('click', function(e){
|
||||
// s'il s'agit bien d'un bouton de validation, que le <select> associé a data-i existante et que ça match correctement
|
||||
if( /^valider_deplacement/.test(e.target.className) && e.target.parentNode.children[0].dataset.hasOwnProperty('i') && deplacementObj[e.target.parentNode.children[0].dataset.i].button == e.target ){
|
||||
var obj = deplacementObj[e.target.parentNode.children[0].dataset.i];
|
||||
|
||||
var request = { // on définit la requête pour API
|
||||
level_0: 'groups',
|
||||
level_1: 'move',
|
||||
etudiant: obj.userid,
|
||||
groupe: obj.select.value
|
||||
};
|
||||
|
||||
API.send(request, function(response){ // on gère la réponse de API, si déplacement effectué, on recharge la page
|
||||
if( response.request == 'success' ) selectSection( document.querySelector('#MENU > span[data-link='+pageM.page+']') );
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}, false);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -474,13 +474,12 @@ if( permission('admin') ){ // si l'utilisateur est connecté et que c'est un adm
|
|||
|
||||
if( count($group['userlist']) > 0 ){ // s'il y a des utilisateurs
|
||||
|
||||
echo "<table class='basic col5'>";
|
||||
echo "<table class='basic col4'>";
|
||||
|
||||
echo '<thead>';
|
||||
echo '<tr>';
|
||||
echo '<th colspan=5>';
|
||||
echo 'Groupe <span>'.$group['nom'].'</span>';
|
||||
echo "<span style='font-weight:normal;padding-left:1em; font-size: .8em;'>(glisser-déposer étudiant pour le déplacer)</span>";
|
||||
echo '</th>';
|
||||
echo '</tr>';
|
||||
echo '</thead>';
|
||||
|
|
@ -496,7 +495,7 @@ if( permission('admin') ){ // si l'utilisateur est connecté et que c'est un adm
|
|||
echo "<td><span class=link>".$user['identifiant'].'</span></td>';
|
||||
echo '<td>'.$user['prenom'].'</td>';
|
||||
echo '<td>'.$user['nom'].'</td>';
|
||||
echo '<td><strong><span>'.$group['nom'].'</span></strong></td>';
|
||||
// echo '<td><strong><span>'.$group['nom'].'</span></strong></td>';
|
||||
// changement de groupe
|
||||
echo '<td>';
|
||||
echo "<select class='deplacement_groupe'>";
|
||||
|
|
|
|||
Loading…
Reference in New Issue