diff --git a/README.md b/README.md index 80ad8d3..522150f 100644 --- a/README.md +++ b/README.md @@ -3,16 +3,24 @@ TODOlist é uma aplicação Java que permite o gerenciamento eficiente de tarefas. Com funcionalidades como criação, edição, exclusão e ordenação de tarefas, esta aplicação está sendo desenvolvida como um dos projetos do ACZG 6.0. ## Funcionalidades - +- **Ver Tarefa Individual**: Disponível a partir da versão 3.5.0 - **Adicionar Tarefas**: Crie novas tarefas especificando nome, descrição, data de término, prioridade, categoria e status. - **Editar Tarefas**: Modifique as informações das tarefas existentes para mantê-las atualizadas. - **Excluir Tarefas**: Remova tarefas que não são mais necessárias. -- **Ordenação de Tarefas**: Ordene as tarefas por prioridade, categoria ou status. -- **Persistência de Dados**: As tarefas são armazenadas em um arquivo CSV para fácil manipulação e recuperação. +- **Ordenação de Tarefas**: Ordene as tarefas por prioridade, categoria ou status. (No momento não está disponível na versão web) +- **Persistência de Dados**: As tarefas são armazenadas em um arquivo CSV para fácil manipulação e recuperação. Na versão web acontece via localStorage do navegador - **Validação de Dados**: Entrada de dados validada para garantir a integridade das informações. ## Tecnologias Utilizadas +### Fronend +- **HTML5**: Linguagem de marcação de texto +- **CSS3**: Linguagem de estilização de folhas de estilo em cascata +- **JavaScript**: Linguagem de programação interatividade +- **LOCAL STORAGE**: Armazenamento interno do navegador. (Não é indicado para armazenar dados sensíveis, é apagado ao limpar dados.) +- **VISUAL STUDIO CODE**: Ambiente de Desenvolvimento Integrado (IDE) utilizado. + +### Backend - **Java**: Linguagem de programação principal utilizada no desenvolvimento do projeto. - **Git e GitHub**: Para versionamento e armazenamento do projeto - **JDK 8**: Versão do Java Development Kit utilizada. @@ -21,6 +29,9 @@ TODOlist é uma aplicação Java que permite o gerenciamento eficiente de tarefa ## Minhas breves considerações +> A versão web do TODO List foi um verdadeiro desafio, que me fez obter conhecimento sobre novas tecnologias até então pouco experimentadas por mim, +pude ter um maior contato com o JavaScript, HTML, CSS o que me instigou a realizar diversas pesquisas, afim de obter um resultado apresentável para o projeto em questão. + > O projeto do TODO List e suas funcionalidades é um ótimo desafio para explorar diversos conceitos aprendidos até o momento um exemplo POO: Polimorfismo, Encapsulamento, herança e etc. > > O reaproveitamento de alguns métodos, e características estão sendo essenciais no desenvolvimento do projeto, poder "esconder" algumas funcionalidades com modificadores de acesso e com a utilização de pacotes par a organizar o código e delegar as responsabilidades é muito gratificante. @@ -37,6 +48,43 @@ TODOlist é uma aplicação Java que permite o gerenciamento eficiente de tarefa > ## COMO FUNCIONA? + +## Versão Web + +### Tela Principal +- Ao executar a aplicação o usuário é apresentado a uma modesta página web com design simples e responsivo. +- Onde é possível escolher ações como Cadastrar, Ver Tarefa, Editar, Excluir ou Listar Tarefas +### Adicionar Tarefa +- Na opção de cadastrar tarefa o usuário preenche um breve formulário. +- Durante o preenchimento do formulário são realizadas validações quanto a integridade dos dados. +- Todas as entradas de dados passam por esse rigoroso sistema de validações. +- Essas validações asseguram que não sejam lançadas exceções durante a execução da aplicação +- Também garantem que não sejam passados dados nulos ou adversas aos dados esperados. +- É possível limpar todos os dados preenchidos, graças a o método .reset do JavaScript. +- Após o preenchimento da última informação, os dados são armazenados em uma lista. +- Essa lista é cadastada no LocalStorage do navegador +### Editar Tarefa +- Ao lado de cada tarefa é possível pressionar o botão Editar que fica na aba de opções +- Logo após os dados atuais da tarefa selecionada são exibidos para o usuário. +- Então o usuário precisa preencher um formulário semelhante ao de cadastro, o processo é idêntico. +- A lógica de edição é baseda no id de cada tarefa +- É possível desfazer todas as edições através do botão desfazer. +### Excluir Tarefa +- Ao lado de cada tarefa é possível pressionar o botão Excluir que fica na aba de opções +- O procedimento de excluir uma tarefa utiliza o método Slice do JS. +- A lógica de exclusão é baseda no id de cada tarefa +### Listar Tarefas +- São exibidas as tarefas cadastradas que por sua vez são recuperadas de uma lista que foi previamente populada com os dados provenientes do localStorage +- O arquivo CSV é lido pela classe DAO, e os dados são armazenados em uma lista. +### Extra +- Todo o processo é realizado com consultas ao localStorage que é a principal forma de "persistência" momentanea enquanto ainda não estou trabalhando com banco de dados real. +- No projeto web utilizei a centralização de chamadas para conteúdo html e consultas ao DOM, armazenei esses valores em variáveis para melhor organização do código. +- Foram utilizadas técnicas como, Closures, operador Spread, funções autoexecutáveis e etc. +- A lógica de geração de id é baseada no maior id encontrado no localStorage, para que não haja repetição nem recontagem após o encerramento da aplicação. +- Algumas operações sensíveis, como Excluir, Cancelar e etc requerem uma confirmação extra através de uma resposta no alert do JavaScript. + +## Versão CLI + ### Tela Principal - Ao executar a aplicação o usuário é apresentado a um modesto Menu interativo - Onde é possível escolher ações como Cadastrar, Editar, Excluir ou Listar Tarefas @@ -67,7 +115,7 @@ TODOlist é uma aplicação Java que permite o gerenciamento eficiente de tarefa ## Estrutura do Projeto ### O projeto está organizado da seguinte forma: - +- **Frontend**: Contém os arquivos responsáveis pelo funcionameno da aplicação no navegador. - **Controller**: Contém os métodos responsáveis por gerenciar as operações das tarefas. - **DAO (Data Access Object)**: Gerencia a leitura e escrita de dados no arquivo CSV. - **Model**: Define as classes principais do domínio, como `Tarefa`. diff --git a/frontend/css/style.css b/frontend/css/style.css new file mode 100644 index 0000000..197dda3 --- /dev/null +++ b/frontend/css/style.css @@ -0,0 +1,463 @@ +/*Geral*/ +body, +p, +h1, +h2, +input, +textarea { + margin: 0; + font-family: "Roboto", sans-serif; +} + +body { + font-size: 0.9em; + font-weight: 400; + background-color: #f5f5f5; + +} + +h1 { + color: #2564cf; +} + +h2 { + font-size: 1.3em; +} + +/*Topbar*/ +#topbar { + background-color: #2564cf; + color: #fff; + padding: 10px 10px; + height: 30px; +} + +#topbar h2, +#topbar ul, +#topbar-list li, +#topbar-list, +#topbar nav { + display: inline-block; + padding: 0; +} + +#topbar h2 { + margin: 0; + line-height: 30px; +} + +/* Mensagem */ + + + +/* Menu principal */ +.menu-topo nav { + float: left; +} + +.menu-topo li { + margin: 0 5px; + position: relative; +} + +.menu-topo li a:hover { + color: #2564cf; +} + +/* Menu dropdown */ +.menu-topo li ul { + position: absolute; + top: 100%; + left: 0; + background-color: #fff; + display: none; + padding: 0; + margin: 0; + list-style: none; + border: 1px solid #ccc; + z-index: 1000; +} + +.menu-topo li ul li { + display: block; + width: 150px; +} + +#botao-adicionar-nova-tarefa { + + text-decoration: none; + padding: 5px 0 5px 30px; + color: #444; + font-size: 1em; + font-weight: 700; + border-radius: 5px; + border: 0; + cursor: pointer; + background: #fff url(../images/svg/add.svg) no-repeat left 10px center; + +} + +#botao-classificar-tarefas { + + text-decoration: none; + padding: 5px 0 5px 30px; + color: #444; + font-size: 1em; + border-radius: 5px; + border: 0; + cursor: pointer; + background: #fff url(../images/svg/swap.svg) no-repeat left 10px center; + +} + +#botao-classificar-data, +#botao-classificar-prioridade, +#botao-classificar-status{ + + text-decoration: none; + padding: 5px 0 5px 30px; + color: #444; + font-size: 1em; + border-radius: 5px; + border: 0; + cursor: pointer; +} +#botao-classificar-data{ + background: #fff url(../images/svg/calendar.svg) no-repeat left 10px center; +} +#botao-classificar-prioridade{ + background: #fff url(../images/svg/signal.svg) no-repeat left 10px center; +} +#botao-classificar-status{ + background: #fff url(../images/svg/checklist.svg) no-repeat left 10px center; +} + + +.caixa-branca li ul li +#botao-classificar-data:hover, +#botao-classificar-prioridade:hover, +#botao-classificar-status:hover{ + color: #2564cf; +} + +/* Exibir dropdown ao passar o mouse */ +.menu-topo li:hover ul, +.menu-topo li.over ul { + display: block; +} + +/*Conteúdo Principal*/ + +#principal { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +/*Botões*/ + +.botao-container { + justify-content: center; + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.botao1, +.botao2, +.botao3 { + width: 30px; + height: 30px; + text-align: center; + text-decoration: none; + padding: 5px 5px; + color: #fff; + font-size: 1em; + font-weight: 700; + border-radius: 5px; + border: 0; + cursor: pointer; +} + +.botao1 { + background: #1da003 url(../images/svg/eye.svg) no-repeat center center; +} + + +.botao2 { + background: #000080 url(../images/svg/edit.svg) no-repeat center center; +} + +.botao3 { + background: #ff0000 url(../images/svg/delete.svg) no-repeat center center; +} + +/* Caixas */ +.caixa-branca { + background-color: #fff; + padding: 5px; + margin: 15px 5px auto; + border-radius: 5px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + max-width: 1200px; + width: 90%; +} + +.caixa-branca-tarefas { + background-color: #fff; + padding: 5px; + margin: 15px 5px 60px 5px; + border-radius: 5px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + max-width: 1200px; + width: 90%; +} + +.caixa-branca-exibicao { + text-align: left; + color: #000; + background-color: #fff; + padding: 15px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + margin:0 auto; + border-radius: 5px; +} + +.caixa1 { + width: 320px; + padding: 5px; + margin-bottom: 10px; + border: 1px solid #000080; + border-radius: 5px; +} + +.caixa2 { + padding: 5px; + margin-bottom: 10px; + border: 1px solid #000080; + border-radius: 5px; +} + +#caixa3 { + padding: 5px; + margin-bottom: 10px; + border: 1px solid #ff0000; + border-radius: 5px; +} + +/* Tabela */ + +#tabela-tarefas { + margin-top: 5px; + max-width: 1200px; + width: 100%; + border-collapse: collapse; + text-align: center; +} + +#tabela-tarefas th { + border: 1px solid #ddd; + padding: 10px; + text-align: left; + background-color: #2564cf; + color: #fff; +} + +#tabela-tarefas td { + border: 1px solid #ddd; + padding: 10px; +} + +.caixa-cadastro { + background-color: #fff; + padding: 20px; + border-radius: 10px; + max-width: 600px; + margin: auto; + font-family: Arial, sans-serif; +} + +.caixa-cadastro h1 { + text-align: center; + color: #333; + margin-bottom: 20px; +} + +.caixa-cadastro table { + width: 100%; +} + +.caixa-cadastro td { + padding: 10px; +} + +.caixa-cadastro label { + font-weight: bold; + color: #333; +} + +.caixa-cadastro input[type="text"], +.caixa-cadastro input[type="datetime-local"], +.caixa-cadastro select { + width: 100%; + padding: 10px; + border-radius: 5px; + border: 1px solid #ccc; + box-sizing: border-box; + margin-top: 5px; +} + +.caixa-cadastro input[type="radio"] { + margin-right: 5px; +} + +/* Botões do cadastro */ +.caixa-cadastro .botao4, +.botao5, +.botao6 { + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + display: inline-block; + width: 32%; + font-size: 16px; + margin-top: 20px; +} + +.caixa-cadastro .botao4 { + background-color: #4CAF50; +} + +.caixa-cadastro .botao5 { + background-color: #2564cf; +} + +.caixa-cadastro .botao6 { + background-color: #ff0000; +} + +.caixa-cadastro .botao4:hover { + background-color: #45a049; +} + +.caixa-cadastro .botao5:hover { + background-color: #2564cf; +} + +.caixa-cadastro .botao6:hover { + background-color: #ff0000; +} + +/* Formulários */ +.formularioCadastro, .formularioEdicao { + margin-bottom: 15px; +} + +.formularioCadastro label, .formularioEdicao label { + display: block; + margin-bottom: 5px; +} + +.formularioCadastro input, .formularioEdicao input +.formularioCadastro select, .formularioEdicao select { + width: 100%; + padding: 8px; + box-sizing: border-box; +} + +.botao-container { + display: flex; + gap: 10px; + justify-content: center; +} + +.botao-container button { + padding: 5px 5px; + cursor: pointer; +} + +/* Rodapé */ + +#rodape { + background-color: #000080; + color: #fff; + text-align: center; + margin-top: 30px; + padding: 10px 10px; + height: 20px; + position: fixed; + bottom: 0; + width: 100%; +} + +#rodape .destacado { + font-weight: bold; +} + +/* Responsividade para telas menores */ + +@media (max-width: 768px) { + .caixa-branca, .caixa-branca-tarefas { + padding: 10px 10px; + width: 85%; + } + + body { + font-size: 0.7em; + font-weight: 400; + background-color: #f5f5f5; + + } + + .botao1, + .botao2, + .botao3 { + width: 20px; + height: 20px; + text-align: center; + text-decoration: none; + + } + + .botao1 { + background: #45a049 url(../images/svg/eye.svg) no-repeat center center; + } + + + .botao2 { + background: #000080 url(../images/svg/edit.svg) no-repeat center center; + } + + .botao3 { + background: #ff0000 url(../images/svg/delete.svg) no-repeat center center; + } +} + +@media (max-width: 600px) { + .caixa-cadastro { + padding: 15px; + } + + .caixa-cadastro table { + width: 100%; + } + + .caixa-cadastro td { + display: block; + width: 100%; + padding: 5px 0; + } +} + +@media (max-width: 480px) { + .caixa-branca, .caixa-branca-tarefas { + padding: 15px; + width: 90%; + } + +} \ No newline at end of file diff --git a/frontend/images/favicon.png b/frontend/images/favicon.png new file mode 100644 index 0000000..bd2a158 Binary files /dev/null and b/frontend/images/favicon.png differ diff --git a/frontend/images/svg/add.svg b/frontend/images/svg/add.svg new file mode 100644 index 0000000..707b972 --- /dev/null +++ b/frontend/images/svg/add.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/images/svg/calendar.svg b/frontend/images/svg/calendar.svg new file mode 100644 index 0000000..e247c5c --- /dev/null +++ b/frontend/images/svg/calendar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/images/svg/checklist.svg b/frontend/images/svg/checklist.svg new file mode 100644 index 0000000..70155fc --- /dev/null +++ b/frontend/images/svg/checklist.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/images/svg/delete.svg b/frontend/images/svg/delete.svg new file mode 100644 index 0000000..d819487 --- /dev/null +++ b/frontend/images/svg/delete.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/images/svg/edit.svg b/frontend/images/svg/edit.svg new file mode 100644 index 0000000..9f80394 --- /dev/null +++ b/frontend/images/svg/edit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/images/svg/eye.svg b/frontend/images/svg/eye.svg new file mode 100644 index 0000000..17ad752 --- /dev/null +++ b/frontend/images/svg/eye.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/images/svg/signal.svg b/frontend/images/svg/signal.svg new file mode 100644 index 0000000..c05ee63 --- /dev/null +++ b/frontend/images/svg/signal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/images/svg/swap.svg b/frontend/images/svg/swap.svg new file mode 100644 index 0000000..d150ae3 --- /dev/null +++ b/frontend/images/svg/swap.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/index.html b/frontend/index.html new file mode 100644 index 0000000..a4a12b2 --- /dev/null +++ b/frontend/index.html @@ -0,0 +1,223 @@ + + + + + + + + + + + + TODO List - ACZG 6.0 + + + +
+

