[Pouchdb][Cloudant][Big data] MonEtablissement : Utilisation de filtres imbriqués dans une app cloudant pouchdb

monetablissement.jpg

Introduction


Utilisation de filtres imbriqués dans une app cloudant pouchdb

Tester l’app


http://nicolas.huleux.free.fr/pouchdb2

Le code


Le code Js :

/* Plugger pouchDb à Cloudant */
var db = new PouchDB('https://xxxx-be6e-42d6-b914-d0ecae937981-bluemix:8eeedbe180c1ce90cdc3ae37b9e74af7368b21a37b531aae819929d3405c7d22@1c54473b-be6e-42d6-b914-d0ecae937981-bluemix.cloudant.com/etablissements');
$("#loader").hide();

function trouver() {
	$("#loader").show();
	var departement = $("#dep").val();
	var type_detablissement = $("#type_detablissement").val();
	if (departement.length < 3) {
		departementMin = parseInt(departement + '000');
		departementMax = parseInt(departement + '999');
	} else {
		departementMin = parseInt(departement + '00');
		departementMax = parseInt(departement + '99');
	}
	db.createIndex({
		index: {
			fields: ['cp']
		}
	});
	db.createIndex({
		index: {
			fields: ['type_detablissement']
		}
	});
	filtres = {};
	if (departement) {
		filtres.cp = {
			$gt: departementMin,
			$lt: departementMax
		};
	}
	if (type_detablissement) {
		filtres.type_detablissement = type_detablissement;
	}
	db.find({
		"selector": filtres,
		"sort": [{
			"cp": "asc"
		}]
	}).then(function(result) {
		// handle result
		console.log(result.docs);
		$("#liste").empty(); // On vide le précédent formulaire.
		// On crée un boutton pour chaque document
		for (x = 0; x < result.docs.length; x++) {
			var _id = result.docs[x]._id;
			$("#liste").append("<div><button onclick=' editer(\"" + _id + "\")' > Edition</button>  " + result.docs[x].cp + " " + result.docs[x].nom + "<br></div>");
		}
		$("#etabHeader").empty();
		$("#etabHeader").append(result.docs.length);
		$("#loader").hide();
	}).catch(function(err) {
		console.log(err);
	});
}
// EDITER - UPDATE
function editer(id) {
	$("#loader").show();
	// On lit le document sur la base de données à partir de son ID, puis on crée le formulaire en conséquence.
	db.get(id).then(function(doc) {
		window.doc_origin = doc; // On copie le doc original en mémoire parce que on ne veut pas mettre tous les champs dans le forumalire html il y en a trop.
		creerFormulaire(doc);
		$("#loader").hide();
	});
}
// VALIDER UN UPDATE ET ENVOYER LE DOCUMENT SUR IBM CLOUDANT
function valider() {
	$("#loader").show();
	// On récupère les var dans les champs du formulaire
	var formulaire = $('form').serializeArray();
	// On convertit ça en objet JSON
	var etablissementObject = {};
	$.each(formulaire,
		function(i, v) {
			etablissementObject[v.name] = v.value;
		});
	etablissementObject.cp = Number(etablissementObject.cp)
	/* ON réinjecte les données qui ont été modifiées dans le document original. */
	definitiveEtablissement = Object.assign(window.doc_origin, etablissementObject);
	db.put(definitiveEtablissement).then(function(response) {
		// handle response
		alert('bien update');
		$("#loader").hide();
	}).catch(function(err) {
		console.log(err);
	});
}

