Rectification des modifications de classes en JS (@addClass/@remClass) + affichage de "mongroupe", "tous les groupes", "déplacement groupe"

API.js

@@ -51,7 +51,7 @@ APIClass.prototype = {
 			if( ptrAPI.xhr[i].readyState == 4 ){ // si la requête est terminée
 
 				/* DEBUG : affiche la réponse BRUTE de API.php */
-				console.log('API.php => '+ptrAPI.xhr[i].responseText);
+				// console.log('API.php => '+ptrAPI.xhr[i].responseText);
 				console.log(JSON.parse(ptrAPI.xhr[i].responseText) );
 
 				/* si success de requête */

css/container.css

@@ -1,4 +1,27 @@
-#CONTAINER section{
+#CONTAINER section:not(.basic){
+	/* position */
+	display: none;
+	position: relative;
+		top: 0;
+		left: 0;
+		width: calc( 100% - 2*2em );
+		min-height: calc( 100% - 2*2em );
+		height: auto;
+	padding: 2em;
+
+	/* background */
+	background-color: #ecf0f1;
+
+	/* Z */
+	z-index: 7;
+}
+
+#CONTAINER section.active:not(.basic){ display: block; }
+
+
+
+
+#CONTAINER section.basic{
 	/* position */
 	display: none;
 	position: relative;
@@ -20,8 +43,11 @@
 	z-index: 7;
 }
 
-
+#CONTAINER section.active.basic{ display: flex; }
-#CONTAINER section.active{ display: flex; }
+
+
+
+
 
 
 

css/global.css

