[Labos] Anciens Labos

Introduction


Je conserve ici mes anciens Labos . Comme leurs noms l’indiquent, ce sont des labos destinés à tester des fonctionnalités, ils ne respectent pas forcément les design pattern ou les bonnes pratiques.

Lire la suite

[AngularJs] Une maquette d’application Weathermap, en 3 heures de temps.

Introduction

logo


On m’a demandé de faire l’app suivante :

Using the OpenWeatherMap API (http://www.openweathermap.com/current), build a Weather
Dashboard webApp using AngularJS.
The App should have two pages :
● The “Home” page, displaying the list of the user’s weather widgets.
○ Each widget displays the name of the city, the current temperature in celsius and
an icon of the weather (http://erikflowers.github.io/weather-icons/)
● The “Settings” page, used to edit the content of the “Home” page.
○ The user can Add, Remove weather widgets.
You are free to increase the features and create the design.

Technologies utilisées :


  • AngularJs 1.5.1
  • Bootstrap 3.0
  • AngularUi
  • Openweather Map Api pour AngularJs

Résultat, après 3 heures de temps:

Tester ici : http://nicolash.org/weatherdashboard/#/accueil

Lire la suite

[AngularJs + Template Bootstrap + Php-Sql] « Rdv Juristes » avec un bon design normalisé Bootstrap 3.0

rdvjuristes2

Introduction


Suivez en direct le développement de RdvJuristes, avec un tout nouveau design bootstrap totalement normalisé, passant sur les écrans 22 pouces ET sur les téléphones 5 pouces.

Suite à l’affreux et repoussant design  que j’ai fait avec material(Qui n’est pas forcément du à matérial), j’en ai eu marre, et je recode le tout en Bootstrap CSS 3.0 !

Mes futurs projets seront désormais toujours désignés en bootstrap 3.0 ou 4.0 pour gagner du temps sur le reste, en plus j’ai aussi une app en node.js sur le grill, mais je n’ai pas envie de monter un serveur chez moi en permanence donc je suis bloqué pour les démos !

rdv.jpg

Les fonctionnalités de L’application :


  • Visionner les caractéristiques des juristes et leurs pourcentages de résultats lors des procès.
  • Influencer les juristes en fonction de leurs résultats par le biais de graphiques manipulables.
  • Enregistrer un procès dans le calendrier .
  • Spécifier les juristes du procès (Unitaires ou par groupes), leurs notes de frais , les documents du procès, éditer un résumé du procès, des modèles de documents officiels sont présents pour faciliter la tâche du juriste.
  • Relancer les juristes par Email lors d’un procès.
  • Relancer les personnes impliquées par Emailing
  • Utiliser un Chat spécifique pour parler des procès.
  • Visionner énormément de statistiques en D3.js à propos des notes de frais, des résultats des tribunaux, de la dispersion géographique par type de procès par exemple et j’en passe !.

 Technologie utilisée :


  • AngularJs 1.6.4
  • Google Map avec ng-map
  • Php en back end pour le CRUD en technologie PDO avec prise en compte du typage .
  • Mysql
  • Highcharts
  • D3.js
  • Css Bootstrap 3.0

En projet :


 

  1. Concevoir tout le système de « défenseur »(accusé), et « Plaignant », afin de récupérer le verdict, et/ou les amendes infligées, spécifier si il y a un recours.
  2. Import de RDV et de Juristes au format Excel : délai approximatif : 1 jour
  3. Dans le graphique en barre, les points verts sont les buts à atteindre, ils peuvent influer sur le pourcentage de succès (Bref, faire quelque chose du style.), autrement dit, le responsable d’agence décide que la norme à atteindre est 8 étoiles par exemple, et le juriste qui n’a que 6 étoiles est prévenu par email qu’il ferait bien d’activer … : délai approximatif : 2 jours
  4. Dans le google map, indiquer tous les tribunaux français en scrappant avec l’api google. : délai approximatif : 1 jour + indiquer les trajets domicile – procès ?
  5. Création de la zone « MonCompte » ainsi que de la zone « paramêtres » avec seuil d’alertes, gestion groupée etc … : délai approximatif : 2 jours
  6. Possibilité de créer des groupes de juristes et de les ajouter au rendez vous : délai approximatif : 1/2 jour
  7. Réseau social sur les juristes + photo du juriste qui parle. délai approximatif : 1 jour
    Tri des rdv dans juriste par importance Délai : 1 heure
  8. Menu déroulant par juriste sur le calendrier Délai : 2 heures
  9. Alerte par Email Délai : 1 Jour
  10. Faire un fil d’ariane lors de la création d’un rdv, avec un beau design (une sorte de breadcrumb). Délai 2 Jours
  11. Synchroniser avec google calendar. Délai : 3 jours
  12. L’utilisateur doit pouvoir remplir des modèles de documents directement dans l’application et les chosir à partir de gros icones.
  13. Montrer les rendez vous dans une liste de panels.
  14. Démarchage sommaire des cabinets de juristes.

 

Suivre l’avancée de l’app


Le but est de finaliser l’app aux fonctionnalités basiques pour la fin de semaine !

JOUR 1 Le 22-06-2017: 4 Heures de code :
. Remise en Place du nouveau calendrier, convert des dates en Moment.js lors de l’update d’un rendez vous …
.Je vais rajouter aussi un système d’identification et un chat, et, comme prévu, un ng-map et un autocomplete sur l’adresse, et en plus quelques graphiques, cela avant la fin de semaine. Ajouter aussi les procès par juristes et des appréciations par rendez-vous

JOUR 2 Le 23-06-2017:6 Heures de code

JOUR 3 Le 26-06-2017: 6 heures de codes

. Correction du Crud sur les RDV
. Ajout de Google Map avec ma clef google Map
. Correction des rdvs des juristes dans le CRUD des juristes.
. Mise en place sommaire du CHAT

JOUR 4 Le 27-06-2017: 6 heures de codes

. Mise en place de Ng-Map
. Refonte totale du CSS pour intégrer une barre des tâche responsive sur le côté (Sidebar), ça a pris du temps, surtout ce template est parti de zéro, donc sans licence (gratuit).

Note : il est possible de styliser les jours comme ceci :
https://stackoverflow.com/questions/41825303/how-to-change-fullcalendar-cell-color

JOUR 5 Le 29-06-2017: 5 heures de codes
. Mise en place des sliders (Pas encore fonctionnels).
. Avancée sur le chat (Pas encore temps réel).
.Si on se loggue comme admin, on est désormais reconnu par l’app et on peut éditer les juristes

JOUR 6 Le 03-07-2017: 5 heures de codes
. Ajout de wisiwig (Document) à un rdv
. En projet : webscrapping des emails des bureaux de juristes qui remonte automatiquement dans l’app

JOUR 7 Le 06-07-2017: 5 heures de codes
. Ajout de HTML dans les events du calendrier (C’est puissant), par exemple, là j’ai pu indiquer le nb de juristes par rdv, grâce à une rqt SQL à jointure
. Les sliders pour les juristes refusaient de marcher avec ui tabs, j’ai perdu 2 heures, du coup je mets des étoiles ratings.
. Il n’y a pas d’erreur CSS sur un téléphone 5 pouces, mais c’est désagréable à utiliser, par exemple la liste des juristes devrait devenir toute petite lrosque sur téléphone 5 pouces.

Je voudrais terminer le projet pour la fin de semaine mais ca va être chaud… Je ne voulais pas mettre de vues mais c’est fait exprès

JOUR 8 Le 11-07-2017: 6 heures de codes
. Les problèmes de format de date avec Moment.js sont résolus (avec le gmt)
. Le chat fonctionne, reste à ajouter le temps réel et un meilleur design. Les utilisateurs peuvent se répondre entre eux, façon Youtube.
. Toutes les dates sont correctes et normalisées.
. Les juristes sont catégorisés (20 min)
. Passage de tous les panels au format directive, c’est beaucoup plus pratique, du coup index.html ressemble à ça:

	<!-- LES DIRECTIVES -->
<div class="row padded " >
		<agenda></agenda>
		<rendezvous></rendezvous></div>
<div class="row padded ">
		<juristes></juristes>
		<chat></chat></div>
<div class="row padded " ng-cloak>
		<ngmap></ngmap>

Le code devient 1000 fois plus simple à entretenir et à modifier, pour info une directive basique dans ce cas est comme un include et ressemble à cela :

monApp.directive('ngmap', function() {
   return {
    templateUrl: 'directives/ngmap.html'
  };
});

Demain, le google map juristes et rendez vous.
.
JOUR 9,10,11,12 5*4 =20heures de code
. Passage des vues en mode individuel pour que cela soit exploitable dans un téléphone 5 pouces, la vue des juristes est très correcte sur un téléphone.
. Découverte du template LTEAdmin2, qui devrait améliorer le look à l’avenir.
. Début de la programmation du système notes de frais.
. Résolution du problème de refresh de la carte ng-map
. Quand on clique sur un jour, on ouvre le bon jour pour entrer un rdv.
. ON voit les photos des utilisateurs dans le CHAT
. Début de programmation du système de verdicts.
. Le système de comptes et de rôles est fait à 50 pour cent.
. Lorsque l’on clique sur « mon compte  » et qu’on est pas loggé, un throw est déclenché.
.Impression du résumé d’un rendez vous = fait à 40 %
. Ajout des catégories de Rendez-Vous et d’un filtre

JOUR 13
1200x630bb

. J’ai refais tous le code du controleur des stats, en effet, il fallait récupérer en BDD la longitude et la latitude dans les formulaires Juristes et rendez Vous pour éviter de surcharger ensuite l’api Google Map lors des lectures groupées , et pouvoir afficher tout dans les maps sans problèmes ensuite.

En effet, un champs auto complete Google de type adresse fait remonter un objet JSON très complet, qu’il faut picorer et réinjectant dans notre propre base MYSQL !

Par la même occasion, je récupère le département et la ville dans la BDD ce qui va permettre de faire des statistiques à fond !

Maintenant, c’est d’une simplicité déconcertante de filtrer, que ce soit en SQL ou en JS avec .filter() !!

Je vais améliorer l’interface des google maps avec des zones, et aussi des fenêtres. De même qu’il faut que lors du clic, on retrouve soit sa fenêtre rendez vous, soit sa fenêtre juriste .

Le controleur des statistiques est vraiment d’une clarté et d’une simplicité déconcertante , il permet d’afficher des marqueurs sur les cartes google map, avec les icones que l’on a choisi, et les filtres que l’on a choisi ! : Extrait :

monApp.controller('statsCtrl',['$scope','$timeout','$q','$log','$http','rdvFactory','juristesFactory','$compile','$timeout','Notification','utilisateursFactory','$uibModal','stockeUtilisateur','chatFactory','NgMap', '$rootScope','$interval','$filter',function($scope,$timeout,$q,$log,$http,rdvFactory,juristesFactory,$compile,$timeout,Notification,utilisateursFactory,$uibModal,stockeUtilisateur,chatFactory,NgMap,$rootScope,$interval,$filter) {

/* ------------------------------------------------------INITIALISATIONS--------------------------------------------- */

	/* INITIALISATION DES EVENTS (RENDEZ VOUS)*/
	getAllRendezVous();

	$scope.rdvIcon = {
			"scaledSize": [32, 32],
			"url": "img-app/advokat_set-15-256.png"
	};

	/* INITIALISATION DES JURISTES */
	getAllJuristes();

	$scope.juristesIcon = {
			"scaledSize": [32, 32],
			"url": "img-app/jr.png"
	};

	/* LIRE TOUS LES RENDEZ VOUS */
	$scope.getAllRendezVous = function(categorie){
		getAllRendezVous(categorie);
	}

	function getAllRendezVous(categorie){

		rdvFactory.get_rdvs(categorie).then(function(data){  // On récupère en Ajax tous les rendez-vous.

			var temp = data.data;

			angular.forEach(temp,function(value,index){
				temp[index]["start"] = moment(temp[index]["start"]);
				temp[index]["end"] 	= moment(temp[index]["end"]);
				temp[index]["longitude"] = parseFloat(temp[index]["longitude"]).toFixed(2);
				temp[index]["latitude"] = parseFloat(temp[index]["latitude"]).toFixed(2);
			}); 

			$scope.markerData = temp;

			if(temp.length<1){
				Notification.error('Pas de données avec ce filtre !');
			}
		})
	}

	/*  LIRE TOUS LES JURISTES  */

	$scope.getAllJuristes = function(categorie){
		getAllJuristes(categorie);
	}

  function getAllJuristes(categorie){

		juristesFactory.get_juristes(categorie).then(function(data){  // On récupère en Ajax tous les juristes.

			var temp = data.data;

			angular.forEach(temp,function(value,index){
				temp[index]["longitude"] = parseFloat(temp[index]["longitude"]).toFixed(2);
				temp[index]["latitude"] = parseFloat(temp[index]["latitude"]).toFixed(2);
			}); 

                       $scope.markersJuristes = temp;

			if(temp.length<1){
				Notification.error('Pas de données avec ce filtre !');
			}
		});
	}

Explication sommaire du code : On récupère les données longitude et latitude de chaque objet juriste{} ou objet rendez vous{}, avec une rqt ajax $http dans un tableau [], puis, on « fournit » le tableau à $scope.markers, ou variable apparentée, qui affiche en temps réel les points sur la carte google map. C’est très facile grâce au 2 ways binding! Ce qui est bien, c’est que la catégorie est passée en paramètres au back end, du coup, chaque requête se relance assez facilement, toujours avec le 2 ways binding qui s’occupe de tout..

AngularJs est tout simplement fantastique et le plus simple et flexible framework, surtout avec le format $scope(et pas controller as + .this). Remarquer que je parseFloat mais normalement, y’a pas besoin parce que dans mysql, je devrais être en Float, ce que je n’ai pas fait (par paresse, je reste souvent en varChar dans mysql, hi hi, c’est mal, mais je vais arrêter ! ).
.
A voir ce que cela ferait avec vue.js, qui a l’air pas mal aussi , je lorgne de plus en plus dessus vu qu’il impose une structure, encore bien plus que angularjs.
Par contre, j’ai envie de faire des components maintenant, mais bien sur, surtout pas autre chose que la version 1.6 de ANGULARJS !!

En projet :
. Conversion moment.js -> pour Mysql

Jour 14 : 3h de code :
. La conversion MomentJs -> Mysql Datetime est ok et fonctionne bien pour faire les stats à l’avenir. Exemple de conversion Objet moment.js -> Date acceptée par mysql dans un champs DATETIME:
rendezVous.startspe = moment(rendezVous.start.format(‘YYYY/MM/DD HH:mm:ss’)).format(« YYYY-MM-DD HH:mm:ss »);
. Le problème est que je dois concevoir tout le système de « défenseur »(accusé), et « Plaignant », afin de récupérer le verdict, et/ou les amendes infligées, spécifier si il y a un recours etc .. De plus, le défenseur et le plaignant n’ont pas les mêmes juristes, de ce fait , il faut revoir un peu le système d’affectations.
. Un Formulaire doit avoir un ID pour que les popups d’erreurs s’affichent, de plus , il faut écrire form = »idDuForumulaire » dans le pour que cela fonctionne !
Les Css sont désormais facilement adaptables en fonction du matériel utilisés, à l’aide de ces lignes :

@media(min-width:768px) {

/* SUR ORDI DE BUREAU */
}

et

@media(max-width:480px) {
/*
SUR TELEPHONE ANDROID 5POUCES */
}

C’est très pratique !

Note : 

.Découverte de l’api OPEN STREET MAP pour Angular JS, il a l’air aussi bien que Ng-Map !

[Bootstrap 3 ] Un magnifique Template vraiment responsive, avec une sidebar et un barre des tâches .

createiveL’agence Creative TIM

Introduction


Je m’étais égaré ces derniers temps en ne faisant pas assez attention au responsive, ainsi qu’au look de mes apps.

J’ai trouvé un Theme vraiment responsive cette fois ci, avec un look vraiment vraiment sympa par contre c’est pas du bootstrap 4.0.

C’est l’agence CREATIVE TIM qui a des templates vraiment monstrueux en Bootstrap, Matérial et des Widgets !!

J’utiliserais cette base désormais en permanence pour mes futures apps, qui comporte une sidebar qui se contracte parfaitement (togle),et une barre haute.

Lorsque l’on rapetisse l’écran, les panels se contractent parfaitement. j’ai déjà commencé à rajouter et tester des boutons et panels, et je vais rajouter un agenda , et des graphiques qu’on peux changer à la main, et des sliders et des maps, pour bien tester le tout une bonne fois pour toute et que ça passe sur téléphone 5pouces . j’ai testé hier sur un SAMSUNG GALAXY, c’est IMPECCABLE !! Incroyable ! Le template est 100 % parfait sur écran 22 pouces ET sur un téléphone 5 pouces sans rien faire !

Je n’utiliserais plus Material que je ne trouve pas aussi facile que Bootstrap (Voir rdvjuristes ou je galère). Par contre l’agence CREATIVE TIM à un super template Material CSS !

Photo du template


template.jpg

Le lien du template :


http://nicolash.org/db/dashboard.html

[AngularJs + Material + Php-SQL ] « RdvJuristes »

rdvjuristes2

Introduction


Journal du dev de l’application RdvJuristes.

Journal


Après la course des 16 heures pour obtenir une pré-maquette d’applcation CRUD, je continue pour finaliser l’application le plus vite possible. Dans la première version, ce n’était pas responsive car je ne connaissais pas Material CSS.
Du coup j’essaye de le passer en responsive et que tout tourne sans bug. je vais essayer de terminer pour la fin de semaine ce qui nous donnera environ une semaine de développement pour finaliser l’application.

Je me presse beaucoup, parce que je vais pas tarder à coder ma première app à vendre en location : « MON PETIT STOCK », sous le label Ir Logiciels, à 4Euros 99 par mois, , et cela va prendre du temps avec tous les droits à faire, et le design , et la publicité, l’innovation etc … sans compter la mise en place du site de l’éditeur de logiciels Ir Logiciels

Jour 1 : 6 heures de Code
Moi qui pensait que mon designe MATERIAL allait passer directement sur mon téléphone 5Pouces, cela ne passe pas du tout ! Trop bizarre, parce qu’en réduisant ça semblait passer, de plus cela fonctionne dans le simulateur de firefox de galaxy S7 :

silul
Du coup, pour mes prochaines Apps, je vais revenir sur du bootstrap avec une barre des tâches SIDE comme dans ce vieux projet : http://nicolash.org/truc36/index.html#/accueil , au moins là, c’était bien responsive, il faut seulement l’améliorer et c’est beaucoup plus facile.

Jour 2 : ABANDON DE MATERIAL CSS

Note Importante : Suite aux problèmes de design responsive et de complexité de gestion des grids, je stoppe de suite le labo, pour le recoder en bootstrap 3.0 avec un template. 

J’abandonne totalement material css. Je ne veux pas continuer avec Material, j’ai perdu bien trop de temps avec ça, de plus cela ne passe pas du tout sur mon téléphone 5 pouces et je ne vais pas passer 2 semaines à gérer des CSS. Résultat : Je cosnerve le back End puis je vais recoder tout le front end en bootstrap avec un bon design template ce coup ci !!! Quand on voit que ca rame, c’est qu’il y a quelque chose d’anormal !! Bootstrap est un milliard de fois mieux sur les grids et la version 4 aussi !
le but est d’avoir un désign normalisé et irreprochable !

Cependant, le CRUD sur les RDV fonctionne .

[AngularJs + Material + Php-Sql] –Défi– : Réaliser une Micro-app « Rdv-Juristes »de Prise de rendez vous pour des juristes, en 2 jours maximum -> « Rdv-Juristes ».

angularjslogo-phplogo-mysql-170x170_400x400

Introduction


Je vais essayer de créer une micro application responsive , avec angularjs material, en moins de 2 jours, avec un design sympa. Pour suivre l’avancée de l’application, cliquer ici Pour suivre l’avancée de l’applciation après les 2 jours de défi, cliquer ici (version 2)

rdvjuristes.

Cette application doit permettre de prendre un rendez vous en spécifiant

  • Les noms des juristes
  • Les fichiers
  • Les annotations
  • Le taux de criticité avec des étoiles.

Voici le cahier des charges :

  • Utiliser une base de données relationelle.
  • Le design doit être clair et responsive, et si possible carrément passer sur téléphone 5 pouces.
  • Pouvoir choisir plusieurs juristes, ajouter un commentaire et uploader des fichiers au rendez vous à créer.
  • Pouvoir éditer un rendez vous, cela ouvre alors les caractéristiques du rendez vous grâce à son identifiant.
  • Pouvoir supprimer un rendez vous.
  • Ajouter un seuil de criticité.
  • Facultatif, ajouter une fenêtre qui montre les rendez vous les plus urgents à venir , automatiquement(simple rqt sql). Et aussi un google map pour l’adresse du rendez vous.

On en déduit donc 

  • La présence de 2 modèles de données : juristes et rendezVous et de 2 tables SQL + 1 pour faire les jointures. Pour les fichiers, plutôt que de créer une table SQL, je vais faire une astuce qui est d’enregistrer le tableau JSON des noms de fichiers dans un champs de la table rendezVous… hi hi, peu orthodoxe, mais efficace pour aller plus vite
  • Pas le temps de faire de UML, on le fait de tête.
  • Présence de factories AngularJS pour simplifier.

Gantt Approximatif :

  • Dessin de la maquette : 10 minutes
  • Coding du Front End : 7 heures
  • Coding du Back End : 7 heures.

Lire la suite

[AngularJs 1.6] « Gère ton équipe » Micro app de gestion d’équipe de FOOTBALL avec Glissé-Déposé des joueurs

Sport-football-icon.pngIntroduction


Je dois passer sur un site wordpress perso, parce que j’ai peur que celui ci disparaisse.

Voici donc une micro app à laquelle j’attribue 2 heures * 4 jours, donc 8 heures, histoire de me remettre dans le coup avec pas mal de drag and drop . Attention, ceci est un labo, mais je compte faire d’autres apps du même style en particulier une de Chimie, qui va permettre de lier des ingrédients par glissé-déposé multiples et faire des calculs temps réel.

Le back end étant simulé, il n’est pas fait usage des IDS de façon conventionelle dans ce labo, du coup,il est normal que lorsque l’on recharge une équipe, les caractéristiques du joueur soient les caractéristiques de l’instant T de l’enregistrement , il ne s’agit par d’une erreur de conception, mais de la volonté de simuler un back end pour tester plus vite d’autres fonctionnalités. De même je n’ai pas fait de service exploitant la liste des joueurs, ce n’est pas le but du labo.

Photo de l’app à début + 3 heures


football.jpg

Le but de l’app :


Disposer d’un tableau de joueur et constituer les équipes par glissé déposé, sauvegarder les équipes et pouvoir les modifier. Lorsque l’on affecte un joueur dans la catégorie junior, alors l’image junior s’affiche automatiquement dans le tableau, et ainsi de suite (conditions dans la vue html)

A terme, on verra les photos des joueurs sur le terrain de foot ou les noms au choix( ça se fait en 2 secondes.).

Timing:

Jour 1 : 2 h de code : mise en place de la vue liste et du glissé déposé

Jour 2 : 2h30 de code : mise en place de la vue modifier et du glissé déposé bi-directionnel.

Jour 3 : 3h00 de code : sauvegarde des equipes sur localstorage, tests de réinit, pbs d’actualisation du tableau.

Jour 4 : 2h45 de code : Possibilité de maj un footballeur en web storage.

Jour 5 : 3h30 de code : Mise en place des sliders sur vue modifier, Mise en place de popups sur le stade. (reste à faire les doublons en cas de modif d’une équipe.

Jour 6 : 3h30 de code: J’ai un peu ramé : mise en place des popups différents et des futures statistiques en temps réel , avec graphiques qui s’affichent dans les popups. Grâce à ces statistiques, on va pouvoir évaluer en temps réel les caractéristiques de la globalité de l’équipe que l’on créée. Pourtester : supprimer le cache de son navigateur, puis relancer.

Jour 7 : 2h30 de code: Activation de AngularCharts. Lorsque l’on droppe un joueur, le graphique des statistiques se mets à jour en temps réel. Par contre il faut effacer tout le cache du navigateur pour tester, parce que j’utilise Webstorage pour simuler le back end, et le modèle de données reste en mémoire du navigateur. Ca marche vraiment pas mal, j’aime bien.

Jour 8 : 3h30 de code J’ai enfin trouvé un algorithme qui cache les footballers présent dans une équipe lors du chargement, grâce aux gros pros anglophones sur StackOverflow, ils sont trop balaises. Avec un back end sql ce serait plus facile à faire lol, c’est parce que je simule un back end avec webstorage que cela parait un peu tordu.

Voici la fonction, ça fait mal aux yeux, aie, et pourtant ca marche bien !


set_presence_equipe(); // Je ne mets pas la fonction... trop longue voir dans le code...

/* Sert à filtrer les joueurs qui ne sont pas dans l'équipe , pour pouvoir mettre à jour une équipe*/
		$scope.footballers = $filter('filter')($scope.footballers, function (i) {

			  return presence_equipe.indexOf(i.identifiant) === -1
		});

Maintenant je vais faire des belles vignettes que l’on peut glisser-déposer … Et ajouter d’autres graphiques, caractéristiques joueurs… j’aimerais aussi fare un BIG GRAPHIQUE comparatif de toutes les équipes , AngularJS c’est TROP BIEN ! Je vais aussi ajouter un calendrier, afin que l’on puisse glisser déposer des équipes à telle ou telle date… Un bon entrainement, ce labo !

Jour 9 : 2h30 de code (de 10 h à 12h30): remodelage des Vignettes… Affichage des barres de graphiques dans les vignettes. Le Look devient sympa peu à peu, supprimer le cache de son nav pour tester :

goal1.jpg

Si AngularJs 1.6 est si bien, c’est qu’il permet d’appliquer directement la théorie des ensembles, parce qu’il est non typé (de plus le back end type déjà les variables, totalement inutile de le faire dans le front end.). Voilà pourquoi IL NE FAUT PAS utiliser typescript ou angular 2 ou 4, en tout cas c’est mon avis, pour l’instant, j’attends qu’on me fasse changer d’avis, mais j’en doute, à vrai dire, ce n’est pas possible…

Jour 10: 3h de code : Mise en place de la lib du calendrier, Tentative de mise en place des ancres sur les vignettes de footballeurs, Fix de la barre supérieure. ALERTE ! Je viens de constater un bug lorsque l’on trie , puis que l’on glisse dépose un joueur, ça buggue ! A regarder demain d’urgence , problème d’id !!

Jour 11 j’ai résolu en 20 minutes au total le problème de glissé déposé après tri grâce à ce fantastique plunker : http://codef0rmer.github.io/angular-dragdrop/#!/filter . Autant dire que c’est trop bien maintenant . J’essaye d’acheter une tablette d’occase à 18 euros dès que possible afin de faire des apps pour tablettes avec glissé déposé, ça va péter. Aujourd’hui je m’occupe du dispatching par glissé-déposé des équipes dans l’agenda, si je ne peux pas faire de glissé-déposé, je ferais quelque chose de plus simple.. A par ça, c’est assez dur de faire un look normalisé et sympa, je dois faire des flêches pour passer d’une série de vignettes à l’autre, mais le pb est que sur un écran large, le nb de vignettes par lignes augmente, ce qui mets en défaut le ptit algo que je pourrais trouver. Autre problème : OU mettre le planning des futurs matches, sachant que je n’ai pas trop envie de faire des onglets. j’aimerais que l’on voit tout d’un seul coup, pas possible de mettre un POPUP comme pour les stats, il y en aurait trop !.

Jour 12 2h30 de code : j’ai finalement mis un onglet bootstrap pour l’endroit ou l’on va gérer les matches et entrainements. Du coup, la directive fixed heard du tableau ne marchait plus, j’ai du en faire un dans le html, c’est pas terrible mais sur mon écran cela marche . Je vais bientôt recevoir ma vieille tablette à 18 euros, une 9 pouces, ca pourra me permettre de commencer à faire des apps sur tablette et de voir si le glissé déposé marche bien dessus. Pour les vignettes, Je dois m’arranger pour les aficher 9 par 9 avec une bête pagination. dans l’idéal, il faudrait pouvoir noter les joueurs par matchs avec des étoiles, puis qu’une moyenne se créée, mais ce serait plus facile avec un vrai backend, parce que là vu que c’est un labo, je simule le back end.
ALERTE : je viens de voir que la MAJ refais bugguer le tri et l’affectation quand il y a l’onglet ui bootstrap !! Cet onglet fait bugger plein de trucs!!!!

Choses à revoir :

-Mise à jour d’une équipe ne marche pas,
-Mettre des étoiles aux joueurs,
– Montrer les stats par ‘lignées’ sur les stade, moyenne age et autres.
– Trouver un moyen d’aligner les 2 fenêtres ‘footballers’ et ‘gérer l’équipe’, c’est trop laid
– Emettre un son WAV de stade lors de l’affectation d’un joueur.
– Pour les filtres, mettre des gros icônes à la one again pour faire mieux. faire la partie ‘créer un footballer’
– Trouver un moyen d’ajouter le goal
– Résoudre les petits bugs de modèle de donnée dans certaines cases ( pbs peu important de syntaxe)
– Sur le pop up de stats, montrer le graph moyen d’une équipe de 2 ème div, 1ère div … Créer un autre pop up de stats plus complets sur click de bouton.

Sur la partie gérer les matchs :
– Faire des statistiques de succès en fonction de l’équipe affrontée,
– Pouvoir déplacer un match par glissé déposé,
– Sur les divers champs, faire du web scrapping pour chopper le nom des villes ou des clubs de football.
– Pouvoir noter chaque joueur d’une équipe par étoile après chaque matchs ( Avec le back end simulé ca v être relouds je préfèrerais du sql)

Jour 13 J’ai grenouillé pendant 4h30, le temps de passer le calendrier dans une vue (Ca faisait beaucoup de datas pour 2 onglets de toute façon), de revoir les css pour mettre des stats(moyennes) par ligne de joueurs. A finaliser demain, + ajouter l’image du corps humain joueur pour qu’on puisse noter ou il a mal actuellement ou le nombre de blessures + Traitement des entrainements, avec stats du joueur etc … Bon c’est du labo, pas du uml hein .. L’app n’est pas utilisable dans la tablette simple core qui rame à fond (Surtout au niveau du réseau) par contre les css bootstrap sont corrects. Je pense qu’il faut une tablette quad core et du 12 pouces pour envisager des apps pros avec cette techno.
Jour 14 et 15 A peu près 4h de code
– Début d’utilisation de l’agenda des matches. Vu qu’il n’y a pas de back end je vais encore plus ou moins simuler pour l’instant. Ce que je veux c’est que l’on puisse comparer les stats des équipes entre elles avant les matches.
– Sur la partie vignette, on voit les stas joueurs apparaitre dans les bulles (à généraliser)
– Ajouter le corps humain et la possib d’ajouter les blessures avec la derniere tech d’ajout à l’infini d’appreciations

Jour 16 1h30 de code
– Amélioration des css
– Normalisation du style
– Ajout de code

Jour 17 5h30 de code
– Amélioration des css
– Normalisation du style
– Début du code de la partie « Gérer les matches »

Tester l’app  :


Le lien est ici 

Le controleur à début +3 heures de code :


Explication sommaire :

Au début du controleur AngularJs, j’initialise les caractéristiques des joueurs de footballs dans le tableau d’objet JSON $scope.footballers, chaque footballer étant un objet JSON.

L’objet $scope.equipe est lui vide au début, ce qui est logique, puisque l’on a pas encore dispatché les joueurs dans l’équipe, lol.

Ensuite, et bien, losque l’on glisse-dépose un joueur dans l’équipe dans la vue html, et bien il est copié dans le tableau $scope.equipe.sousequipe et supprimé(caché) du modèle de données $scope.footballers.


 monApp.controller("liste", function($scope,$route,$location,$http,Notification) {
	$scope.limit = 5;

	$scope.footballers 			= [
	{'identifiant':1,'prenom':'Jean','nom':'Valjean','categorie':1,'ville':'Détroit','age':12,'date_embauche':'','salaire':'25'},
	{'identifiant':2,'prenom':'Aziz','nom':'Jojo','categorie':2,'ville':'Paris','age':14,'date_embauche':'','salaire':'25'},
	{'identifiant':3,'prenom':'Thierry','nom':'Goubert','categorie':1,'ville':'Paris','age':17,'date_embauche':'','salaire':'28'},
	{'identifiant':4,'prenom':'Roland','nom':'Chavert','categorie':2,'ville':'Paris','age':14,'date_embauche':'','salaire':'25'},
	{'identifiant':5,'prenom':'Gogok','nom':'Rodolphe','categorie':1,'ville':'Paris','age':17,'date_embauche':'','salaire':'28'},
	{'identifiant':6,'prenom':'Thierry','nom':'Goubert','categorie':1,'ville':'Paris','age':17,'date_embauche':'','salaire':'28'},
	{'identifiant':7,'prenom':'Gawivk','nom':'Gonzogues','categorie':2,'ville':'Paris','age':14,'date_embauche':'','salaire':'25'},
	{'identifiant':8,'prenom':'Thomas','nom':'Choubal','categorie':1,'ville':'Paris','age':12,'date_embauche':'','salaire':'28'}
	]
	$scope.equipe 						= {};
	$scope.equipe.attaquants 			= [];
	$scope.equipe.ailiers_gauche 		= [];
	$scope.equipe.attaquants_soutien 	= [];
	$scope.equipe.ailiers_droit 		= [];
	$scope.equipe.milieu_gauche 		= [];
	$scope.equipe.milieu_soutien		= [];
	$scope.equipe.milieu_droit			= [];
	$scope.equipe.defense_gauche		= [];
	$scope.equipe.defense_soutien		= [];
	$scope.equipe.defense_droit			= [];
	$scope.equipe.liberos				= [];

	$scope.modifier_footballeur = function(footballeur){
		$location.path('/modifier/'+footballeur.identifiant);
	}

	$scope.loadMore = function() {
		$scope.limit += 5;
	};

	 $scope.onOver = function(e) {
		angular.element(e.target).addClass("hover");
	  };
	  $scope.onOut = function(e) {
		angular.element(e.target).removeClass("hover");
	  };
	  $scope.onDrop = function(e) {
		angular.element(e.target).removeClass("hover").addClass("done");
	  };
/* FIN DU CONTROLEUR */
})

La vue liste.html à h+3heures :

<div class="row ">
<!-- TABLEAU -->
<div class="col-lg-9 " >
   <div class="panel panel-warning">
      <div class="panel-heading">
         <div class="hd1">
            <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>  Footballers
         </div>
         <div class="spinner pull-right" ng-show="chargement"><img src="img/loader.gif" class="ajax-loader"/></div>
      </div>
      <div  class="panel-body " >
         <div style="overflow-y: auto;overflow-x: hidden;max-height: 550px; min-height:550px; " >
            <!--  id="test" -->
            <table  class="table table-bordered table-hover  " border="1"  >
               <thead fix-head>
                  <tr>
                     <th>Photo</th>
                     <th>Identifiant</th>
                     <th>Prénom</th>
                     <th>Nom</th>
                     <th>Catégorie</th>
                     <th>Ville</th>
                     <th>Age</th>
                     <th>Date d'embauche</th>
                     <th>Salaire</th>
                     <th>Editer</th>
                  </tr>
               </thead>
               <tbody >
                  <tr  ng-click="detail_footballeur(footballeur)"  ng-repeat="footballeur in footballers| limitTo: limit "  >
                     <td data-drag="true" data-jqyoui-options="{revert: 'invalid',appendTo: 'body',containment: 'window',scroll: false,helper: 'clone'}" ng-model="footballers" jqyoui-draggable="{index: {{$index}},animate:true}" >
                        <div ><img ng-src="img/{{footballeur.photo|| 'defaut.png'}}" class="icone"/></div>
                     </td>
                     <td>{{footballeur.identifiant}}</td>
                     <td>{{footballeur.prenom}}</td>
                     <td>{{footballeur.nom}}</td>
                     <td><img ng-src="{{footballeur.categorie == '1' && 'img/junior.png' ||footballeur.categorie == '2' && 'img/master.jpg'|| 'big-black-X.png'}}" class="icone"/></td>
                     <!-- Affiche une photo en fonction de la variable -->
                     <td>{{footballeur.ville}}</td>
                     <td>{{footballeur.age}}</td>
                     <td>{{footballeur.date_embauche  | date:"dd/MM/yyyy"}}</td>
                     <td>{{footballeur.salaire | currency:'€'}}</td>
                     <td><button ng-click="modifier_footballeur(footballeur)" class="btn btn-primary" aria-label="Left Align">Editer</button></td>
                  </tr>
               </tbody>
            </table>
         </div>
         <button ng-click="loadMore()">
            more
      </div>
      <div ng-if="footballeurs =='false' " class="alert alert-info">Pas plus de footballeurs avec ce filtre.</div>
   </div>
   <div class="panel-footer text-right">
   <button  ng-click="creer_footballeur()" class="btn btn-default "  alt="Ajouter">
   <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Créer un footballeur</button></div>
</div>
<!-- STADE-->
<div class="col-lg-3 ">
<div class="panel panel-warning">
   <div class="panel-heading">
      <div class="hd1">
         <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>  Equipe
      </div>
   </div>
   <div id="bg" class="panel-body"  >
      <div class="row">
         <div class="col-lg-4" ></div>
         <div class="col-lg-4 " >
            <div class="ui-widget-content" >
               <ol data-drop="true" class="caseJoueur" ng-model='equipe.attaquants' jqyoui-droppable="{multiple:true,onOver: 'onOver', onOut: 'onOut',  onDrop: 'onDrop'}" >
                  <b>Attaquant</b>
                  <li ng-repeat="fb in equipe.attaquants " ng-show="fb.prenom" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list4" jqyoui-draggable="{index: {{$index}},animate:true}">
                     {{fb.prenom}}<!--  <button ng-click="supprimer($index)">Supprimer</button></li>
                        -->
                     <!--
                        <li class="placeholder" ng-hide="hideMe()"></li>
                        -->
               </ol>
            </div>
         </div>
         <div class="col-lg-4 " ></div>
      </div>
      <div class="row">
         <div class="col-lg-4 " >
            <div class="ui-widget-content" >
               <ol data-drop="true" class="caseJoueur" ng-model='equipe.ailiers_gauche' jqyoui-droppable="{multiple:true,onOver: 'onOver', onOut: 'onOut',  onDrop: 'onDrop'}" >
                  Ailier g
                  <li ng-repeat="fb in equipe.ailiers_gauche " ng-show="fb.prenom" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list4" jqyoui-draggable="{index: {{$index}},animate:true}">
                     {{fb.prenom}}<!--  <button ng-click="supprimer($index)">Supprimer</button></li>
                        -->
               </ol>
            </div>
         </div>
         <div class="col-lg-4 " >
            <div class="ui-widget-content" >
               <ol data-drop="true" class="caseJoueur" ng-model='equipe.attaquants_soutien' jqyoui-droppable="{multiple:true,onOver: 'onOver', onOut: 'onOut',  onDrop: 'onDrop'}" >
                  Att Soutien
                  <li ng-repeat="fb in equipe.attaquants_soutien" ng-show="fb.prenom" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list4" jqyoui-draggable="{index: {{$index}},animate:true}">
                     {{fb.prenom}}<!--  <button ng-click="supprimer($index)">Supprimer</button></li>
                        -->
               </ol>
            </div>
         </div>
         <div class="col-lg-4 " >
            <div class="ui-widget-content" >
               <ol data-drop="true" class="caseJoueur" ng-model='equipe.ailiers_droits' jqyoui-droppable="{multiple:true,onOver: 'onOver', onOut: 'onOut',  onDrop: 'onDrop'}" >
                  Ailier d
                  <li ng-repeat="fb in equipe.ailiers_droits" ng-show="fb.prenom" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list4" jqyoui-draggable="{index: {{$index}},animate:true}">
                     {{fb.prenom}}<!--  <button ng-click="supprimer($index)">Supprimer</button></li>
                        -->
               </ol>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="col-lg-4 " >
            <div class="ui-widget-content" >
               <ol data-drop="true" class="caseJoueur" ng-model='equipe.milieu_gauche' jqyoui-droppable="{multiple:true,onOver: 'onOver', onOut: 'onOut',  onDrop: 'onDrop'}" >
                  Milieu g
                  <li ng-repeat="fb in equipe.milieu_gauche " ng-show="fb.prenom" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list4" jqyoui-draggable="{index: {{$index}},animate:true}">
                     {{fb.prenom}}<!--  <button ng-click="supprimer($index)">Supprimer</button></li>
                        -->
               </ol>
            </div>
         </div>
         <div class="col-lg-4 " >
            <div class="ui-widget-content" >
               <ol data-drop="true" class="caseJoueur" ng-model='equipe.milieu_soutien' jqyoui-droppable="{multiple:true,onOver: 'onOver', onOut: 'onOut',  onDrop: 'onDrop'}" >
                  Milieu
                  <li ng-repeat="fb in equipe.milieu_soutien " ng-show="fb.prenom" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list4" jqyoui-draggable="{index: {{$index}},animate:true}">
                     {{fb.prenom}}<!--  <button ng-click="supprimer($index)">Supprimer</button></li>
                        -->
               </ol>
            </div>
         </div>
         <div class="col-lg-4 " >
            <div class="ui-widget-content" >
               <ol data-drop="true" class="caseJoueur" ng-model='equipe.milieu_droit' jqyoui-droppable="{multiple:true,onOver: 'onOver', onOut: 'onOut',  onDrop: 'onDrop'}" >
                  Milieu d
                  <li ng-repeat="fb in equipe.milieu_droit " ng-show="fb.prenom" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list4" jqyoui-draggable="{index: {{$index}},animate:true}">
                     {{fb.prenom}}<!--  <button ng-click="supprimer($index)">Supprimer</button></li>
                        -->
               </ol>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="col-lg-4 " >
            <div class="ui-widget-content" >
               <ol data-drop="true" class="caseJoueur" ng-model='equipe.defense_gauche' jqyoui-droppable="{multiple:true,onOver: 'onOver', onOut: 'onOut',  onDrop: 'onDrop'}" >
                  Défense gauche
                  <li ng-repeat="fb in equipe.defense_gauche " ng-show="fb.prenom" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list4" jqyoui-draggable="{index: {{$index}},animate:true}">
                     {{fb.prenom}}<!--  <button ng-click="supprimer($index)">Supprimer</button></li>
                        -->
               </ol>
            </div>
         </div>
         <div class="col-lg-4 " >
            <div class="ui-widget-content" >
               <ol data-drop="true" class="caseJoueur" ng-model='equipe.defense_soutien' jqyoui-droppable="{multiple:true,onOver: 'onOver', onOut: 'onOut',  onDrop: 'onDrop'}" >
                  Défense Centrale
                  <li ng-repeat="fb in equipe.defense_soutien " ng-show="fb.prenom" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list4" jqyoui-draggable="{index: {{$index}},animate:true}">
                     {{fb.prenom}}<!--  <button ng-click="supprimer($index)">Supprimer</button></li>
                        -->
               </ol>
            </div>
         </div>
         <div class="col-lg-4 " >
            <div class="ui-widget-content" >
               <ol data-drop="true" class="caseJoueur" ng-model='equipe.defense_droit' jqyoui-droppable="{multiple:true,onOver: 'onOver', onOut: 'onOut',  onDrop: 'onDrop'}" >
                  Défense droite
                  <li ng-repeat="fb in equipe.defense_droit " ng-show="fb.prenom" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list4" jqyoui-draggable="{index: {{$index}},animate:true}">
                     {{fb.prenom}}<!--  <button ng-click="supprimer($index)">Supprimer</button></li>
                        -->
               </ol>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="col-lg-4" ></div>
         <div class="col-lg-4 " >
            <div class="ui-widget-content" >
               <ol data-drop="true" class="caseJoueur" ng-model='equipe.liberos' jqyoui-droppable="{multiple:true,onOver: 'onOver', onOut: 'onOut',  onDrop: 'onDrop'}" >
                  Libéro
                  <li ng-repeat="fb in equipe.liberos " ng-show="fb.prenom" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list4" jqyoui-draggable="{index: {{$index}},animate:true}">
                     {{fb.prenom}}<!--  <button ng-click="supprimer($index)">Supprimer</button></li>
                        -->
                     <!--
                        <li class="placeholder" ng-hide="hideMe()"></li>
                        -->
               </ol>
            </div>
         </div>
         <div class="col-lg-4 " ></div>
      </div>
   </div>
   <div class="panel-footer text-right">
      <button  ng-click="sauver_equipe()" class="btn btn-default "  alt="Ajouter">
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Sauver l'équipe</button>
   </div>
</div>
<style>
   .img-container{
   position: relative;
   }
   #bg{
   background:url('img/stade.svg.png') no-repeat center center; height: 600px;
   }
   .caseJoueur{
   height:90px;-webkit-border-radius: 20px 20px 20px 20px;-moz-border-radius: 21px 20px 20px 20px;border-radius: 21px 20px 20px 20px;border:5px solid #FFEB66;background:rgba(227,220,211,0.9);-webkit-box-shadow: #B3B3B3 14px 14px 14px;-moz-box-shadow: #B3B3B3 14px 14px 14px; box-shadow: #B3B3B3 14px 14px 14px;
   overflow:auto;
   }
   .hover{
   background-color:orange;
   }
   .icone{
   width:65px;
   height:65px;
   }
</style>
<hr />

La vue index.html à h+3heures :

<!DOCTYPE html>
<html>
	<head>
	<meta http-equiv="X-UA-Compatible" content="IE=8" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Gère ton équipe</title>

		<!------------------------------------------------------------ CHARGEMENT DES LIBRAIRIES ------------------------------------------------>
        <!-- APPEL LIB JQUERY -->
		<script src="libs//jquery.min.js"></script>
        <script src="libs//jquery-ui.min.js"></script>
		<!-- APPEL LIB ANGULAR -->
        <script src="libs/angular.min.js"></script>
        <script src="libs/angular-route.min.js"></script>
        <script src="libs/angular-locale_fr-fr.js"></script>
		<script src="libs/angular-animate.min.js"></script>
		<script src="libs/angular-touch.min.js"></script>
		<!-- load ngmessages -->
		<script src="libs/angular-messages.js"></script>

		<!-- APPEL LIB ADDITIONELLE FORMATAGE DES INPUTS -->
		<script src="libs/angular-input-masks-standalone.min.js"></script>

		<!-- APPEL LIB ADDITIONELLE ANGULAR FILTER -->
		<script src="libs/angular-filter.min.js"></script>
		<!-- DRAG  -->
		<script src="libs/angular-dragdrop.min.js"></script>
		<!-- APPEL LIB ADDITIONELLE ANGULAR PAGINATION -->
		<script src="libs/dirPagination.js"></script>

		<!-- APPEL LIB ADDITIONELLE INFINTE SCROLL -->
		<script src="libs/scroll.min.js"></script>

		<!-- APPEL LIB ADDITIONELLE pour Faire scroller le header d'une table html  -->
		<script src="libs/fixed-table-header.min.js"></script> 

		<!-- APPEL LIB ADDITIONELLE  pour Trier une table dans ses headers  -->
		<script src="libs/angular-tablesort.js"></script>
		 		<link href="libs/tablesort.css" media="screen" rel="stylesheet" type="text/css" />

		 <!-- APPEL LIB ADDITIONELLE  pour Afficher des messages plus sympas que ALERT()  -->
		<script src="libs/angular-ui-notification.min.js"></script>
				<link  href="libs/angular-ui-notification.min.css" media="screen" rel="stylesheet" type="text/css" />

		<!-- APPEL LIB ADDITIONELLE RZSLIDER POUR FAIRE DES SLIDES DANS LES FILTRES OU AILLEURS-->
		<!-- <script src="libs/rzslider.min.js"></script>
				<link rel="stylesheet" type="text/css" href="libs/rzslider.css"/> -->

		<!-- BOOTSTRAP -->
		<!-- Latest compiled and minified CSS -->
				<link rel="stylesheet" href="libs/bootstrap.min.css" >

		<!-- Optional theme -->
				<link rel="stylesheet" href="libs/bootstrap-theme.min.css" >

		<!-- Latest compiled and minified JavaScript -->
		<script src="libs/bootstrap.min.js" ></script>

				<link rel="stylesheet" type="text/css" href="libs//font-awesome.css" />

		<!-- CSS DE L APPLICATION -->
        		<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />

		<!-- APPEL LIB ADDITIONELLE Angular UI -->
		<!-- <script src="libs/ui-bootstrap-tpls-2.3.1.min.js"></script>  -->
		<script src="libs/ui-bootstrap-tpls.min.js"></script> <!-- Version 0.6.0 -->

		  <!-- PERSO --------------------------------------------------------------------------------->

		  <!-- ROUTING DE VUES FRONT END ET MODULES ADDITIONELS ANGULARJS -->
		<script src="app.js"  ></script>

		<!-- CONTROLEURS (UN PAR VUE) -->
		<script src="controleurs/liste.js"  ></script>
		<script src="controleurs/modifier.js"  ></script>

		<!-- SERVICES : LES SERVICES PERMETTENT DE CREER DES REQUETES AJAX DISPONIBLES DANS TOUTE LES CONTROLEURS DE L'APPLICATION A LOISIR. ON S'EN SERT POUR LES FILTRES REDONDANTS SURTOUT, VU QUILS REVIENNENT SOUVENT, POUR ALLEGER LA SYNTAXE DU CODE -->
		<script src="services/services.js"  ></script>

		<!-- DIRECTIVES : LES DIRECTIVES SONT DES MORCEAUX DE CODE BATEAU PAR EXEMPLE POUR FORMATTER LE FORMAT DUN CHAMPS TELEPHONE -->
		<script src="directives/directives.js"  ></script>

		<!------------------------------------------------------- FIN DE CHARGEMENT DES LIBRAIRIES ------------------------------------------------->
	</head>

<!-- La page HTML générale -->
<body ng-app="monApp">

	<!-- La barre de navigation -->
	<nav class="navbar navbar-default " >
<div class="navbar-header">
			<a class="navbar-brand" href="#"><img src="img/Sport-football-icon.png" style="margin-top: -25px; height:65px;" class="img_entete"/>Football</a></div>
<form class="navbar-form navbar-left">
<div class="dropdown">
				  <button class="btn btn-primary dropdown-toggle d1" type="button" data-toggle="dropdown"> Choisir
				  <span class="caret"></span></button>
<ul class="dropdown-menu">
	<li><a href="#/liste" class=""> Liste</a></li>
	<li><a href="#/detail" 	class=""> Détail</a></li>
</ul>
</div>
</form>
	</nav>

	<!-- Cette balise NG-View va afficher les différentes vues, qui sont couplées a un controleur portant le même nom-->
<div ng-view></div>
</body>

#b3b3b3, #bg, #ffeb66