function creerFormulaire(mesDatas) {
	$("#detail").empty(); // On vide le précédent formulaire.
	// On crée le template formulaire avec  template en JS ES6, c'est très pratique .
	var str = `
				<form id="form" >
					<h3 style ="background:grey;color:white">❤ ${mesDatas.nom}</h3><br>
					<div class="form-group row">
					  <label for="example-text-input">Identifiant Cloudant</label>
					
						<input class="form-control" value="${mesDatas._id}"  name="_id" id="_id" readonly ></input>
					  
					  </div>
					</div>
					<div class="form-group row">
					  <label for="example-text-input">Révision Cloudant</label>
						<input class="form-control" value="${mesDatas._rev}"  name="_rev" id="_rev" readonly ></input>
					</div>
					<div class="form-group row">
					  <label for="example-text-input">code_uai</label>
						<input class="form-control" value="${mesDatas.code_uai}"  name="code_uai" id="code_uai"  ></input>
					</div>
					<div class="form-group row">
					  <label for="example-text-input">n_siret</label>
						<input class="form-control" value="${mesDatas.n_siret}"  name="n_siret" id="n_siret"  ></input>
					</div>
					<div class="form-group row">
					  <label for="example-text-input">type_detablissement</label>
						<input class="form-control" value="${mesDatas.type_detablissement}"  name="type_detablissement" id="type_detablissement"  ></input>
					</div>
					<div class="form-group row">
					  <label for="example-text-input">sigle</label>
						<input class="form-control" value="${mesDatas.sigle}"  name="sigle" id="sigle"  ></input>
					</div>
					<div class="form-group row">
					  <label for="example-text-input">statut</label>
						<input class="form-control" value="${mesDatas.statut}"  name="statut" id="statut"  ></input>
					</div>
					<div class="form-group row">
					  <label for="example-text-input">tutelle</label>
						<input class="form-control" value="${mesDatas.tutelle}"  name="tutelle" id="tutelle"  ></input>
					</div>
					<div class="form-group row">
					  <label for="example-text-input">universite</label>
						<input class="form-control" value="${mesDatas.universite}"  name="universite" id="universite"  ></input>
					</div>
					
					<div class="form-group row">
					  <label for="example-text-input">Nom</label>
					
						<input class="form-control" value="${mesDatas.nom}"  name="nom" id="nom"></input>
					  </div>
					
					<div class="form-group row">
					  <label for="example-text-input">Adresse</label>
					
						<input class="form-control" value="${mesDatas.adresse}"  name="adresse" id="adresse"></input>
					 
					</div>
					<div class="form-group row">
					  <label for="example-text-input">Cp</label>
					
						<input class="form-control" type = "number" value="${mesDatas.cp}"  name="cp" id="cp"></input>
					  
					</div>
					<div class="form-group row">
					  <label for="example-text-input">commune</label>
					
						<input class="form-control" value="${mesDatas.commune}"  name="commune" id="commune"></input>
					  
					</div>
				
					<div class="form-group row">
					  <label for="example-text-input">Téléphone</label>
					
						<input class="form-control" value="${mesDatas.telephone}"  name="telephone" id="telephone"></input>
					  
					</div>
					<div class="form-group row">
					  <label for="example-text-input">Type</label>
					
						<input class="form-control" value="${mesDatas.type_detablissement}"  name="type_detablissement" id="type_detablissement"></input>
					  
					</div>
					
				 </form>
			`;
	$("#detail").append(str);
}
/* INFOS SUR LA BASE DE DONNEE FACULTATIVE */
db.info().then(function(info) {
	console.log(info);
})

Le code HTML

<html >
	<head>
	<meta http-equiv="X-UA-Compatible" content="IE=8" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Exo cloudant</title>
        
		<!------------------------------------------------------------ CHARGEMENT DES LIBRAIRIES ------------------------------------------------>
            <link type="text/css" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
			<link type="text/css" rel="stylesheet" href="style.css" />
			
			<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
			<script src="//cdn.jsdelivr.net/npm/pouchdb@6.4.3/dist/pouchdb.min.js"></script>
			<script src="js/pouchdb.find.js"></script>
			
		<!------------------------------------------------------- FIN DE CHARGEMENT DES LIBRAIRIES ------------------------------------------------->
	</head>