@@ -1,7 +1,22 @@
+.no-select{
+	user-select: none;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	-o-user-select: none;
+}
+
+
+
+
+/**********************/
+/*** TABLEAU .BASIC ***/
+/**********************/
+
 /* STYLE "BASIC" DES TABLEAUX */
 table.basic{
 	/* position */
-	width: calc( 100% - 2*1em );
+	/*width: calc( 100% - 2*1em );*/
 	margin: 2em 1em;
 
 	/* border */
@@ -13,15 +28,15 @@ table.basic{
 /* affichage du corps si tête activée */
 table.basic thead + tbody td{ display: none; }
 table.basic thead + tbody td.more{ display: block; }
-table.basic thead.active + tbody td{
+table.basic thead.active + tbody td{ display: table-cell; }
-	display: table-cell;
-}
 
 
 
 
 table.basic tr td,
-table.basic tr th{
+table.basic tr th,
+#DRAGNDROP> td,
+#DRAGNDROP> th{
 	/* position */
 	padding: 1em 1.5em;
 
@@ -70,7 +85,7 @@ table.basic thead.active + td.more{ display: none; }
 
 
 /* différence avec <thead> */
-table.basic tr th{ background-color: #f7f8fc; }
+table.basic tr th{ background-color: #f7f8fc; font-size: 1.05em; }
 table.basic tr th:first-letter{ text-transform: uppercase; }
 
 
@@ -95,3 +110,55 @@ table.basic tr:hover td{
 	background-color: #f7f8fc;
 	color: #333;
 }
+
+
+
+/******************/
+/*** PARAGRAPHS ***/
+/******************/
+#CONTAINER section > p{
+	/* position */
+	padding: 1em;
+	margin-left: 10em;
+	
+	/* border */	
+	border-radius: 3px;
+	border: 1px solid #ddd;
+	box-shadow: 1px 1px 3px #ddd;
+
+	/* background */
+	background-color: #fff;
+}
+
+#CONTAINER section > p:before{
+	content: attr(data-pre);
+	/* position */
+	display: block;
+	position: absolute;
+		top: 2em;
+		left: 0;
+		width: 8em;
+		height: 1.3em;
+	padding: 1em;
+	margin-left: 1em;
+
+	/* foreground */
+	color: #666;
+	text-align: right;
+}
+
+#CONTAINER section > p:after{
+	content: '';
+	/* position */
+	display: block;
+	position: absolute;
+		top: 2.7em;
+		left: 10.1em;
+
+	/* border */
+	border: 1em solid transparent;
+	border-right-color: #fff;
+
+	/* Z */
+	z-index: 1;
+}

css/layout.css

@@ -54,12 +54,16 @@ body{
 
 #DRAGNDROP{
 	/* position */
-	display: block;
+	/*display: block;*/ display: none;
 	position: fixed;
 		width: 10px;
 		height: 10px;
 
-	/* background */
+	/* border */
+	border-radius: 100% / 100%;
+
+	/* Z */
+	z-index: 100;
 }
 
 
@@ -67,9 +71,9 @@ body{
 	/* position */
 	display: block;
 	position: absolute;
-		width: calc( 100% - 2*50px );
+		width: 100%;
-		min-height: calc( 100% - 2*50px );
+		min-height: 100%;
-	margin: 50px;
+	/*margin: 50px;*/
 
 	/* border */
 	box-shadow: 0 0 5px #555;

js/actionScript.js

@@ -35,6 +35,7 @@ var API;
 
 /* Structure de la page */
 var DOM = {
+	DRAGNDROP  : document.querySelector('#DRAGNDROP'),
 	WRAPPER    : document.querySelector('#WRAPPER'),
 		MENU      : document.querySelector('#MENU'),
 		HEADER    : document.querySelector('#HEADER'),
@@ -67,6 +68,17 @@ var connected = !( DOM.AUTH.children[0].innerHTML == 'Connexion' );
 	==============================================================*/
 	API = new APIClass();
 
+	/* [c] gestion des classes 
+	================================================*/
+	function addClass(el, pClass){
+		if( el.className.length > 0 && el.className != pClass ) el.className = el.className + ' ' + pClass;
+		else                                                    el.className = pClass;
+	}
+
+	function remClass(el, pClass){
+		if( el.className.indexOf(pClass) > -1 ) // si la class de l'élement contient la classe à enlever 
+			el.className = el.className.substr(0, el.className.indexOf(pClass)) + '' + el.className.substr(el.className.indexOf(pClass)+pClass.length);
+	}
 
 
 
@@ -117,9 +129,9 @@ var connected = !( DOM.AUTH.children[0].innerHTML == 'Connexion' );
 			var last = document.querySelector('#MENU span.active');
 
 			if( last != null )                // si une section est déjà activée
-				last.className = '';          // on désactive la courante
+				remClass(last, 'active'); // on désactive la courante
 			
-			section.className = 'active';     // on active @section
+			addClass(section, 'active'); // on active @section
 			
 		}else // sinon on affiche l'erreur
 			console.log("[selectSection_Error] - ("+section+")");
@@ -157,19 +169,19 @@ var connected = !( DOM.AUTH.children[0].innerHTML == 'Connexion' );
 			// on essaie de récupérer l'ancien "lien"
 			var lastActive = document.querySelector('#SUBHEADER > nav > span.active');
 			if( lastActive != null ) // si on a trouvé qqch
-				lastActive.className = ''; // on le désactive
+				remClass(lastActive, 'active'); // on le désactive
 		
 			// on essaie de récupérer l'ancienne section active
 			var lastSection = document.querySelector('#CONTAINER section.active');
 			if( lastSection != null ) // si on a trouvé qqch
-				lastSection.className = ''; // on la désactive
+				remClass(lastSection, 'active'); // on la désactive
 
 			// on active la page associée
 			var target = document.querySelector('#CONTAINER section[name='+subSection.dataset.sectname+']');
 			if( target != null )
-				target.className = 'active';
+				addClass(target, 'active');
 	
-			subSection.className = 'active'; // on active @subSection
+			addClass(subSection, 'active'); // on active @subSection
 		}
 
 	}
@@ -189,14 +201,14 @@ DOM.LOGOUT.addEventListener('click', function(e){ // sur bouton
 
 if( !connected )  // sur zone verte si pas connecté
 	DOM.MENU.children[0].addEventListener('click', function(e){
-		DOM.AUTHFILTER.className = 'active';
+		addClass(DOM.AUTHFILTER, 'active');
 	}, false);
 
 		
 
 // ferme l'interface d'authentification quand clic sur filtre
 DOM.AUTHFILTER.addEventListener('click', function(e){
-	DOM.AUTHFILTER.className = '';
+	remClass(DOM.AUTHFILTER, 'active');
 }, false);
 
 
@@ -298,3 +310,17 @@ initForm( // initialisation du formulaire de connection
 		});
 	}
 );
