Advertisement
campos20

Untitled

Nov 16th, 2020
731
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function adicionarTarefa(evt) {
  2.   // Evita que a pagina seja recarregada ao enviar o formulario
  3.   evt.preventDefault();
  4.  
  5.   // Obtem os valores dos inputs
  6.   let descricao = document.getElementById("descricao-input");
  7.  
  8.   let data = document.getElementById("data-input");
  9.  
  10.   let feito = document.getElementById("feito-input");
  11.  
  12.   // Cria a nova tarefa e adiciona a lista
  13.   let novaTarefa = {
  14.     descricao: descricao.value,
  15.     data: data.value,
  16.     feito: feito.checked,
  17.   };
  18.   tarefas.push(novaTarefa);
  19.  
  20.   popularTabela();
  21. }
  22.  
  23. function removeElemento(index) {
  24.   // Remove o elemento na posicao index
  25.   tarefas.splice(index, 1);
  26.  
  27.   // Apos a remocao, limpa a tabela e preenche novamente
  28.   popularTabela();
  29. }
  30.  
  31. function editarElemento(index) {
  32.   let item = tarefas[index];
  33.  
  34.   // Armazena o indice da edicao para fazer referencia mais tarde
  35.   indiceDaEdicao = index;
  36.  
  37.   // Pega o elemento de descricao da edicao
  38.   let descricaoInput = document.getElementById("descricao-input-edit");
  39.  
  40.   // Coloca o valor da descricao da tarefa atual no campo de descricao
  41.   descricaoInput.value = item.descricao;
  42.  
  43.   // O mesmo para data
  44.   let dataInput = document.getElementById("data-input-edit");
  45.   dataInput.value = item.data;
  46.  
  47.   // E para o feito
  48.   let feitoInput = document.getElementById("feito-input-edit");
  49.   feitoInput.checked = item.feito;
  50. }
  51.  
  52. function salvarEdicao(evt) {
  53.   // Evita atualizacao
  54.   evt.preventDefault();
  55.  
  56.   // Pega o elemento de descricao da edicao
  57.   let descricaoInput = document.getElementById("descricao-input-edit");
  58.   let dataInput = document.getElementById("data-input-edit");
  59.   let feitoInput = document.getElementById("feito-input-edit");
  60.  
  61.   let novaDescricao = descricaoInput.value;
  62.   let novaData = dataInput.value;
  63.   let novoFeito = feitoInput.checked;
  64.  
  65.   let novaTarefa = {
  66.     descricao: novaDescricao,
  67.     data: novaData,
  68.     feito: novoFeito,
  69.   };
  70.  
  71.   // Troca o valor anterior pelo editado
  72.   tarefas[indiceDaEdicao] = novaTarefa;
  73.  
  74.   // Renderiza a tabela apos a edicao
  75.   popularTabela();
  76. }
  77.  
  78. function formataData(data) {
  79.   let dataSeparada = data.split("-");
  80.  
  81.   let ano = dataSeparada[0];
  82.   let mes = dataSeparada[1];
  83.   let dia = dataSeparada[2];
  84.  
  85.   let dataFormatada = dia + "/" + mes + "/" + ano;
  86.  
  87.   return dataFormatada;
  88. }
  89.  
  90. function popularTabela() {
  91.   // Referencia ao corpo da tabela
  92.   let conteudo = document.getElementById("conteudo");
  93.  
  94.   // Limpa a tabela antes de popular
  95.   conteudo.innerHTML = "";
  96.  
  97.   // Grava os elementos na memoria
  98.   localStorage.setItem("tarefas", JSON.stringify(tarefas));
  99.  
  100.   // Popula a tabela
  101.   for (let i = 0; i < tarefas.length; i++) {
  102.     let tarefa = tarefas[i];
  103.  
  104.     let linha = document.createElement("tr");
  105.     conteudo.appendChild(linha);
  106.  
  107.     let posicao = document.createElement("th");
  108.     linha.appendChild(posicao);
  109.     posicao.innerText = i + 1;
  110.  
  111.     let descricao = document.createElement("td");
  112.     linha.appendChild(descricao);
  113.     descricao.innerText = tarefa.descricao;
  114.  
  115.     let data = document.createElement("td");
  116.     linha.appendChild(data);
  117.     data.innerText = formataData(tarefa.data);
  118.  
  119.     let feito = document.createElement("td");
  120.     linha.appendChild(feito);
  121.  
  122.     let input = document.createElement("input");
  123.     input.type = "checkbox";
  124.     input.checked = tarefa.feito;
  125.     feito.appendChild(input);
  126.  
  127.     let acoes = document.createElement("td");
  128.     linha.appendChild(acoes);
  129.  
  130.     let button = document.createElement("button");
  131.     button.className = "btn btn-danger";
  132.     button.innerHTML = '<i class="fas fa-trash-alt"></i>';
  133.     button.onclick = function () {
  134.       removeElemento(i);
  135.     };
  136.     acoes.appendChild(button);
  137.  
  138.     let botaoEdicao = document.createElement("button");
  139.     botaoEdicao.className = "btn btn-info";
  140.     botaoEdicao.innerHTML = '<i class="fas fa-edit"></i>';
  141.     botaoEdicao.onclick = function () {
  142.       editarElemento(i);
  143.     };
  144.     acoes.appendChild(botaoEdicao);
  145.   }
  146. }
  147.  
  148. // Adiciona a funcao criada ao formulario
  149. let formulario = document.getElementById("formulario");
  150. formulario.onsubmit = adicionarTarefa;
  151.  
  152. let formularioEdicao = document.getElementById("formulario-edit");
  153. formularioEdicao.onsubmit = salvarEdicao;
  154. let indiceDaEdicao = null;
  155.  
  156. // Lista de tarefas a fazer recuperada da memoria do navegador
  157. let tabelaSalva = localStorage.getItem("tarefas");
  158.  
  159. // Quando utilizamos o ||, pegamos a primeira opcao, se existir, ou a segunda opcao
  160. let tarefas = JSON.parse(tabelaSalva) || [];
  161.  
  162. // Popula a tabela inicialmente
  163. popularTabela();
  164.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement