Remplacement du Drag&Drop par des <select> Fini et opérationnel

js/shortcut.js

@@ -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();
 

page/_JS/groups.js

@@ -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)');
+	// var members = document.querySelectorAll('#CONTAINER section[name=movestudents] table tr td:not(.more)');
-	for( var i = 0 ; i < members.length ; i++ )
+	// for( var i = 0 ; i < members.length ; i++ )
-		dnd.setDraggable(members[i]);
+	// 	dnd.setDraggable(members[i]);
 
-	var groups = document.querySelectorAll('#CONTAINER section[name=movestudents] table thead th:first-child');
+	// var groups = document.querySelectorAll('#CONTAINER section[name=movestudents] table thead th:first-child');
-	for( var i = 0 ; i < groups.length ; i++ )
+	// for( var i = 0 ; i < groups.length ; i++ )
-		dnd.setDroppable(groups[i]);	
+	// 	dnd.setDroppable(groups[i]);	
 	
-	dnd.init(function(input, output){ // on demande un déplacement
+	// dnd.init(function(input, output){ // on demande un déplacement
-		var id_etudiant = input.children[0].children[0].innerHTML;
+	// 	var id_etudiant = input.children[0].children[0].innerHTML;
-		var nom_groupe  = output.children[0].innerHTML;
+	// 	var nom_groupe  = output.children[0].innerHTML;
 
-		var request = { // on définit la requête pour API
+	// 	var request = { // on définit la requête pour API
-			level_0: 'groups',
+	// 		level_0: 'groups',
-			level_1: 'move',
+	// 		level_1: 'move',
-			etudiant: id_etudiant,
+	// 		etudiant: id_etudiant,
-			groupe: nom_groupe
+	// 		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( obj.initval != obj.select.value ) // si c'est une nouvelle valeur (nouveau groupe), on active le validateur (bouton)
-			if( response.request == 'success' ){
+					addClass( obj.button, 'active' );
-				input.parentNode.removeChild( input ); // on supprime le membre de l'ancien groupe
+				else
+					remClass( obj.button, 'active' );
 			
-				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]') );
 			}
-		});
+		}, 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);
+	}
+
 
 }
 

page/groups.php

@@ -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'>";