Skip to content

J
js-e008
Commit e6f22297 by Hugo Villagra
Options

1.0

parents
Showing with 397 additions and 0 deletions
-.html 0 → 100644
<!DOCTYPE html>
<html lang="es">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<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" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="" href="https://code.jquery.com/ui/1.12.1/themes/black-tie/jquery-ui.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4">
<table class="table table-hover">
<thead>
<th>Id</th>
<th>Fecha</th>
<th>Descripcion</th>
<th>Prioridad</th>
<th>Estado</th>
<th></th>
</thead>
<tbody id="listaTareas">
</tbody>
</table>
</div>
</div>
<div id="formularioEntrada">
<h2>Ingresar proyecto</h2>
<label for="entradaProyecto">Ingrese el nombre del proyecto</label>
<input type="text" id="entradaProyecto" name="entradaProyecto" value="">
<br>
<label for="entradaDescripcion">Ingrese la descripcion del proyecto</label>
<input type="text" id="entradaDescripcion" name="entradaDescripcion" value="">
<br>
<input type="button" id="btnIngresar" name="btnIngresar" value="Guardar" class="btn btn-dark">
</div>
<br>
<br>
<div id="formularioModificar">
<h2>Modificar formulario</h2>
<label for="entradaIDModificar">Ingrese la id del proyecto</label>
<input type="text" name="entradaIDModificar" id="entradaIDModificar" value="">
<br>
<label for="entradaNuevoNombre">Ingrese el nuevo nombre del proyecto</label>
<input type="text" name="entradaNuevoNombre" id="entradaNuevoNombre" value="">
<br>
<label for="entradaNuevaDescripcion">Ingrese la nueva descripcion del proyecto</label>
<input type="text" name="entradaNuevaDescripcion" id="entradaNuevaDescripcion" value="">
<br>
<input type="button" name="btnModificar" id="btnModificar" value="Modificar proyecto" class="btn btn-dark">
</div>
<br>
<br>
<div id="filtrarDescripcion">
<h2>Filtrar resultados</h2>
<label for="entradaFiltro">Ingrese la descripcion a filtrar</label>
<input type="text" id="entradaFiltro" name="entradaFiltro" value="">
<br>
<input type="button" id="btnFiltrar" name="btnFiltrar" value="Aplicar filtro" class="btn btn-dark">
<input type="button" id="btnRestaurar" value="Quitar filtro" class="btn btn-dark">
</div>
<br>
<br>
<div id="filtrarProyecto" class="col-lg-4">
<h2>Lista de proyectos</h2>
<select class="custom-select" id="selectorProyecto">
</select>
<br>
<br>
<input type="button" name="" id="btnFiltrarProyecto" value="Filtrar proyecto" class="btn btn-dark">
<input type="button" id="btnTodoProyecto" value="Quitar filtro proyecto" class="btn btn-dark">
</div>
</div>
<div id="resultado" title="Mas detalle">
</div>
</body>
<script src="-.js"></script>
</html>
\ No newline at end of file
-.js 0 → 100644
jQuery(function($){
var pokemones={};
var proyectos = [];
$("#resultado").dialog({
autoOpen: false,
modal: true,
show: {
effect: "explode",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
buttons:{
"Aceptar":function(){
$(this).dialog("close");
}
}
});
//Carga la lista
$.ajax({
url: 'https://inthe.am/api/v2/tasks/',
type: "GET",
headers: {
"Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
},
dataType: "json",
success: function(data, textStatus, jqXHR) {
generarTabla(data);
}
});
function generarTabla(data) {
for (var i = 0; i < data.length; i++) {
generarFila(data[i]);
}
}
function mostrarDetalle(id){
console.log("mostrarDetalle");
console.log(this);
}
function generarFila(rowData) {
var row = $("<tr />");
row.attr("id",rowData.id);
row.attr("class","fila");
var cantidad = $(".fila").toArray().length;
if((cantidad+1)%2==0){
row.attr("style","background-color: green");
}else{
row.attr("style","background-color: red");
}
$("#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>"));
var btnEliminar = $('<input/>');
btnEliminar.attr("type","button");
btnEliminar.attr("value","Eliminar")
btnEliminar.attr("id","btnEliminar");
btnEliminar.attr("name",rowData.id);
btnEliminar.attr("class","btn btn-dark");
var btnDetalle = $('<input/>');
btnDetalle.attr("type","button");
btnDetalle.attr("value","Detalle");
btnDetalle.attr("id","btnDetalle");
btnDetalle.attr("name",rowData.id);
btnDetalle.attr("class","btn btn-dark");
row.append($("<td>").append(btnEliminar));
row.append($("<td>").append(btnDetalle));
//Cargamos los nombres de los proyectos en la lista de proyectos
//Buscamo si ya existe en la lista
var encontrado = false;
for(var i=0;i<proyectos.length;i++){
if(proyectos[i]==rowData.project){
encontrado = true;
}
}
if(!encontrado){
proyectos.push(rowData.project);
$("#selectorProyecto option").remove();
for(var i=0;i<proyectos.length;i++){
var opcion = $("<option/>")
opcion.attr("value",proyectos[i]);
opcion.append(proyectos[i]);
$("#selectorProyecto").append(opcion);
}
}
}
$("#listaTareas").on("click","#btnEliminar",function(){
var clave = $(this).attr("name");
console.log(clave);
$.ajax({
url: 'https://inthe.am/api/v2/tasks/'+clave+'/delete/',
type: "POST",
headers: {
"Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
},
dataType: "json",
// success: function(data, textStatus, jqXHR) {
// alert("Eliminado: "+clave);
// generarTabla(data);
// },
complete: function(data, textStatus, jqXHR) {
$("#"+clave).fadeOut("slow",function (params) {
$("#"+clave).remove();
});
},
});
});
$("#listaTareas").on("click","#btnDetalle",function(){
var clave = $(this).attr("name");
$("#resultado p").remove();
$.ajax({
url: 'https://inthe.am/api/v2/tasks/'+clave+'/',
type: "GET",
headers: {
"Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
},
dataType: "json",
success: function(data, textStatus, jqXHR) {
$("#resultado").append($("<p/>").append("ID: "+data.id));
$("#resultado").append($("<p/>").append("ID Usuario: "+data.uuid));
$("#resultado").append($("<p/>").append("ID Corto: "+data.short_id));
$("#resultado").append($("<p/>").append("Estado: "+data.status));
$("#resultado").append($("<p/>").append("Urgencia: "+data.urgency));
$("#resultado").append($("<p/>").append("Descripcion: "+data.description));
$("#resultado").append($("<p/>").append("Proyecto: "+data.project));
$("#resultado").append($("<p/>").append("Fecha y hora entrada: "+data.entry));
$("#resultado").append($("<p/>").append("Fecha y hora modificacion: "+data.modified));
}
});
$("#resultado").dialog("open");
});
$("#formularioEntrada").on("click","#btnIngresar",function () {
var proyecto = $("#entradaProyecto").val();
var descripcion = $("#entradaDescripcion").val();
console.log(proyecto);
console.log(descripcion);
$.ajax({
url: 'https://inthe.am/api/v2/tasks/',
type: "POST",
headers: {
"Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
},
dataType: "json",
data:{
"proyect": proyecto,
"description": descripcion
},
success: function(data, textStatus, jqXHR) {
generarFila(data);
}
});
});
$("#formularioModificar").on("click","#btnModificar",function(){
var idproyecto = $("#entradaIDModificar").val();
var nuevoNombre = $("#entradaNuevoNombre").val();
var nuevaDescripcion = $("#entradaNuevaDescripcion").val();
var objetoFila = new Object();
//Obtenemos los datos de la fila
$.ajax({
url: 'https://inthe.am/api/v2/tasks/'+idproyecto+'/',
type: "GET",
headers: {
"Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
},
dataType: "json",
success: function(data, textStatus, jqXHR) {
objetoFila = data;
}
});
//Modificamos la fila
$.ajax({
url: 'https://inthe.am/api/v2/tasks/'+idproyecto+'/',
type: "PUT",
headers: {
"Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
},
dataType: "json",
data:{
"id": objetoFila.id,
"uuid": objetoFila.uuid,
"short_id": objetoFila.short_id,
"status": objetoFila.status,
"urgency": objetoFila.urgency,
"description": nuevaDescripcion,
"priority": objetoFila.priority,
"project": nuevoNombre,
"due": objetoFila.due,
"entry": objetoFila.entry,
"modified": objetoFila.modified,
"blocks": objetoFila.blocks,
"udas": {
"intheamtrelloboardid": "5b7d9f4aacb9b3272ed566b2",
"intheamtrellolistid": "5b7d9f4aacb9b3272ed566b3",
"intheamtrellolistname": "To Do",
"intheamtrelloid": "5c1a70c839d3057f6a2cb138",
"intheamtrellourl": "https://trello.com/c/lSWG82Cj/69-dise%C3%B1ar-cosas"
}
},
success: function(data, textStatus, jqXHR) {
},
});
//Modificamos la fila
$("#"+idproyecto+" td:nth-child(3)").text(nuevaDescripcion);
});
$("#filtrarDescripcion").on("click","#btnFiltrar",function() {
var filtro = $("#entradaFiltro").val();
//Borramos todo el contenido de la tabla
$("#listaTareas tr").remove();
//Obtenemos todas las tablas
var datos;
$.ajax({
url: 'https://inthe.am/api/v2/tasks/',
type: "GET",
headers: {
"Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
},
dataType: "json",
success: function(data, textStatus, jqXHR) {
for (var i = 0; i < data.length; i++) {
if(data[i].description == filtro){
generarFila(data[i]);
}
}
}
});
});
$("#filtrarDescripcion").on("click","#btnRestaurar",function(){
//Borramos todo el contenido de la tabla
$("#listaTareas tr").remove();
//Cargamos todas las tablas
$.ajax({
url: 'https://inthe.am/api/v2/tasks/',
type: "GET",
headers: {
"Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
},
dataType: "json",
success: function(data, textStatus, jqXHR) {
generarTabla(data);
}
});
});
$("#filtrarProyecto").on("click","#btnFiltrarProyecto",function(){
//Cargamos la lista
var lista = [];
$.ajax({
url: 'https://inthe.am/api/v2/tasks/',
type: "GET",
headers: {
"Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
},
dataType: "json",
success: function(data, textStatus, jqXHR) {
//Buscamos cual de ellas son el proyecto deseado
var proyecto = $("#selectorProyecto").val();
//Obtenemos la lista que cumple la condicion
var lista = [];
for(var i=0;i<data.length;i++){
if(data[i].project==proyecto){
lista.push(data[i])
}
}
//Cargamos el contenido en la tabla
$("#listaTareas tr").remove();
generarTabla(lista);
}
});
});
$("#filtrarProyecto").on("click","#btnTodoProyecto",function(){
//Borramos todo el contenido de la tabla
$("#listaTareas tr").remove();
//Cargamos todas las tablas
$.ajax({
url: 'https://inthe.am/api/v2/tasks/',
type: "GET",
headers: {
"Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
},
dataType: "json",
success: function(data, textStatus, jqXHR) {
generarTabla(data);
}
});
});
});
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