<!-- La page HTML générale -->
<body style="background-color:tan" >
   <div id="app"  >
	<div class="row" style="margin-top:10px; " >
	
	
		
		
		
		 <div class="card col-md-2"  id="div1">  
			<div class="card-header">Filtres</div>
			<div class="card-body cardspe"   >
				 <div >
					
					<div class="form-group">
					  <label for="example-text-input">Type Etablissement</label>
						<select class="form-control" name="type_detablissement" id = "type_detablissement">
						<option value="">Tous</option>
						<option value="Collège">Collège</option>
						<option value="Lycée">Lycée</option>
						<option value="Centre national d'enseignement à distance">Centre national d'enseignement à distance</option>
						
						<option value="Centre de formation d'apprentis">Centre de formation d'apprentis</option>
						<option value="Maison familiale rurale">Maison familiale rurale</option>
						
						</select>
					</div>

					
			 
			 
					<div class="form-group">
					  <label for="example-text-input">Département</label>
					<select class="form-control" name="dep" id = "dep">
					<option value="">Tous</option>
						<option value="00">(00) Hors France</option>
						<option value="01">(01) Ain </option>
						<option value="02">(02) Aisne </option>
						<option value="03">(03) Allier </option>
						<option value="04">(04) Alpes de Haute Provence </option>
						<option value="05">(05) Hautes Alpes </option>
						<option value="06">(06) Alpes Maritimes </option>
						<option value="07">(07) Ardèche </option>
						<option value="08">(08) Ardennes </option>
						<option value="09">(09) Ariège </option>
						<option value="10">(10) Aube </option>
						<option value="11">(11) Aude </option>
						<option value="12">(12) Aveyron </option>
						<option value="13">(13) Bouches du Rhône </option>
						<option value="14">(14) Calvados </option>
						<option value="15">(15) Cantal </option>
						<option value="16">(16) Charente </option>
						<option value="17">(17) Charente Maritime </option>
						<option value="18">(18) Cher </option>
						<option value="19">(19) Corrèze </option>
						<option value="2A">(2A) Corse du Sud </option>
						<option value="2B">(2B) Haute-Corse </option>
						<option value="21">(21) Côte d'Or </option>
						<option value="22">(22) Côtes d'Armor </option>
						<option value="23">(23) Creuse </option>
						<option value="24">(24) Dordogne </option>
						<option value="25">(25) Doubs </option
						><option value="26">(26) Drôme </option>
						<option value="27">(27) Eure </option>
						<option value="28">(28) Eure et Loir </option>
						<option value="29">(29) Finistère </option>
						<option value="30">(30) Gard </option>
						<option value="31">(31) Haute Garonne </option>
						<option value="32">(32) Gers </option>
						<option value="33">(33) Gironde </option>
						<option value="34">(34) Hérault </option>
						<option value="35">(35) Ille et Vilaine </option>
						<option value="36">(36) Indre </option>
						<option value="37">(37) Indre et Loire </option>
						<option value="38">(38) Isère </option>
						<option value="39">(39) Jura </option>
						<option value="40">(40) Landes </option>
						<option value="41">(41) Loir et Cher </option>
						<option value="42">(42) Loire </option>
						<option value="43">(43) Haute Loire </option>
						<option value="44">(44) Loire Atlantique </option>
						<option value="45">(45) Loiret </option>
						<option value="46">(46) Lot </option>
						<option value="47">(47) Lot et Garonne </option>
						<option value="48">(48) Lozère </option>
						<option value="49">(49) Maine et Loire </option>
						<option value="50">(50) Manche </option>
						<option value="51">(51) Marne </option>
						<option value="52">(52) Haute Marne </option>
						<option value="53">(53) Mayenne </option>
						<option value="54">(54) Meurthe et Moselle </option>
						<option value="55">(55) Meuse </option>
						<option value="56">(56) Morbihan </option>
						<option value="57">(57) Moselle </option>
						<option value="58">(58) Nièvre </option>
						<option value="59">(59) Nord </option>
						<option value="60">(60) Oise </option>
						<option value="61">(61) Orne </option>
						<option value="62">(62) Pas de Calais </option>
						<option value="63">(63) Puy de Dôme </option>
						<option value="64">(64) Pyrénées Atlantiques </option>
						<option value="65">(65) Hautes Pyrénées </option>
						<option value="66">(66) Pyrénées Orientales </option>
						<option value="67">(67) Bas Rhin </option>
						<option value="68">(68) Haut Rhin </option>
						<option value="69">(69) Rhône </option>
						<option value="70">(70) Haute Saône </option>
						<option value="71">(71) Saône et Loire </option>
						<option value="72">(72) Sarthe </option>
						<option value="73">(73) Savoie </option>
						<option value="74">(74) Haute Savoie </option>
						<option value="75">(75) Paris </option>
						<option value="76">(76) Seine Maritime </option>
						<option value="77">(77) Seine et Marne </option>
						<option value="78">(78) Yvelines </option>
						<option value="79">(79) Deux Sèvres </option>
						<option value="80">(80) Somme </option>
						<option value="81">(81) Tarn </option>
						<option value="82">(82) Tarn et Garonne </option>
						<option value="83">(83) Var </option>
						<option value="84">(84) Vaucluse </option>
						<option value="85">(85) Vendée </option>
						<option value="86">(86) Vienne </option>
						<option value="87">(87) Haute Vienne </option>
						<option value="88">(88) Vosges </option>
						<option value="89">(89) Yonne </option>
						<option value="90">(90) Territoire de Belfort </option>
						<option value="91">(91) Essonne </option>
						<option value="92">(92) Hauts de Seine </option>
						<option value="93">(93) Seine Saint Denis </option>
						<option value="94">(94) Val de Marne </option>
						<option value="95">(95) Val d'Oise </option>
						<option value="971">(971) Guadeloupe </option>
						<option value="972">(972) Martinique </option>
						<option value="973">(973) Guyane </option>
						<option value="974">(974) Réunion </option>
						<option value="975">(975) Saint Pierre et Miquelon </option>
						<option value="976">(976) Mayotte </option>
						</select>
						</div>

					
			 </div>
			
			
			
			
			</div>
			<div class="card-footer ">
				<button onclick="trouver()" class="btn float-right btn-primary"  >Rechercher</button>
				<span><img id="loader" src ="loading_s2.gif" style="width:50px;"></img></span> 
			</div>
        </div>
		
		
		
		
		
		
		<div class="card col-md-5 " >  
			 <div class="card-header" >Les établissements <span id='etabHeader'></span> </div>
		
			 
			 <div class="card-body cardspe" id="liste"  > Utilisez les filtres ...</div>
	
			<div class="card-footer ">
				<!-- <button  onclick="lireDix()"class="btn float-right btn-primary"  >10 de plus</button> -->

			</div>
		</div>



	   <div class="card col-md-5"  id="div1">  
			<div class="card-header">Détails</div>
			<div class="card-body cardspe" id="detail"  > Cliquez sur un établissement dans la liste</div>
			<div class="card-footer ">
				<button onclick="valider()" class="btn float-right btn-primary"  >Valider</button>
			</div>
        </div>
	
		
    </div>
</body>


<script src="app.js"></script>









 

 

    
 

Publicités