[Application 56] Note ton Candidat (Réalisée en 3h), mixte desktop/mobile

Introduction notetoncandidat


Micro application Objet faite en 3 h permettant de noter des candidats à l’aide de Knobs.

Les css sont uniquement en Bootstrap 3.0, le modèle de données émule un Back End.

Processus de développement :


  1. Installation des dépendances avec BOWER (AngularJs, ui-Knob, Bootstrap)
  2. Elaboration de Index.html avec des Css
  3. Elaboration de la simulation de Back End avec AngularJs

Notes:


L’application est normalisée, en ce sens que le back end présente la liste des candidats, apès une requête en lecture (Qui ne doit réclamer que 3 champs afin de ne pas être couteuse), cette liste pourrait ne pas être en 2 way binding (grâce à la syntaxe {{::var}}) de ce fait elle pourrait contenir des milliers de candidats, voir des dizaines de milliers(avec des plugs ins spéciaux), ce n’est pas couteux.

Lors du click sur Editer, alors le back end charge sur la base mysql ou noSql le profil du candidat, ce n’est pas couteux en mémoire. Par soucis de temps, j’émule ce fonctionnement en JS.

Je maitrise bien mieux les css Bootstrap maintenant, c’est plus facile. J’aurais pu mettre les deux templates au format directive.

Photo de l’application:


candidatsdemo

Le code :


Index.html

<html ng-app="App">
    <head>
        <meta charset="utf-8" />
        <title>Note ton Candidat.</title>

        <!-- JQUERY ET BOOTSRAP -->
        <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">

        <!-- ANGULAR -->
        <script src='bower_components/angular/angular.min.js'></script>

        <!-- GOOGLE MAP ET NGMAP -->
<!--         <script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
        <script src="bower_components/ngmap/build/scripts/ng-map.min.js"></script> -->

        <!-- UI BOOTSTRAP -->
        <script src='bower_components/angular-bootstrap/ui-bootstrap.min.js'></script>
        <script src='bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js'></script>
		<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" type="text/css">

		<!-- NG -KNOB -->
		 <script src="bower_components/d3/d3.min.js"></script>
		<script src="bower_components/ng-knob/dist/ng-knob.min.js"></script>
    </head>

