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

@@ -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,

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() {

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);
 	};
 	

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',