Skip to content

J
js-e008
Commit 486e1d73 by Pedro Rolon
Options

Se agregaron los archivos necesarios para la tarea

parents
Showing with 484 additions and 0 deletions
prueba.html 0 → 100644
<!DOCTYPE html<html>
<head>
<title>Prueba</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="shortcut icon" href="https://i.pinimg.com/originals/90/2e/b1/902eb16546985bbc3b42628ee6bffdfe.png">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- <link rel="stylesheet" href="/resources/demos/style.css"> -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="script.js"></script>
<style type="text/css">
.form{
padding: 0px;
border: dotted;
}
tr:hover{
background-color: gray;
}
label{
margin-right: 10px;
}
.fixed-dialog{
position: fixed;
/*top: 10px;*/
left: 50px;
bottom: 50px;
}
body{
background-color: blue; /*#4286f4;*/
}
table{
border:dotted;
}
</style>
</head>
<body>
<button id="papa" width="500px">prueba</button>
<div class="container">
<div class="row">
<div class="col-lg-4">
<table id="listaTareas" class="table">
<tr>
<th>Id</th>
<th>Fecha</th>
<th>Descripcion</th>
<th>Prioridad</th>
<th>Estado</th>
<th></th>
</tr>
</table>
</div>
</div>
<!-- /.row -->
</div>
<br><br>
<!-- formulario agregar -->
<div class="form" style="background-color:#f47741;">
<h3>Form Agregar</h3>
<div class="form-group">
<label>Proyecto</label>
<input type="text" name="" id="proyecto">
</div>
<div class="form-group">
<label>Descripción</label>
<input type="text" name="" id="descripcion">
</div>
<button id="botonAgregar">Agregar!</button>
</div>
<div id="dialogDetail"></div>
<div id="formularioEditar">
<div class="form-group">
<label for="idEditar">ID</label>
<input type="text" name="idEditar" id="idEditar" placeholder="id tarea" disabled>
</div>
<div class="form-group">
<label for="fechaEditar">Fecha</label>
<input type="text" name="fechaEditar" placeholder="Fecha" id="fechaEditar">
</div>
<div class="form-group">
<label for="descripcionEditar">Descripción</label>
<input type="text" name="descripcionEditar" placeholder="Descripción" id="descripcionEditar">
</div>
<div class="form-group">
<label for="prioridadEditar">Prioridad</label>
<input type="text" name="prioridadEditar" placeholder="Prioridad" id="prioridadEditar">
</div>
<div class="form-group">
<label for="estadoEditar">Estado</label>
<input type="text" name="estadoEditar" placeholder="Estado" id="estadoEditar">
</div>
<div class="form-group">
<label for="">Proyecto</label>
<input type="text" name="proyectoEditar" placeholder="Proyecto" id="proyectoEditar">
</div>
<button id="botonGuardarCambios" style="margin-top:5px; padding: 10px;">Guardar Cambios</button>
</div>
<div></div>
</body>
</html>
script.js 0 → 100644
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("<b>ID:</b> "+data.id+
"<br><b>Actividad:</b> "+data.description+
"<br><b>Proyecto:</b> "+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 = $("<tr></tr>");
$("#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($("<td>" + rowData.id + "</td>"));
row.append($("<td>" + rowData.entry + "</td>"));
row.append($("<td>" + rowData.description + "</td>"));
row.append($("<td>" + rowData.priority + "</td>"));
row.append($("<td>" + rowData.status + "</td>"));
row.append($("<td><button id='botonEliminar' value="+rowData.id+">Eliminar</button></td>"));
row.append($("<td><button id='botonDetalle' value=" + rowData.id + ">Detalle</button></td>"));
row.append($("<td><button id='botonEditar' value=" + rowData.id + ">Editar</button></td>"));
//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");
// })
// })
});
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