<body ng-controller="MainCtrl">
	<div class="container-fluid">

		<nav class="navbar navbar-inverse">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
						<span class="sr-only">Toggle navigation</span>
					</button>
					<a class="navbar-brand" href="#">Note ton Candidat</a>
				</div>
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				</div><!-- /.navbar-collapse -->
			</div><!-- /.container-fluid -->
		</nav>

	<div class="row" >
	   <!-- TEMPLATE DE SELECTION DUN OBJET -->
	   <div class="col-lg-12" >
		   <div class="panel panel panel-warning">
				<div class="panel-heading">
					<i class="fa fa-user"></i> Candidats   

				</div>

				<div class="panel-body" style="min-height:350px;">
				 <table class="table table-bordered table-hover  " style="width:100%">

							<thead>
								<tr>
								   <th>
										image
									</th>
									<th  >
										<a href="#" ng-click="sortType = 'prenom'; sortReverse = !sortReverse">
										Prénom
										<span ng-show="sortType == 'prenom' && !sortReverse" class="fa fa-caret-down"></span>
										<span ng-show="sortType == 'prenom' && sortReverse" class="fa fa-caret-up"></span></a>
									</th>
									<th>
										<a href="#" ng-click="sortType = 'nom'; sortReverse = !sortReverse">
										Nom
										<span ng-show="sortType == 'nom' && !sortReverse" class="fa fa-caret-down"></span>
										<span ng-show="sortType == 'nom' && sortReverse" class="fa fa-caret-up"></span></a>
									</th>
									<th>
										<a href="#" ng-click="sortType = 'age'; sortReverse = !sortReverse">
										Année de naissance
										<span ng-show="sortType == 'age' && !sortReverse" class="fa fa-caret-down"></span>
										<span ng-show="sortType == 'age' && sortReverse" class="fa fa-caret-up"></span></a>
									</th>
									<th>
										Editer
									</th>
								</tr>
							</thead>
							<tbody>
								<tr ng-repeat="candidat in candidats | orderBy:sortType:sortReverse |filter:q">
									<td><img src = "{{candidat.image}}" class = "img-responsive" style ="width : 50px; height:50px;"></img></td>
									<td>{{candidat.prenom}}</td>
									<td>{{candidat.nom}}</td>
									<td>{{candidat.anneeNaissance}}</td>
									 <td><button ng-click="editerCandidat(candidat)" class= "fa fa-edit">Editer</button></td>
								</tr>
							</tbody>
						</table> 

				</div>

				<div class="panel-footer "><div class="form-group">

						<input type="text" class="form-control " ng-model="q" placeholder="Chercher un candidat"> 

					</div> <!-- <button class="btn">Rafraichir</button> -->
				</div>
			</div>	

		</div>	

		<!-- TEMPLATE DE DETAILS DUN OBJET -->
		<div class="col-lg-12" ng-if="editionCandidat">
			<div class="panel-group">
				<div class="panel panel-danger">

					 <div class="panel-heading"><i class="fa fa-male"></i> Détail à propos de {{editionCandidat.prenom}}
					 </div>

					 <div class="panel-body">
						<div class="col-lg-6" >
								<div class="form-group input-group">
								  <span class="input-group-addon">Image</span>
								  <img src = "{{editionCandidat.image}}" class = "img-responsive" style ="width : 100px; height:100px;">
								</div>
								<div class="form-group input-group">
									<span class="input-group-addon">Nom</span>
									<input type="text" class="form-control text " ng-model = "editionCandidat.prenom">
								</div>
								<div class="form-group input-group">
									<span class="input-group-addon">Prénom</span>
									<input type="text" class="form-control text " ng-model = "editionCandidat.nom">
								</div>
						</div>

						<div class="col-lg-6" >
							<div class="form-group input-group">
								<span class="input-group-addon">Année Naissance</span>
								 <input type="text" class="form-control text " ng-model = "editionCandidat.anneeNaissance">
							</div>
							<div class="form-group input-group">
								<span class="input-group-addon">Adresse</span>
								 <input type="text" class="form-control text " ng-model = "editionCandidat.adresse">
							</div>
						</div>
					 </div>

					 <div class="panel-heading "><i class="fa fa-flag"></i> Ses notes
					 </div>

					 <div class="panel-body">

						<div class="form-group input-group col-lg-3" style="float: left;">
							<span class="input-group-addon ">motivation</span>
							<ui-knob value="editionCandidat.motivation" options="options"></ui-knob>
						</div>
						<div class="form-group input-group col-lg-3" style="float: left;">
							<span class="input-group-addon">C.V</span>
							<ui-knob value="editionCandidat.cv" options="options"></ui-knob>
						</div>
						<div class="form-group input-group col-lg-3" style="float: left;">
							<span class="input-group-addon">Etudes</span>
							<ui-knob value="editionCandidat.etudes" options="options"></ui-knob>
						</div>

						<div class="form-group input-group col-lg-3" style="float: left;">
							<span class="input-group-addon">Experience</span>
							<ui-knob value="editionCandidat.experience" options="options"></ui-knob>
						</div>
						<div class="form-group input-group col-lg-3" style="float: left;">
							<span class="input-group-addon">Communication</span>
							<ui-knob value="editionCandidat.communication" options="options"></ui-knob>
						</div>
						<div class="form-group input-group col-lg-3" style="float: left;">
							<span class="input-group-addon">Motivations</span>
							<ui-knob value="editionCandidat.motivations" options="options"></ui-knob>
						</div>
						<div class="form-group input-group col-lg-3" style="float: left;">
							<span class="input-group-addon">Orthographe</span>
							<ui-knob value="editionCandidat.orthographe" options="options"></ui-knob>
						</div>
						<div class="form-group input-group col-lg-3" style="float: left;">
							<span class="input-group-addon">Créativite</span>
							<ui-knob value="editionCandidat.creativite" options="options"></ui-knob>
						</div>

					 </div>

					<div class="panel-footer text-right">
						<button ng-click="showAlert()" class="btn">Enregistrer</button>
						<div  ng-show="alertMsg.show"  class="alert alert-success " role="alert" ><strong>Bien Joué</strong> Vous avez bien évalué le candidat. </div>
					</div>

				</div>
			</div>
		</div>
	</div>

	<!-- FIND DE DIV GLOBALE FLUID BOOSTRAP POUR LES PHONES -->
	</div>
	<script src="app.js">
	</script>
