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
parent
786ec088d6
commit
29ac8943bc
2
API.js
2
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 */
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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 <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; }
|
||||
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
112
js/dragndrop.js
112
js/dragndrop.js
|
|
@ -1,27 +1,93 @@
|
|||
function DragnDrop(){};
|
||||
|
||||
/**
|
||||
* Retourne les offsets absolues (par rapport à l'écran)
|
||||
* @param <Element>element L'élément duquel on veut les données
|
||||
*
|
||||
* @return <Object>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 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);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -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'>
|
||||
Suivi
|
||||
</section>
|
||||
<!-- DEPLACEMENT D'ELEVES -->
|
||||
|
||||
<section name='modules' title='Modules'>
|
||||
Modules
|
||||
</section>
|
||||
<?php
|
||||
/****************************/
|
||||
/*** 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'>
|
||||
Notes
|
||||
</section>
|
||||
$request = new stdClass();
|
||||
$answer = new stdClass();
|
||||
|
||||
<section name='settings' title='Paramètres'>
|
||||
Paramètres
|
||||
</section>
|
||||
$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 "<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>';
|
||||
} ?>
|
||||
|
|
@ -15,8 +15,8 @@
|
|||
|
||||
?>
|
||||
|
||||
<section name='home' title='Accueil'>
|
||||
a
|
||||
<section name='home' title='Présentation'>
|
||||
<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'>
|
||||
|
|
|
|||
Loading…
Reference in New Issue