Skip to content

D
daaexample
Commit 39a7b6b2 authored by Administrator's avatar Administrator
Browse files
Options

Refactorizes the frontend 

The frontend has been refactorized to use classes in the JavaScript files.
parent fa5608c2
Hide whitespace changes
Inline Side-by-side
Showing with 214 additions and 197 deletions
src/main/webapp/js/dao/people.js
View file @ 39a7b6b2
function listPeople(done, fail, always) {
done = typeof done !== 'undefined' ? done : function() {};
fail = typeof fail !== 'undefined' ? fail : function() {};
always = typeof always !== 'undefined' ? always : function() {};
var PeopleDAO = (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() {};
$.ajax(data)
.done(done)
.fail(fail)
.always(always);
};
$.ajax({
url: 'rest/people',
type: 'GET'
})
.done(done)
.fail(fail)
.always(always);
}
function addPerson(person, done, fail, always) {
done = typeof done !== 'undefined' ? done : function() {};
fail = typeof fail !== 'undefined' ? fail : function() {};
always = typeof always !== 'undefined' ? always : function() {};
function PeopleDAO() {
this.listPeople = function(done, fail, always) {
requestByAjax({
url: resourcePath,
type: 'GET'
}, done, fail, always);
};
this.addPerson = function(person, done, fail, always) {
requestByAjax({
url: resourcePath,
type: 'POST',
data: person
}, done, fail, always);
};
this.modifyPerson = function(person, done, fail, always) {
requestByAjax({
url: resourcePath + person.id,
type: 'PUT',
data: person
}, done, fail, always);
};
this.deletePerson = function(id, done, fail, always) {
requestByAjax({
url: resourcePath + id,
type: 'DELETE',
}, done, fail, always);
};
}
$.ajax({
url: 'rest/people',
type: 'POST',
data: person
})
.done(done)
.fail(fail)
.always(always);
}
function modifyPerson(person, done, fail, always) {
done = typeof done !== 'undefined' ? done : function() {};
fail = typeof fail !== 'undefined' ? fail : function() {};
always = typeof always !== 'undefined' ? always : function() {};
$.ajax({
url: 'rest/people/' + person.id,
type: 'PUT',
data: person
})
.done(done)
.fail(fail)
.always(always);
}
function deletePerson(id, done, fail, always) {
done = typeof done !== 'undefined' ? done : function() {};
fail = typeof fail !== 'undefined' ? fail : function() {};
always = typeof always !== 'undefined' ? always : function() {};
$.ajax({
url: 'rest/people/' + id,
type: 'DELETE',
})
.done(done)
.fail(fail)
.always(always);
}
\ No newline at end of file
return PeopleDAO;
})();
\ No newline at end of file
src/main/webapp/js/view/people.js
View file @ 39a7b6b2
var peopleFormId = 'people-form';
var peopleListId = 'people-list';
var peopleFormQuery = '#' + peopleFormId;
var peopleListQuery = '#' + peopleListId;
function insertPeopleList(parent) {
parent.append(
'<table id="' + peopleListId + '">\
<tr>\
<th>Nombre</th>\
<th>Apellido</th>\
<th></th>\
<th></th>\
</tr>\
</table>'
);
}
function insertPeopleForm(parent) {
parent.append(
'<form id="' + peopleFormId + '">\
<input name="id" type="hidden" value=""/>\
<input name="name" type="text" value="" />\
<input name="surname" type="text" value=""/>\
<input id="btnSubmit" type="submit" value="Create"/>\
<input id="btnClear" type="reset" value="Limpiar"/>\
</form>'
);
}
function createPersonRow(person) {
return '<tr id="person-'+ person.id +'">\
<td class="name">' + person.name + '</td>\
<td class="surname">' + person.surname + '</td>\
<td>\
<a class="edit" href="#">Edit</a>\
</td>\
<td>\
<a class="delete" href="#">Delete</a>\
</td>\
</tr>';
}
var PeopleView = (function() {
var dao;
// Referencia a this que permite acceder a las funciones públicas desde las funciones de jQuery.
var self;
var formId = 'people-form';
var listId = 'people-list';
var formQuery = '#' + formId;
var listQuery = '#' + listId;
function PeopleView(peopleDao, formContainerId, listContainerId) {
dao = peopleDao;
self = this;
insertPeopleForm($('#' + formContainerId));
insertPeopleList($('#' + listContainerId));
this.init = function() {
dao.listPeople(function(people) {
$.each(people, function(key, person) {
appendToTable(person);
});
});
// 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 person = self.getPersonInForm();
if (self.isEditing()) {
dao.modifyPerson(person,
function(person) {
$('#person-' + person.id + ' td.name').text(person.name);
$('#person-' + person.id + ' td.surname').text(person.surname);
self.resetForm();
},
showErrorMessage,
self.enableForm
);
} else {
dao.addPerson(person,
function(person) {
appendToTable(person);
self.resetForm();
},
showErrorMessage,
self.enableForm
);
}
return false;
});
$('#btnClear').click(this.resetForm);
};
function formToPerson() {
var form = $(peopleFormQuery);
return {
'id': form.find('input[name="id"]').val(),
'name': form.find('input[name="name"]').val(),
'surname': form.find('input[name="surname"]').val()
};
}
this.getPersonInForm = function() {
var form = $(formQuery);
return {
'id': form.find('input[name="id"]').val(),
'name': form.find('input[name="name"]').val(),
'surname': form.find('input[name="surname"]').val()
};
};
function personToForm(person) {
var form = $(peopleFormQuery);
form.find('input[name="id"]').val(person.id);
form.find('input[name="name"]').val(person.name);
form.find('input[name="surname"]').val(person.surname);
}
this.getPersonInRow = function(id) {
var row = $('#person-' + id);
function rowToPerson(id) {
var row = $('#person-' + id);
if (row !== undefined) {
return {
'id': id,
'name': row.find('td.name').text(),
'surname': row.find('td.surname').text()
};
} else {
return undefined;
}
};
this.editPerson = function(id) {
var row = $('#person-' + id);
return {
'id': id,
'name': row.find('td.name').text(),
'surname': row.find('td.surname').text()
};
}
console.log(row);
if (row !== undefined) {
var form = $(formQuery);
console.log(form);
console.log(row.find('td.name').text());
console.log(row.find('td.surname').text());
form.find('input[name="id"]').val(id);
form.find('input[name="name"]').val(row.find('td.name').text());
form.find('input[name="surname"]').val(row.find('td.surname').text());
}
}
function isEditing() {
return $(peopleFormQuery + ' input[name="id"]').val() != "";
}
this.isEditing = function() {
return $(formQuery + ' input[name="id"]').val() != "";
};
function disableForm() {
$(peopleFormQuery + ' input').prop('disabled', true);
}
this.disableForm = function() {
$(formQuery + ' input').prop('disabled', true);
};
function enableForm() {
$(peopleFormQuery + ' input').prop('disabled', false);
}
this.enableForm = function() {
$(formQuery + ' input').prop('disabled', false);
};
function resetForm() {
$(peopleFormQuery)[0].reset();
$(peopleFormQuery + ' input[name="id"]').val('');
$('#btnSubmit').val('Crear');
}
this.resetForm = function() {
$(formQuery)[0].reset();
$(formQuery + ' input[name="id"]').val('');
$('#btnSubmit').val('Crear');
};
}
var insertPeopleList = function(parent) {
parent.append(
'<table id="' + listId + '">\
<tr>\
<th>Nombre</th>\
<th>Apellido</th>\
<th></th>\
<th></th>\
</tr>\
</table>'
);
}
function showErrorMessage(jqxhr, textStatus, error) {
alert(textStatus + ": " + error);
}
var insertPeopleForm = function(parent) {
parent.append(
'<form id="' + formId + '">\
<input name="id" type="hidden" value=""/>\
<input name="name" type="text" value="" />\
<input name="surname" type="text" value=""/>\
<input id="btnSubmit" type="submit" value="Create"/>\
<input id="btnClear" type="reset" value="Limpiar"/>\
</form>'
);
}
function addRowListeners(person) {
$('#person-' + person.id + ' a.edit').click(function() {
personToForm(rowToPerson(person.id));
$('input#btnSubmit').val('Modificar');
});
$('#person-' + person.id + ' a.delete').click(function() {
if (confirm('Está a punto de eliminar a una persona. ¿Está seguro de que desea continuar?')) {
deletePerson(person.id,
function() {
$('tr#person-' + person.id).remove();
},
showErrorMessage
);
}
});
}
var createPersonRow = function(person) {
return '<tr id="person-'+ person.id +'">\
<td class="name">' + person.name + '</td>\
<td class="surname">' + person.surname + '</td>\
<td>\
<a class="edit" href="#">Edit</a>\
</td>\
<td>\
<a class="delete" href="#">Delete</a>\
</td>\
</tr>';
}
function appendToTable(person) {
$(peopleListQuery + ' > tbody:last')
.append(createPersonRow(person));
addRowListeners(person);
}
var showErrorMessage = function(jqxhr, textStatus, error) {
alert(textStatus + ": " + error);
}
function initPeople() {
// getScript permite importar otro script. En este caso, se importan las
// funciones de acceso a datos.
$.getScript('js/dao/people.js', function() {
listPeople(function(people) {
$.each(people, function(key, person) {
appendToTable(person);
});
var addRowListeners = function(person) {
$('#person-' + person.id + ' a.edit').click(function() {
self.editPerson(person.id);
$('input#btnSubmit').val('Modificar');
});
// La acción por defecto de enviar formulario (submit) se sobreescribe
// para que el envío sea a través de AJAX
$(peopleFormQuery).submit(function(event) {
var person = formToPerson();
if (isEditing()) {
modifyPerson(person,
function(person) {
$('#person-' + person.id + ' td.name').text(person.name);
$('#person-' + person.id + ' td.surname').text(person.surname);
resetForm();
$('#person-' + person.id + ' a.delete').click(function() {
if (confirm('Está a punto de eliminar a una persona. ¿Está seguro de que desea continuar?')) {
dao.deletePerson(person.id,
function() {
$('tr#person-' + person.id).remove();
},
showErrorMessage,
enableForm
);
} else {
addPerson(person,
function(person) {
appendToTable(person);
resetForm();
},
showErrorMessage,
enableForm
showErrorMessage
);
}
return false;
});
$('#btnClear').click(resetForm);
});
};
}
var appendToTable = function(person) {
$(listQuery + ' > tbody:last')
.append(createPersonRow(person));
addRowListeners(person);
}
return PeopleView;
})();
src/main/webapp/main.html
View file @ 39a7b6b2
......@@ -11,12 +11,13 @@
</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">
$(document).ready(function() {
insertPeopleForm($('#people-container'));
insertPeopleList($('#people-container'));
initPeople();
var view = new PeopleView(new PeopleDAO(), 'people-container', 'people-container');
view.init();
});
</script>
</body>
......
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