From 1d0930b1935a0c38e9c5326d55a5bfe81c761e29 Mon Sep 17 00:00:00 2001 From: Erik Date: Tue, 17 Dec 2019 17:29:17 -0300 Subject: [PATCH 1/9] =?UTF-8?q?Indentaci=C3=B3n=20extra=C3=B1a=20corregida?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit TAB >>>>>>> espacio --- crear.html | 440 ++++++++++++++++++++++++++--------------------------- index.html | 253 ++++++++++++++---------------- 2 files changed, 333 insertions(+), 360 deletions(-) diff --git a/crear.html b/crear.html index 66823d9..c73b0c3 100644 --- a/crear.html +++ b/crear.html @@ -2,245 +2,239 @@ - + - + Crear persona - APIHook - + + + +
-

Crear una persona


-
- +

Crear una persona


+
+ + -
-
+ function loadData() { + if (urlParams.has('edit')) { + var first = document.getElementById('text'); + var last = document.getElementById('surname'); + var email = document.getElementById('email'); + first.value = urlParams.get('first_name') + last.value = urlParams.get('last_name') + email.value = urlParams.get('email') + } + } + //NOTE: The following could be on the function loadData();, but since we have to wait until the JSON-populated + //checkboxes load before changing the title, it looks jarring and breaks the illusion of two different forms. + if (urlParams.has('edit')) { + var ele = document.getElementById('title'); + ele.innerHTML = "Modificar una persona" + document.title = "Modificar persona - APIHook"; + } + +
- + - + \ No newline at end of file diff --git a/index.html b/index.html index b30e07b..3cde3ec 100644 --- a/index.html +++ b/index.html @@ -1,140 +1,119 @@ - - - - - - - - - APIHook - - - - - - - - - - - - - - -
- -
-
- -
- - add - -
- - - - - - + function eliminarEntrada(strg, id) { + var url = "http://evera.challenge.trinom.io/api/peoples/" + id; + $.ajax({ + url: url, + type: "DELETE", + data: JSON.stringify({ + "people": id + }), + contentType: "application/json", + dataType: 'json', + error: function(xhr, status, error) { + console.log(error); + console.log(xhr.responseText); + M.toast({ + html: 'Hay un error en tu solicitud.', + classes: 'rounded' + }); + }, + success: function() { + M.toast({ + html: '¡El usuario "' + strg + '" fue eliminado con éxito!', + classes: 'rounded' + }); + showTable(); + } //TO-DO: send them back to index. probably add an alert afterwards + }); + } - - + function cerrarTodo() { + $('tr[class^=child-]').hide().children('td'); + } + $(document).ready(function() { + $(document).on("click", 'tr.parent td span.expand', function() { + var idOfParent = $(this).parents('tr').attr('id'); + $('tr.child-' + idOfParent).toggle('fast'); + if ($(this).children('i').text() == "fullscreen_exit") $(this).children('i').text("fullscreen") + else $(this).children('i').text("fullscreen_exit"); + }); + }); + //show table when web page opens + showTable(); + + + + + \ No newline at end of file From ea2a46c59de4f69a8d412a58602693aafee91691 Mon Sep 17 00:00:00 2001 From: Erik Date: Tue, 17 Dec 2019 21:05:55 -0300 Subject: [PATCH 2/9] =?UTF-8?q?Comentarios=20a=C3=B1adidos=20en=20HTML?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- crear.html | 70 +++++++++++++++++++++++------------------ img/botones.png | Bin 0 -> 2724 bytes img/expandir.png | Bin 0 -> 8339 bytes img/snapshot.png | Bin 0 -> 22962 bytes img/toasteliminado.png | Bin 0 -> 5218 bytes index.html | 32 +++++++++---------- resources/navbar.html | 13 ++++++++ 7 files changed, 68 insertions(+), 47 deletions(-) create mode 100644 img/botones.png create mode 100644 img/expandir.png create mode 100644 img/snapshot.png create mode 100644 img/toasteliminado.png create mode 100644 resources/navbar.html diff --git a/crear.html b/crear.html index c73b0c3..f30b6a7 100644 --- a/crear.html +++ b/crear.html @@ -1,37 +1,41 @@ - - - - - - Crear persona - APIHook - - - - - - - - + + + + + + + Crear persona - APIHook + + + + + + + - + + + +
+

Crear una persona


- -
+ +
+ + +

@@ -56,7 +63,10 @@

Crear una persona


SUBIR
+ + - + + + + + +
+
+
add
+ + diff --git a/resources/navbar.html b/resources/navbar.html new file mode 100644 index 0000000..3b63c51 --- /dev/null +++ b/resources/navbar.html @@ -0,0 +1,13 @@ + \ No newline at end of file From dac6bb21a6ae36beb605d6849e1ffeb533b0e1da Mon Sep 17 00:00:00 2001 From: Erik Date: Tue, 17 Dec 2019 21:10:39 -0300 Subject: [PATCH 3/9] CSS movido a css/style.css Viva la Redundancia --- crear.html | 14 +++----------- css/style.css | 16 ++++++++++++++++ index.html | 7 ++----- 3 files changed, 21 insertions(+), 16 deletions(-) create mode 100644 css/style.css diff --git a/crear.html b/crear.html index f30b6a7..9750ded 100644 --- a/crear.html +++ b/crear.html @@ -16,6 +16,8 @@ + + @@ -66,7 +68,7 @@

Crear una persona


- \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..9a383d2 --- /dev/null +++ b/css/style.css @@ -0,0 +1,16 @@ +/* CSS para Index */ + +i.icon-black { + color: black; +} + +/* CSS para Crear */ + +.nicebtn +{ + margin-top: 15px; +} +.objpadding +{ + margin-left: 10px; +} \ No newline at end of file diff --git a/index.html b/index.html index c126526..5bbef6b 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,8 @@ + + @@ -106,11 +108,6 @@ //show table when web page opens showTable(); - From 53601869b3a26e642cb02756dcaf285c0f9025cf Mon Sep 17 00:00:00 2001 From: Erik Date: Tue, 17 Dec 2019 21:19:54 -0300 Subject: [PATCH 4/9] =?UTF-8?q?Todo=20el=20c=C3=B3d.=20en=20Javascript=20a?= =?UTF-8?q?hora=20est=C3=A1=20en=20js/.js?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Hace el código .html más leible! Es un mal hábito mio hacer todo in-line, en el mismo documento HTML. --- crear.html | 176 ++-------------------------------------------------- index.html | 68 ++------------------ js/crear.js | 164 ++++++++++++++++++++++++++++++++++++++++++++++++ js/index.js | 59 ++++++++++++++++++ 4 files changed, 232 insertions(+), 235 deletions(-) create mode 100644 js/crear.js create mode 100644 js/index.js diff --git a/crear.html b/crear.html index 9750ded..ce5c2fc 100644 --- a/crear.html +++ b/crear.html @@ -18,6 +18,8 @@ + + @@ -65,178 +67,10 @@

Crear una persona


SUBIR - - - - + + + \ No newline at end of file diff --git a/index.html b/index.html index 5bbef6b..1591982 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,8 @@ + + @@ -46,69 +48,7 @@ add - - - + + \ No newline at end of file diff --git a/js/crear.js b/js/crear.js new file mode 100644 index 0000000..dcb6795 --- /dev/null +++ b/js/crear.js @@ -0,0 +1,164 @@ +var urlParams = new URLSearchParams(window.location.search); +let dropdown = $('#dropdown'); +$.getJSON('http://evera.challenge.trinom.io/api/courses', function(data) { + var ele = document.getElementById('dropdown'); + for (var i = 0; i < data.length; i++) { + ele.innerHTML += '

' + } + ele.innerHTML += '
Subir' + loadData(); + //remove preloader (Cargando...) + var elem = document.getElementById('preloader') + elem.parentNode.removeChild(elem); +}); + +function enviarAJson() { + var first_name = document.getElementById("text").value; + var last_name = document.getElementById("surname").value; + var email = document.getElementById("email").value; + var selected_courses = []; + var amountOfObjects; + if (!($("#dropdown input:checkbox:checked").length > 0)) { + M.toast({ + html: '¡No introduciste ningún curso!', + classes: 'rounded' + }); + return; + } + // Might be a very round-about way to check how many checkboxes are there + // TO-DO: check if I can make this in a less round-about way + $.getJSON('http://evera.challenge.trinom.io/api/courses', function(data) { + amountOfObjects = data.length; + for (var i = 0; i < amountOfObjects; i++) { + selected_courses[i] = document.getElementById(data[i].id).checked; + } + }); + var dateObj = new Date(); + var curTime = dateObj.toISOString(); + var jsonObj = { + 'id': 0, + 'first_name': first_name, + 'last_name': last_name, + 'email': email, + 'created_at': curTime, + 'updated_at': curTime, + 'courses': [] + } + //template for the JSON we're going to add the courses to! + $.getJSON('http://evera.challenge.trinom.io/api/courses', function(data) { + for (var i = 0; i < data.length; i++) { + if (selected_courses[i] == true) { + jsonObj.courses.push({ + 'id': (i + 1), + 'name': 'placeholder', + 'language_code': 'ph', + 'level_id': 0, + 'created_at': curTime, + 'updated_at': curTime, + 'level': { + 'id': 0, + 'name': 'placeholder' + }, + 'language': { + 'code': 'placeholder', + 'name': 'placeholder' + } + }) + //luckily Trinomio did all of the heavy lifting, and by just inputting the ID number it fills all of the spaces for us. + } + } + //Finally, FINALLY, we have our JSON object. Finally. + //Now we can just send a POST request to the API server. + //I got stuck for like a day on this part because JS variables were messing with me. + console.log(JSON.stringify(jsonObj)) + if (urlParams.has('edit')) { //urlparams edit = true + var peoplesId = urlParams.get('id'); + var url = "http://evera.challenge.trinom.io/api/peoples/" + peoplesId; + console.log(url); + var peoplesType = "PUT"; + var peoplesTerm = "actualizado"; + } else { + var url = "http://evera.challenge.trinom.io/api/peoples"; + var peoplesType = "POST"; + var peoplesTerm = "subido"; + } + $.ajax({ + url: url, + type: peoplesType, + data: JSON.stringify(jsonObj), + contentType: "application/json", + dataType: 'json', + error: function(xhr, status, error) { + // Error catching + console.log(error); + console.log(xhr.responseText); + errores = JSON.parse(xhr.responseText); + for (var key in errores.errors) { + for (var error in errores.errors[key]) { + // Switch-case structure for translating the errors JSON may give. + // It isn't translating everything - more technical errors I'd rather have in English anyways, + // but it's the four most common errors having to do with user error. + switch (errores.errors[key][error]) { + case "The first name field is required.": + M.toast({ + html: "Se requiere escribir el nombre.", + classes: 'rounded' + }); + break; + case "The last name field is required.": + M.toast({ + html: "Se requiere escribir el apellido.", + classes: 'rounded' + }); + break; + case "The email field is required.": + M.toast({ + html: "Se requiere escribir el correo electrónico.", + classes: 'rounded' + }); + break; + case "The email has already been taken.": + M.toast({ + html: "Este correo electrónico ya está en uso.", + classes: 'rounded' + }); + break; + default: + // In case the error doesn't exist, just print the original error in English. + M.toast({ + html: errores.errors[key][error], + classes: 'rounded' + }); + break; + } + } + } + }, + success: function() { + var toastHTML = '¡Tu entrada se ha ' + peoplesTerm + ' con éxito!'; + M.toast({ + html: toastHTML, + classes: 'rounded' + }); + } //TO-DO: send them back to index. probably add an alert afterwards + }); + }); +} + +function loadData() { + if (urlParams.has('edit')) { + var first = document.getElementById('text'); + var last = document.getElementById('surname'); + var email = document.getElementById('email'); + first.value = urlParams.get('first_name') + last.value = urlParams.get('last_name') + email.value = urlParams.get('email') + } +} +//NOTE: The following could be on the function loadData();, but since we have to wait until the JSON-populated +//checkboxes load before changing the title, it looks jarring and breaks the illusion of two different forms. +if (urlParams.has('edit')) { + var ele = document.getElementById('title'); + ele.innerHTML = "Modificar una persona" + document.title = "Modificar persona - APIHook"; +} \ No newline at end of file diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..75073b8 --- /dev/null +++ b/js/index.js @@ -0,0 +1,59 @@ +function showTable() { + $.getJSON('http://evera.challenge.trinom.io/api/peoples', function(data) { + var keys = Object.keys(data.data); + //Reset the data, in case this is executed more than once (E.G. when deleting an user) + document.getElementById('records_table').innerHTML = '#NombreApellidoEmailCursosAcciones'; + for (var i = 0; i < keys.length; i++) { + $('').append($('').text(data.data[i].id), $('').text(data.data[i].first_name), $('').text(data.data[i].last_name), $('').text(data.data[i].email), $('fullscreen'), $('edit delete')).appendTo('#records_table'); + var keystwo = Object.keys(data.data[i].courses); + for (var j = 0; j < keystwo.length; j++) { + $('').append($('').text(data.data[i].courses[j].id), $(' ' + data.data[i].courses[j].name + '
Nivel: ' + data.data[i].courses[j].level.name + '
' + data.data[i].courses[j].language.name + " (" + data.data[i].courses[j].language.code + ")
...") //TODO: removes last line?? + ).appendTo('#records_table'); + } + } + // TO-DO: Close all on page done loading and NOT on table done loading + cerrarTodo(); + }); +} + +function eliminarEntrada(strg, id) { + var url = "http://evera.challenge.trinom.io/api/peoples/" + id; + $.ajax({ + url: url, + type: "DELETE", + data: JSON.stringify({ + "people": id + }), + contentType: "application/json", + dataType: 'json', + error: function(xhr, status, error) { + console.log(error); + console.log(xhr.responseText); + M.toast({ + html: 'Hay un error en tu solicitud.', + classes: 'rounded' + }); + }, + success: function() { + M.toast({ + html: '¡El usuario "' + strg + '" fue eliminado con éxito!', + classes: 'rounded' + }); + showTable(); + } //TO-DO: send them back to index. probably add an alert afterwards + }); +} + +function cerrarTodo() { + $('tr[class^=child-]').hide().children('td'); +} +$(document).ready(function() { + $(document).on("click", 'tr.parent td span.expand', function() { + var idOfParent = $(this).parents('tr').attr('id'); + $('tr.child-' + idOfParent).toggle('fast'); + if ($(this).children('i').text() == "fullscreen_exit") $(this).children('i').text("fullscreen") + else $(this).children('i').text("fullscreen_exit"); + }); +}); +//show table when web page opens +showTable(); \ No newline at end of file From c54257117aad4e31c9f6077df600397122f38e30 Mon Sep 17 00:00:00 2001 From: Erik Date: Tue, 17 Dec 2019 22:04:16 -0300 Subject: [PATCH 5/9] //Comentarios p/ index.js, arreglado bug en Modo Modificacion MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Tenia este problema donde el titulo de la pagina se rehusaba a cambiar cuando ?edit=true. Era un tema de esperar a que el documento esté listo con jQuery. --- crear.html | 4 ++-- js/crear.js | 20 +++++++++++++------- js/index.js | 47 ++++++++++++++++++++++++++++++++++++++++------- 3 files changed, 55 insertions(+), 16 deletions(-) diff --git a/crear.html b/crear.html index ce5c2fc..fb27d09 100644 --- a/crear.html +++ b/crear.html @@ -7,7 +7,7 @@ - Crear persona - APIHook + Agregar persona - APIHook @@ -40,7 +40,7 @@
-

Crear una persona


+

Agregar una persona