Skip to content

D
daaexample
Commit 32282ae3 authored by Iago Gómez Salgado's avatar Iago Gómez Salgado
Browse files
Options

Add pets logic to PeopleView

parent e9b1c046
Hide whitespace changes
Inline Side-by-side
Showing with 278 additions and 9 deletions
src/main/webapp/js/view/people.js
View file @ 32282ae3
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() {
<td>\
<a class="delete" href="#">Delete</a>\
</td>\
<td>\
<a class="pets" href="#">View Pets</a>\
</td>\
</tr>';
}
......@@ -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(
'<table class="rwd-table" id="' + petsListId + '">\
<tr class="owner">\
<th>Mascotas de: ' + owner + '</th>\
<th></th>\
<th></th>\
<th></th>\
<th></th>\
</tr>\
<tr>\
<th>Nombre</th>\
<th>Especie</th>\
<th>Raza</th>\
<th></th>\
<th></th>\
</tr>\
</table>'
);
}
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(
'<table id="' + petsListId + '">\
<tr>\
<th>Nombre</th>\
<th>Especie</th>\
<th>Raza</th>\
<th></th>\
<th></th>\
</tr>\
</table>'
);
}
var insertPetForm = function(parent) {
parent.append(
'<form id="' + petsFormId + '">\
<input name="id" type="hidden" value=""/>\
<input name="name" type="text" value="" />\
<input name="kind" type="text" value=""/>\
<input name="breed" type="text" value=""/>\
<input name="owner" type="hidden" 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 class="kind">' + pet.kind + '</td>\
<td class="breed">' + pet.breed + '</td>\
<td class="owner">' + pet.owner + '</td>\
<td>\
<a class="edit" href="#">Edit</a>\
</td>\
<td>\
<a class="delete" href="#">Delete</a>\
</td>\
</tr>';
}
var petToRow = function(pet) {
return '<tr id="pet-' + pet.id + '">\
<td class="name">' + pet.name + '</td>\
<td class="kind">' + pet.kind + '</td>\
<td class="breed">' + pet.breed + '</td>\
<td id="owner" type="hidden" value="' + pet.owner + '">\
<td>\
<a class="editPet" href="#">Edit</a>\
</td>\
<td>\
<a class="deletePet" href="#">Delete</a>\
</td>\
</tr>';
}
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(
'<form id="' + petsFormId + '">\
<input name="petId" type="hidden" value=""/>\
Nombre: <input name="petName" type="text" value="" />\
Especie: <input name="kind" type="text" value="" />\
Raza: <input name="breed" type="text" value="" />\
Propietario: <input name="owner" type="text" value="" />\
<input id="btnSubmit" type="submit" value="Crear"/>\
<input id="btnClear" type="reset" value="Limpiar"/>\
</form>'
);
}
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;
})();
src/main/webapp/main.html
View file @ 32282ae3
......@@ -10,15 +10,16 @@
<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/people.js"></script>
<script type="text/javascript" src="js/view/people.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="js/dao/people.js"></script>
<script type="text/javascript" src="js/view/people.js"></script>
<script type="text/javascript" src="js/dao/pets.js"></script>
<script type="text/javascript" src="js/view/pets.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var view = new PeopleView(new PeopleDAO(), 'people-container', 'people-container');
view.init();
});
$(document).ready(function() {
var view = new PeopleView(new PeopleDAO(), new PetsDAO(), 'people-container', 'people-container');
view.init();
});
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment