From 29ac8943bc4cfbb2df6992e53902c8d2d9828c84 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Tue, 27 Oct 2015 12:30:56 +0100 Subject: [PATCH] =?UTF-8?q?Rectification=20des=20modifications=20de=20clas?= =?UTF-8?q?ses=20en=20JS=20(@addClass/@remClass)=20+=20affichage=20de=20"m?= =?UTF-8?q?ongroupe",=20"tous=20les=20groupes",=20"d=C3=A9placement=20grou?= =?UTF-8?q?pe"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- API.js | 2 +- css/container.css | 32 +++++++++++-- css/global.css | 79 +++++++++++++++++++++++++++++--- css/layout.css | 14 ++++-- js/actionScript.js | 42 +++++++++++++---- js/dragndrop.js | 112 +++++++++++++++++++++++++++++++++++---------- page/groups.php | 74 ++++++++++++++++++++++++------ page/home.php | 4 +- 8 files changed, 297 insertions(+), 62 deletions(-) diff --git a/API.js b/API.js index a04ec9b..d5b8def 100755 --- a/API.js +++ b/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 */ diff --git a/css/container.css b/css/container.css index cc3d523..637e300 100755 --- a/css/container.css +++ b/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{ display: flex; } +#CONTAINER section.active.basic{ display: flex; } + + + + diff --git a/css/global.css b/css/global.css index 8514865..8a273ba 100644 --- a/css/global.css +++ b/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{ - display: table-cell; -} +table.basic thead.active + tbody td{ 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 */ -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; } @@ -94,4 +109,56 @@ table.basic tr:last-child td:last-child { border-radius: 0 0 5px 0; } 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; } \ No newline at end of file diff --git a/css/layout.css b/css/layout.css index 9c2acf3..013bb6a 100755 --- a/css/layout.css +++ b/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 ); - min-height: calc( 100% - 2*50px ); - margin: 50px; + width: 100%; + min-height: 100%; + /*margin: 50px;*/ /* border */ box-shadow: 0 0 5px #555; diff --git a/js/actionScript.js b/js/actionScript.js index 10e8071..4fe5e11 100755 --- a/js/actionScript.js +++ b/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); \ No newline at end of file diff --git a/js/dragndrop.js b/js/dragndrop.js index 860ab0f..c6d3f6f 100644 --- a/js/dragndrop.js +++ b/js/dragndrop.js @@ -1,27 +1,93 @@ function DragnDrop(){}; -/** - * Retourne les offsets absolues (par rapport à l'écran) - * @param element L'élément duquel on veut les données - * - * @return offset objet contenant les attributs {top, left, width, height} - */ -DragnDrop.prototype.absoluteOffset = function(element){ - if( element != document.body ){ - var parent = this.absoluteOffset(element.parentNode); - return { - top: element.offsetTop+parent.top, - left: element.offsetLeft+parent.left - }; - }else - return {top: 0, left: 0}; -}; +DragnDrop.prototype = { + draggableElements: [], // contiendra les élément déplaçables + droppableElements: [], // contiendra les éléménts acceptant + state: false, + dragElement: null, + dropElement: null, + + 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 { + top: element.offsetTop+parent.top, + left: element.offsetLeft+parent.left + }; + }else + return {top: 0, left: 0}; + }, + + mouseDownEvent: function(event, pointer){ // gestion du clic sur l'élément (pointeur sur this) + + + }, + + 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 + this.draggableElements.push( element ); // ajout à la listes + }, + + 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 + }, -/** - * Définit un élément comme apte à être "draggé" - * @param element Element auquel s'applique l'autorisation de déplacement - */ -DragnDrop.prototype.setDraggable = function(element){ - console.log('ok'); -}; + + 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); + + + } +} \ No newline at end of file diff --git a/page/groups.php b/page/groups.php index 5558c7b..bcf90fa 100755 --- a/page/groups.php +++ b/page/groups.php @@ -18,7 +18,7 @@ require_once __ROOT__.'/manager/groups.php'; -
+
"; + echo "
"; $request = new stdClass(); $answer = new stdClass(); @@ -143,18 +143,64 @@ if( $_SESSION['username'] != null && $_SESSION['permissions'] == 'student' ){ // -
- Suivi -
+ -
- Modules -
+"; -
- Notes -
+ $request = new stdClass(); + $answer = new stdClass(); -
- Paramètres -
+ $request->level_1 = 'grouplist'; + + 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 ""; + + echo ''; + echo ''; + echo ''; + echo ''; + echo ''; + + + + echo ''; + + + // pour chaque utilisateur + foreach($group->userlist as $user){ + + echo ''; + + foreach($user as $key=>$value) + if( $key == 'prenom' || $key == 'nom' ) + echo ''; + echo ''; + } + + echo ''; + + echo ''; + + echo '
Groupe '.$group->nom.'
'.$value.'
'; + + } + } + //////////////////////////////////////////////////////// + }else + echo "Erreur interne..."; + + echo '
'; +} ?> \ No newline at end of file diff --git a/page/home.php b/page/home.php index 2b05948..28fc5ae 100755 --- a/page/home.php +++ b/page/home.php @@ -15,8 +15,8 @@ ?> -
- a +
+

Bienvenue sur la plateforme de gestion des étudiants de l'IUT Informatique de l'université Paul Sabatier, Toulouse 3