Commit bdad2e31 authored by El-gitano's avatar El-gitano

Modifications de la page joueurs en attendant la création d'une directive tableau

parent 113ee4cf
'use strict';
/**
* @ngdoc directive
* @name appApp.directive:tableau
* @description
* # tableau
*/
angular.module('appApp')
.directive('tableau', function () {
return {
template: '<div></div>',
restrict: 'E',
link: function postLink(scope, element, attrs) {
element.text('this is the tableau directive');
}
};
});
......@@ -86,6 +86,7 @@
<script src="scripts/directives/chargementligne.js"></script>
<script src="scripts/filters/joueurselectionnes.js"></script>
<script src="scripts/services/intercepteurhttpreponses.js"></script>
<script src="scripts/directives/tableau.js"></script>
<!-- endbuild -->
<!-- Ajouts persos -->
......
'use strict';
/**
* @ngdoc directive
* @name controllersApp.directive:tableau
* @description
* # tableau
*/
angular.module('controllersApp')
.directive('tableau', function () {
return {
template: '<div></div>',
restrict: 'E',
link: function postLink(scope, element, attrs) {
element.text('this is the tableau directive');
}
};
});
......@@ -9,26 +9,40 @@
*/
var app = angular.module('panelAdminApp');
//Configuration du service d'appel à l'API
app.config(function(apicallProvider, urlAPI){
apicallProvider.setUrl(urlAPI);
// Configuration du service d'appel à l'API
app.config(function($logProvider, apicallProvider, urlAPI){
apicallProvider.setUrl(urlAPI);
$logProvider.debugEnabled(false);
});
app.controller('JoueursCtrl', ['$scope', '$routeParams', '$filter', '$log', 'apicall', function ($scope, $routeParams, $filter, $log, apicall) {
// Gestion des alertes
/* Gestion des alertes */
$scope.alertes = [];
$scope.fermerAlerte = function(index){
$log.debug('Supression d\'une alerte dans le tableau des alertes');
$scope.alertes.splice(index, 1);
};
//Gestion des éléments pour le triage
var supprimerAlertes = function(){
$scope.alertes = [];
};
var ajouterAlerte = function(type, message){
$log.debug('Ajout d\'une alerte dans le tableau des alertes');
$scope.alertes.push({type : 'alert-'+type, msg: message});
};
/* Gestion des éléments pour le triage */
$scope.entreesTri = [
{id: 'IdPlayer', nom: 'Id'},
{id: 'Team', nom: 'Nationalité'},
{id: 'Team', nom: 'Équipe'},
{id: 'Name', nom: 'Nom'},
{id: 'FirstName', nom: 'Prénom'},
{id: 'Sex', nom: 'Sexe'},
......@@ -45,63 +59,49 @@ app.controller('JoueursCtrl', ['$scope', '$routeParams', '$filter', '$log', 'api
$scope.entreeTriSelection = entree.nom;
};
//Gestion de la pagination
$scope.entreesPages = [10, 20, 30, 40, 50];
$scope.choixEntreesPages = $scope.entreesPages[0];
$scope.pageCourante = 1;
$scope.changerEntreesPage = function(entree){
$scope.choixEntreesPages = entree;
};
$scope.premiereEntree = function(){
return ($scope.pageCourante-1)*$scope.choixEntreesPages + ($scope.totalElements !== 0);
};
$scope.derniereEntree = function(){
var dern = $scope.pageCourante*$scope.choixEntreesPages;
if(dern < $scope.totalElements){
return dern;
}
else{
return dern-(dern-$scope.totalElements);
}
};
//Gestion des filtres du tableau
/* Gestion des filtres du tableau */
$scope.affichageFiltres = false;
// Gestion des joueurs
$scope.chargerJoueurs = function(){
/* Gestion des joueurs */
$scope.totalElements = 0;
$scope.joueurs = [];
$scope.chargerJoueursEquipe = function(){
$scope.chargement = true;
supprimerAlertes();
$scope.selectionGlobale = false;
$scope.nbSelection = 0;
apicall.getJoueurs().success(function(data){
$scope.joueurs = data.players;
$scope.totalElements = $scope.joueurs.length;
// Ajout d'un booleen selection et edition pour chaque joueur
for(var joueur in $scope.joueurs){
joueur.selection = false;
joueur.chargement = false;
}
$scope.chargement = false; // Placé ici car fonction asynchrone
}).error(function(){
$scope.alertes.push({type : 'danger', msg: 'Impossible de récupérer la liste des joueurs (cliquer pour essayer de recharger)'});
ajouterAlerte('danger', 'Impossible de récupérer la liste des joueurs de l\'équipe (cliquez sur actualiser pour essayer de recharger)');
$scope.joueurs = [];
$scope.totalElements = 0;
$scope.chargement = false;
});
$scope.chargement = false;
};
// Supprime une ligne (donc un joueur) dans le tableau
$scope.supprimerJoueur = function(idJoueur){
//$scope.joueurs[index].spin = true;
//Attendre 0.5 secondes
//Recherche du joueur
// Recherche du joueur
var index = $filter('joueurParId')($scope.joueurs, idJoueur);
if(index === null){
......@@ -110,26 +110,161 @@ app.controller('JoueursCtrl', ['$scope', '$routeParams', '$filter', '$log', 'api
return;
}
$log.debug('Supression du joueur avec Id = ' + index);
$log.debug('Supression du joueur avec Id = ' + idJoueur);
// Modification de la sélection
if($scope.joueurs[index].selection){
$scope.nbSelection--;
}
$scope.joueurs.splice(index, 1);
$scope.joueurs.splice(index, [1]);
$scope.totalElements--;
//Animation ?
// Animation ?
};
// Lance l'appel à l'API pour l'ajout d'un joueur
$scope.ajouterJoueur = function(){
/* Gestion des sélections */
$scope.selectionGlobale = false;
$scope.nbSelection = 0;
// Sélectionne/Déselectionne tous les joueurs de la page actuelle du tableau et change le nombre de joueurs sélectionné
$scope.changerSelectionGlobale = function(){
$log.debug('Changement de sélection globale');
$scope.selectionGlobale = !$scope.selectionGlobale;
var debut = $scope.premiereEntree()-1;
var fin = $scope.derniereEntree();
var joueursTries = $filter('filter')($filter('orderBy')($scope.joueurs, $scope.colonneTri, $scope.inverserTri), $scope.recherche);
for(var i=debut; i<fin; i++){
// Changement du nombre d'éléments sélectionnés
if(joueursTries[i].selection && !$scope.selectionGlobale){
$scope.nbSelection--;
}
else if(!joueursTries[i].selection && $scope.selectionGlobale){
$scope.nbSelection++;
}
joueursTries[i].selection = $scope.selectionGlobale;
}
};
// Sélectionne/Déselectionne un joueur et change le nombre de joueurs sélectionné
$scope.selectionnerJoueur = function(joueur){
var changement = !joueur.selection;
joueur.selection = changement;
if(changement){
$scope.nbSelection++;
}
else{
$scope.nbSelection--;
}
};
// Supprime l'ensemble des joueurs sélectionnés
$scope.supprimerSelection = function(){
var selectJoueurs = $filter('joueurSelectionnes')($scope.joueurs);
$log.debug('Id des joueurs à supprimer : ' + selectJoueurs.toString());
for(var i=0; i<selectJoueurs.length; i++){
$scope.supprimerJoueur(selectJoueurs[i]);
}
};
//Ajoute une ligne dan le tableau en vue de l'ajouter à la BDD via la fonction ajouterJoueur()
// À définir
$scope.ajouterJoueur = function(){
};
// Ajoute une ligne dan le tableau en vue de l'ajouter à la BDD via la fonction ajouterJoueur()
$scope.ajouterLigne = function(){
};
/* Gestion de la pagination */
$scope.pagination = {
entreesPages : [
{nom:'10', valeur:10},
{nom:'20', valeur:20},
{nom:'30', valeur:30},
{nom:'40', valeur:40},
{nom:'50', valeur:50}
],
choixEntreesPages : 0, // Index du tableau entreesPages
pageCourante : 1
};
$scope.changerEntreesPage = function(entree){
$log.debug('Changement du nombre d\'entrées/page pour l\'indice ' + entree + ' du tableau entreesPages');
$scope.pagination.choixEntreesPages = entree;
};
// Récupère l'indice de la première entrée à afficher dans le tableau
$scope.premiereEntree = function(){
return ($scope.pagination.pageCourante-1)*$scope.pagination.entreesPages[$scope.pagination.choixEntreesPages].valeur + ($scope.totalElements !== 0);
};
// Récupère l'indice de la dernière entrée à afficher dans le tableau
$scope.derniereEntree = function(){
var dern = $scope.pagination.pageCourante*$scope.pagination.entreesPages[$scope.pagination.choixEntreesPages].valeur;
$log.debug(dern);
if(dern < $scope.totalElements){
return dern;
}
else{
return dern-(dern-$scope.totalElements);
}
};
// On ajuste la sélection globale à chaque changement de page
$scope.$watch('pagination.pageCourante', function(){
var debut = $scope.premiereEntree();
var fin = $scope.derniereEntree();
var joueursTries = $filter('filter')($filter('orderBy')($scope.joueurs, $scope.colonneTri, $scope.inverserTri), $scope.recherche);
// Les indices sont équivalant à premiereEntree()-1 si il y a des entrées
if(debut){
debut--;
}
//$log.debug('Debut :' + debut + '- fin : ' + fin);
$scope.selectionGlobale = (debut !== fin);
for(var i=debut; i<fin; i++){
if(!joueursTries[i].selection){
$scope.selectionGlobale = false;
break;
}
}
});
// Traitements pour le démarrage
$scope.chargerJoueurs();
$scope.chargement= true;
$scope.chargerJoueursEquipe();
}]);
......@@ -10,10 +10,10 @@
var app = angular.module('panelAdminApp');
// Configuration du service d'appel à l'API
app.config(function($httpProvider, $logProvider, apicallProvider, urlAPI){
app.config(function($logProvider, apicallProvider, urlAPI){
apicallProvider.setUrl(urlAPI);
$logProvider.debugEnabled(true);
$logProvider.debugEnabled(false);
});
app.controller('JoueursEquipeCtrl', ['$scope', '$routeParams', '$filter', '$log', 'apicall', function ($scope, $routeParams, $filter, $log, apicall) {
......
'use strict';
describe('Directive: tableau', function () {
// load the directive's module
beforeEach(module('controllersApp'));
var element,
scope;
beforeEach(inject(function ($rootScope) {
scope = $rootScope.$new();
}));
it('should make hidden element visible', inject(function ($compile) {
element = angular.element('<tableau></tableau>');
element = $compile(element)(scope);
expect(element.text()).toBe('this is the tableau directive');
}));
});
'use strict';
/**
* @ngdoc directive
* @name panelAdminApp.directive:tableau
* @description Directive définissant un tableau éditable à plusieurs entrées
* # tableau
*/
angular.module('panelAdminApp')
.directive('tableau', function () {
return {
scope:{},
templateUrl: 'tableau.html',
restrict: 'E',
compile: function compile(tElement, tAttributs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) { i=1; },
post: function postLink(scope, iElement, iAttrs, controller) { i=1; }
}
}
};
});
......@@ -11,8 +11,6 @@
angular.module('panelAdminApp')
.filter('slice', function () {
return function (entree, debut, fin) {
return (entree || []);
// Ne fonctionne pas, je commente pour travailler à côté
//return (entree || []).slice(debut, fin);
return (entree || []).slice(debut, fin+1);
};
});
......@@ -42,10 +42,10 @@ angular.module('panelAdminApp').
};
// Création d'un joueur
this.AddJoueurs = function(object){
this.AddJoueurs = function(object){
return $http.post(url + '/players', object);
};
return $http.post(url + '/players', object);
};
// Récupération des informations sur les courts
this.getCourts = function(){
......
'use strict';
describe('Directive: tableau', function () {
// load the directive's module
beforeEach(module('appApp'));
var element,
scope;
beforeEach(inject(function ($rootScope) {
scope = $rootScope.$new();
}));
it('should make hidden element visible', inject(function ($compile) {
element = angular.element('<tableau></tableau>');
element = $compile(element)(scope);
expect(element.text()).toBe('this is the tableau directive');
}));
});
<div ng-app="panelAdminApp" ng-controller="JoueursCtrl" id="container-joueurs">
<div ng-app="panelAdminApp" ng-controller="JoueursCtrl" id="container-joueurs" class="container-fluid">
<alert role="alert" ng-click="test()" ng-repeat="alerte in alertes" type="{{alerte.type}}" close="fermerAlerte($index)">{{alerte.msg}}</alert>
<!-- Ligne pour les alertes -->
<div class="row">
<div ng-repeat="alerte in alertes" class="alert alert-dismiss {{alerte.type}}" role="alert">
<span class="glyphicon glyphicon-exclamation-sign"></span>
{{alerte.msg}}
<button type="button" class="close" ng-click="fermerAlerte($index)" aria-label="Close">
<span> &times; </span>
</button>
</div>
</div>
<div>
<!-- Pagination haut -->
<div class="text-center">
<pagination total-items="totalElements" ng-model="pageCourante" items-per-page="choixEntreesPages" max-size="5" rotate="false" boundary-links="true" previous-text="Précédente" next-text="Suivante" first-text="Première" last-text="Dernière"></pagination>
<!-- Pagination haute -->
<div chargement="chargement">
<div class="row text-center">
<pagination total-items="totalElements" ng-model="pagination.pageCourante" items-per-page="pagination.entreesPages[pagination.choixEntreesPages].valeur" max-size="5" rotate="false" boundary-links="true" previous-text="Précédente" next-text="Suivante" first-text="Première" last-text="Dernière"></pagination>
</div>
<!-- Ligne de gestion du tri des données -->
<div id="sort-container" class="container-fluid container-infotab">
<!-- Ligne chargée de gérer les options et filtres du tableau -->
<div class="row ligne-filtres">
<!-- Bouton ajouter joueur (format compact) -->
<button type="button" class="btn btn-success bouton-ajouter-reduit pull-left" ng-click="ajouterJoueur()">
<span class="glyphicon glyphicon-plus"></span>
</button>
<!-- Bonton et texte de selection du nombre d'entrées par page -->
<!-- Texte et bouton de selection du nombre d'entrées par page -->
<div class="pull-left">
<div class="btn-group" dropdown>
<button type="button" class="btn btn-default btn-sm dropdown-toggle" ng-disabled="totalElements === 0" dropdown-toggle>
{{choixEntreesPages}} <span class="caret"></span>
<button type="button" class="btn btn-default dropdown-toggle" ng-disabled="totalElements === 0" dropdown-toggle>
<span class="bouton-ePages">{{pagination.entreesPages[pagination.choixEntreesPages].nom}}</span><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="entree in entreesPages">
<a href="" ng-click="changerEntreesPage(entree)">{{entree}}</a>
<li ng-repeat="entree in pagination.entreesPages">
<a href="" ng-click="changerEntreesPage($index)">{{entree.nom}}</a>
</li>
</ul>
</div>
entrées/page
</div>
<!-- Bouton pour afficher/cacher les filtres du tableau -->
<button type="button" class="btn btn-default pull-right" ng-click="affichageFiltres = !affichageFiltres" ng-disabled="totalElements === 0">
<span class="glyphicon glyphicon-filter"></span>
</button>
<!-- Boutons gérant le tri -->
<div class="btn-group container-sort pull-right" role="group">
<!-- Groupe de boutons gérant le tri et son ordination -->
<div class="btn-group container-sort pull-right" role="group">
<!-- Ordre de tri -->
<button type="button" class="btn btn-default" ng-click="inverserTri = !inverserTri" ng-disabled="!inverserTri || totalElements === 0">
<span class="glyphicon glyphicon-sort-by-attributes">
</button>
<button type="button" class="btn btn-default" ng-click="inverserTri = !inverserTri" ng-disabled="inverserTri || totalElements === 0">
<span class="glyphicon glyphicon-sort-by-attributes-alt">
</button>
<!-- Colonne de tri -->
<div class="btn-group bouton-sort" dropdown>
<button type="button" class="btn btn-default btn-block dropdown-toggle" dropdown-toggle ng-disabled="totalElements === 0">
......@@ -57,80 +72,107 @@
</ul>
</div>
</div>
<!-- Bouton actualiser -->
<button type="button" class="btn btn-default pull-right bouton-actualiser" ng-click="chargerJoueurs()" ng-disabled="chargement">
<button type="button" class="btn btn-default pull-right bouton-actualiser" ng-click="chargerJoueursEquipe()" ng-disabled="chargement">
<span class="glyphicon glyphicon-refresh"></span>
</button>
</div>
<!-- Tableau -->
<div class="container-fluid">
<div class="panel panel-default">
<table class="table table-striped table-responsive">
<div class="row">
<div class="panel panel-default table-responsive">
<table class="table table-striped">
<!-- Entête -->
<thead>
<tr>
<th data-field="id" class="text-center">#</th>
<th data-field="nationalite">Équipe</th>
<th data-field="nom">Nom</th>
<th data-field="prenom">Prénom</th>
<th data-field="sexe" class="text-center">Sexe</th>
<th data-field="sexe" class="text-center">Date naissance</th>
<th class="text-center">Édition</th>
<th data-field="checker" class="col-sm-1 vert-align text-center bordure-droite">
<span ng-click="changerSelectionGlobale()" class="glyphicon box-selection" ng-class="{'glyphicon-unchecked':!selectionGlobale, 'glyphicon-check':selectionGlobale}"></span>
</th>
<th data-field="id" class="col-sm-1 text-center">#</th>
<th data-field="equipe" class="col-sm-1 text-center">Équipe</th>
<th data-field="nom" class="col-sm-1 text-center">Nom</th>
<th data-field="prenom" class="col-sm-2 text-center">Prénom</th>
<th data-field="sexe" class="col-sm-1 text-center">Sexe</th>
<th data-field="dNaiss" class="col-sm-2 text-center">Date naissance</th>
<th data-field="edition" class="col-sm-2 text-center text-center">
<button class="btn btn-xs btn-danger" ng-disabled="nbSelection == 0" ng-click="supprimerSelection()">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Supprimer {{nbSelection}} joueurs
</button>
</th>
</tr>
<tr ng-show="affichageFiltres">
<th class="col-sm-6" colspan="4">
<input class="form-control" type="text" placeholder="Rechercher un nom" ng-model="recherche.Name" focus-on="affichageFiltres"/>
</th>
<th class="col-sm-6" colspan="3">
<th class="col-sm-6" colspan="4">
<input class="form-control" type="text" placeholder="Rechercher un prénom" ng-model="recherche.FirstName"/>
</th>
</tr>
</thead>
<!-- Corps -->
<tbody>
<tr class="text-center vert-align" ng-show="totalElements === 0">
<td colspan="7">Aucune entrée !</td>
<td colspan="8">Aucune entrée !</td>