Untitled

@(utilisateur: Utilisateur, users: List[UserEspaceClient])

<html>
    <head>
        <title>Somovers</title>
        <meta charset="utf-8" />
          <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.ico")">
        @views.html.css(request.path())

        @views.html.javascript(request.path(),utilisateur)

        <style>
        	#DataTables_Table_0_filter{
        		position: relative;
        	}
        	#dataLoading{
        		position: absolute;
        		left: 0;
        		right: 0;
        		margin: 0 auto;
        		top: 0;
        		text-align: center;
        		z-index: 100;
        		color: white;
        		font-weight: bold;
        	}
        </style>
		<script>
			window.alert = function(e){console.log(e);};
			var mytable;
			var storedUser = [];
			var orderSort='desc';
			var loading;
			var ONCE = false;

			var interv = setInterval(function(){
				if($('.treeview-table tbody tr').length == 10 && !ONCE){

					if($("#orderSort").length){
						orderSort='asc';
					}
					 $('.treeview-table tfoot th').each( function () {
					        var title = $(this).text();
					        $(this).html( '<input type="text" class="colfilter" placeholder="'+title+'" />' );
					    } );

					/*
					 * DATATABLE CREATION
					 */
					mytable = $('.treeview-table').DataTable({
						"language": {
							"url": "//cdn.datatables.net/plug-ins/1.10.9/i18n/French.json"
						},
						lengthMenu: [[10, 25, 50, 100],['10', '25', '50', '100']],
						dom: 'flrtipl',
						buttons: [
						          'copyHtml5',
						          'excelHtml5',
						          'csvHtml5',
						          'pdfHtml5'
						],
						"order": [[ 0, orderSort ]],
						"initComplete" : function(){
							mytable.columns().every( function () {
						        var that = this;

						    // Apply the search
					         $( 'input.colfilter', this.footer() ).on( 'keyup change', function () {

								if ( that.search() !== this.value ) {
									  	  that
										 .search( this.value)
									     .draw();
								}
					  		});

						    if(!ONCE){
						    	ONCE = true;

						    	$('#DataTables_Table_0_filter').append('<p id="dataLoading">Données en cours de chargement <span>.</span></p>');

								loading = setInterval(function(){
									if($(' #dataLoading span').html().length < 3){
										$(' #dataLoading span').html($(' #dataLoading span').html()+'.');
									}
									else{
										$(' #dataLoading span').html('');
									}
								},500);
						    }

						 });
						},
						stateSave: true
					});
					/*
					 * END OF DATATABLE CREATION
					 */

					clearInterval(interv);

					setTimeout(function(){
						var json=$("#DataTables_Table_0").DataTable().state();
						//console.log(json.columns[0].search.search);
						var index=0;
						$("table").find("tfoot").find("input").each(function(){
							this.value=json.columns[index].search.search;
							index++
						});
						index=0;
					}, 1000);

					while(storedUser.length > 0){
						mytable.row.add(storedUser[0]);
						storedUser.shift();
					}
					mytable.order(0,orderSort).draw();


				}
			},200);

		</script>
		<!--[if gte IE 9]>
		  <style type="text/css">
		    .gradient {
		       filter: none;
		    }
		  </style>
		<![endif]-->
		@helper.javascriptRouter("jsRoutes")(
			routes.javascript.SendEmail.sendLogin,
        	routes.javascript.UsersEspaceClient.getHistorique
        )
    </head>
    <body>
    	<header class="topbar">
       		@views.html.menu(utilisateur)
        </header>
        <div class="container-fluid">
        	<div class="row">
        		<div class="col-md-12">
        			<a class="btn btn-warning retour" href="@routes.Application.index()">Retour</a>
        			<h1>Liste des utilisateurs de l'espace client</h1>
        			<input type="hidden" id="orderSort" value="asc" />
						<table class="table table-bordered table-grey treeview-table">
	        				<thead>
		        				<tr>
		        					<th>Nom</th>
		        					<th>Login</th>
		        					<th></th>
		        				</tr>
	        				</thead>
	        				<tfoot>
		        				<tr>
		        					<th>Nom</th>
		        					<th>Login</th>
		        					<th></th>
		        				</tr>
	        				</tfoot>
        				<tbody>
        				@users.map { unUser =>
        					@if(users.indexOf(unUser)<10){
        						<tr>
	        						<td>@unUser.login</td>
	        						<td><i>@if(unUser.actif){Actif}else{Inactif}</i>     <a href="/changeActivityEspace/@unUser.login"><span class="glyphicon glyphicon-refresh"></span></a></td>
	        						<td style="width: 40px;" >
	        							<a href="@routes.UsersEspaceClient.edit(unUser.login)"><i class="glyphicon glyphicon-edit"></i></a>
	        							<a data-login="@unUser.login" class="btn btn-primary sendmail"><i class="glyphicon glyphicon-envelope" style="color:white"></i></a>
	        							<a data-id="@unUser.id" class="history"><i class="fa fa-history"></i></a><br/><span class="resultmail"></span>
	        						</td>
	        					</tr>
        					}else{
        						<script>
        							if(typeof mytable != "undefined"){
        								mytable.row.add($(`<tr>
			        		        						<td>@unUser.login</td>
			        		        						<td><i>@if(unUser.actif){Actif}else{Inactif}</i>     <a href="/changeActivityEspace/@unUser.login"><span class="glyphicon glyphicon-refresh"></span></a></td>
			        		        						<td style="width: 40px;" >
			        		        							<a href="@routes.UsersEspaceClient.edit(unUser.login)"><i class="glyphicon glyphicon-edit"></i></a>
			        		        							<a data-login="@unUser.login" class="btn btn-primary sendmail"><i class="glyphicon glyphicon-envelope" style="color:white"></i></a>
			        		        							<a data-id="@unUser.id" class="history"><i class="fa fa-history"></i></a><br/><span class="resultmail"></span>
			        		        						</td>
			        		        					</tr>`));
        								@if(users.indexOf(unUser) % 500 == 0 || users.indexOf(unUser) == users.size() - 1){
            								mytable.sort(0,orderSort).draw();
            							}
        							}else{
        								storedUser.push($(`<tr>
				        		        						<td>@unUser.login</td>
				        		        						<td><i>@if(unUser.actif){Actif}else{Inactif}</i>     <a href="/changeActivityEspace/@unUser.login"><span class="glyphicon glyphicon-refresh"></span></a></td>
				        		        						<td style="width: 40px;" >
				        		        							<a href="@routes.UsersEspaceClient.edit(unUser.login)"><i class="glyphicon glyphicon-edit"></i></a>
				        		        							<a data-login="@unUser.login" class="btn btn-primary sendmail"><i class="glyphicon glyphicon-envelope" style="color:white"></i></a>
				        		        							<a data-id="@unUser.id" class="history"><i class="fa fa-history"></i></a><br/><span class="resultmail"></span>
				        		        						</td>
				        		        					</tr>`));
        							}


        						</script>
        					}
        				}
        				</tbody>
        			</table>
        			<script>
						clearInterval(loading);
						$('#dataLoading').remove();
						$(document).ready(function(){
							setTimeout(function(){
								clearInterval(loading);
								$('#dataLoading').remove();
							},200)

						});
        			</script>
        		</div>
        	</div>
        </div>


        <div id="historique" class="modal fade" data-keyboard="false" data-backdrop="static" role="dialog">
  			<div id="modalAide" class="modal-dialog" style="width:fit-content">
    			<div class="modal-content">
      				<div class="modal-header">
        				<button type="button" class="close" id="fermer" data-dismiss="modal">&times;</button>
        				<h4 class="modal-title">Historique de <i id="identifiant"></i></h4>
      				</div>
      				<div class="modal-body">
	      				<table class="table">
	      					<thead>
	      						<tr>
	      							<th>action</th><th>adresse ip</th><th>date</th>
	      						</tr>
	      					</thead>
	      					<tbody id="bodyhistorique">

	      					</tbody>
	      				</table>
      				</div>
      				<div class="modal-footer">
      				</div>
    			</div>
  			</div>
		</div>


        <footer>
			@views.html.footer(utilisateur)
		</footer>
         <script>


        $(".sendmail").click(function(){
        	var parent=$(this).parent();
            var ajaxCallBack = {
     			data : "login="+$(this).attr("data-login"),
         		dataType: "json",
         		type: "POST",
         		success : function(data) {
         			parent.find(".resultmail").html("les identifiants ont bien été envoyés");
         			setTimeout(function(){
         				parent.find(".resultmail").empty();
         			}, 3000);
         		},
         		error : function(error) {
         			parent.find(".resultmail").html("les identifiants n'ont pas pu être envoyés");
         			setTimeout(function(){
         				parent.find(".resultmail").empty();
         			}, 3000);
         		}
         	}
         	jsRoutes.controllers.SendEmail.sendLogin().ajax(ajaxCallBack);
        });

      	$(".history").click(function(){
      		var ajaxCallBack = {
       			data : "id="+$(this).attr("data-id"),
           		dataType: "json",
           		type: "GET",
           		success : function(data) {
           			$("#identifiant").html(data.login);
           			for(var i=0;i<data.historique.length;i++){
           				var date=new Date(data.historique[i].dateAction)
           				var datestring=date.getDate()+"/"+(date.getMonth()+1)+"/"+date.getFullYear();
           				var tr="<tr><td>"+data.historique[i].libelle+"</td><td>"+data.historique[i].ip+"</td><td>"+datestring+"</td></tr>";
           				$("#bodyhistorique").append(tr);
           			}
           			$("#historique").modal("show");
           		},
           		error : function(error) {
           			console.log(error);
           		}
           	}
           	jsRoutes.controllers.UsersEspaceClient.getHistorique().ajax(ajaxCallBack);
      	})

		</script>
    </body>
</html>