From 05f35f4c5b18d39fbe03f3791901922f3a85cc2a Mon Sep 17 00:00:00 2001
From: miferreiro <miguel.ferreiro.diaz@gmail.com>
Date: Tue, 26 Feb 2019 20:42:32 +0100
Subject: [PATCH] Removed idOwners from pet tables

Now the name and surname of the person who owns the pet is displayed instead of its id.
To do this, we have included the getPeople method in the people dao to obtain the information of a specific person and thus obtain the name and surname to be shown in the table.
---
 src/main/webapp/js/dao/people.js  |  8 +++++++
 src/main/webapp/js/view/people.js | 15 +++++++-----
 src/main/webapp/js/view/pets.js   | 40 +++++++++++++++++++++----------
 src/main/webapp/main.html         | 19 +++++++++++----
 4 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/src/main/webapp/js/dao/people.js b/src/main/webapp/js/dao/people.js
index 29618ee..4557599 100644
--- a/src/main/webapp/js/dao/people.js
+++ b/src/main/webapp/js/dao/people.js
@@ -16,6 +16,14 @@ var PeopleDAO = (function() {
     };
 
     function PeopleDAO() {
+		
+	this.getPeople = function(id,done, fail, always) {
+	    requestByAjax({
+		url : resourcePath + id,
+		type : 'GET'
+	    }, done, fail, always);
+	};
+		
 	this.listPeople = function(done, fail, always) {
 	    requestByAjax({
 		url : resourcePath,
diff --git a/src/main/webapp/js/view/people.js b/src/main/webapp/js/view/people.js
index dd8f4cd..c8b841f 100644
--- a/src/main/webapp/js/view/people.js
+++ b/src/main/webapp/js/view/people.js
@@ -24,7 +24,7 @@ var PeopleView = (function() {
 				});
 			},
 			function() {
-			    	alert('No has sido posible acceder al listado de personas.');
+			    	alert('No ha sido posible acceder al listado de personas.');
 			});
 			
 			// La acción por defecto de enviar formulario (submit) se sobreescribe
@@ -110,15 +110,18 @@ var PeopleView = (function() {
 
 		this.listPets = function(id) {
 			$('.containerGeneric').empty();
-			$('.containerGeneric').append('<div id="pets-container" style="display: show;">\
-											<h1 class="display-5 mt-3 mb-3">Mascotas</h1>\
-											</div>');
+			$('.containerGeneric').append('<div id="pets-container" style="display: show;"></div>');
 
 			var viewPets = new PetsView(new PetsDAO(),
 					'pets-container', 'pets-container',
-			);
-			viewPets.initPeople(id);	
+			);		
 			
+			 dao.getPeople(id,
+						  function(person) {
+							viewPets.initPetsPerson(id, person);	
+						  },
+						  showErrorMessage
+						);
 		};
 		
 		this.isEditing = function() {
diff --git a/src/main/webapp/js/view/pets.js b/src/main/webapp/js/view/pets.js
index 9ed2b8a..a41d07c 100644
--- a/src/main/webapp/js/view/pets.js
+++ b/src/main/webapp/js/view/pets.js
@@ -17,10 +17,18 @@ var PetsView = (function() {
 		insertPetsList($('#' + listContainerId));
 		
 		this.init = function() {
-			
+			$('#' + formContainerId).before('<h1 class="display-5 mt-3 mb-3" id="pets-tittle">Mascotas</h1>');
 			dao.listPets(function(pets) {
 				$.each(pets, function(key, pet) {
-					appendToTable(pet);
+					
+					var daoPeople = new PeopleDAO();
+					
+					daoPeople.getPeople(pet.idOwner,
+					 				    function(person) {
+												appendToTable(pet, person);
+										},
+										showErrorMessage
+										);
 				});
 			});
 			
@@ -58,12 +66,14 @@ var PetsView = (function() {
 			$('#btnClearPet').click(this.resetForm);
 		};
 		
-		this.initPeople = function(id) {
+		this.initPetsPerson = function(id, person) {
+			
+			$('#' + formContainerId).before('<h1 class="display-5 mt-3 mb-3" id="pets-tittle">Mascotas de ' + person.name + '</h1>');
 			
 			dao.listPeoplePets(id,
 							   function(pets) {
 								$.each(pets, function(key, pet) {
-									appendToTable(pet);
+									appendToTable(pet, person);
 								});
 			});
 			
@@ -184,9 +194,10 @@ var PetsView = (function() {
 			'<table id="' + listId + '" class="table">\
 				<thead>\
 					<tr class="row">\
-						<th class="col-sm-3">Nombre</th>\
-						<th class="col-sm-3">Especie</th>\
-						<th class="col-sm-3">Propietario</th>\
+						<th class="col-sm-2" style="text-align:center;">Nombre</th>\
+						<th class="col-sm-2" style="text-align:center;">Especie</th>\
+						<th class="col-sm-2" style="text-align:center;">Nombre Propietario</th>\
+						<th class="col-sm-2" style="text-align:center;">Apellido Propietario</th>\
 						<th class="col-sm-3">&nbsp;</th>\
 					</tr>\
 				</thead>\
@@ -219,11 +230,14 @@ var PetsView = (function() {
 		);
 	};
 
-	var createPetRow = function(pet) {
+	var createPetRow = function(pet, person) {
+				
 		return '<tr id="pet-'+ pet.id +'" class="row">\
-			<td class="namePet col-sm-3">' + pet.name + '</td>\
-			<td class="specie col-sm-3">' + pet.specie + '</td>\
-			<td class="idOwner col-sm-3">' + pet.idOwner + '</td>\
+			<td class="namePet col-sm-2" style="text-align:center;">' + pet.name + '</td>\
+			<td class="specie col-sm-2" style="text-align:center;">' + pet.specie + '</td>\
+			<td style="display:none;" class="idOwner col-sm-3" style="text-align:center;">' + pet.idOwner + '</td>\
+			<td class="person-name col-sm-2" style="text-align:center;">' + person.name + '</td>\
+			<td class="person-surname col-sm-2" style="text-align:center;">' + person.surname + '</td>\
 			<td class="col-sm-3">\
 				<a class="edit btn btn-primary" href="#">Editar</a>\
 				<a class="delete btn btn-warning" href="#">Eliminar</a>\
@@ -245,9 +259,9 @@ var PetsView = (function() {
 		});
 	};
 
-	var appendToTable = function(pet) {
+	var appendToTable = function(pet, person) {
 		$(listQuery + ' > tbody:last')
-			.append(createPetRow(pet));
+			.append(createPetRow(pet, person));
 		addRowListeners(pet);
 	};
 	
diff --git a/src/main/webapp/main.html b/src/main/webapp/main.html
index 3a1bf11..85b5414 100644
--- a/src/main/webapp/main.html
+++ b/src/main/webapp/main.html
@@ -43,6 +43,17 @@
 				doLogout();
 		    });
 
+			$('.containerGeneric').empty();
+			$('.containerGeneric').append('<div id="people-container" style="display: show;">\
+											<h1 class="display-5 mt-3 mb-3">Personas</h1>\
+											</div>');
+
+			var viewPeople = new PeopleView(new PeopleDAO(),
+				'people-container', 'people-container'
+			);
+
+			viewPeople.init();	
+			
 			$('#people').click(function(event) {		
 				
 				$('.containerGeneric').empty();
@@ -53,15 +64,15 @@
 				var viewPeople = new PeopleView(new PeopleDAO(),
 					'people-container', 'people-container'
 				);
+				
 				viewPeople.init();	
+				
 		    });    
-			
+						
 			$('#pets').click(function(event) {
 			
 				$('.containerGeneric').empty();
-				$('.containerGeneric').append('<div id="pets-container" style="display: show;">\
-												<h1 class="display-5 mt-3 mb-3">Mascotas</h1>\
-												</div>');
+				$('.containerGeneric').append('<div id="pets-container" style="display: show;"></div>');
 				
 				var viewPets = new PetsView(new PetsDAO(),
 						'pets-container', 'pets-container',
-- 
2.18.1