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

This commit is contained in:
xdrm-brackets 2015-10-27 12:30:56 +01:00
parent 786ec088d6
commit 29ac8943bc
8 changed files with 297 additions and 62 deletions

2
API.js
View File

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

View File

@ -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 */ /* position */
display: none; display: none;
position: relative; position: relative;
@ -20,8 +43,11 @@
z-index: 7; z-index: 7;
} }
#CONTAINER section.active.basic{ display: flex; }
#CONTAINER section.active{ display: flex; }

View File

@ -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 */ /* STYLE "BASIC" DES TABLEAUX */
table.basic{ table.basic{
/* position */ /* position */
width: calc( 100% - 2*1em ); /*width: calc( 100% - 2*1em );*/
margin: 2em 1em; margin: 2em 1em;
/* border */ /* border */
@ -13,15 +28,15 @@ table.basic{
/* affichage du corps si tête activée */ /* affichage du corps si tête activée */
table.basic thead + tbody td{ display: none; } table.basic thead + tbody td{ display: none; }
table.basic thead + tbody td.more{ display: block; } 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 td,
table.basic tr th{ table.basic tr th,
#DRAGNDROP> td,
#DRAGNDROP> th{
/* position */ /* position */
padding: 1em 1.5em; padding: 1em 1.5em;
@ -70,7 +85,7 @@ table.basic thead.active + td.more{ display: none; }
/* différence avec <thead> */ /* 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; } table.basic tr th:first-letter{ text-transform: uppercase; }
@ -95,3 +110,55 @@ table.basic tr:hover td{
background-color: #f7f8fc; background-color: #f7f8fc;
color: #333; 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;
}

View File

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

View File

@ -35,6 +35,7 @@ var API;
/* Structure de la page */ /* Structure de la page */
var DOM = { var DOM = {
DRAGNDROP : document.querySelector('#DRAGNDROP'),
WRAPPER : document.querySelector('#WRAPPER'), WRAPPER : document.querySelector('#WRAPPER'),
MENU : document.querySelector('#MENU'), MENU : document.querySelector('#MENU'),
HEADER : document.querySelector('#HEADER'), HEADER : document.querySelector('#HEADER'),
@ -67,6 +68,17 @@ var connected = !( DOM.AUTH.children[0].innerHTML == 'Connexion' );
==============================================================*/ ==============================================================*/
API = new APIClass(); 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'); var last = document.querySelector('#MENU span.active');
if( last != null ) // si une section est déjà activée 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 }else // sinon on affiche l'erreur
console.log("[selectSection_Error] - ("+section+")"); 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" // on essaie de récupérer l'ancien "lien"
var lastActive = document.querySelector('#SUBHEADER > nav > span.active'); var lastActive = document.querySelector('#SUBHEADER > nav > span.active');
if( lastActive != null ) // si on a trouvé qqch 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 // on essaie de récupérer l'ancienne section active
var lastSection = document.querySelector('#CONTAINER section.active'); var lastSection = document.querySelector('#CONTAINER section.active');
if( lastSection != null ) // si on a trouvé qqch 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 // on active la page associée
var target = document.querySelector('#CONTAINER section[name='+subSection.dataset.sectname+']'); var target = document.querySelector('#CONTAINER section[name='+subSection.dataset.sectname+']');
if( target != null ) 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é if( !connected ) // sur zone verte si pas connecté
DOM.MENU.children[0].addEventListener('click', function(e){ DOM.MENU.children[0].addEventListener('click', function(e){
DOM.AUTHFILTER.className = 'active'; addClass(DOM.AUTHFILTER, 'active');
}, false); }, false);
// ferme l'interface d'authentification quand clic sur filtre // ferme l'interface d'authentification quand clic sur filtre
DOM.AUTHFILTER.addEventListener('click', function(e){ DOM.AUTHFILTER.addEventListener('click', function(e){
DOM.AUTHFILTER.className = ''; remClass(DOM.AUTHFILTER, 'active');
}, false); }, 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);

View File

@ -1,12 +1,13 @@
function DragnDrop(){}; 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 ){ if( element != document.body ){
var parent = this.absoluteOffset(element.parentNode); var parent = this.absoluteOffset(element.parentNode);
return { return {
@ -15,13 +16,78 @@ DragnDrop.prototype.absoluteOffset = function(element){
}; };
}else }else
return {top: 0, left: 0}; 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);
}
}

View File

@ -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é <?php if( $_SESSION['username'] != null ){ // si connecté
@ -91,7 +91,7 @@ require_once __ROOT__.'/manager/groups.php';
/*** MON GROUPE ***/ /*** MON GROUPE ***/
/******************/ /******************/
if( $_SESSION['username'] != null && $_SESSION['permissions'] == 'student' ){ // si l'utilisateur est connecté et que c'est un élève 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(); $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>';
} ?>

View File

@ -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>
<section name='groups' title='Groupes'> <section name='groups' title='Groupes'>