+
+
+
+
+/* TEST DRAG N DROP */
+var dnd = new DragnDrop();
+setTimeout(function(){
+	var members = document.querySelectorAll('#CONTAINER table.basic tr td:not(.more)');
+	for( var i = 0 ; i < members.length ; i++ ){
+		dnd.setDraggable(members[i]);
+		dnd.setDroppable(members[i]);
+	}
+	dnd.init();
+}, 500);

js/dragndrop.js

@@ -1,12 +1,13 @@
 function DragnDrop(){};
 
-/**
+DragnDrop.prototype = {
- * Retourne les offsets absolues (par rapport à l'écran) 
+	draggableElements: [], // contiendra les élément déplaçables
- * @param  <Element>element 		L'élément duquel on veut les données
+	droppableElements: [], // contiendra les éléménts acceptant
- * 
+	state: false,
- * @return <Object>offset         	objet contenant les attributs {top, left, width, height}
+	dragElement: null,
- */
+	dropElement: null,
-DragnDrop.prototype.absoluteOffset = function(element){
+
+	absoluteOffset: function(element){ // retourne les offsets absolus de l'élément (absolus = par rapport à la page)
 		if( element != document.body ){
 			var parent = this.absoluteOffset(element.parentNode);
 			return {
@@ -15,13 +16,78 @@ DragnDrop.prototype.absoluteOffset = function(element){
 			};
 		}else
 			return {top: 0, left: 0};
-};
+	},
+
+	mouseDownEvent: function(event, pointer){ // gestion du clic sur l'élément (pointeur sur this)
 		
 
-/**
+	},
- * Définit un élément comme apte à être "draggé"
+
- * @param <Element>element 			Element auquel s'applique l'autorisation de déplacement
+	setDraggable: function(element){ // ajoute l'élément aux déplaçables et initialise ses évènements
- */
+		element.className = (element.className.length==0) ? 'no-select' : element.className+' no-select'; // on bloque la selection dessus
-DragnDrop.prototype.setDraggable = function(element){
+		this.draggableElements.push( element ); // ajout à la listes
-	console.log('ok');
+	},	
-};
+
+	setDroppable: function(element){ // ajoute l'éléments aux receveurs
+		element.className = (element.className.length==0) ? 'no-select' : element.className+' no-select'; // on bloque la selection dessus
+		this.droppableElements.push( element ); // ajout à la liste
+	},
+
+
+
+	init: function(){ // initialise le système
+		var pointer = this;
+
+		// evenement mousedown
+		document.body.addEventListener('mousedown', function(e){
+			if( pointer.draggableElements.indexOf(e.target) > -1 ){ // si l'élément est dans la liste des "draggables"
+				pointer.dragElement = e.target;
+				DOM.DRAGNDROP.innerHTML = '';
+				DOM.DRAGNDROP.appendChild( e.target.cloneNode() );
+				DOM.DRAGNDROP.children[0].innerHTML = e.target.innerHTML;
+				DOM.DRAGNDROP.children[0].style.border = '1px solid #aaa';
+				DOM.DRAGNDROP.children[0].style.boxShadow = '0 0 10px #ddd';
+				DOM.DRAGNDROP.style.top  = e.clientY + 'px';
+				DOM.DRAGNDROP.style.left = e.clientX + 'px';
+				DOM.DRAGNDROP.style.display = 'block';
+				e.target.style.backgroundColor = '#28b965';
+				pointer.state = true; 
+			}
+		}, false);
+
+		// evenement mousemove
+		document.body.addEventListener('mousemove', function(e){
+			if( pointer.state ){
+				DOM.DRAGNDROP.style.top  = e.clientY + 'px';
+				DOM.DRAGNDROP.style.left = e.clientX + 'px';
+
+				if( pointer.droppableElements.indexOf(e.target) > -1 ) // si on est sur un "receveur"
+					e.target.style.backgroundColor = '#28b965';
+				else
+					for( var i = 0 ; i < pointer.droppableElements.length ; i++ )
+						pointer.droppableElements[i].style.backgroundColor = 'inherit';
+			}
+		}, false);
+
+		// evenement mouseup
+		document.body.addEventListener('mouseup', function(e){
+			if( pointer.state ){
+				DOM.DRAGNDROP.style.display = 'none';
+				pointer.state = false;
+				for( var i = 0 ; i < pointer.draggableElements.length ; i++ )
+					pointer.draggableElements[i].style.backgroundColor = 'inherit';
+				for( var i = 0 ; i < pointer.droppableElements.length ; i++ )
+						pointer.droppableElements[i].style.backgroundColor = 'inherit';
+
+				if( pointer.droppableElements.indexOf(e.target) > -1 ){ // si l'élément est dans la liste des "draggables" et qu'il est "draggé"
+					pointer.dropElement = e.target;
+					console.log('Source: '); console.log( pointer.dragElement );
+					console.log('Dest. : '); console.log( pointer.dropElement );
+				}
+
+			}
+		}, false);
+		
+
+	}
+}

