Commit 59a86a28 authored by El-gitano's avatar El-gitano

Intégration des modals dans la directive tableau

Simplification des appels à l'API
Ajout d'un filtre pour gérer les différences entre les attributs des entrées reçues et à envoyer
Corrections mineures dans la directive tableau
Interception des requêtes et réponses HTTP pour gérer l'authentification automatique et la redirection au besoin + ajout du token dans les requêtes d'édition de la BDD
Modification des modals pour un design responsive + intégration avec la directive tableau
	Ajout de controlleurs dans ce but
parent 16e1295f
=== TABLEAU ===
Ajouter un titre
Rajouter export CSV
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 ?
Gérer le bouton de supression multiple (avec possibilité de mettre du texte à la place d'un bouton)
Gérer les alertes correctement (via un service)
Lors de l'édition d'une date, celle-ci est affiché de manière étrange dans le tableau (pas urgent)
=== MODALS ===
Pré-sélectionner une date de calendrier (par défaut aujourd'hui) dans l'ajout d'un joueur
Rajouter les vérifications des formulaires
Pour l'édition des équipes, rétablir une copie de l'entrée si le modal est "dismissed" (voir joueur pour modèle)
Pour l'édition des joueurs, passer le filtrage de la date dans un $watch pour éviter une entrée bizarre dans le tableau (voir TODO tableau)
=== JOUEURS ÉQUIPE ===
Faire les modifications pour les modals (comme pour joueurs.js)
=== JOUEURS & JOUEURS ÉQUIPES & ÉQUIPES ===
Gérer les modifications du tableau après appel à l'API
=== INTERCEPTEUR HTTP ===
Voir avec Matthias comment gérer le token avec la méthode DELETE
=== AUTHENTIFICATION ===
En cas de redirection vers l'authentification, revenir à l'URL précédent après la connexion
=== GENERAL ===
Authentification automatique
Rajouter AceCream dans l'entête de page
Fonctionnalité de vérification du tournois avant lancement
Faire la documentation
Rediriger sur l'authentification si la personne ne s'est pas authentifiée
Faire des tests sur apicall
Réorganiser le code par module
Entrepôt de données
Faire des tests
<!-- Page Joueur & Joueur / Equipe-->
<div style="display:inline-block;" ng-app="panelAdminApp" ng-controller="EditerJoueurCtrl">
<button ng-click="chargerEquipesListe();open()" class="btn btn-xs btn-primary">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Éditer
</button>
</div>
<div style="display:inline-block;" ng-app="panelAdminApp" ng-controller="SupprimerJoueurCtrl">
<button class="btn btn-xs btn-danger" ng-click="open()">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Supprimer
</button>
</div>
<div ng-app="panelAdminApp" ng-controller="AjoutJoueurCtrl">
<button type="button" ng-click="chargerEquipesListe();chargerTeam();open()" class="btn btn-success btn-block btn-default">
<span class="glyphicon glyphicon-plus"></span> Ajouter un joueur
</button>
</div>
<!-- Page Equipe -->
<div style="display:inline-block;" ng-app="panelAdminApp" ng-controller="EditerEquipeCtrl">
<button ng-click="chargerEquipesListe();open()" class="btn btn-xs btn-primary">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Éditer
</button>
</div>
<div style="display:inline-block;" >
<button class="btn btn-xs btn-warning" ng-click="listeJoueurs(equipe.NameTeam)">
<span class="glyphicons glyphicon-th-list" aria-hidden="true"></span> Joueurs
</button>
</div>
<div style="display:inline-block;" ng-app="panelAdminApp" ng-controller="SupprimerEquipeCtrl">
<button class="btn btn-xs btn-danger" ng-click="open()">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Supprimer
</button>
</div>
<div ng-app="panelAdminApp" ng-controller="AjoutEquipeCtrl">
<button type="button" ng-click="open()" class="btn btn-success btn-block btn-default">
<span class="glyphicon glyphicon-plus"></span> Ajouter une équipe
</button>
</div>
\ No newline at end of file
'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');
}
};
});
......@@ -76,12 +76,10 @@
<script src="scripts/controllers/joueursEquipe.js"></script>
<script src="scripts/controllers/equipes.js"></script>
<script src="scripts/controllers/joueurs.js"></script>
<script src="scripts/controllers/ajoutJoueur.js"></script>
<script src="scripts/controllers/editerJoueur.js"></script>
<script src="scripts/controllers/supprimerJoueur.js"></script>
<script src="scripts/controllers/ajoutEquipe.js"></script>
<script src="scripts/controllers/editerEquipe.js"></script>
<script src="scripts/controllers/supprimerEquipe.js"></script>
<script src="scripts/controllers/modal/ajoutJoueur.js"></script>
<script src="scripts/controllers/modal/ajoutEquipe.js"></script>
<script src="scripts/controllers/modal/ajoutJoueurEquipe.js"></script>
<script src="scripts/controllers/modal/editerEquipe.js"></script>
<script src="scripts/services/apicall.js"></script>
<script src="scripts/directives/chargement.js"></script>
<script src="scripts/filters/slice.js"></script>
......@@ -90,6 +88,10 @@
<script src="scripts/directives/chargementligne.js"></script>
<script src="scripts/services/intercepteurhttpreponses.js"></script>
<script src="scripts/directives/tableau.js"></script>
<script src="scripts/controllers/modal/modalinstance.js"></script>
<script src="scripts/controllers/modal/editjoueur.js"></script>
<script src="scripts/services/valeurs.js"></script>
<script src="scripts/filters/assocfilter.js"></script>
<!-- endbuild -->
<!-- Ajouts persos -->
......
......@@ -6,83 +6,43 @@
* @description
* Module principal de l'application. Se charge de gérer les vues et controleurs a utiliser en fonction de la route
*/
angular.module('panelAdminApp', [], function($httpProvider) {
// Use x-www-form-urlencoded Content-Type
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
$httpProvider.interceptors.push('intercepteurHttpReponses');
/**
* The workhorse; converts an object to x-www-form-urlencoded serialization.
* @param {Object} obj
* @return {String}
*/
var param = function(obj) {
var query = '', name, value, fullSubName, subName, subValue, innerObj, i;
for(name in obj) {
value = obj[name];
if(value instanceof Array) {
for(i=0; i<value.length; ++i) {
subValue = value[i];
fullSubName = name + '[' + i + ']';
innerObj = {};
innerObj[fullSubName] = subValue;
query += param(innerObj) + '&';
}
}
else if(value instanceof Object) {
for(subName in value) {
subValue = value[subName];
fullSubName = name + '[' + subName + ']';
innerObj = {};
innerObj[fullSubName] = subValue;
query += param(innerObj) + '&';
}
}
else if(value !== undefined && value !== null)
query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
}
return query.length ? query.substr(0, query.length - 1) : query;
};
// Override $http service's default transformRequest
$httpProvider.defaults.transformRequest = [function(data) {
return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
}];
});
angular
.module('panelAdminApp', ['ngRoute', 'ui.bootstrap'])
.config(['$routeProvider', '$httpProvider', function ($routeProvider, $httpProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/authentification', {
templateUrl: 'views/authentification.html',
controller: 'AuthentificationCtrl'
})
.when('/equipes', {
templateUrl: 'views/equipes.html',
controller: 'EquipesCtrl'
})
.when('/joueurs', {
templateUrl: 'views/joueurs.html',
controller: 'JoueursCtrl'
})
.when('/ajouterJoueur', {
templateUrl: 'views/ajouterJoueur.html',
controller: 'AjouterJoueurCtrl'
})
.when('/teams/:idEquipe/players', {
templateUrl: 'views/joueursEquipe.html',
controller: 'JoueursEquipeCtrl'
})
// Redirection vers l'authentification en cas de page non-gérée
.otherwise({
templateUrl: 'views/authentification.html',
controller: 'AuthentificationCtrl'
});
.module('panelAdminApp', ['ngRoute', 'ui.bootstrap'])
.config(['$routeProvider', '$httpProvider', 'apicallProvider', 'urlAPI', function ($routeProvider, $httpProvider, apicallProvider, urlAPI) {
apicallProvider.setUrl(urlAPI);
// Vérification du code de retour de l'API
$httpProvider.interceptors.push('intercepteurHttpReponses');
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/authentification', {
templateUrl: 'views/authentification.html',
controller: 'AuthentificationCtrl'
})
.when('/equipes', {
templateUrl: 'views/equipes.html',
controller: 'EquipesCtrl'
})
.when('/joueurs', {
templateUrl: 'views/joueurs.html',
controller: 'JoueursCtrl'
})
.when('/ajouterJoueur', {
templateUrl: 'views/ajouterJoueur.html',
controller: 'AjouterJoueurCtrl'
})
.when('/teams/:idEquipe/players', {
templateUrl: 'views/joueursEquipe.html',
controller: 'JoueursEquipeCtrl'
})
// Redirection vers l'authentification en cas de page non-gérée
.otherwise({
templateUrl: 'views/authentification.html',
controller: 'AuthentificationCtrl'
});
}]);
'use strict';
var app = angular.module('panelAdminApp');
//Configuration du service d'appel à l'API
app.config(function(apicallProvider, urlAPI){
apicallProvider.setUrl(urlAPI);
});
app.controller('AjoutEquipeCtrl', ['$scope','$modal','$log', 'apicall', function ($scope, $modal, $log, apicall) {
$scope.items = {name:'', points:'', drapeau:''};
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'views/ajoutEquipe.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function () {
$log.info('Object envoyé au serveur :', $scope.items);
// ajout du joueur
apicall.addEquipe($scope.items)
.success(function(data){
$log.info(data);
// if(data.code == -1){$scope.alertes.push({type : 'danger', msg: 'Création du joueur impossible : Mauvais paramètres'});}
// else if(data.code == 0){$scope.alertes.push({type : 'success', msg: 'Création du joueur réussie'});}
// else if(data.code == -2){$scope.alertes.push({type : 'danger', msg: 'Création du joueur impossible : Database error'});}
// else{$scope.alertes.push({type : 'danger', msg: 'Création du joueur impossible : API error'});}
$scope.chargerEquipes();
})
.error(function(){$scope.alertes.push({type : 'danger', msg: 'Impossible de créer une équipe'});
});
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
}]);
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
angular.module('ui.bootstrap').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items=items;
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
\ No newline at end of file
'use strict';
var app = angular.module('panelAdminApp');
//Configuration du service d'appel à l'API
app.config(function(apicallProvider, urlAPI){
apicallProvider.setUrl(urlAPI);
});
app.controller('AjoutJoueurCtrl', ['$scope','$modal','$log', 'apicall', function ($scope, $modal, $log, apicall) {
$scope.items = {name:'', firstname:'', sex:'', birthdate:'', team:'', list:[]};
$scope.chargerTeam = function() {
$scope.items = {name:'', firstname:'', sex:'', birthdate:'', team:$scope.joueursEquipe[0].Team, list:[]};
}
//Récupération de la liste des equipes
$scope.chargerEquipesListe = function() {
apicall.getEquipes().success(function(data){
$scope.items.list = data.teams;
$log.info($scope.items.list);
}).error(function(){
$scope.alertes.push({type : 'danger', msg: 'Impossible de récupérer la liste des equipes (cliquer pour essayer de recharger)'});
});
};
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'views/ajoutJoueur.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function () {
var perso = {};
jQuery.extend(perso,$scope.items);
delete perso.list;
$log.info('Object envoyé au serveur :', perso);
// ajout du joueur
apicall.addJoueurs(perso)
.success(function(data){
$log.info(data);
// if(data.code == -1){$scope.alertes.push({type : 'danger', msg: 'Création du joueur impossible : Mauvais paramètres'});}
// else if(data.code == 0){$scope.alertes.push({type : 'success', msg: 'Création du joueur réussie'});}
// else if(data.code == -2){$scope.alertes.push({type : 'danger', msg: 'Création du joueur impossible : Database error'});}
// else{$scope.alertes.push({type : 'danger', msg: 'Création du joueur impossible : API error'});}
$scope.chargerJoueurs();
})
.error(function(){$scope.alertes.push({type : 'danger', msg: 'Impossible de créer un joueur (cliquer pour essayer de recharger)'});
});
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
}]);
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
angular.module('ui.bootstrap').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items=items;
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
\ No newline at end of file
'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');
}
};
});
......@@ -8,20 +8,28 @@
* Controller of the panelAdminApp
*/
angular.module('panelAdminApp')
.controller('AuthentificationCtrl', function ($scope) {
.controller('AuthentificationCtrl', ['$scope', '$log', 'apicall', 'infosConnexion', function ($scope, $log, apicall, infosConnexion) {
/* Gestion des alertes */
$scope.alertes = [];
$scope.lancerConnexion = function(){
$scope.alertes.push({type : 'info', msg: 'Connexion en cours'});
$scope.alertes.push({type : 'success', msg: 'Authentification réussie'});
$scope.alertes.push({type : 'danger', msg: 'Authentification échouée'});
apicall.authentification(infosConnexion).success(function(donnees){
$log.info('Connexion réussie');
infosConnexion.token = donnees.token;
}).error(function(){
$log.info('Connexion échouée');
})
};
$scope.fermerAlerte = function(index){
$scope.alertes.splice(index, 1);
};
});
$scope.infosConnexion = infosConnexion;
}]);
'use strict';
var app = angular.module('panelAdminApp');
//Configuration du service d'appel à l'API
app.config(function(apicallProvider, urlAPI){
apicallProvider.setUrl(urlAPI);
});
app.controller('EditerEquipeCtrl', ['$scope','$modal','$log', 'apicall', function ($scope, $modal, $log, apicall) {
$scope.items = {name:$scope.equipe.NameTeam, points:$scope.equipe.Points, drapeau:$scope.equipe.URL};
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'views/editerEquipe.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function () {
$log.info('Object envoyé au serveur :', $scope.items);
// ajout du joueur
apicall.setEquipe($scope.items)
.success(function(data){
$log.info(data);
// if(data.code == -1){$scope.alertes.push({type : 'danger', msg: 'Création du joueur impossible : Mauvais paramètres'});}
// else if(data.code == 0){$scope.alertes.push({type : 'success', msg: 'Création du joueur réussie'});}
// else if(data.code == -2){$scope.alertes.push({type : 'danger', msg: 'Création du joueur impossible : Database error'});}
// else{$scope.alertes.push({type : 'danger', msg: 'Création du joueur impossible : API error'});}
$scope.chargerEquipes();
})
.error(function(){$scope.alertes.push({type : 'danger', msg: 'Impossible de créer un joueur (cliquer pour essayer de recharger)'});
});
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
}]);
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
angular.module('ui.bootstrap').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items=items;
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
\ No newline at end of file
'use strict';
var app = angular.module('panelAdminApp');
//Configuration du service d'appel à l'API
app.config(function(apicallProvider, urlAPI){
apicallProvider.setUrl(urlAPI);
});
app.controller('EditerJoueurCtrl', ['$scope','$modal','$log', 'apicall', function ($scope, $modal, $log, apicall) {
$scope.items = {name:$scope.joueur.Name, firstname:$scope.joueur.FirstName, sex:$scope.joueur.Sex, birthdate:$scope.joueur.DateBirth, team:$scope.joueur.Team, list:[]};
//Récupération de la liste des equipes
$scope.chargerEquipesListe = function() {
apicall.getEquipes().success(function(data){
$scope.items.list = data.teams;
$log.info($scope.teams);
}).error(function(){
$scope.alertes.push({type : 'danger', msg: 'Impossible de récupérer la liste des equipes (cliquer pour essayer de recharger)'});
});
};
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'views/editerJoueur.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function () {
var perso = {};
jQuery.extend(perso,$scope.items);
delete perso.list;
$log.info('Object envoyé au serveur :', perso);
apicall.setJoueurs(perso).success(function(data){
$log.info(data);
$scope.chargerJoueurs();
}).error(function(){
$scope.alertes.push({type : 'danger', msg: 'Impossible de modifier un joueur (cliquer pour essayer de recharger)'});
});
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
}]);
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
angular.module('ui.bootstrap').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {