Modificada la interfaz para añadir la opción de gestión de mascotas

src/main/java/es/uvigo/esei/daa/rest/PeopleResource.java

@@ -16,7 +16,9 @@ import javax.ws.rs.core.Response;
 
 import es.uvigo.esei.daa.dao.DAOException;
 import es.uvigo.esei.daa.dao.PeopleDAO;
+import es.uvigo.esei.daa.dao.PetsDAO;
 import es.uvigo.esei.daa.entities.Person;
+import es.uvigo.esei.daa.entities.Pet;
 
 /**
  * REST resource for managing people.
@@ -28,7 +30,7 @@ import es.uvigo.esei.daa.entities.Person;
 public class PeopleResource {
 	private final static Logger LOG = Logger.getLogger(PeopleResource.class.getName());
 	
-	private final PeopleDAO dao;
+	private final PeopleDAO personDAO;
 	
 	/**
 	 * Constructs a new instance of {@link PeopleResource}.
@@ -38,8 +40,8 @@ public class PeopleResource {
 	}
 	
 	// Needed for testing purposes
-	PeopleResource(PeopleDAO dao) {
-		this.dao = dao;
+	PeopleResource(PeopleDAO personDAO) {
+		this.personDAO = personDAO;
 	}
 	
 	/**
@@ -58,7 +60,7 @@ public class PeopleResource {
 		@PathParam("id") int id
 	) {
 		try {
-			final Person person = this.dao.get(id);
+			final Person person = this.personDAO.get(id);
 			
 			return Response.ok(person).build();
 		} catch (IllegalArgumentException iae) {
@@ -76,6 +78,7 @@ public class PeopleResource {
 		}
 	}
 	
+
 	/**
 	 * Returns the complete list of people stored in the system.
 	 * 
@@ -86,7 +89,7 @@ public class PeopleResource {
 	@GET
 	public Response list() {
 		try {
-			return Response.ok(this.dao.list()).build();
+			return Response.ok(this.personDAO.list()).build();
 		} catch (DAOException e) {
 			LOG.log(Level.SEVERE, "Error listing people", e);
 			return Response.serverError().entity(e.getMessage()).build();
@@ -105,12 +108,9 @@ public class PeopleResource {
 	 * returned.
 	 */
 	@POST
