Created links to pet pages with get. Also finished JS part. DAO stuff is in the making

src/main/java/es/uvigo/esei/daa/entities/Pet.java

@@ -73,7 +73,4 @@ public class Pet {
     public void setOwner(Person owner) {
         this.owner = requireNonNull(owner, "Owner can't be a null reference");
     }
-
-
-    //TODO -------- ESTABA HACIENDO ESTO MIRAR PRACTICA 2 PARA ENUNCIADO
 }

src/main/webapp/js/dao/pet.js

+var PetDAO = (function() {
+	var resourcePath = "rest/pet/";
+	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() {};
+
+		$.ajax(data)
+			.done(done)
+			.fail(fail)
+			.always(always);
+	};
+
+	function PetDAO() {
+		this.listPet = 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);
+		};
+	}
+
+	return PetDAO;
+})();
\ No newline at end of file

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

@@ -142,6 +142,9 @@ var PeopleView = (function() {
 		return '<tr id="person-'+ person.id +'">\
 			<td class="name">' + person.name + '</td>\
 			<td class="surname">' + person.surname + '</td>\
+			<td>\
+                <a class="pet" href="#">Pets</a>\
+            </td>\
 			<td>\
 				<a class="edit" href="#">Edit</a>\
 			</td>\
@@ -171,6 +174,10 @@ var PeopleView = (function() {
 				);
 			}
 		});
+
+		$('#person-' + person.id + ' a.pet').click(function() {
+		    window.location.href = "pet.html?id="+person.id;
+		});
 	}
 
 	var appendToTable = function(person) {

src/main/webapp/js/view/pet.js

+//TODO esto en principio está, pero mantener un ojo en ello
+var PetView = (function() {
+	var dao;
+
+	// Referencia a this que permite acceder a las funciones públicas desde las funciones de jQuery.
+	var self;
+
+	var formId = 'pet-form';
+	var listId = 'pet-list';
+	var formQuery = '#' + formId;
+	var listQuery = '#' + listId;
+
+	function PetView(petDao, formContainerId, listContainerId) {
+		dao = petDao;
+		self = this;
+
+		insertPetForm($('#' + formContainerId));
+		insertPetList($('#' + listContainerId));
+
+		this.init = function() {
+			dao.listPets(function(pet) {
+				$.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.name').text(pet.name);
+							self.resetForm();
+						},
+						showErrorMessage,
+						self.enableForm
+					);
+				} else {
+					dao.addPet(pet,
+						function(pet) {
+							appendToTable(pet);
+							self.resetForm();
+						},
+						showErrorMessage,
+						self.enableForm
+					);
+				}
+
+				return false;
+			});
+
+			$('#btnClear').click(this.resetForm);
+		};
+
+		this.getPetInForm = function() {
+			var form = $(formQuery);
+			return {
+				'id': form.find('input[name="id"]').val(),
+				'name': form.find('input[name="name"]').val(),
+			};
+		};
+
+		this.getPetInRow = function(id) {
+			var row = $('#pet-' + id);
+
+			if (row !== undefined) {
+				return {
+					'id': id,
+					'name': row.find('td.name').text(),
+				};
+			} else {
+				return undefined;
+			}
+		};
+
+		this.editPet = function(id) {
+			var row = $('#pet-' + id);
+
+			console.log(row);
+			if (row !== undefined) {
+				var form = $(formQuery);
+				console.log(form);
+				console.log(row.find('td.name').text());
+
+				form.find('input[name="id"]').val(id);
+				form.find('input[name="name"]').val(row.find('td.name').text());
+			}
+		}
+
+		this.isEditing = function() {
+			return $(formQuery + ' input[name="id"]').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="id"]').val('');
+			$('#btnSubmit').val('Crear');
+		};
+	}
+
+	var insertPetList = function(parent) {
+		parent.append(
+			'<table id="' + listId + '">\
+				<tr>\
+					<th>Nombre</th>\
+					<th></th>\
+					<th></th>\
+				</tr>\
+			</table>'
+		);
+	}
+
+	var insertPetForm = function(parent) {
+		parent.append(
+			'<form id="' + formId + '">\
+				<input name="id" type="hidden" value=""/>\
+				<input name="name" type="text" value="" />\
+				<input id="btnSubmit" type="submit" value="Create"/>\
+				<input id="btnClear" type="reset" value="Limpiar"/>\
+			</form>'
+		);
+	}
+
+	var createPetRow = function(pet) {
+		return '<tr id="pet-'+ pet.id +'">\
+			<td class="name">' + pet.name + '</td>\
+			<td>\
+				<a class="edit" href="#">Edit</a>\
+			</td>\
+			<td>\
+				<a class="delete" href="#">Delete</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);
+			$('input#btnSubmit').val('Modificar');
+		});
+
+		$('#pet-' + pet.id + ' a.delete').click(function() {
+			if (confirm('Está a punto de eliminar una mascota. ¿Está seguro de que desea continuar?')) {
+				dao.deletePet(pet.id,
+					function() {
+						$('tr#pet-' + pet.id).remove();
+					},
+					showErrorMessage
+				);
+			}
+		});
+	}
+
+	var appendToTable = function(pet) {
+		$(listQuery + ' > tbody:last')
+			.append(createPetRow(pet));
+		addRowListeners(pet);
+	}
+
+	return PetView;
+})();

src/main/webapp/main.html

 <!DOCTYPE html>
 <html>
 <head>
-<meta charset="UTF-8">
-<title>DAA Example</title>
+	<meta charset="UTF-8">
+	<title>DAA Example</title>
 </head>
 <body>
 	<div id="people-container">

src/main/webapp/pet.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>DAA Example</title>
+</head>
+<body>
+    <div id="pet-container">
+        <h1>People</h1>
+        <a id="#logout" href="logout">Logout</a>
+    </div>
+    
+    <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
+    <script type="text/javascript" src="js/dao/pet.js"></script>
+    <script type="text/javascript" src="js/view/pet.js"></script>
+    <script type="text/javascript">
+            $(document).ready(function() {
+                var view = new PetView(new PetDAO(), 'pet-container', 'pet-container');
+
+                view.init();
+            });
+        </script>
+</body>
+</html>
\ No newline at end of file