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

Passage de l'ensemble des tableaux via la directive

Améliorations de la directive
TODO : Charger une image seulement quand c'est nécessaire
parent 75dcb687
=== JOUEURS ===
=== TABLEAU ===
Mode éditions/ajout
Remettre la fonctionnalité des filtres
Lors de la suppression des ligne ajouter une animation ?
Export des données pour réutilisation future ?
=== EQUIPES ===
Recherche au sein des tableaux
Trier les colonnes d'un tableau
Paginer un tableau
Passage en mode édition lors d'un clic
Rajouter glyph pour les alertes
Ajouter le chargement
=== GENERAL ===
Fonctionnalité de vérification du tournois avant lancement
Faire la documentation
Améliorer le code du controleur joueurEquipe
Rediriger sur l'authentification si la personne ne s'est pas authentifiée
Faire des tests sur apicall
Réorganiser le code par module
......@@ -17,12 +17,49 @@ app.config(function(apicallProvider, urlAPI){
app.controller('EquipesCtrl', ['$scope', '$location', 'apicall', function ($scope, $location, apicall) {
//Gestion des erreurs
$scope.alertes = [];
$scope.fermerAlerte = function(index){
$scope.alertes.splice(index, 1);
};
$scope.methodeMaj = apicall.getEquipes;
$scope.infosEquipes = [
{
nomColonne:'Drapeau',
champs:'URL',
image:true,
triable:false,
filtrable:false,
tailleColonne:1
},
{
nomColonne:'Équipe',
nomTriage:'Équipe',
champs:'NameTeam',
triable:false,
filtrable:true,
tailleColonne:2
},
{
nomTriage:'Points',
nomColonne:'Points',
champs:'Points',
triable:true,
filtrable:false,
tailleColonne:1
}
];
$scope.boutonsEdition = [
{
nom:'Joueurs',
taille:1,
type:'btn-warning',
glyph:'glyphicon-th-list',
fctAssoc: function(equipe){
$location.path('/teams/'+equipe.NameTeam+'/players');
}
}
];
//Récupération des infos equipes
var chargerEquipes = function(){
......@@ -38,25 +75,10 @@ app.controller('EquipesCtrl', ['$scope', '$location', 'apicall', function ($scop
$scope.alertes.push({type : 'danger', msg: 'Impossible de récupérer la liste des equipes (cliquer pour essayer de recharger)'});
});
};
$scope.urlDrapeau = function(drapeau){
var image = drapeau+'.jpg';
return '/images/Drapeau/'+image;
};
$scope.supprimerLigne = function(index){
$scope.equipes.splice(index, 1);
};
// Utiliser $location pour le changement
$scope.listeJoueurs = function(idEquipe){
$location.path('/teams/'+idEquipe+'/players');
};
//Traitements
chargerEquipes();
}]);
......@@ -35,7 +35,7 @@ app.controller('JoueursEquipeCtrl', ['$scope', '$routeParams', 'apicall', functi
nomTriage:'Équipe',
nomColonne:'Équipe',
champs:'Team',
triable:true,
triable:false,
filtrable:false,
tailleColonne:1
},
......
......@@ -14,6 +14,7 @@ angular.module('panelAdminApp')
scope:{
editable:'=',
boutonsEdition:'=',
infos:'=',
attrEntrees:'@',
fctMaj:'&',
......@@ -60,7 +61,12 @@ angular.module('panelAdminApp')
};
$scope.sensTri = false;
$scope.entreeTriSelection = $scope.infos[0];
$scope.entreeTriSelection = $filter('filter')($scope.infos, {triable:true})[0];
$scope.triable = function(){
return $filter('filter')($scope.infos, {triable:true}).length > 0;
};
$scope.selEntreesPage = function(){
......@@ -75,15 +81,21 @@ angular.module('panelAdminApp')
$scope.affichageFiltres = !$scope.affichageFiltres;
};
$scope.tailleFiltres = Math.ceil(($scope.infos.length+$scope.editable)/$filter('filter')($scope.infos, {filtrable:true}).length);
$scope.tailleFiltres = Math.ceil(($scope.infos.length+$scope.editable*2)/$filter('filter')($scope.infos, {filtrable:true}).length);
$scope.filtrable = function(){
return $filter('filter')($scope.infos, {filtrable:true}).length > 0;
};
/* Gestion des entrées */
$scope.entrees = [];
// TODO À détacher lors de la MAJ
// TODO À apeller lors d'un changement de page
$scope.$watch('entrees', function(){
var total = $scope.entrees.length;
var nbSelTotal = $filter('filter')($scope.entrees, {selection:true}).length;
var nbSelPages = $filter('filter')($scope.selEntreesPage(), {selection:true}).length;
$scope.totalElements = total;
......@@ -98,7 +110,7 @@ angular.module('panelAdminApp')
$scope.selectionGlobale = false;
}
$scope.nbSelection = nbSelPages;
$scope.nbSelection = nbSelTotal;
}, true);
......@@ -107,9 +119,9 @@ angular.module('panelAdminApp')
$scope.chargement = true;
supprimerAlertes();
$scope.fctMaj.apply($scope.fctMaj, $scope.paramsMaj).success(function(data){
$scope.fctMaj().apply($scope.fctMaj, $scope.paramsMaj).success(function(data){
$scope.entrees = eval('data.' + $scope.attrEntrees);
$scope.entrees = data[$scope.attrEntrees];
// Ajout d'un booleen selection et edition pour chaque entree
angular.forEach($scope.entrees, function(element, index){
......@@ -225,12 +237,6 @@ angular.module('panelAdminApp')
return res;
};
// On ajuste la sélection globale à chaque changement de page
$scope.$watch('pageCourante.valeur', function(){
// Rien pour le moment
});
// Traitements pour le démarrage
$scope.chargement = true;
......
<div ng-app="panelAdminApp" ng-controller="EquipesCtrl" id="equipes">
<div ng-app="panelAdminApp" ng-controller="EquipesCtrl" id="equipes" class="container-fluid">
<alert role="alert" ng-click="chargerEquipes()" ng-repeat="alerte in alertes" type="{{alerte.type}}" close="fermerAlerte($index)">{{alerte.msg}}</alert>
<tableau editable="true" boutons-edition="boutonsEdition" fct-maj="methodeMaj" infos="infosEquipes" attr-entrees="teams"></tableau>
<div class="panel panel-default">
<table class="table table-striped">
<thead>
<tr>
<th data-field="sexe" class="text-center">Drapeau</th>
<th data-field="nom" class="text-center">Nation</th>
<th data-field="points">Points</th>
<th data-field="edition" class="text-center">Édition</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="equipe in equipes">
<!-- À corriger -->
<td class="col-sm-1 text-center"><span class="glyphicon glyphicon-female"></span><img alt="drapeau_nation" class="drapeau" src="{{urlDrapeau(equipe.NameTeam)}}"/></td>
<td class="col-sm-1 text-center">{{equipe.NameTeam}}</td>
<td class="col-sm-1 text-center">{{equipe.Points}}</td>
<td class="col-sm-3 text-center">
<div class="btn-group" role="group">
<button class="btn btn-xs btn-primary">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Éditer
</button>
<button class="btn btn-xs btn-warning" ng-click="listeJoueurs(equipe.NameTeam)">
<span class="glyphicons glyphicon-th-list" aria-hidden="true"></span> Joueurs
</button>
<button class="btn btn-xs btn-danger" ng-click="supprimerLigne($index)">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Supprimer
</button>
</div>
</td>
</tr>
<tr>
<td colspan="6"><button type="button" ng-click="ajouterEquipe()" class="btn btn-success btn-block">Ajouter une équipe</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="container-joueurs" ng-app="panelAdminApp" ng-controller="JoueursCtrl" class="container-fluid">
<tableau editable="true" fct-maj="methodeMaj()" infos="infosJoueurs" attr-entrees="players"></tableau>
<tableau editable="true" boutons-edition="boutonsEdition" fct-maj="methodeMaj" infos="infosJoueurs" attr-entrees="players"></tableau>
</div>
<div ng-app="panelAdminApp" ng-controller="JoueursEquipeCtrl" id="container-joueurs" class="container-fluid">
<tableau editable="true" fct-maj="methodeMaj()" params-maj="paramsMaj" infos="infosJoueurs" attr-entrees="players"></tableau>
<tableau editable="true" fct-maj="methodeMaj" params-maj="paramsMaj" infos="infosJoueurs" attr-entrees="players"></tableau>
</div>
......@@ -20,7 +20,7 @@
<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()">
<button ng-show="editable" type="button" class="btn btn-success bouton-ajouter-reduit pull-left" ng-click="ajouterJoueur()">
<span class="glyphicon glyphicon-plus"></span>
</button>
......@@ -40,12 +40,12 @@
</div>
<!-- Bouton pour afficher/cacher les filtres du tableau -->
<button type="button" class="btn btn-default pull-right" ng-click="changerAffichageFiltres()" ng-disabled="tableauVide()">
<button type="button" class="btn btn-default pull-right" ng-click="changerAffichageFiltres()" ng-show="filtrable()" ng-disabled="tableauVide()">
<span class="glyphicon glyphicon-filter"></span>
</button>
<!-- Groupe de boutons gérant le tri et son ordination -->
<div class="btn-group container-sort pull-right" role="group">
<div ng-show="triable()" class="btn-group container-sort pull-right" role="group">
<!-- Ordre de tri -->
<button type="button" class="btn btn-default" ng-click="inverserTri()" ng-disabled="!sensTri || tableauVide()">
......@@ -86,7 +86,7 @@
<!-- Entête -->
<thead>
<tr>
<th data-field="checker" class="col-sm-1 vert-align text-center bordure-droite">
<th ng-show="editable" 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 ng-repeat="entree in infos" data-field="{{entree.nomColonne | lowercase}}" class="col-sm-{{entree.tailleColonne}} text-center">{{entree.nomColonne}}</th>
......@@ -111,26 +111,40 @@
</tr>
<tr ng-repeat="entree in entrees | orderBy:entreeTriSelection.champs:sensTri | slice:premiereEntree(false):derniereEntree(false) | filter:recherche">
<td data-title="checker" class="text-center bordure-droite vert-align">
<td data-title="checker" ng-show="editable" class="text-center bordure-droite vert-align">
<span ng-click="selectionnerEntree(entree)" class="glyphicon box-selection" ng-class="{'glyphicon-unchecked':!entree.selection, 'glyphicon-check':entree.selection}"></span>
</td>
<td ng-repeat="info in infos" data-title="info.nomColonne | lowercase" class="text-center vert-align">
{{$eval('entree.'+ info.champs)}}
<!-- URL d'image ou texte ? -->
<img ng-show="info.image" src="{{entree[info.champs]}}" alt="{{info.nomColonne | lowercase}}" height="30" width="50"/>
<span ng-hide="info.image">{{entree[info.champs]}}</span>
</td>
<td data-title="edition" ng-show="editable" class="text-center vert-align">
<div class="btn-group" role="group">
<button class="btn btn-xs btn-primary">
<!-- Bouton éditer -->
<button ng-click="editerEntree(entree)" class="btn btn-xs btn-primary">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Éditer
</button>
<button class="btn btn-xs btn-danger" ng-click="supprimerEntree(entree)">
<!-- Boutons optionnels -->
<button ng-repeat="bouton in boutonsEdition" ng-click="bouton.fctAssoc(entree)" class="btn btn-xs {{bouton.type}}">
<span class="glyphicon {{bouton.glyph}}" aria-hidden="true"></span> {{bouton.nom}}
</button>
<!-- Bouton supprimer -->
<button ng-click="supprimerEntree(entree)" class="btn btn-xs btn-danger">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Supprimer
</button>
</div>
</td>
</tr>
<tr>
<tr ng-show="editable">
<td colspan="{{infos.length+editable+1}}">
<button type="button" ng-click="ajouterJoueur()" class="btn btn-success btn-block">
<span class="glyphicon glyphicon-plus"></span> Ajouter un joueur
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment