Added the management of pets in the frontend

src/main/webapp/js/dao/pets.js

+var PetsDAO = (function() {
+    var resourcePath = "rest/pets/";
+    var requestByAjax = function(data, done, fail, always) {
+	done = typeof done !== 'undefined' ? done : function() {};
+	fail = typeof fail !== 'undefined' ? fail : function() {};
+	always = typeof always !== 'undefined' ? always : function() {};
+
+	let authToken = localStorage.getItem('authorization-token');
+	if (authToken !== null) {
+	    data.beforeSend = function(xhr) {
+		xhr.setRequestHeader('Authorization', 'Basic ' + authToken);
+	    };
+	}
+
+	$.ajax(data).done(done).fail(fail).always(always);
+    };
+
+    function PetsDAO() {
+	this.listPets = function(done, fail, always) {
+	    requestByAjax({
+		url : resourcePath,
+		type : 'GET'
+	    }, done, fail, always);
+	};
+
+	this.addPet = function(pet, done, fail, always) {
+	    requestByAjax({
+		url : resourcePath,
+		type : 'POST',
+		data : pet
+	    }, done, fail, always);
+	};
+
+	this.modifyPet = function(pet, done, fail, always) {
+	    requestByAjax({
+		url : resourcePath + pet.id,
+		type : 'PUT',
+		data : pet
+	    }, done, fail, always);
+	};
+
+	this.deletePet = function(id, done, fail, always) {
+	    requestByAjax({
+		url : resourcePath + id,
+		type : 'DELETE',
+	    }, done, fail, always);
+	};
+
+	this.listPeoplePets = function(id, done, fail, always) {
+		requestByAjax({
+		url : resourcePath + "?idOwner=" + id ,
+		type : 'GET',
+		}, done, fail, always);
+	};	
+		
+    }
+
+    return PetsDAO;
+})();
\ No newline at end of file

src/main/webapp/js/view/people.js

