From 32282ae31da4f74d40cdcbc15f0ac09504bf0833 Mon Sep 17 00:00:00 2001 From: hacklego Date: Mon, 27 Feb 2017 00:04:14 +0100 Subject: [PATCH] Add pets logic to PeopleView --- src/main/webapp/js/view/people.js | 270 +++++++++++++++++++++++++++++- src/main/webapp/main.html | 17 +- 2 files changed, 278 insertions(+), 9 deletions(-) diff --git a/src/main/webapp/js/view/people.js b/src/main/webapp/js/view/people.js index 1f7bc5e..90e525f 100644 --- a/src/main/webapp/js/view/people.js +++ b/src/main/webapp/js/view/people.js @@ -1,5 +1,6 @@ var PeopleView = (function() { var dao; + var pets; // Referencia a this que permite acceder a las funciones públicas desde las funciones de jQuery. var self; @@ -9,8 +10,14 @@ var PeopleView = (function() { var formQuery = '#' + formId; var listQuery = '#' + listId; - function PeopleView(peopleDao, formContainerId, listContainerId) { + var petsFormId = 'pets-form'; + var petsListId = 'pets-list'; + var petsFormQuery = '#' + petsFormId; + var petsListQuery = '#' + petsListId; + + function PeopleView(peopleDao, petsDAO, formContainerId, listContainerId) { dao = peopleDao; + pets = petsDAO; self = this; insertPeopleForm($('#' + formContainerId)); @@ -52,6 +59,9 @@ var PeopleView = (function() { return false; }); + petsView = new PetsView(); + petsView.init(); + $('#btnClear').click(this.resetForm); }; @@ -148,6 +158,9 @@ var PeopleView = (function() { \ Delete\ \ + \ + View Pets\ + \ '; } @@ -171,6 +184,10 @@ var PeopleView = (function() { ); } }); + + $('#person-' + person.id + ' a.pets').click(function() { + showPeoplePets(person); + }); } var appendToTable = function(person) { @@ -179,5 +196,256 @@ var PeopleView = (function() { addRowListeners(person); } + var showPeoplePets = function(person) { + pets.listPeoplePets(person, function(pets) { + deletePetsTable(); + createPetsTable(person.name); + $.each(pets, function (key, pet) { + addPetToTable(pet); + }); + }); + } + + var deletePetsTable = function(){ + $(petsListQuery).remove(); + } + + var createPetsTable = function (owner){ + $('div').append( + '\ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ +
Mascotas de: ' + owner + '
NombreEspecieRaza
' + ); + } + + var addPetToTable = function (pet){ + $(petsListQuery + ' > tbody:last').append(petToRow(pet)); + addPetListeners(pet); + } + + var addPetListeners = function(pet) { + $('#pet-' + pet.id + ' a.editPet').click(function() { + petToForm(pet); + $('input#btnSubmit').val('Modificar'); + }); + + $('#pet-' + pet.id + ' a.deletePet').click(function() { + if(confirm("Está a punto de eliminar a una mascota. ¿Está seguro de que desea continuar?")) { + pets.deletePet(pet.id, + function () { + $('tr#pet-' + pet.id).remove(); + }, + showErrorMessage + ); + } + }); + } + + var insertPetList = function(parent) { + parent.append( + '\ + \ + \ + \ + \ + \ + \ + \ +
NombreEspecieRaza
' + ); + } + + var insertPetForm = function(parent) { + parent.append( + '
\ + \ + \ + \ + \ + \ + \ + \ +
' + ); + } + + var createPetRow = function(pet) { + return '\ + ' + pet.name + '\ + ' + pet.kind + '\ + ' + pet.breed + '\ + ' + pet.owner + '\ + \ + Edit\ + \ + \ + Delete\ + \ + '; + } + + var petToRow = function(pet) { + return '\ + ' + pet.name + '\ + ' + pet.kind + '\ + ' + pet.breed + '\ + \ + \ + Edit\ + \ + \ + Delete\ + \ + '; + } + + function petToForm(pet) { + var form = $(petsFormQuery); + form.find('input[name="petId"]').val(pet.id); + form.find('input[name="petName"]').val(pet.name); + form.find('input[name="kind"]').val(pet.kind); + form.find('input[name="breed"]').val(pet.breed); + form.find('input[name="owner"]').val(pet.owner); + } + + var petsForm = function() { + $("body").append( + '
\ + \ + Nombre: \ + Especie: \ + Raza: \ + Propietario: \ + \ + \ +
' + ); + } + + var formToPet = function() { + var form = $(petsFormQuery); + return { + 'id': form.find('input[name="petId"]').val(), + 'name': form.find('input[name="petName"]').val(), + 'kind': form.find('input[name="kind"]').val(), + 'breed': form.find('input[name="breed"]').val(), + 'owner': form.find('input[name="owner"]').val() + }; + }; + + function PetsView() { + self = this; + + this.init = function() { + + petsForm(); + + $(petsFormQuery).submit(function(event) { + var pet = self.getPetInForm(); + console.log(pet); + if (self.isEditing()) { + pets.modifyPet(pet, + function(pet) { + $('#pet-' + pet.id + ' td.name').text(pet.name); + $('#pet-' + pet.id + ' td.kind').text(pet.kind); + $('#pet-' + pet.id + ' td.breed').text(pet.breed); + $('#pet-' + pet.id + ' td.owner').text(pet.owner); + self.resetForm(); + }, + showErrorMessage, + self.enableForm + ); + } else { + pets.addPet(pet, + function(pet) { + self.resetForm(); + }, + showErrorMessage, + self.enableForm + ); + } + + return false; + }); + + $('#btnClear').click(this.resetForm); + }; + + this.getPetInForm = function() { + var form = $(petsFormQuery); + console.log(form); + return { + 'id': form.find('input[name="petId"]').val(), + 'name': form.find('input[name="petName"]').val(), + 'kind': form.find('input[name="kind"]').val(), + 'breed': form.find('input[name="breed"]').val(), + 'owner': form.find('input[name="owner"]').val() + }; + }; + + this.getPetInRow = function(id) { + var row = $('#pet-' + id); + + if (row !== undefined) { + return { + 'id': id, + 'name': row.find('td.name').text(), + 'kind': row.find('td.kind').text(), + 'breed': row.find('td.breed').text(), + 'owner': row.find('td.owner') + }; + } else { + return undefined; + } + }; + + this.editPet = function(id) { + var row = $('#pet-' + id); + + console.log("imprimindo fila:"); + console.log(row); + if (row !== undefined) { + var form = $(petsFormQuery); + + form.find('input[name="petId"]').val(id); + form.find('input[name="petName"]').val(row.find('td.petName').text()); + form.find('input[name="kind"]').val(row.find('td.kind').text()); + form.find('input[name="breed"]').val(row.find('td.breed').text()); + form.find('input[name="owner"]').val(owner); + } + } + + this.isEditing = function() { + return $(petsFormQuery + ' input[name="id"]').val() != ""; + }; + + this.disableForm = function() { + $(petsFormQuery + ' input').prop('disabled', true); + }; + + this.enableForm = function() { + $(petsFormQuery + ' input').prop('disabled', false); + }; + + this.resetForm = function() { + $(petsFormQuery)[0].reset(); + $(petsFormQuery + ' input[name="id"]').val(''); + $('#btnSubmit').val('Crear'); + }; + } + return PeopleView; })(); diff --git a/src/main/webapp/main.html b/src/main/webapp/main.html index 461f6e5..28ed90f 100644 --- a/src/main/webapp/main.html +++ b/src/main/webapp/main.html @@ -10,15 +10,16 @@ Logout - - - + + + + + \ No newline at end of file -- 2.18.1