TODO List - ACZG 6.0

+
+ +
+
+ + + + +
+ + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
IDNomeData de conclusãoStatusOpções
+ +
+
+ +
+ + + + + + \ No newline at end of file diff --git a/frontend/js/scripts.js b/frontend/js/scripts.js new file mode 100644 index 0000000..3ec19d1 --- /dev/null +++ b/frontend/js/scripts.js @@ -0,0 +1,412 @@ +// Define variáveis para tratamento e geração de estrutura geral +var tabela = document.getElementById("tabela-tarefas"); +var tabelaItens = document.getElementById("tabela-itens"); +var botaoAdicionar = document.getElementById("adicionar"); +var botaoSalvar = document.getElementById("salvar"); +var botaoLimpar = document.getElementById("limpar"); +var botaoCancelar = document.getElementById("cancelar"); +var botaoDesfazer = document.getElementById("desfazer"); +var botaoCancelarEdicao = document.getElementById("cancelarEdicao"); +var caixaFormularioCadastro = document.getElementById("caixa-branca-cadastro"); +var caixaExibicaoDados = document.getElementById("caixa-branca-exibicaoDados"); +var caixaFormularioEdicao = document.getElementById("caixa-branca-editar"); +var formularioCadastro = document.getElementById("frmCadastro"); +var formularioEdicao = document.getElementById("frmEdicao"); + +// Abre formulário para adicionar nova tarefa +document.getElementById("botao-adicionar-nova-tarefa").onclick = function () { + caixaFormularioCadastro.style.display = "initial"; + caixaFormularioEdicao.style.display = "none"; + +}; + +// Atualiza lista de tarefas com infomações obtidas do localstorage, sempre que a página é carregada completamente +document.addEventListener("DOMContentLoaded", function () { + listarTarefas(); +}); + + +function salvarNoLocalStorage(chave, dados) { + try { + localStorage.setItem(chave, JSON.stringify(dados)); + } catch (erro) { + console.error("Erro ao salvar dados no localStorage:", erro); + alert("Ocorreu um erro ao salvar os dados. Tente novamente mais tarde."); + } +} + +function obterDoLocalStorage(chave) { + try { + let dados = localStorage.getItem(chave); + return JSON.parse(dados) || []; + } catch (erro) { + console.error("Erro ao obter dados do localStorage:", erro); + alert("Ocorreu um erro ao recuperar os dados. Tente novamente mais tarde."); + return []; + } +} + + +function limparFormulario(formulario) { + formulario.reset(); +}; + +let limparFrmCadastro = formularioCadastro; +let limparFrmEdicao = formularioEdicao; + + +function validarDados(campos, formulario) { + + for (const campo of campos) { + let valor = formulario[campo.nome].value.trim(); + if (!valor) { + alert(campo.mensagem); + formulario[campo.nome].focus() + return false; + } + } + + return true; +}; + +// Definição e campos do formulário de cadastro para validação +const camposCadastro = [ + { nome: "nome", mensagem: "O campo Nome está vazio." }, + { nome: "descricao", mensagem: "O campo Descrição está vazio." }, + { nome: "data", mensagem: "O campo Data está vazio." }, + { nome: "categoria", mensagem: "O campo Categoria está vazio." }, + { nome: "prioridade", mensagem: "O campo Prioridade está vazio." }, + { nome: "status", mensagem: "O campo Status está vazio." } +]; + +// Definição e campos do formulário de edição para validação +const camposEdicao = [ + { nome: "nomeEdit", mensagem: "O campo Nome está vazio." }, + { nome: "descricaoEdit", mensagem: "O campo Descrição está vazio." }, + { nome: "dataEdit", mensagem: "O campo Data está vazio." }, + { nome: "categoriaEdit", mensagem: "O campo Categoria está vazio." }, + { nome: "prioridadeEdit", mensagem: "O campo Prioridade está vazio." }, + { nome: "statusEdit", mensagem: "O campo Status está vazio." } +]; + + +function gerarId() { + + let listaTarefas = obterDoLocalStorage("minhaTarefa"); + let idGlobal; + + if (listaTarefas.length > 0) { + let ids = listaTarefas.map(tarefa => tarefa.id); // Extrair os IDs usando map + let maiorId = Math.max(...ids); // Pega o maior valor dentro doo array ... < é chamado de operador spread, separa todos os itens de um array 1 por 1 + idGlobal = maiorId + 1; + } else { + idGlobal = 1; + } + + return idGlobal; +} + +function cadastrarTarefa() { + let listaTarefas = obterDoLocalStorage("minhaTarefa"); + + let id = gerarId(); + let nome = frmCadastro.nome.value; + let descricao = frmCadastro.descricao.value; + let data = frmCadastro.data.value; + let categoria = frmCadastro.categoria.value; + let prioridade = frmCadastro.prioridade.value; + let status = frmCadastro.status.value; + + const tarefa = { id: id, nome: nome, descricao: descricao, data: data, categoria: categoria, prioridade: prioridade, status: status }; + + listaTarefas.push(tarefa); + + salvarNoLocalStorage("minhaTarefa", listaTarefas); + + alert("Tarefa cadastrada com sucesso!"); + +} + +botaoAdicionar.onclick = function () { + + if (validarDados(camposCadastro, frmCadastro)) { + + caixaFormularioCadastro.style.display = "none"; + cadastrarTarefa(); + limparFormulario(limparFrmCadastro); + listarTarefas(); + + }; +}; + +botaoLimpar.onclick = function () { + + let resposta = confirm('Tem certeza que deseja limpar o formulário?'); + + if (resposta === true) { + limparFormulario(limparFrmCadastro); + } +}; + +botaoCancelar.onclick = function () { + + let resposta = confirm('Tem certeza que deseja fechar o formulário?'); + + if (resposta === true) { + limparFormulario(limparFrmCadastro); + caixaFormularioCadastro.style.display = "none"; + } + +}; + + + +function preencherFormulario(idTarefa) { + + let listaTarefas = obterDoLocalStorage("minhaTarefa"); + // Localiza a tarefa com base no ID + let elementoTarefa = listaTarefas.find(tarefa => tarefa.id === idTarefa); + + if (elementoTarefa) { + + caixaFormularioEdicao.style.display = "initial"; + + document.querySelector('input[name="id"]').value = elementoTarefa.id || ""; + document.querySelector('input[name="nomeEdit"]').value = elementoTarefa.nome || ""; + document.querySelector('input[name="descricaoEdit"]').value = elementoTarefa.descricao || ""; + document.querySelector('input[name="dataEdit"]').value = elementoTarefa.data || ""; + document.querySelector('select[name="categoriaEdit"]').value = elementoTarefa.categoria || ""; + document.querySelector('select[name="prioridadeEdit"]').value = elementoTarefa.prioridade || ""; + document.querySelector('select[name="statusEdit"]').value = elementoTarefa.status || ""; + + } else { + console.log("Tarefa não encontrada."); + } + +} + + + + +function salvarTarefaEditada(idTarefa) { + + let listaTarefas = obterDoLocalStorage("minhaTarefa"); + + // Localiza o índice da tarefa no array + let indiceTarefa = listaTarefas.findIndex(tarefa => tarefa.id === idTarefa); + + if (indiceTarefa !== -1) { + + let nomeEdit = frmEdicao.nomeEdit.value; + let descricaoEdit = frmEdicao.descricaoEdit.value; + let dataEdit = frmEdicao.dataEdit.value; + let categoriaEdit = frmEdicao.categoriaEdit.value; + let prioridadeEdit = frmEdicao.prioridadeEdit.value; + let statusEdit = frmEdicao.statusEdit.value; + + // Atualiza o objeto tarefa com os novos dados + listaTarefas[indiceTarefa] = { + id: idTarefa, + nome: nomeEdit, + descricao: descricaoEdit, + data: dataEdit, + categoria: categoriaEdit, + prioridade: prioridadeEdit, + status: statusEdit + }; + + salvarNoLocalStorage("minhaTarefa", listaTarefas); + + alert("Tarefa editada com sucesso!"); + + } else { + + alert("Tarefa não pode ser editada, tente novamente!"); + + } +} + +botaoSalvar.onclick = function () { + let idTarefa = parseInt(document.querySelector('input[name="id"]').value); + + if (validarDados(camposEdicao, frmEdicao)) { + salvarTarefaEditada(idTarefa); + caixaFormularioEdicao.style.display = "none"; + listarTarefas(); + }; +}; + +botaoDesfazer.onclick = function () { + let idTarefa = parseInt(document.querySelector('input[name="id"]').value); + let resposta = confirm('Tem certeza que deseja desfazer as alterações?'); + + if (resposta === true) { + limparFormulario(limparFrmEdicao); + preencherFormulario(idTarefa); + } +}; + +botaoCancelarEdicao.onclick = function () { + + let resposta = confirm('Tem certeza que deseja fechar o formulário?'); + + if (resposta === true) { + caixaFormularioEdicao.style.display = "none"; + } + +}; + + + +function excluirTarefa(idTarefa) { + + let listaTarefas = obterDoLocalStorage("minhaTarefa"); + + let indiceTarefa = listaTarefas.findIndex(tarefa => tarefa.id === idTarefa); + + if (indiceTarefa !== -1) { + + let resposta = confirm('Tem certeza que deseja remover a tarefa?'); + + if (resposta === true) { + + listaTarefas.splice(indiceTarefa, 1); + + salvarNoLocalStorage("minhaTarefa", listaTarefas); + } + + listarTarefas(); + } else { + + alert("Tarefa não pode ser removida, tente novamente!"); + } +} + + + +function listarTarefas() { + + let dados = obterDoLocalStorage("minhaTarefa"); + + tabelaItens.innerHTML = ""; + + dados.forEach((tarefa, index) => { + + var linha = tabelaItens.insertRow(); + var cellId = linha.insertCell(0); + var cellNome = linha.insertCell(1); + var cellData = linha.insertCell(2); + var cellStatus = linha.insertCell(3); + var cellOpcoes = linha.insertCell(4); + + cellId.innerHTML = tarefa.id; + cellNome.innerHTML = tarefa.nome; + cellData.innerHTML = formatarData(tarefa.data); + cellStatus.innerHTML = tarefa.status; + + var botaoContainer = criarBotaoContainer(); // Função que cria o container com os botões + cellOpcoes.appendChild(botaoContainer); + + // Para que os botões funcionem, devemos atribuir eventos logo após serem adicionados ao DOM + var botaoVer = botaoContainer.querySelector('.botao1'); + var botaoEditar = botaoContainer.querySelector('.botao2'); + var botaoExcluir = botaoContainer.querySelector('.botao3'); + + botaoVer.onclick = (function (id){ + return function () { + caixaFormularioCadastro.style.display = "none"; + caixaFormularioEdicao.style.display = "none"; + limparFormulario(limparFrmCadastro); + mostrarDados(id); + } + + })(tarefa.id); + + botaoEditar.onclick = (function (id) { + return function () { + caixaFormularioCadastro.style.display = "none"; + caixaExibicaoDados.style.display = "none"; + limparFormulario(limparFrmCadastro); + preencherFormulario(id); + }; + })(tarefa.id); + + botaoExcluir.onclick = (function (id) { + return function () { + caixaExibicaoDados.style.display = "none"; + caixaFormularioCadastro.style.display = "none"; + caixaFormularioEdicao.style.display = "none"; + limparFormulario(limparFrmCadastro); + excluirTarefa(id); + }; + })(tarefa.id); + }); + +}; + +function mostrarDados(idTarefa) { + + let listaTarefas = obterDoLocalStorage("minhaTarefa"); + // Localiza a tarefa com base no ID + let elementoTarefa = listaTarefas.find(tarefa => tarefa.id === idTarefa); + + if (elementoTarefa) { + + caixaExibicaoDados.style.display = "initial"; + + document.getElementById("exibicaoNome").innerHTML = elementoTarefa.nome || ""; + document.getElementById("exibicaoDescricao").innerHTML = elementoTarefa.descricao || ""; + document.getElementById("exibicaoDataHora").innerHTML = formatarData(elementoTarefa.data) || ""; + document.getElementById("exibicaoCategoria").innerHTML = elementoTarefa.categoria || ""; + document.getElementById("exibicaoPrioridade").innerHTML = elementoTarefa.prioridade || ""; + document.getElementById("exibicaoStatus").innerHTML = elementoTarefa.status || ""; + + } else { + console.log("Tarefa não encontrada."); + } + +}; + +function criarBotaoContainer() { + // Cria o div com a classe 'botao-container' + var divContainer = document.createElement("div"); + divContainer.className = "botao-container"; + + // Função auxiliar para criar botões com SVG + function criarBotao(classeBotao, texto) { + var botao = document.createElement("button"); + botao.className = classeBotao; + + // Adiciona o SVG ao botão + botao.appendChild(document.createTextNode(" ")); + + return botao; + } + + // Criar os três botões + var botaoVer = criarBotao("botao1"); + var botaoEditar = criarBotao("botao2"); + var botaoApagar = criarBotao("botao3"); + + // Adiciona os botões ao container + divContainer.appendChild(botaoVer); + divContainer.appendChild(botaoEditar); + divContainer.appendChild(botaoApagar); + + return divContainer; + +} + +function formatarData(dataString) { + const data = new Date(dataString); + + const dia = String(data.getDate()).padStart(2, '0'); + const mes = String(data.getMonth() + 1).padStart(2, '0'); + const ano = data.getFullYear(); + const horas = String(data.getHours()).padStart(2, '0'); + const minutos = String(data.getMinutes()).padStart(2, '0'); + + return `${dia}/${mes}/${ano} ${horas}:${minutos}`; +} + +