@@ -17,6 +17,7 @@ var PeopleView = (function() {
 		insertPeopleList($('#' + listContainerId));
 		
 		this.init = function() {
+						
 			dao.listPeople(function(people) {
 				$.each(people, function(key, person) {
 					appendToTable(person);
@@ -103,6 +104,19 @@ 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>');
+
+			var viewPets = new PetsView(new PetsDAO(),
+					'pets-container', 'pets-container',
+			);
+			viewPets.initPeople(id);	
+			
+		};
+		
 		this.isEditing = function() {
 			return $(formQuery + ' input[name="id"]').val() != "";
 		};
@@ -127,9 +141,9 @@ var PeopleView = (function() {
 				'<table id="' + listId + '" class="table">\
 					<thead>\
 						<tr class="row">\
-						<th class="col-sm-4">Nombre</th>\
-						<th class="col-sm-5">Apellido</th>\
-						<th class="col-sm-3">&nbsp;</th>\
+							<th class="col-sm-2">Nombre</th>\
+							<th class="col-sm-3">Apellido</th>\
+							<th class="col-sm-5">&nbsp;</th>\
 						</tr>\
 					</thead>\
 					<tbody>\
@@ -160,11 +174,12 @@ var PeopleView = (function() {
 
 	var createPersonRow = function(person) {
 		return '<tr id="person-'+ person.id +'" class="row">\
-			<td class="name col-sm-4">' + person.name + '</td>\
-			<td class="surname col-sm-5">' + person.surname + '</td>\
-			<td class="col-sm-3">\
+			<td class="name col-sm-2">' + person.name + '</td>\
+			<td class="surname col-sm-4">' + person.surname + '</td>\
+			<td class="col-sm-5">\
 				<a class="edit btn btn-primary" href="#">Editar</a>\
 				<a class="delete btn btn-warning" href="#">Eliminar</a>\
+				<a class="pets btn btn-info" href="#">Mascotas</a>\
 			</td>\
 		</tr>';
 	};
@@ -181,6 +196,10 @@ var PeopleView = (function() {
 		$('#person-' + person.id + ' a.delete').click(function() {
 			self.deletePerson(person.id);
 		});
+		
+		$('#person-' + person.id + ' a.pets').click(function() {
+			self.listPets(person.id);
+		});
 	};
 
 	var appendToTable = function(person) {

src/main/webapp/js/view/pets.js

+var PetsView = (function() {
+	var dao;
+
+	// Referencia a this que permite acceder a las funciones públicas desde las funciones de jQuery.
+	var self;
+	
+	var formId = 'pets-form';
+	var listId = 'pets-list';
+	var formQuery = '#' + formId;
+	var listQuery = '#' + listId;
+	
+	function PetsView(petsDao, formContainerId, listContainerId) {
+		dao = petsDao;
+		self = this;
+		
+		insertPetsForm($('#' + formContainerId));
+		insertPetsList($('#' + listContainerId));
+		
+		this.init = function() {
+			
+			dao.listPets(function(pets) {
+				$.each(pets, function(key, pet) {
+					appendToTable(pet);
+				});
+			});
+			
+			// La acción por defecto de enviar formulario (submit) se sobreescribe
+			// para que el envío sea a través de AJAX
+			$(formQuery).submit(function(event) {	
+				var pet = self.getPetInForm();
+						
+				if (self.isEditing()) {		
+					dao.modifyPet(pet,	
+						function(pet) {
+							$('#pet-' + pet.id + ' td.namePet').text(pet.name);
+							$('#pet-' + pet.id + ' td.specie').text(pet.specie);
+							$('#pet-' + pet.id + ' td.idOwner').text(pet.idOwner);
+							self.resetForm();
+						},
+						showErrorMessage,
+						self.enableForm
+					);
+					
+				} else {
+					dao.addPet(pet,
+						function(pet) {
+							appendToTable(pet);
+							self.resetForm();
+						},
+						showErrorMessage,
+						self.enableForm
+					);
+				}
+				
+				return false;
+			});
+			
+			$('#btnClearPet').click(this.resetForm);
+		};
+		
+		this.initPeople = function(id) {
+			
+			dao.listPeoplePets(id,
+							   function(pets) {
+								$.each(pets, function(key, pet) {
+									appendToTable(pet);
+								});
+			});
+			
+			// La acción por defecto de enviar formulario (submit) se sobreescribe
+			// para que el envío sea a través de AJAX
+			$(formQuery).submit(function(event) {	
+				var pet = self.getPetInForm();
+						
+				if (self.isEditing()) {		
+					dao.modifyPet(pet,	
+						function(pet) {
+							$('#pet-' + pet.id + ' td.namePet').text(pet.name);
+							$('#pet-' + pet.id + ' td.specie').text(pet.specie);
+							$('#pet-' + pet.id + ' td.idOwner').text(pet.idOwner);
+							self.resetForm();
+							if(pet.idOwner != id) {
+								$('tr#pet-' + pet.id).remove();
+							}
+						},
+						showErrorMessage,
+						self.enableForm
+					);
+					
+				} else {
+					dao.addPet(pet,
+						function(pet) {
+							appendToTable(pet);
+							self.resetForm();
+						},
+						showErrorMessage,
+						self.enableForm
+					);
+				}
+				
+				return false;
+			});
+			
+			$('#btnClearPet').click(this.resetForm);
+		};
+		
+		
+		this.getPetInForm = function() {
+			var form = $(formQuery);
+			return {
+				'id': form.find('input[name="idPet"]').val(),
+				'name': form.find('input[name="namePet"]').val(),
+				'specie': form.find('input[name="specie"]').val(),
+				'idOwner': form.find('input[name="idOwner"]').val()
+			};
+		};
+
+		this.getPetInRow = function(id) {
+			var row = $('#pet-' + id);
+
+			if (row !== undefined) {
+				return {
+					'id': id,
+					'name': row.find('td.namePet').text(),
+					'specie': row.find('td.specie').text(),
+					'idOwner': form.find('td.idOwner').text()
+				};
+			} else {
+				return undefined;
+			}
+		};
+		
+		this.editPet = function(id) {
+			var row = $('#pet-' + id);
+
+			if (row !== undefined) {
+				var form = $(formQuery);
+				
+				form.find('input[name="idPet"]').val(id);
+				form.find('input[name="namePet"]').val(row.find('td.namePet').text());
+				form.find('input[name="specie"]').val(row.find('td.specie').text());
+				form.find('input[name="idOwner"]').val(row.find('td.idOwner').text());
+				
+				$('input#btnSubmitPet').val('Modificar');
+			}
+		};
+		
+		this.deletePet = function(id) {
+			if (confirm('Está a punto de eliminar a una mascota. ¿Está seguro de que desea continuar?')) {
+				dao.deletePet(id,
+					function() {
+						$('tr#pet-' + id).remove();
+					},
+					showErrorMessage
+				);
+			}
+		};
+
+		this.isEditing = function() {
+			return $(formQuery + ' input[name="idPet"]').val() != "";
+		};
+
+		this.disableForm = function() {
+			$(formQuery + ' input').prop('disabled', true);
+		};
+
+		this.enableForm = function() {
+			$(formQuery + ' input').prop('disabled', false);
+		};
+
+		this.resetForm = function() {
+			$(formQuery)[0].reset();
+			$(formQuery + ' input[name="idPet"]').val('');
+			$('#btnSubmitPet').val('Crear');
+		};
+	};
+	
+	var insertPetsList = function(parent) {
+		parent.append(
+			'<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-3">&nbsp;</th>\
+					</tr>\
+				</thead>\
+				<tbody>\
+				</tbody>\
+			</table>'
+		);
+	};
+
+	var insertPetsForm = function(parent) {
+		parent.append(
+			'<form id="' + formId + '" class="mb-5 mb-11">\
+				<input name="idPet" type="hidden" value=""/>\
+				<div class="row">\
+					<div class="col-sm-3">\
+						<input name="namePet" type="text" value="" placeholder="Nombre" class="form-control" required/>\
+					</div>\
+					<div class="col-sm-3">\
+						<input name="specie" type="text" value="" placeholder="Especie" class="form-control" required/>\
+					</div>\
+					<div class="col-sm-3">\
+						<input name="idOwner" type="number" value="" placeholder="Propietario" class="form-control" required/>\
+					</div>\
+					<div class="col-sm-3">\
+						<input id="btnSubmitPet" type="submit" value="Crear" class="btn btn-primary" />\
+						<input id="btnClearPet" type="reset" value="Limpiar" class="btn" />\
+					</div>\
+				</div>\
+			</form>'
+		);
+	};
+
+	var createPetRow = function(pet) {
+		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="col-sm-3">\
+				<a class="edit btn btn-primary" href="#">Editar</a>\
+				<a class="delete btn btn-warning" href="#">Eliminar</a>\
+			</td>\
+		</tr>';
+	};
+
+	var showErrorMessage = function(jqxhr, textStatus, error) {
+		alert(textStatus + ": " + error);
+	};
+
+	var addRowListeners = function(pet) {
+		$('#pet-' + pet.id + ' a.edit').click(function() {
+			self.editPet(pet.id);
+		});
+		
+		$('#pet-' + pet.id + ' a.delete').click(function() {
+			self.deletePet(pet.id);
+		});
+	};
+
+	var appendToTable = function(pet) {
+		$(listQuery + ' > tbody:last')
+			.append(createPetRow(pet));
+		addRowListeners(pet);
+	};
+	
+	return PetsView;
+})();

src/main/webapp/main.html

@@ -15,21 +15,25 @@
 				<a href="#" class="navbar-brand d-flex align-items-center">
 					<strong>DAA	Example</strong>
 				</a>
+				<button id="people" class="btn btn-dark">Personas</button>
+				<button id="pets" class="btn btn-dark">Mascotas</button>
 				<button id="logout" class="btn btn-dark">Cerrar sesión</button>
 			</div>
 		</div>
 	</header>
 
 	<div class="container">
-		<div id="people-container">
-			<h1 class="display-5 mt-3 mb-3">Personas</h1>
+		<div class="containerGeneric">
+			
 		</div>
 	</div>
 
 	<script type="text/javascript"
 		src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
 	<script type="text/javascript" src="js/dao/people.js"></script>
+	<script type="text/javascript" src="js/dao/pets.js"></script>
 	<script type="text/javascript" src="js/view/people.js"></script>
+	<script type="text/javascript" src="js/view/pets.js"></script>
 	<script type="text/javascript" src="js/login.js"></script>
 	<script type="text/javascript">
 	$(document).ready(
@@ -39,11 +43,32 @@
 				doLogout();
 		    });
 
-		    var view = new PeopleView(new PeopleDAO(),
+			$('#people').click(function(event) {		
+				
+				$('.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();	
+		    });    
+			
+			$('#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>');
+				
+				var viewPets = new PetsView(new PetsDAO(),
+						'pets-container', 'pets-container',
+				);
+				viewPets.init();					
+		    });    
 			
-		    view.init();
 		});
     </script>
 </body>