page/groups.php

@@ -18,7 +18,7 @@ require_once __ROOT__.'/manager/groups.php';
 
 
 
-<section name='allgroups' title='tous les groupes'>
+<section name='allgroups' title='tous les groupes' class='basic'>
 	<?php if( $_SESSION['username'] != null ){ // si connecté
 
 		
@@ -91,7 +91,7 @@ require_once __ROOT__.'/manager/groups.php';
 /*** MON GROUPE ***/
 /******************/
 if( $_SESSION['username'] != null && $_SESSION['permissions'] == 'student' ){ // si l'utilisateur est connecté et que c'est un élève
-	echo "<section name='mygroup' title='Mon groupe'>";
+	echo "<section name='mygroup' title='Mon groupe' class='basic'>";
 
 		$request = new stdClass(); $answer  = new stdClass();
 
@@ -143,18 +143,64 @@ if( $_SESSION['username'] != null && $_SESSION['permissions'] == 'student' ){ //
 
 
 
-<section name='case' title='Suivi'>
+<!-- DEPLACEMENT D'ELEVES -->
-	Suivi
-	</section>
 
-<section name='modules' title='Modules'>
+<?php
-	Modules
+/****************************/
-	</section>
+/*** DEPLACEMENT D'ELEVES ***/
+/****************************/
+if( $_SESSION['username'] != null && $_SESSION['permissions'] == 'admin' ){ // si l'utilisateur est connecté et que c'est un élève
+	echo "<section name='movestudents' title=\"Déplacements\" class='basic'>";
 
-<section name='marks' title='Notes'>
+		$request = new stdClass();
-	Notes
+		$answer  = new stdClass();
-	</section>
 
-<section name='settings' title='Paramètres'>
+		$request->level_1 = 'grouplist';
-	Paramètres
+
-	</section>
+		groups_switch_level_1($request, $answer);
+
+		if( $answer->request == 'success' ){ // si pas d'erreur
+		//////////////////////////////////////////////////////////////
+
+			foreach($answer->grouplist as $group){ // pour chaque groupe
+
+				if( count($group->userlist) > 0 ){ // s'il y a des utilisateurs
+
+					echo "<table class='basic'>";
+
+					echo '<thead>';
+						echo '<tr>';
+							echo '<th colspan=5>Groupe '.$group->nom.'</th>';
+						echo '</tr>';
+					echo '</thead>';
+
+
+
+					echo '<tbody>';
+						
+
+						// pour chaque utilisateur
+						foreach($group->userlist as $user){
+							
+							echo '<tr>';
+
+								foreach($user as $key=>$value)
+									if( $key == 'prenom' || $key == 'nom' )
+										echo '<td>'.$value.'</td>';
+							echo '</tr>';
+						}
+
+						echo '<tr><td colspan=5 class=more></td></tr>';
+
+					echo '</tbody>';
+
+					echo '</table>';
+
+				}
+			}
+		////////////////////////////////////////////////////////
+		}else
+			echo "Erreur interne...";
+
+	echo '</section>';
+} ?>

page/home.php

@@ -15,8 +15,8 @@
 	
 ?>
 
-<section name='home' title='Accueil'>
+<section name='home' title='Présentation'>
-	a
+	<p data-pre='admin1'>Bienvenue sur la plateforme de gestion des étudiants de l'IUT Informatique de l'université Paul Sabatier, Toulouse 3</p>
 	</section>
 
 <section name='groups' title='Groupes'>