-	public Response add(
-		@FormParam("name") String name, 
-		@FormParam("surname") String surname
-	) {
+	public Response add(@FormParam("name") String name, @FormParam("surname") String surname) {
 		try {
-			final Person newPerson = this.dao.add(name, surname);
+			final Person newPerson = this.personDAO.add(name, surname);
 			
 			return Response.ok(newPerson).build();
 		} catch (IllegalArgumentException iae) {
@@ -128,6 +128,8 @@ public class PeopleResource {
 		}
 	}
 	
+	
+
 	/**
 	 * Modifies the data of a person.
 	 * 
@@ -149,7 +151,7 @@ public class PeopleResource {
 	) {
 		try {
 			final Person modifiedPerson = new Person(id, name, surname);
-			this.dao.modify(modifiedPerson);
+			this.personDAO.modify(modifiedPerson);
 			
 			return Response.ok(modifiedPerson).build();
 		} catch (NullPointerException npe) {
@@ -175,6 +177,7 @@ public class PeopleResource {
 		}
 	}
 	
+
 	/**
 	 * Deletes a person from the system.
 	 * 
@@ -191,7 +194,7 @@ public class PeopleResource {
 		@PathParam("id") int id
 	) {
 		try {
-			this.dao.delete(id);
+			this.personDAO.delete(id);
 			
 			return Response.ok(id).build();
 		} catch (IllegalArgumentException iae) {

src/main/webapp/js/dao/people.js

@@ -31,6 +31,7 @@ var PeopleDAO = (function() {
 	    }, done, fail, always);
 	};
 	
+
 	this.modifyPerson = function(person, done, fail, always) {
 	    requestByAjax({
 		url : resourcePath + person.id,
@@ -39,6 +40,7 @@ var PeopleDAO = (function() {
 	    }, done, fail, always);
 	};
 	
+
 	this.deletePerson = function(id, done, fail, always) {
 	    requestByAjax({
 		url : resourcePath + id,

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

+var PetsDAO = (function() {
+    var resourcePath = "rest/people/";
+    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(person, done, fail, always) {
+	    requestByAjax({
+		url : resourcePath + person.id + "/pets",
+		type : 'GET'
+	    }, done, fail, always);
+	};
+	
+	this.addPet = function(pet, done, fail, always) {
+	    requestByAjax({
+		url : resourcePath + pet.owner + "/pets",
+		type : 'POST',
+		data : pet
+	    }, done, fail, always);
+	};
+	
+	this.modifyPet = function(pet, done, fail, always) {
+	    requestByAjax({
+		url : resourcePath + pet.owner + "/pets/" + pet.id,
+		type : 'PUT',
+		data : pet
+	    }, done, fail, always);
+	};
+
+	
+	this.deletePet = function(pet, done, fail, always) {
+	    requestByAjax({
+		url : resourcePath + pet.owner + "/pets/" + pet.id,
+		type : 'DELETE',
+	    }, done, fail, always);
+	};
+
+    }
+
+    return PetsDAO;
+})();
\ No newline at end of file

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

 var PeopleView = (function() {
 	var dao;
+	var petsDAO;
 	
 	// Referencia a this que permite acceder a las funciones públicas desde las funciones de jQuery.
 	var self;
 	
 	var formId = 'people-form';
+	var petForm = 'pets-form';
 	var listId = 'people-list';
+	var petFormQuery = '#' + petForm;
 	var formQuery = '#' + formId;
 	var listQuery = '#' + listId;
 	
-	function PeopleView(peopleDao, formContainerId, listContainerId) {
+	function PeopleView(peopleDao, petsDao, formContainerId, listContainerId) {
 		dao = peopleDao;
+		petsDAO = petsDao;
 		self = this;
 		
 		insertPeopleForm($('#' + formContainerId));
@@ -168,6 +172,7 @@ var PeopleView = (function() {
 			<td class="col-sm-3">\
 				<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>';
 	};
@@ -184,6 +189,25 @@ var PeopleView = (function() {
 		$('#person-' + person.id + ' a.delete').click(function() {
 			self.deletePerson(person.id);
 		});
+		
+		$('#person-' + person.id + ' a.pets').click(function() {
+			
+			$('.modal .close').click( function() {
+				$('.modal').hide()
+			} );
+			
+			$(".modal-title").empty();
+			
+			$(".modal-title").append('Mascotas de '+person.name);
+			
+			listPetsOfPerson(person);
+			
+			initAdd(person.id);
+			
+			$('.modal').show();
+			
+		});
+		
 	};
 
 	var appendToTable = function(person) {
@@ -192,5 +216,146 @@ var PeopleView = (function() {
 		addRowListeners(person);
 	};
 	
+	
+	var initAdd = function(idOwner){
+		
+		$('.modal-footer').empty();
+		
+		insertPet('.modal-footer');
+		
+		$(petFormQuery).submit(function(event) {
+			var pet = getPetInForm(idOwner);
+			
+			if (isEditingPet()) {
+				petsDAO.modifyPet(pet,
+					function(petReturn) {
+						$('#pet-' + petReturn.id + ' td.name').text(petReturn.name);
+						resetFormPet();
+					},
+					showErrorMessage,
+					enableFormPet
+				);
+			} else {
+				petsDAO.addPet(pet,
+						function(petReturn) {
+							appendToTablePet(petReturn);
+							resetFormPet();
+						},
+						showErrorMessage,
+						enableFormPet
+					);
+			}
+			
+			return false;
+			
+		});
+	};
+	
+	var isEditingPet = function() {
+		return $(petFormQuery + ' input[name="id"]').val() != "";
+	};
+	
+	var getPetInForm = function(idOwner) {
+		var form = $(petFormQuery);
+		return {
+			'id': form.find('input[name="id"]').val(),
+			'name': form.find('input[name="name"]').val(),
+			'owner': idOwner
+		};
+	};
+	
+	var resetFormPet = function() {
+		$(petFormQuery)[0].reset();
+		$(petFormQuery + ' input[name="id"]').val('');
+		$('#btnSubmitPet').val('Crear');
+	};
+	
+	var enableFormPet = function() {
+		$(petFormQuery + ' input').prop('disabled', false);
+	};
+	
+	
+	var insertPet = function(parent) {
+		$(parent).append(
+			'<form id="' + petForm + '" class="mb-5 mb-10">\
+				<input name="id" type="hidden" value=""/>\
+				<div class="row">\
+					<div class="col-sm-7">\
+						<input name="name" type="text" value="" placeholder="Nombre" class="form-control" required/>\
+					</div>\
+					<div class="col-sm-5">\
+						<input id="btnSubmitPet" type="submit" value="Crear" class="btn btn-primary" />\
+						<input id="btnClear" type="reset" value="Limpiar" class="btn" />\
+					</div>\
+				</div>\
+			</form>'
+		);
+	};
+	
+	var createPetRow = function(pet) {
+		return '<tr id="pet-'+ pet.id +'" class="row">\
+			<td class="name col-sm-7">' + pet.name + '</td>\
+			<td class="col-sm-5">\
+				<a class="edit btn btn-primary" href="#">Editar</a>\
+				<a class="delete btn btn-warning" href="#">Eliminar</a>\
+			</td>\
+		</tr>';
+	};
+	
+	var addRowListenersPet = function(pet) {
+		$('#pet-' + pet.id + ' a.delete').click(function() {
+			deletePet(pet);
+		});
+		
+		$('#pet-' + pet.id + ' a.edit').click(function() {
+			editPet(pet);
+		});
+		
+	};
+	
+	var deletePet = function(pet) {
+		if (confirm('Está a punto de eliminar a una mascota. ¿Está seguro de que desea continuar?')) {
+			petsDAO.deletePet(pet,
+				function() {
+					$('tr#pet-' + pet.id).remove();
+				},
+				showErrorMessage
+			);
+		}
+	};
+	
+	var editPet = function(pet) {
+		var row = $('#pet-' + pet.id);
+
+		if (row !== undefined) {
+			var form = $(petFormQuery);
+			
+			form.find('input[name="id"]').val(pet.id);
+			form.find('input[name="name"]').val(row.find('td.name').text());
+			
+			$('input#btnSubmitPet').val('Modificar');
+		}
+	};
+	
+	var appendToTablePet = function(pet) {
+		$('.modal-body').append(createPetRow(pet));
+		addRowListenersPet(pet);
+	};
+	
+
+	var listPetsOfPerson = function(person) {
+
+		$('.modal-body').empty();
+		
+		petsDAO.listPets(person, function(pets) {
+			$.each(pets, function(key, pet) {
+				appendToTablePet(pet);
+			});
+		}, function() {
+			alert('No has sido posible acceder al listado de mascotas.');
+		});
+
+	};
+	
 	return PeopleView;
 })();

src/main/webapp/main.html

@@ -26,9 +26,30 @@
 		</div>
 	</div>
 
+	<div class="modal" tabindex="-1" role="dialog">
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title"></h5>
+					<button type="button" class="close" data-dismiss="modal"
+						aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body">
+					
+				</div>
+				<div class="modal-footer">
+					
+				</div>
+			</div>
+		</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/login.js"></script>
 	<script type="text/javascript">
@@ -39,10 +60,12 @@
 				doLogout();
 		    });
 
-		    var view = new PeopleView(new PeopleDAO(),
+		    var view = new PeopleView(new PeopleDAO(), new PetsDAO(),
 		    	'people-container', 'people-container'
 	    	);
 		    
+		    $('.modal').hide();
+
 		    view.init();
 		});
     </script>