Ajout du déplacement d'étudiants par Drag'n'Drop

This commit is contained in:
xdrm-brackets 2015-10-31 17:25:19 +01:00
parent 0029905460
commit c22fe6ab92
10 changed files with 270 additions and 94 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

@ -6,6 +6,20 @@
-o-user-select: none; -o-user-select: none;
} }
.hidden{ display: none !important; }
@ -113,9 +127,13 @@ table.basic tr:hover td:not(.more){
table.basic:nth-child(4n+0) thead th{ color: #e63c54; } table.basic:nth-child(4n+0) thead th{ color: #e63c54; }
table.basic:nth-child(4n+0) tr:hover td:not(.more) { background-color: #e63c54; }
table.basic:nth-child(4n+1) thead th{ color: #3c73e6; } table.basic:nth-child(4n+1) thead th{ color: #3c73e6; }
table.basic:nth-child(4n+1) tr:hover td:not(.more) { background-color: #3c73e6; }
table.basic:nth-child(4n+2) thead th{ color: #e6983c; } table.basic:nth-child(4n+2) thead th{ color: #e6983c; }
table.basic:nth-child(4n+3) thead th{ color: #8b3ce6; } table.basic:nth-child(4n+2) tr:hover td:not(.more) { background-color: #e6983c; }
table.basic:nth-child(4n+3) thead th{ color: #2dcc70; }
table.basic:nth-child(4n+3) tr:hover td:not(.more) { background-color: #2dcc70; }
@ -139,3 +157,7 @@ table.basic:nth-child(4n+3) thead th{ color: #8b3ce6; }
#CONTAINER section > p:hover{ #CONTAINER section > p:hover{
box-shadow: 1px 1px 3px #ddd; box-shadow: 1px 1px 3px #ddd;
} }

View File

@ -135,6 +135,9 @@ body{
/* background */ /* background */
background-color: #fff; background-color: #fff;
/* scroll */
overflow: hidden;
/* Z */ /* Z */
z-index: 9; z-index: 9;
} }

View File

@ -35,6 +35,15 @@ $notifNotifNum = 5;
</head> </head>
<body><!-- CORPS DE LA PAGE --> <body><!-- CORPS DE LA PAGE -->
<?php
if( $_SESSION['identifiant'] != null ){
echo "<input type='hidden' name='identifiant' value='".$_SESSION['identifiant']."'>";
echo "<input type='hidden' name='droits' value='".$_SESSION['droits']."' >";
echo "<input type='hidden' name='semestre' value='".$_SESSION['semestre']."' >";
echo "<input type='hidden' name='annee' value='".$_SESSION['annee']."' >";
}
?>
<div id='DRAGNDROP'></div> <div id='DRAGNDROP'></div>

View File

@ -6,6 +6,8 @@ DragnDrop.prototype = {
state: false, state: false,
dragElement: null, dragElement: null,
dropElement: null, dropElement: null,
dropColors: [], // contiendra la valeur de départ de éléments acceptant
handler: null,
absoluteOffset: function(element){ // retourne les offsets absolus de l'élément (absolus = par rapport à la page) absoluteOffset: function(element){ // retourne les offsets absolus de l'élément (absolus = par rapport à la page)
if( element != document.body ){ if( element != document.body ){
@ -35,9 +37,16 @@ DragnDrop.prototype = {
init: function(){ // initialise le système init: function(handler){ // initialise le système
var pointer = this; var pointer = this;
this.handler = handler;
// on définit la couleur de départ
for( var i = 0 ; i < pointer.droppableElements.length ; i++ )
pointer.dropColors[i] = window.getComputedStyle(pointer.droppableElements[i], null).getPropertyValue('color');
// evenement mousedown // evenement mousedown
document.body.addEventListener('mousedown', function(e){ document.body.addEventListener('mousedown', function(e){
if( pointer.draggableElements.indexOf(e.target) > -1 ){ // si l'élément est dans la liste des "draggables" if( pointer.draggableElements.indexOf(e.target) > -1 ){ // si l'élément est dans la liste des "draggables"
@ -57,14 +66,15 @@ DragnDrop.prototype = {
// evenement mousemove // evenement mousemove
document.body.addEventListener('mousemove', function(e){ document.body.addEventListener('mousemove', function(e){
if( pointer.state ){ if( pointer.state ){
DOM.DRAGNDROP.style.top = e.clientY + 'px'; DOM.DRAGNDROP.style.top = e.clientY + 3 + 'px';
DOM.DRAGNDROP.style.left = e.clientX + 'px'; DOM.DRAGNDROP.style.left = e.clientX + 3 +'px';
for( var i = 0 ; i < pointer.droppableElements.length ; i++ ) for( var i = 0 ; i < pointer.droppableElements.length ; i++ )
pointer.droppableElements[i].style.color = '#777'; pointer.droppableElements[i].style.color = pointer.dropColors[i];
if( pointer.droppableElements.indexOf(e.target) > -1 ) if( pointer.droppableElements.indexOf(e.target) > -1 )
e.target.style.color = 'red'; e.target.style.color = '#777';
} }
}, false); }, false);
@ -77,12 +87,13 @@ DragnDrop.prototype = {
if( pointer.droppableElements.indexOf(e.target) > -1 ){ // si l'élément est dans la liste des "draggables" et qu'il est "draggé" 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; pointer.dropElement = e.target;
console.log('Source: '); console.log( pointer.dragElement );
console.log('Dest. : '); console.log( pointer.dropElement ); // on exécute le handler avec le drag/drop
pointer.handler(pointer.dragElement, pointer.dropElement);
} }
for( var i = 0 ; i < pointer.droppableElements.length ; i++ ) for( var i = 0 ; i < pointer.droppableElements.length ; i++ )
pointer.droppableElements[i].style.color = '#777'; pointer.droppableElements[i].style.color = pointer.dropColors[i];
} }
}, false); }, false);

View File

@ -761,7 +761,7 @@ class DataBase{
/******************************************************/ /******************************************************/
/***** déplace un étudiant d'un groupe à un autre *****/ /***** déplace un étudiant d'un groupe à un autre *****/
/******************************************************/ /******************************************************/
public function deplacerEtudiant($nomEtudiant,$nouveauGroupe) { public function deplacerEtudiant($etudiant,$groupe, $semestre, $annee){
// !!! Réfléchir à la gestion des AS, LP etc.. // !!! Réfléchir à la gestion des AS, LP etc..
@ -782,10 +782,121 @@ class DataBase{
// [3] ensuite tu peux écrire manager/database.php en vérifiant tout les cas (ceux que j'ai cité ou oublié) // [3] ensuite tu peux écrire manager/database.php en vérifiant tout les cas (ceux que j'ai cité ou oublié)
// //
// Inspire toi de ce qui a déjà été fait au dessus et essaie de // Inspire toi de ce qui a déjà été fait au dessus et essaie de
if(isset($nouveauGroupe) && is_string($nouveauGroupe) && $nouveauGroupe == 'A' || 'B' || 'C' || 'D' || 'E' || 'F')
return 'L\'étudiant a été déplacé';
/*** on cherche un semestre avec ce rang et cette année (qui est unique) ***/
$getSemestreUID = $this->pdo->prepare("SELECT id_semestre as id FROM semestre WHERE rang = :rang AND annee = :annee");
$getSemestreUID->execute(array(
':rang' => $semestre,
':annee' => $annee
));
// si on trouve, on le définit, sinon on retourne "unknown_group"
if( $semestreUID = $getSemestreUID->fetch()['id'] )
$semestreUID = (int) $semestreUID;
else else
return 'L\'étudiant n\'a pas pu être déplacé'; return 'unknown_semestre';
/*** on cherche un utilisateur avec cet identifiant ***/
$getEtudiantUID = $this->pdo->prepare("SELECT identifiant as id FROM utilisateur as u, appartenance as app ".
"WHERE u.identifiant = app.id_etudiant ".
"AND u.identifiant = :etudiant ".
"AND app.id_semestre = :semestreUID");
$getEtudiantUID->execute(array(
':etudiant' => $etudiant,
':semestreUID' => $semestreUID
));
// si on trouve, on le définit, sinon on retourne "unknown_user"
if( $etudiantUID = $getEtudiantUID->fetch()['id'] )
$etudiantUID = $etudiantUID;
else
return 'unknown_user';
/*** on cherche le nouveau groupe pour cet utilisateur ***/
$getNouveauGroupeUID = $this->pdo->prepare("SELECT g.id_groupe as id ".
"FROM groupe as g ".
"WHERE g.nom = :groupe");
$getNouveauGroupeUID->execute(array(
':groupe' => $groupe
));
// si on trouve, on le définit, sinon on retourne "unknown_user"
if( $nouveauGroupeUID = $getNouveauGroupeUID->fetch()['id'] )
$nouveauGroupeUID = $nouveauGroupeUID;
else
return 'unknown_newgroup';
/*** on cherche le groupe de cet utilisateur ***/
$getGroupeUID = $this->pdo->prepare("SELECT g.id_groupe as id ".
"FROM utilisateur as u, groupe as g, appartenance as app, semestre as s ".
"WHERE app.id_etudiant = u.identifiant ".
"AND app.id_groupe = g.id_groupe ".
"AND app.id_semestre = s.id_semestre ".
"AND u.identifiant = :etudiantUID ".
"AND app.id_semestre = :semestreUID");
$getGroupeUID->execute(array(
':etudiantUID' => $etudiantUID,
':semestreUID' => $semestreUID,
));
// si on trouve, on le définit, sinon on retourne "unknown_user"
if( $groupeUID = $getGroupeUID->fetch()['id'] ){
$groupeUID = $groupeUID;
/***************************************************************/
/*** CAS 1 : l'utilisateur a déjà un groupe pour ce semestre ***/
/***************************************************************/
// il suffit donc maintenant de modifier l' "appartenance"
$updateGroupe = $this->pdo->prepare("UPDATE appartenance SET id_groupe = :nouveauGroupeUID ".
"WHERE id_etudiant = :etudiantUID ".
"AND id_groupe = :groupeUID ".
"AND id_semestre = :semestreUID");
$updateGroupe->execute(array(
':nouveauGroupeUID' => $nouveauGroupeUID,
':etudiantUID' => $etudiantUID,
':groupeUID' => $groupeUID,
':semestreUID' => $semestreUID
));
}
else{
/****************************************************/
/*** CAS 2 : l'utilisateur n'a pas encore de groupe */
/****************************************************/
$insertGroupe = $this->pdo->prepare("INSERT INTO appartenance(id_appartenance, id_etudiant, id_groupe, id_semestre) ".
"VALUES(NULL, :etudiantUID, :nouveauGroupeUID, :semestreUID)");
$insertGroupe->execute(array(
':etudiantUID' => $etudiantUID,
':nouveauGroupeUID' => $nouveauGroupeUID,
':semestreUID' => $semestreUID
));
}
/* Vérification de l'entrée dans la table */
$verif = $this->pdo->prepare("SELECT count(id_appartenance) as count ".
"FROM appartenance ".
"WHERE id_etudiant = :etudiantUID ".
"AND id_groupe = :nouveauGroupeUID ".
"AND id_semestre = :semestreUID");
$verif->execute(array(
':etudiantUID' => $etudiantUID,
':nouveauGroupeUID' => $nouveauGroupeUID,
':semestreUID' => $semestreUID
));
$verifFetch = $verif->fetch();
if( $verifFetch && $verifFetch['count'] == '1' )
return 'success';
else
return 'error';
} }
} }

View File

@ -137,6 +137,25 @@ require_once __ROOT__.'/manager/database.php';
break; break;
/************************************************/
/* déplace un étudiant de son groupe à un autre */
/************************************************/
case 'move':
$areSetParam = isset($request->etudiant) && isset($request->groupe) && isset($request->semestre) && isset($request->annee); // les arguments existent
$typeOkParam = $areSetParam && is_string($request->etudiant) && is_string($request->groupe) && is_numeric($request->semestre) && is_numeric($request->annee); // si c'est des strings
$nEmptyParam = $typeOkParam && strlen($request->etudiant) > 0 && strlen($request->groupe) > 0; // d'au moins 1 caractère
$etudiantCheck = $nEmptyParam && preg_match('/^[\w -]{3,50}$/i', $request->etudiant); // etudiant (username) bon format
$groupeCheck = $etudiantCheck && preg_match('/^[a-z0-9 -]{1,10}$/i', $request->groupe); // groupe (nom) bon format
$semestreCheck = $groupeCheck && preg_match('/^[1-4]{1}$/i', $request->semestre); // semestre (semestre) bon format
$anneeCheck = $semestreCheck && preg_match('/^[0-9]{4}$/i', $request->annee); // semestre (annee) bon format
if( $groupeCheck ){ // si param ok
$answer->request = DataBase::getInstance()->deplacerEtudiant($request->etudiant, $request->groupe, $request->semestre, $request->annee);
}else
$answer->answer = 'param_error';
break;

View File

@ -163,8 +163,8 @@ require_once __ROOT__.'/manager/database.php';
$_SESSION['droits'] = $userList->{$username}->permissions; $_SESSION['droits'] = $userList->{$username}->permissions;
/******************************* TEMPO *********************************/ /******************************* TEMPO *********************************/
$_SESSION['annee'] = '2015';
$_SESSION['semestre'] = '2'; $_SESSION['semestre'] = '2';
$_SESSION['annee'] = '2015';
/***********************************************************************/ /***********************************************************************/
return 'success'; return 'success';
}else }else

View File

@ -14,38 +14,6 @@ if( document.querySelector('#CONTAINER hgroup.active') == null )
/*************************************************/
/****************** EXEMPLE API ******************/
/*************************************************/
// on récupère la liste des élèves du groupe E
/* objet envoyé à API.php */
var request = {
level_0: 'groups',
level_1: 'grouplist',
semestre: '3',
annee: '2015',
};
// console.log( request );
// envoi de la requête
// @ on envoie l'objet
// @ quand réception: affichage de l'objet reçu
//
API.send(request, function(r){} );
/* Gestion du déroulement des tableaux des groupes */ /* Gestion du déroulement des tableaux des groupes */
function afficherCacherGroupes(e){ function afficherCacherGroupes(e){
// s'il s'agit de la case "Voir plus" // s'il s'agit de la case "Voir plus"
@ -55,7 +23,6 @@ function afficherCacherGroupes(e){
} }
} }
DOM.CONTAINER.addEventListener('click', afficherCacherGroupes, false); DOM.CONTAINER.addEventListener('click', afficherCacherGroupes, false);
@ -63,6 +30,9 @@ DOM.CONTAINER.addEventListener('click', afficherCacherGroupes, false);
/* GESTION DU DRAG N DROP */ /* GESTION DU DRAG N DROP */
if( document.querySelector('#CONTAINER section[name=movestudents]') != null ){ // si c'set l'admin if( document.querySelector('#CONTAINER section[name=movestudents]') != null ){ // si c'set l'admin
var dnd = new DragnDrop(); var dnd = new DragnDrop();
@ -75,5 +45,27 @@ if( document.querySelector('#CONTAINER section[name=movestudents]') != null ){ /
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(); dnd.init(function(input, output){ // on demande un déplacement
var id_etudiant = input.children[0].innerHTML;
var nom_groupe = output.children[0].innerHTML;
var request = { // on définit la requête pour API
level_0: 'groups',
level_1: 'move',
etudiant: id_etudiant,
groupe: nom_groupe,
semestre: 2,
annee: 2015
};
API.send(request, function(response){ // on gère la réponse de API
if( response.request == 'success' ){
pageM.setPage('groups');
selectSection( document.querySelector('#MENU span[data-link=groups]') );
}
});
});
} }

View File

@ -43,7 +43,7 @@ require_once __ROOT__.'/manager/groups.php';
echo '<thead>'; echo '<thead>';
echo '<tr>'; echo '<tr>';
echo '<th colspan=5>Groupe '.$group->nom.'</th>'; echo '<th colspan=5>Groupe <span>'.$group->nom.'</span></th>';
echo '</tr>'; echo '</tr>';
echo '</thead>'; echo '</thead>';
@ -58,7 +58,9 @@ require_once __ROOT__.'/manager/groups.php';
echo '<tr>'; echo '<tr>';
foreach($user as $key=>$value) foreach($user as $key=>$value)
if( $key == 'prenom' || $key == 'nom' ) if( $key == 'identifiant' )
echo "<td class='hidden'>".$value.'</td>';
elseif( $key == 'prenom' || $key == 'nom' )
echo '<td>'.$value.'</td>'; echo '<td>'.$value.'</td>';
echo '</tr>'; echo '</tr>';
} }
@ -120,7 +122,7 @@ if( $_SESSION['identifiant'] != null && $_SESSION['droits'] == 'student' ){ // s
echo "<table class='basic'>"; echo "<table class='basic'>";
echo "<thead class='active'><tr>"; echo "<thead class='active'><tr>";
echo '<th colspan=5>Groupe '.$monGroupe.'</th>'; echo '<th colspan=5>Groupe <span>'.$monGroupe.'</span></th>';
echo '</tr></thead>'; echo '</tr></thead>';
echo '<tbody>'; echo '<tbody>';
@ -129,7 +131,9 @@ if( $_SESSION['identifiant'] != null && $_SESSION['droits'] == 'student' ){ // s
foreach($answer->userlist as $user){ foreach($answer->userlist as $user){
echo '<tr>'; echo '<tr>';
foreach($user as $key=>$value) foreach($user as $key=>$value)
if( $key == 'prenom' || $key == 'nom' ) if( $key == 'identifiant' )
echo "<td class='hidden'>".$value.'</td>';
elseif( $key == 'prenom' || $key == 'nom' )
echo '<td>'.$value.'</td>'; echo '<td>'.$value.'</td>';
echo '</tr>'; echo '</tr>';
} }
@ -159,11 +163,13 @@ if( $_SESSION['identifiant'] != null && $_SESSION['droits'] == 'student' ){ // s
if( $_SESSION['identifiant'] != null && $_SESSION['droits'] == 'admin' ){ // si l'utilisateur est connecté et que c'est un élève if( $_SESSION['identifiant'] != null && $_SESSION['droits'] == 'admin' ){ // si l'utilisateur est connecté et que c'est un élève
echo "<section name='movestudents' title=\"Déplacements\" class='basic'>"; echo "<section name='movestudents' title=\"Déplacements\" class='basic'>";
for( $i = 2 ; $i <= 2 ; $i++ ){ // pour chaque semestre
$request = new stdClass(); $request = new stdClass();
$answer = new stdClass(); $answer = new stdClass();
$request->level_1 = 'grouplist'; $request->level_1 = 'grouplist';
$request->semestre = $_SESSION['semestre']; $request->semestre = $i;
$request->annee = $_SESSION['annee']; $request->annee = $_SESSION['annee'];
groups_switch_level_1($request, $answer); groups_switch_level_1($request, $answer);
@ -179,7 +185,7 @@ if( $_SESSION['identifiant'] != null && $_SESSION['droits'] == 'admin' ){ // si
echo '<thead>'; echo '<thead>';
echo '<tr>'; echo '<tr>';
echo '<th colspan=5>Groupe '.$group->nom.'</th>'; echo '<th colspan=5>Groupe <span>'.$group->nom.'</span></th>';
echo '</tr>'; echo '</tr>';
echo '</thead>'; echo '</thead>';
@ -194,7 +200,9 @@ if( $_SESSION['identifiant'] != null && $_SESSION['droits'] == 'admin' ){ // si
echo '<tr>'; echo '<tr>';
foreach($user as $key=>$value) foreach($user as $key=>$value)
if( $key == 'prenom' || $key == 'nom' ) if( $key == 'identifiant' )
echo "<td class='hidden'>".$value.'</td>';
elseif( $key == 'prenom' || $key == 'nom' )
echo '<td>'.$value.'</td>'; echo '<td>'.$value.'</td>';
echo '</tr>'; echo '</tr>';
} }
@ -210,6 +218,7 @@ if( $_SESSION['identifiant'] != null && $_SESSION['droits'] == 'admin' ){ // si
//////////////////////////////////////////////////////// ////////////////////////////////////////////////////////
}else }else
echo "Erreur interne..."; echo "Erreur interne...";
}
echo '</section>'; echo '</section>';
} ?> } ?>