From 486e1d736281850a88aa01dd0bfd5bd1dc18d686 Mon Sep 17 00:00:00 2001 From: Pedro Rolon Date: Thu, 27 Dec 2018 10:09:12 -0300 Subject: [PATCH] Se agregaron los archivos necesarios para la tarea --- prueba.html | 138 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ script.js | 346 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 484 insertions(+) create mode 100644 prueba.html create mode 100644 script.js diff --git a/prueba.html b/prueba.html new file mode 100644 index 0000000..81751a3 --- /dev/null +++ b/prueba.html @@ -0,0 +1,138 @@ + + + Prueba + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ + + + + + + + + + +
IdFechaDescripcionPrioridadEstado
+
+ +
+ + +
+ +

+ + + +
+

Form Agregar

+
+ + +
+
+ + +
+ +
+ + + +
+ +
+ + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + + + +
+ +
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..d670b36 --- /dev/null +++ b/script.js @@ -0,0 +1,346 @@ +jQuery(function($){ + var isOdd = false; + //Tarea de JQuery + + /** + * ******TAREA DE JQUERY******* + * Las funciones que solicita el ejercicio está señalado por comentarios + * que indican a que item corresponden. + * En algunas funcionalidades se imprimen mensajes en la consola para comprobar + * que realmente funcionan. + + * El item 8 está dentro de la función que genera las filas. generarFila(). + */ + + //1. Obtener lista de tareas y mostrar en la tabla + cargarTabla(); + function cargarTabla(){ + $.ajax({ + url: 'https://inthe.am/api/v2/tasks/', + type: "GET", + headers: { + "Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499" + }, + dataType: "json", + success: function(data, textStatus, jqXHR) { + generarTabla(data); + } + }); + } + + + //2. Eliminar una tarea especifica seleccionando un registro de la fila + $("table").on("click", "#botonEliminar", function(){ + var id = $(this).val(); + $(this).parent('td').parent('tr').fadeOut(400); + + $.ajax({ + url: 'https://inthe.am/api/v2/tasks/'+ id +'/delete/', + type: "POST", + headers: { + "Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499" + }, + dataType: "json", + success: function(data, textStatus, jqXHR) { + //generarTabla(data); + console.log("***Tarea eliminada! id: "+$("td:first", this).text()); + }, + complete: function(f){ + console.log(f); + if(f.statusText=="OK" && f.status==200){ + console.log("***Tarea eliminada! id: "+ id +"*****"); + } + } + }); + }); + + + //3. Mostrar el detalle de una tarea utilizando jQuery UI Dialog (https://jqueryui.com/dialog/) + $("table").on("click", "#botonDetalle", function(){ + var id=$(this).val(); + + $.ajax({ + url: 'https://inthe.am/api/v2/tasks/'+ id +'/', + type: "GET", + headers: { + "Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499" + }, + dataType: "json", + success: function(data, textStatus, jqXHR) { + //generarTabla(data); + console.log(data); + $("#dialogDetail").html("ID: "+data.id+ + "
Actividad: "+data.description+ + "
Proyecto: "+data.project); + $("#dialogDetail").dialog("open"); + } + }); + + }); + + //Setea algunas opciones del dialog + $("#dialogDetail").dialog({ + autoOpen: false, + modal: true, + title: "Mirá como está este detalle papá!", + dialogClass: 'fixed-dialog' + + }); + + + //4. Crear una tarea, crear un form donde se pueda seleccionar el proyecto y la descripcion de la tarea, + //enviar los datos al servidor + $("#botonAgregar").on("click", function(){ + if($("#descripcion").val()=="" || $("#proyecto")==""){ + alert("el campo no puede estar vacio"); + //$("#descripcion").fadeOut(3000); + + return; + } + /**********************************************/ + console.log("Agregando"); + $.ajax({ + url: 'https://inthe.am/api/v2/tasks/', + type: "POST", + headers: { + "Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499" + }, + data: { + "id": "d8ff7cba-1530-4e0b-a780-6b7cd9923840", + "uuid": "d8ff7cba-1530-4e0b-a780-6b7cd9923840", + "short_id": 1, + "status": "pending", + "urgency": 1, + "description": $("#descripcion").val(),//"sacar la ropa", + "project": $("#proyecto").val(),//"casa", + "entry": "2018-09-12T15:37:27Z", + "modified": "2018-09-13T18:28:41Z", + "blocks": [], + "udas": { + "intheamtrelloboardid": "5b99354d32a0c4368a4bd498", + "intheamtrellolistid": "5b99354d32a0c4368a4bd499", + "intheamtrellolistname": "To Do", + "intheamtrelloid": "5b9aac56cc3f7b3233b1f629", + "intheamtrellourl": "https://trello.com/c/Il6tNSaw/2-limpiar-banho" + } + }, + dataType: "json", + success: function(data, textStatus, jqXHR) { + console.log(data); + console.log(textStatus); + generarFila(data); + $("#descripcion").val(""); + $("#proyecto").val(""); + }, + error: function(e){ + console.log(e); + } + }); + }); + + + // 5. Actualizar la tarea, seleccionar un registro de la tabla, mostrar un formulario de edicion y enviar los + // datos al servidor + + //Esta funcion abre el dialogo con un formulario para editar al hacer + //click sobre el botón editar en una de las filas + // Setea todos los campos con los valores actuales del registro + $("table").on("click", "#botonEditar", function(){ + var id= $(this).val(); + + $.ajax({ + url: 'https://inthe.am/api/v2/tasks/'+ id +'/', + type: "GET", + headers: { + "Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499" + }, + dataType: "json", + success: function(data, textStatus, jqXHR) { + //generarTabla(data); + console.log(data); + $("#idEditar").val(data.id); + $("#fechaEditar").val(data.entry); + $("#descripcionEditar").val(data.description); + $("#prioridadEditar").val(data.priority); + $("#estadoEditar").val(data.status); + $("#proyectoEditar").val(data.project); + $("#formularioEditar").dialog("open"); + + $("#botonGuardarCambios").on("click", function(){ + var id = $("#idEditar").val(); + var fecha = $("#fechaEditar").val(); + var descripcion = $("#descripcionEditar").val(); + var prioridad = $("#prioridadEditar").val(); + var estado = $("#estadoEditar").val(); + var proyecto = $("#proyectoEditar").val(); + + $.ajax({ + url:'https://inthe.am/api/v2/tasks/'+id+'/', + type:'PUT', + headers:{ + "Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499" + }, + dataType:"json", + data: { + "id": id, + "uuid": id, + "short_id": 1, + "status": estado, + "urgency": 11, + "description": descripcion, + "priority": prioridad, + "project": proyecto, + "due": "2018-09-29T19:37:00Z", + "entry": fecha, + "modified": "2018-09-27T19:39:18Z", + "blocks": [], + "tags": [ + "visita", + "diaria" + ], + "udas": { + "telefono1":"0971410692", + "telefono2":"0985301614" + } + }, + success: function(){ + $("#formularioEditar").dialog("close"); + }, + error: function(e){ + console.log(e); + }, + complete: function(e){ + //$("#formularioEditar").dialog("close"); + } + + }); + + + }); + + alert("termino la funcion") + } + }); + }); + + //Esta función realiza el cambio al hacer click en el botón guardar boton + //Guardar cambios en el formulario para editar + // $("#botonGuardarCambios").on("click", function(){ + // var id = $("#idEditar").val(); + // var fecha = $("#fechaEditar").val(); + // var descripcion = $("#descripcionEditar").val(); + // var prioridad = $("#prioridadEditar").val(); + // var estado = $("#estadoEditar").val(); + // var proyecto = $("#proyectoEditar").val(); + // + // $.ajax({ + // url:'https://inthe.am/api/v2/tasks/'+id+'/', + // type:'PUT', + // headers:{ + // "Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499" + // }, + // dataType:"json", + // data: { + // "id": id, + // "uuid": id, + // "short_id": 1, + // "status": estado, + // "urgency": 11, + // "description": descripcion, + // "priority": prioridad, + // "project": proyecto, + // "due": "2018-09-29T19:37:00Z", + // "entry": fecha, + // "modified": "2018-09-27T19:39:18Z", + // "blocks": [], + // "tags": [ + // "visita", + // "diaria" + // ], + // "udas": { + // "telefono1":"0971410692", + // "telefono2":"0985301614" + // } + // }, + // success: function(){ + // $("#formularioEditar").dialog("close"); + // }, + // error: function(e){ + // console.log(e); + // }, + // complete: function(e){ + // //$("#formularioEditar").dialog("close"); + // } + // + // }); + // + // + // }); + + $("#formularioEditar").dialog({ + autoOpen:false, + modal: true, + width: "50%", + title: "Editar tarea papu", + dialogClass: 'fixed-dialog' + }); + + + + $("#papa").on("click", function(){ + //console.log( $("tr:eq(1)").children()); + console.log( $("tr:eq(1) td").eq(0).text("falope") ); + + //$("tr:eq(0)").hide(); + + }); + + + //Funciones útiles + function generarTabla(data) { + for (var i = 0; i < data.length; i++) { + generarFila(data[i]); + } + } + + function mostrarDetalle(registro){ + generarFila(registro); + } + + function generarFila(rowData) { + var row = $(""); + $("#listaTareas").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it + row.append($("" + rowData.id + "")); + row.append($("" + rowData.entry + "")); + row.append($("" + rowData.description + "")); + row.append($("" + rowData.priority + "")); + row.append($("" + rowData.status + "")); + row.append($("")); + row.append($("")); + row.append($("")); + + //8. Mostrar las tareas de las filas pares con un color diferente a las de las filas impares + $("tr:odd").css("background-color","red"); + $("tr:even").css("background-color","green"); + } + + + + // //Permite hacer click sobre un td específico + // $("table").on("click", "tr", function(){ + // $(this).on("click","td:eq(0)", function(){ + // $(this).css("color", "red"); + // }) + // }) + + + + + + + + + + + +}); -- libgit2 0.26.0