From 9399669bab31fdd67983d02d671f3e715bc26725 Mon Sep 17 00:00:00 2001 From: Alejandro Date: Fri, 8 Mar 2019 14:43:32 +0100 Subject: [PATCH] Adds frontend DAO pet and View Adds DAO and View for showing the info in the navigator. --- src/main/webapp/js/dao/pets.js | 65 +++++++++ src/main/webapp/js/view/pets.js | 251 ++++++++++++++++++++++++++++++++ 2 files changed, 316 insertions(+) create mode 100644 src/main/webapp/js/dao/pets.js create mode 100644 src/main/webapp/js/view/pets.js diff --git a/src/main/webapp/js/dao/pets.js b/src/main/webapp/js/dao/pets.js new file mode 100644 index 0000000..79dc8ae --- /dev/null +++ b/src/main/webapp/js/dao/pets.js @@ -0,0 +1,65 @@ +class PetsDAO { + resourcePath; + + constructor(){ + this.resourcePath = "rest/pets/"; + } + + requestByAjax(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); + } + + listPets(done,fail,always) { + this.requestByAjax({ + url : this.resourcePath, + type : 'GET' + }, done,fail,always); + } + listPetsOwner(id,done,fail,always){ + this.requestByAjax({ + url : this.resourcePath + "?idPeople=" + id, + type : 'GET' + },done,fail,always); + } + addPet(pet,done,fail,always){ + this.requestByAjax({ + url : this.resourcePath, + type : 'POST', + data : pet + }, done, fail, always); + } + modifyPet(pet,done,fail,always){ + this.requestByAjax({ + url : this.resourcePath + pet.id, + type : 'PUT', + data : pet + },done,fail,always); + } + deletePet(id,done,fail,always){ + this.requestByAjax({ + url : this.resourcePath + id, + type : 'DELETE' + },done,fail,always); + } + +} + + + + + + diff --git a/src/main/webapp/js/view/pets.js b/src/main/webapp/js/view/pets.js new file mode 100644 index 0000000..e6883fe --- /dev/null +++ b/src/main/webapp/js/view/pets.js @@ -0,0 +1,251 @@ +var PetsView = (function () { + var dao; + 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); + }); + }, + function () { + alert('No ha sido posible acceder al listado de pets'); + } + ); + + // 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) { + let pet = self.getPetInForm(); + + if (self.isEditing()) { + dao.modifyPet(pet, + function(pet) { + $('#pet-' + pet.id + ' td.name').text(pet.name); + $('#pet-' + pet.id + ' td.type').text(pet.surname); + $('#pet-' + pet.id + ' td.person').text(pet.person); + 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.initList = function (id) { + dao.listPetsOwner(id,function (pets) { + $.each(pets,function (key,pet) { + appendToTable(pet); + }); + }, + function () { + alert("No ha sido posible acceder al listado de pets."); + } + ); + $(formQuery).submit(function(event) { + let pet = self.getPetInForm(); + + if (self.isEditing()) { + dao.modifyPet(pet, + function(pet) { + $('#pet-' + pet.id + ' td.name').text(pet.name); + $('#pet-' + pet.id + ' td.type').text(pet.surname); + $('#pet-' + pet.id + ' td.person').text(pet.person); + self.resetForm(); + if(pet.person != id){ + $('tr#pet-'+ pet.id).remove(); + } + }, + showErrorMessage, + self.enableForm + ); + + } else { + dao.addPet(pet, + function(pet) { + + if (pet.person == id) { + 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(), + 'type': form.find('input[name="type"]').val(), + 'person': form.find('input[name="person"]').val() + }; + }; + + this.getPetInRow = function(id) { + var row = $('#pet-' + id); + + if (row !== undefined) { + return { + 'id': id, + 'name': row.find('td.name').text(), + 'type': row.find('td.type').text(), + 'person': row.find('td.person').text() + }; + } else { + return undefined; + } + }; + + this.editPet = function(id) { + var row = $('#pet-' + id); + + if (row !== undefined) { + var form = $(formQuery); + + form.find('input[name="id"]').val(id); + form.find('input[name="name"]').val(row.find('td.name').text()); + form.find('input[name="type"]').val(row.find('td.type').text()); + form.find('input[name="person"]').val(row.find('td.person').text()); + + $('input#btnSubmit').val('Modificar'); + } + }; + + this.deletePet = function(id) { + if (confirm('Está a punto de eliminar a una persona. ¿Está seguro de que desea continuar?')) { + dao.deletePet(id, + function() { + $('tr#pet-' + id).remove(); + }, + showErrorMessage + ); + } + }; + + 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 insertPetsList = function(parent) { + parent.append( + '\ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ +
NombreTipoDueño 
' + ); + }; + + var insertPetsForm = function(parent) { + parent.append( + '
\ + \ +
\ +
\ + \ +
\ +
\ + \ +
\ +
\ + \ +
\ +
\ + \ + \ +
\ +
\ +
' + ); + }; + + var createPetRow = function(pet) { + return '\ + ' + pet.name + '\ + ' + pet.type + '\ + '+ pet.person +'\ + \ + Editar\ + Eliminar\ + \ + '; + }; + + 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; +})(); -- 2.18.1