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