</body>

	<style>

	.img{
	width:50px;
	height:50px;
	}

	.input-group-addon{
	min-width:150px;
	}

	float{
	float:left;
	}
	</style>
</html>
<!-- input, select, textarea { max-width: auto;} -->

App.js :

var app = angular.module('App', ['ui.bootstrap','ui.knob'])

app.controller('MainCtrl', function($scope, $timeout) {

/* $scope.candidats peut être acquis par le back END, sur une base Mysql ou noSql.  */
$scope.candidats = [
{"id":"1","image":"img-candidats/1.jpg","nom":"Mohammed","prenom":"Farouk","anneeNaissance":1980,"motivation":8,"cv":5,"etudes":3,"experience":7,"communication":5,"disponibilite":4,"orthographe":5,"creativite":2},
{"id":"2","image":"img-candidats/2.jpg","nom":"Henri","prenom":"Lefranc","anneeNaissance":1983,"motivation":4,"cv":2,"etudes":1,"experience":4,"communication":2,"disponibilite":3,"orthographe":6,"creativite":7},
{"id":"3","image":"img-candidats/3.jpg","nom":"Thierry","prenom":"Dupuis","anneeNaissance":1985,"motivation":5,"cv":4,"etudes":3,"experience":2,"communication":1,"disponibilite":5,"orthographe":4,"creativite":7}
] ;

/* La fonction suivante pioche dans $scope.candidats les data d'un candidat, mais elle pourrait(devrait) être conçue pour lancer une requête $HTTP sur une base MYSQL ou NO sqlpour recuperer les data d'UN SEUL CANDIDAT(c est la procedure normale la moins couteuse en terme de memoire) */
$scope.editerCandidat = function (candidat){
	$scope.indexCandidatChoisi = $scope.candidats.indexOf(candidat);// Retrouve l'index du candidat choisi dans le tableau d'objets JSON $scope.candidats. Très utile après un tri dans la table
	$scope.editionCandidat = $scope.candidats[$scope.indexCandidatChoisi];
}

$scope.enregistrerCandidat = function (){

	/* SIMULE UNE ECRITURE EN BACK END, ON SE SERT DE NOTRE VARIABLE INDEX POUR UPDATER LES DATA DU CANDIDAT */
	$scope.candidats[$scope.indexCandidatChoisi] = angular.copy($scope.editionCandidat);

}

 /* Montrer un message Bootstrap sur click. */
 $scope.alertMsg = {
        show: false,
        text:"Alert message is ::show"
    };
    $scope.showAlert =function(){
         $scope.alertMsg.show = true;
		$timeout(function(){
			$scope.alertMsg.show = false;
		}, 2000);
    }

/* Parametrage de l'aspect des KNOBS */
$scope.options = {
  skin: {
    type: 'tron'
  },
  size: 150,
  unit: "",
  barWidth: 20,
   bgColor: '#2C3E50',
     barColor: '#FFAE1A',
  textColor: '#eee',
  trackColor: 'rgba(255,0,0,.1)',
  prevBarColor: 'rgba(0,0,0,.2)',
  subText: {
    enabled: false,
    text: 'CPU used'
  },
  scale: {
    enabled: true,
    type: 'lines',
    width: 3
  },
  step: 0.1,
  max:10,
  displayPrevious: true
};

/* FIN DU CONTROLEUR */
});

Publicités