Anonymous

Task Management - Copy this React, Tailwind Component to your project

<!DOCTYPE-html>-<html-lang="es">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>Acciones</title>-<link-rel="stylesheet"-href="lista.css">--<link-rel="stylesheet"-href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">--</head>-<body>-<div-class="container">-<h2>Acciones</h2>--<button-onclick="openModal()"-class="primary-btn"-id="btnCreate">-<i-class="fas-fa-table"></i>-Crear-Tarea-</button>--<button-onclick="viewTasks()"-class="secondary-btn"-id="btnView">-<i-class="fas-fa-eye"></i>-Ver-Tareas-</button>-</div>--<div-id="taskModal"-class="modal"-style="display:-none;">-<div-class="modal-content">-<span-class="close"-onclick="closeModal()">×</span>-<h3>Crear-Nueva-Tarea</h3>-<form-id="taskForm">-<div-class="form-group">-<label-for="taskName">Nombre-de-la-tarea:</label>-<input-type="text"-id="taskName"-name="taskName"-required>-</div>-<div-class="form-group">-<label-for="taskDescription">Descripción:</label>-<textarea-id="taskDescription"-name="taskDescription"-required></textarea>-</div>-<div-class="form-group">-<label-for="taskDueDate">Fecha-de-vencimiento:</label>-<input-type="date"-id="taskDueDate"-name="taskDueDate"-required>-</div>-<button-type="submit">Guardar-tarea</button>-</form>-</div>-</div>--<div-id="taskPopup"-class="modal"-style="display:-none;">-<div-class="popup-content">-<span-class="close"-onclick="closePopup()">×</span>-<h3>Tareas-Creadas</h3>-<ul-id="taskList"></ul>--</div>-</div>--<div-id="taskDetailPopup"-class="modal"-style="display:-none;">-<div-class="popup-content">-<span-class="close"-onclick="closeTaskDetailPopup()">×</span>-<h3>Detalle-de-la-Tarea</h3>-<div-id="taskDetail"></div>--</div>-</div>-<div-class="task-columns">--<div-class="task-column"-id="pendingTasks"-ondrop="drop(event)"-ondragover="allowDrop(event)">-<h3>Tareas-Pendientes</h3>-<p-id="pendingCount">0</p>-</div>--<div-class="task-column"-id="inProgressTasks"-ondrop="drop(event)"-ondragover="allowDrop(event)">-<h3>Tareas-en-Curso</h3>-</div>--<div-class="task-column"-id="completedTasks"-ondrop="drop(event)"-ondragover="allowDrop(event)">-<h3>Tareas-Finalizadas</h3>-<p-id="completedCount">0</p>-</div>-</div>-<script-src="lista.js"-defer></script>--</body>-</html>//-Array-para-almacenar-las-tareas-let-tasks-=-[];-//-Función-para-abrir-el-modal-de-crear-tarea-function-openModal()-{-document.getElementById("taskModal").style.display-=-"block";-//-Mostrar-el-modal-}-//-Función-para-cerrar-el-modal-de-crear-tarea-function-closeModal()-{-document.getElementById("taskModal").style.display-=-"none";-//-Ocultar-el-modal-}-function-verificarToken()-{-const-token-=-localStorage.getItem('token');-const-expiration-=-new-Date(localStorage.getItem('expiration'));-if-(!token-||-new-Date()->-expiration)-{-alert('Tu-sesión-ha-expirado.-Por-favor,-inicia-sesión-de-nuevo.');-localStorage.removeItem('token');-localStorage.removeItem('expiration');-window.location.href-=-'login.html';-return-false;-}-//-Avisar-al-usuario-cuando-queden-30-segundos-para-la-expiración-const-timeLeft-=-expiration---new-Date();-if-(timeLeft-<=-30000)-{-alert('Tu-token-está-por-expirar-en-menos-de-30-segundos.');-}-return-true;-}-//-Variable-para-el-temporizador-de-inactividad-let-inactivityTimer;-const-inactivityTimeout-=-6000;-//-6-segundos-//-Función-para-mostrar-un-mensaje-de-alerta-por-inactividad-function-showInactivityAlert()-{-const-inactivityMessage-=-document.getElementById('inactivityMessage');-if-(!inactivityMessage)-{-const-div-=-document.createElement('div');-div.id-=-'inactivityMessage';-div.textContent-=-'Has-estado-inactivo-durante-6-segundos.-¡Haz-algo-para-continuar!';-div.style.position-=-'fixed';-div.style.top-=-'20px';-div.style.right-=-'20px';-div.style.backgroundColor-=-'rgba(255,-0,-0,-0.8)';-div.style.color-=-'white';-div.style.padding-=-'10px';-div.style.borderRadius-=-'5px';-div.style.zIndex-=-'9999';-document.body.appendChild(div);-setTimeout(()-=>-div.remove(),-5000);-//-Desaparece-después-de-5-segundos-}-}-//-Función-para-reiniciar-el-temporizador-de-inactividad-function-resetInactivityTimer()-{-//-Eliminar-cualquier-mensaje-de-inactividad-previo-const-inactivityMessage-=-document.getElementById('inactivityMessage');-if-(inactivityMessage)-{-inactivityMessage.remove();-}-//-Resetear-el-temporizador-de-inactividad-clearTimeout(inactivityTimer);-inactivityTimer-=-setTimeout(showInactivityAlert,-inactivityTimeout);-//-6-segundos-de-inactividad-}-//-Escuchar-eventos-de-actividad-del-usuario-document.addEventListener('mousemove',-resetInactivityTimer);-document.addEventListener('keydown',-resetInactivityTimer);-document.addEventListener('click',-resetInactivityTimer);-//-Llamar-a-la-función-para-iniciar-el-temporizador-de-inactividad-resetInactivityTimer();-//-Verificar-token-al-cargar-la-página-if-(verificarToken())-{-fetch('http://localhost/SONIA-DICIEMBRE/api.php',-{-headers:-{-'Authorization':-localStorage.getItem('token')-}-})-.then(response-=>-response.json())-.then(tareas-=>-{-tasks-=-tareas;-//-Almacenar-las-tareas-en-el-array-displayTasks();-//-Mostrar-las-tareas-})-.catch(error-=>-console.error('Error-al-obtener-tareas:',-error));-}-//-Función-para-crear-una-tarea,-se-ejecuta-cuando-se-envía-el-formulario-document.getElementById("taskForm").addEventListener("submit",-function(event)-{-event.preventDefault();-//-Prevenir-el-envío-del-formulario-const-taskName-=-document.getElementById("taskName").value.trim();-//-Obtener-y-limpiar-el-nombre-de-la-tarea-const-taskDescription-=-document.getElementById("taskDescription").value;-//-Obtener-la-descripción-const-taskDueDate-=-document.getElementById("taskDueDate").value;-//-Obtener-la-fecha-de-vencimiento-if-(taskName-===-"")-{-//-Validar-que-el-nombre-no-esté-vacío-alert("El-nombre-de-la-tarea-no-puede-estar-vacío.");-return;-}-//-Validar-que-la-fecha-de-vencimiento-sea-correcta-if-(new-Date(taskDueDate)-<-new-Date())-{-//-Comprobar-si-la-fecha-es-anterior-a-hoy-alert("La-fecha-de-vencimiento-no-puede-ser-anterior-a-la-fecha-actual.");-return;-}-//-Crear-un-objeto-de-tarea-con-los-datos-ingresados-const-task-=-{-name:-taskName,-description:-taskDescription,-dueDate:-taskDueDate,-status:-"Pendiente",-//-Estado-inicial-de-la-tarea-};-//-Realizar-la-solicitud-al-servidor-para-crear-la-tarea-fetch('http://localhost/SONIA-DICIEMBRE/api.php',-{-method:-'POST',-headers:-{-'Content-Type':-'application/json',-},-body:-JSON.stringify(task),-//-Convertir-a-JSON-})-.then(response-=>-{-if-(!response.ok)-throw-new-Error('Error-al-crear-la-tarea');-return-response.json();-})-.then(data-=>-{-alert(data.message);-document.getElementById("taskForm").reset();-//-Limpiar-el-formulario-closeModal();-//-Cerrar-el-modal-return-fetch('http://localhost/SONIA-DICIEMBRE/api.php',-{-headers:-{-'Authorization':-localStorage.getItem('token')-}-});-})-.then(response-=>-response.json())-.then(tareas-=>-{-tasks-=-tareas;-//-Almacenar-las-tareas-en-el-array-displayTasks();-//-Mostrar-las-tareas-})-.catch(error-=>-{-console.error('Error-al-crear-la-tarea:',-error.message);-alert('No-se-pudo-crear-la-tarea.-Inténtalo-de-nuevo-más-tarde.');-});-});-//-Función-para-ver-las-tareas-creadas-function-viewTasks()-{-//-Verificar-el-token-antes-de-mostrar-las-tareas-if-(!verificarToken())-{-return;-//-Si-el-token-es-inválido,-no-continuar-con-la-carga-de-tareas-}-const-taskList-=-document.getElementById("taskList");-taskList.innerHTML-=-"";-//-Limpiar-la-lista-de-tareas-//-Recorrer-el-array-de-tareas-y-crear-elementos-para-cada-una-tasks.forEach((task,-index)-=>-{-const-li-=-document.createElement("li");-//-Crear-elementos-de-la-tarea-const-taskName-=-document.createElement("div");-taskName.classList.add("task-name");-taskName.textContent-=-`Tarea:-${task.name}`;-const-taskDescription-=-document.createElement("div");-taskDescription.classList.add("task-desc");-taskDescription.textContent-=-`Descripción:-${task.description}`;-const-taskDueDate-=-document.createElement("div");-taskDueDate.classList.add("task-date");-taskDueDate.textContent-=-`Fecha-de-vencimiento:-${task.dueDate}`;-const-taskStatus-=-document.createElement("div");-taskStatus.classList.add("task-status");-taskStatus.textContent-=-`Estado:-${task.status}`;-//-Botón-de-editar-const-editButton-=-document.createElement("button");-editButton.classList.add("edit-btn");-editButton.textContent-=-"Editar";-editButton.onclick-=-function()-{-editTask(index);-//-Llamar-a-la-función-de-editar-tarea-};-//-Botón-de-eliminar-const-deleteButton-=-document.createElement("button");-deleteButton.classList.add("delete-btn");-deleteButton.textContent-=-"Eliminar";-deleteButton.onclick-=-function()-{-deleteTask(index);-//-Llamar-a-la-función-de-eliminar-tarea-};-//-Botón-de-ver-detalle-const-detailButton-=-document.createElement("button");-detailButton.classList.add("detail-btn");-detailButton.textContent-=-"Ver-detalle";-detailButton.onclick-=-function()-{-viewTaskDetail(index);-//-Llamar-a-la-función-de-ver-detalle-de-la-tarea-};-//-Agregar-los-elementos-de-la-tarea-al-item-de-la-lista-li.appendChild(taskName);-li.appendChild(taskDescription);-li.appendChild(taskDueDate);-li.appendChild(taskStatus);-li.appendChild(editButton);-li.appendChild(deleteButton);-li.appendChild(detailButton);-//-Agregar-el-item-a-la-lista-de-tareas-taskList.appendChild(li);-});-document.getElementById("taskPopup").style.display-=-"block";-//-Mostrar-la-ventana-emergente-de-tareas-highlightButton('btnView');-//-Resaltar-el-botón-de-ver-tareas-}-//-Función-para-cerrar-la-ventana-emergente-de-tareas-function-closePopup()-{-document.getElementById("taskPopup").style.display-=-"none";-removeHighlight();-//-Remover-el-resplandor-de-los-botones-}-//-Función-para-ver-el-detalle-de-una-tarea-function-viewTaskDetail(index)-{-const-task-=-tasks[index];-const-taskDetail-=-document.getElementById("taskDetail");-//-Mostrar-los-detalles-de-la-tarea-seleccionada-taskDetail.innerHTML-=-`-<div><strong>Nombre-de-la-tarea:</strong>-${task.name}</div>-<div><strong>Descripción-de-la-tarea:</strong>-${task.description}</div>-<div><strong>Estado-de-la-tarea:</strong>-${task.status}</div>-<div><strong>Fecha-de-vencimiento:</strong>-${task.dueDate}</div>-<div>-<button-onclick="changeTaskStatus(${index},-'Empezar')">Empezar</button>-<button-onclick="changeTaskStatus(${index},-'Finalizar')">Finalizar</button>-<button-onclick="changeTaskStatus(${index},-'Repetir')">Volver-a-hacer</button>-</div>-`;-document.getElementById("taskDetailPopup").style.display-=-"block";-//-Mostrar-la-ventana-emergente-de-detalles-de-la-tarea-}-//-Función-para-cerrar-la-ventana-emergente-de-detalles-de-la-tarea-function-closeTaskDetailPopup()-{-document.getElementById("taskDetailPopup").style.display-=-"none";-//-Ocultar-la-ventana-emergente-}-//-Función-para-cambiar-el-estado-de-una-tarea-function-changeTaskStatus(index,-action)-{-const-task-=-tasks[index];-//-Cambiar-el-estado-de-la-tarea-basado-en-la-acción-if-(action-===-'Empezar'-&&-task.status-===-'Pendiente')-{-task.status-=-'En-curso';-//-Cambiar-estado-a-En-curso-}-else-if-(action-===-'Finalizar'-&&-task.status-===-'En-curso')-{-task.status-=-'Finalizada';-//-Cambiar-estado-a-Finalizada-}-else-if-(action-===-'Repetir'-&&-task.status-===-'Finalizada')-{-task.status-=-'Pendiente';-//-Cambiar-estado-a-Pendiente-}-else-{-alert("Cambio-de-estado-no-permitido.");-//-Mostrar-alerta-si-el-cambio-no-es-permitido-return;-}-alert(`Estado-de-la-tarea-actualizado-a-${task.status}`);-displayTasks();-//-Actualizar-la-visualización-de-las-tareas-closeTaskDetailPopup();-//-Cerrar-la-ventana-emergente-de-detalles-de-la-tarea-}-//-Función-para-editar-una-tarea-function-editTask(index)-{-const-task-=-tasks[index];-const-newName-=-prompt("Nuevo-nombre-de-la-tarea",-task.name);-//-Pedir-nuevo-nombre-const-newDescription-=-prompt("Nueva-descripción",-task.description);-//-Pedir-nueva-descripción-const-newDueDate-=-prompt("Nueva-fecha-de-vencimiento",-task.dueDate);-//-Pedir-nueva-fecha-de-vencimiento-//-Validar-que-se-hayan-proporcionado-nuevos-valores-if-(newName-===-""-||-newDescription-===-""-||-newDueDate-===-"")-{-//-Comprobar-si-algún-campo-está-vacío-alert("Todos-los-campos-deben-ser-completados.");-//-Mensaje-de-error-return;-//-No-continuar-si-hay-un-campo-vacío-}-//-Validar-que-la-nueva-fecha-de-vencimiento-sea-correcta-if-(new-Date(newDueDate)-<-new-Date())-{-//-Comprobar-si-la-fecha-es-anterior-a-hoy-alert("La-nueva-fecha-de-vencimiento-no-puede-ser-anterior-a-la-fecha-actual.");-return;-}-const-updatedTask-=-{-id:-task.id,-//-Asegúrate-de-que-el-ID-esté-presente-name:-newName,-description:-newDescription,-dueDate:-newDueDate,-status:-task.status-//-Mantener-el-estado-actual-};-//-Realizar-la-solicitud-al-servidor-para-editar-la-tarea-fetch('http://localhost/SONIA-DICIEMBRE/api.php',-{-method:-'PUT',-headers:-{-'Content-Type':-'application/json',-},-body:-JSON.stringify(updatedTask),-//-Convertir-a-JSON-})-.then(response-=>-{-if-(!response.ok)-throw-new-Error('Error-al-editar-la-tarea');-return-response.json();-})-.then(data-=>-{-alert(data.message);-return-fetch('http://localhost/SONIA-DICIEMBRE/api.php',-{-headers:-{-'Authorization':-localStorage.getItem('token')-}-});-})-.then(response-=>-response.json())-.then(tareas-=>-{-tasks-=-tareas;-//-Almacenar-las-tareas-en-el-array-displayTasks();-//-Mostrar-las-tareas-})-.catch(error-=>-{-console.error('Error-al-editar-la-tarea:',-error.message);-alert('No-se-pudo-editar-la-tarea.-Inténtalo-de-nuevo-más-tarde.');-});-}-//-Función-para-eliminar-una-tarea-function-deleteTask(index)-{-if-(confirm("¿Estás-seguro-de-eliminar-esta-tarea?"))-{-//-Confirmar-eliminación-const-taskId-=-tasks[index].id;-//-Obtener-el-ID-de-la-tarea-a-eliminar-//-Realizar-la-solicitud-al-servidor-para-eliminar-la-tarea-fetch('http://localhost/SONIA-DICIEMBRE/api.php',-{-method:-'DELETE',-headers:-{-'Content-Type':-'application/json',-},-body:-JSON.stringify({-id:-taskId-}),-//-Enviar-el-ID-de-la-tarea-a-eliminar-})-.then(response-=>-{-if-(!response.ok)-throw-new-Error('Error-al-eliminar-la-tarea');-return-response.json();-})-.then(data-=>-{-alert(data.message);-return-fetch('http://localhost/SONIA-DICIEMBRE/api.php',-{-headers:-{-'Authorization':-localStorage.getItem('token')-}-});-})-.then(response-=>-response.json())-.then(tareas-=>-{-tasks-=-tareas;-//-Almacenar-las-tareas-en-el-array-displayTasks();-//-Mostrar-las-tareas-})-.catch(error-=>-{-console.error('Error-al-eliminar-la-tarea:',-error.message);-alert('No-se-pudo-eliminar-la-tarea.-Inténtalo-de-nuevo-más-tarde.');-});-}-}-//-Función-para-mostrar-las-tareas-en-las-columnas-correspondientes-function-displayTasks()-{-const-pendingTasks-=-document.getElementById("pendingTasks");-const-inProgressTasks-=-document.getElementById("inProgressTasks");-const-completedTasks-=-document.getElementById("completedTasks");-//-Limpiar-las-columnas-pendingTasks.innerHTML-=-"<h3>Tareas-Pendientes</h3>";-inProgressTasks.innerHTML-=-"<h3>Tareas-en-Curso</h3>";-completedTasks.innerHTML-=-"<h3>Tareas-Finalizadas</h3>";-//-Recorrer-el-array-de-tareas-y-crear-elementos-para-cada-una-tasks.forEach((task,-index)-=>-{-const-taskElement-=-document.createElement("div");-taskElement.classList.add("task");-taskElement.setAttribute("draggable",-"true");-taskElement.setAttribute("ondragstart",-`drag(event,-${index})`);-//-Agregar-atributos-para-arrastrar-y-soltar-//-Crear-elementos-de-la-tarea-const-taskName-=-document.createElement("div");-taskName.classList.add("task-name");-taskName.textContent-=-`Tarea:-${task.name}`;-const-taskDescription-=-document.createElement("div");-taskDescription.classList.add("task-desc");-taskDescription.textContent-=-`Descripción:-${task.description}`;-const-taskDueDate-=-document.createElement("div");-taskDueDate.classList.add("task-date");-taskDueDate.textContent-=-`Fecha-de-vencimiento:-${task.dueDate}`;-const-taskStatus-=-document.createElement("div");-taskStatus.classList.add("task-status");-taskStatus.textContent-=-`Estado:-${task.status}`;-//-Botón-de-editar-const-editButton-=-document.createElement("button");-editButton.classList.add("edit-btn");-editButton.textContent-=-"Editar";-editButton.onclick-=-function()-{-editTask(index);-//-Llamar-a-la-función-de-editar-tarea-};-//-Botón-de-eliminar-const-deleteButton-=-document.createElement("button");-deleteButton.classList.add("delete-btn");-deleteButton.textContent-=-"Eliminar";-deleteButton.onclick-=-function()-{-deleteTask(index);-//-Llamar-a-la-función-de-eliminar-tarea-};-//-Botón-de-ver-detalle-const-detailButton-=-document.createElement("button");-detailButton.classList.add("detail-btn");-detailButton.textContent-=-"Ver-detalle";-detailButton.onclick-=-function()-{-viewTaskDetail(index);-//-Llamar-a-la-función-de-ver-detalle-de-la-tarea-};-//-Agregar-los-elementos-de-la-tarea-al-elemento-de-la-lista-taskElement.appendChild(taskName);-taskElement.appendChild(taskDescription);-taskElement.appendChild(taskDueDate);-taskElement.appendChild(taskStatus);-taskElement.appendChild(editButton);-taskElement.appendChild(deleteButton);-taskElement.appendChild(detailButton);-//-Agregar-el-elemento-de-la-tarea-a-la-columna-correspondiente-según-su-estado-if-(task.status-===-"Pendiente")-{-pendingTasks.appendChild(taskElement);-}-else-if-(task.status-===-"En-curso")-{-inProgressTasks.appendChild(taskElement);-}-else-if-(task.status-===-"Finalizada")-{-completedTasks.appendChild(taskElement);-}-});-}-//-Función-para-permitir-soltar-una-tarea-en-una-columna-function-allowDrop(event)-{-event.preventDefault();-}-//-Función-para-manejar-el-arrastre-de-una-tarea-function-drag(event,-index)-{-event.dataTransfer.setData("taskIndex",-index);-}-//-Función-para-manejar-el-soltar-una-tarea-en-una-columna-function-drop(event)-{-event.preventDefault();-const-taskIndex-=-event.dataTransfer.getData("taskIndex");-const-columnId-=-event.target.id;-//-Cambiar-el-estado-de-la-tarea-basado-en-la-columna-en-la-que-se-suelta-if-(columnId-===-"pendingTasks")-{-tasks[taskIndex].status-=-"Pendiente";-}-else-if-(columnId-===-"inProgressTasks")-{-if-(tasks[taskIndex].status-===-"Pendiente")-{-tasks[taskIndex].status-=-"En-curso";-}-else-{-alert("Cambio-de-estado-no-permitido.");-}-}-else-if-(columnId-===-"completedTasks")-{-if-(tasks[taskIndex].status-===-"En-curso")-{-tasks[taskIndex].status-=-"Finalizada";-}-else-{-alert("Cambio-de-estado-no-permitido.");-}-}-displayTasks();-}-//-Función-para-agregar-resplandor-a-un-botón-cuando-se-presiona-function-highlightButton(buttonId)-{-const-button-=-document.getElementById(buttonId);-button.classList.add('active');-setTimeout(()-=>-{-button.classList.remove('active');-},-1000);-}-//-Función-para-remover-el-resplandor-de-todos-los-botones-function-removeHighlight()-{-const-buttons-=-document.querySelectorAll('button');-buttons.forEach(button-=>-{-button.classList.remove('active');-});-}-//-Mostrar-las-tareas-cuando-se-carga-la-página-window.onload-=-displayTasks;-a-partir-de-este-codigo-en-archivos-diferentes-creame-Implementar-un-API-en-PHP-que-contenga-los-siguientes-endpoints:-Acción-Listar-tareas-Método-GET-Descripción-Obtener-el-listado-de-tareas-del-usuario-Crear-tarea-Editar-tarea-Eliminar-tarea-POST-PUT-DELETE-Crear-una-nueva-tarea-Modificar-los-datos-de-una-tarea-Las-tareas-deben-ser-almacenadas-en-el-servidor,-en-el-sistema-de-almacenamiento-que-se-deseen,-puede-ser-por-ejemplo:-------Una-base-de-datos.-Si-se-opta-por-esta-opción,-en-la-entrega-se-debe-incluir-el-script-.sql-de-creación-de-la-tabla/s.-Un-archivo-..-Si-se-refresca-la-web,-se-debe-poder-ver-la-información-de-tareas-como-se-había-quedado-después-de-crear,-editar-o-eliminar-alguna.-Todas-las-peticiones-desde-la-página-del-listado-de-tareas-al-servidor-deben-realizarse-mediante-AJAX.-En-ningún-caso-se-debe-refrescar-o-cambiar-de-página-para-realizar-estas-acciones.

Prompt

About

TaskManagement - Create, view, and manage tasks with drag-and-drop functionality. Built with React and Tailwind for a sleek UI. Download code free!

Task Management - Copy this React, Tailwind Component to your project

About

Tags

Share