Task Board

/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { DragDropContext, Draggable, Droppable, } from "https://esm.sh/react-beautiful-dnd@13.1.1?deps=react@18.2.0,react-dom@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useState } from "https://esm.sh/react@18.2.0"; function TaskBoard() { const [taskLists, setTaskLists] = useState({ todo: [], inProgress: [], completed: [], }); const [newTaskText, setNewTaskText] = useState(""); const [isDarkMode, setIsDarkMode] = useState(false); const [isSettingsOpen, setIsSettingsOpen] = useState(false); const [chosenFont, setChosenFont] = useState("Quicksand"); const [fontSize, setFontSize] = useState(16); const [isDeleteButtonVisible, setIsDeleteButtonVisible] = useState(true); const [isEditModalOpen, setIsEditModalOpen] = useState(false); const [taskBeingEdited, setTaskBeingEdited] = useState(null); const [editedTaskText, setEditedTaskText] = useState(""); const listProgression = ["todo", "inProgress", "completed", "todo"]; const availableFonts = [ "Courier New", "DM Serif Text", "Dancing Script", "Jersey 10", "Playfair Display", "Playwrite AU SA", "Playwrite IE Guides", "Roboto Mono", "Roboto", "Rubik Vinyl", ]; useEffect(() => { fetchTasks(); loadUserPreferences(); }, []); function loadUserPreferences() { const savedDarkMode = localStorage.getItem("app-theme") === "true"; setIsDarkMode(savedDarkMode); document.body.classList.toggle("dark-mode", savedDarkMode); const savedFont = localStorage.getItem("app-font") || "Quicksand"; const savedFontSize = parseInt(localStorage.getItem("app-font-size") || "16"); const savedDeleteSetting = localStorage.getItem("app-show-delete") !== "false"; setChosenFont(savedFont); setFontSize(savedFontSize); setIsDeleteButtonVisible(savedDeleteSetting); updateAppStyle(savedFont, savedFontSize); } function updateAppStyle(font, size) { document.body.style.setProperty("--app-font", font); document.body.style.setProperty("--app-font-size", `${size}px`); } function saveUserPreferences() { localStorage.setItem("app-font", chosenFont); localStorage.setItem("app-font-size", fontSize.toString()); localStorage.setItem("app-show-delete", isDeleteButtonVisible.toString()); updateAppStyle(chosenFont, fontSize); setIsSettingsOpen(false); } async function fetchTasks() { try { const response = await fetch("/get-tasks"); const data = await response.json(); setTaskLists(data); } catch (error) { console.error("Error fetching tasks", error); } } async function addNewTask() { if (!newTaskText.trim()) return; try { const response = await fetch("/add-task", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ title: newTaskText, column: "todo", }), }); const updatedTasks = await response.json(); setTaskLists(updatedTasks); setNewTaskText(""); } catch (error) { console.error("Error adding task", error); } } async function handleTaskMove(result) { const { destination, source, draggableId } = result; if (!destination) return; try { const response = await fetch("/move-task", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ taskId: draggableId, sourceColumn: source.droppableId, destColumn: destination.droppableId, }), }); const updatedTasks = await response.json(); setTaskLists(updatedTasks); } catch (error) { console.error("Error moving task", error); } } async function removeTask(taskId, column) { try { const response = await fetch("/delete-task", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ taskId, column }), }); const updatedTasks = await response.json(); setTaskLists(updatedTasks); } catch (error) { console.error("Error deleting task", error); } } async function moveTaskForward(task, currentColumn) { const currentIndex = listProgression.indexOf(currentColumn); const nextColumn = listProgression[currentIndex + 1]; try { const response = await fetch("/move-task", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ taskId: task.id, sourceColumn: currentColumn, destColumn: nextColumn, }), }); const updatedTasks = await response.json(); setTaskLists(updatedTasks); } catch (error) { console.error("Error advancing task", error); } } function toggleDarkMode() { const newDarkMode = !isDarkMode; setIsDarkMode(newDarkMode); document.body.classList.toggle("dark-mode", newDarkMode); localStorage.setItem("app-theme", newDarkMode.toString()); } function openEditModal(task) { setTaskBeingEdited(task); setEditedTaskText(task.title); setIsEditModalOpen(true); } async function saveEditedTask() { if (!editedTaskText.trim() || !taskBeingEdited) return; try { const response = await fetch("/update-task", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ taskId: taskBeingEdited.id, newTitle: editedTaskText, column: taskBeingEdited.column, }), }); const updatedTasks = await response.json(); setTaskLists(updatedTasks); setIsEditModalOpen(false); } catch (error) { console.error("Error updating task", error); } } function handleTaskInteraction(e, task, column) { if (e.button === 1) { e.preventDefault(); openEditModal(task); } else if (e.type === "contextmenu") { e.preventDefault(); moveTaskForward(task, column); } } return (

{isSettingsOpen && (

{ if (e.target === e.currentTarget) setIsSettingsOpen(false); }} >

e.stopPropagation()}>

App Settings

Font Family

{availableFonts.map((font) => (

{ setChosenFont(font); updateAppStyle(font, fontSize); }} > {font}

))}

Text Size

setIsDeleteButtonVisible(e.target.checked)} /> Show Delete Button

)}

setNewTaskText(e.target.value)} placeholder="What needs to be done?" style={{ width: "300px", height: "40px" }} />

{Object.entries(taskLists).map(([columnId, tasks]) => ( {(provided) => (

{tasks.map((task, index) => ( {(provided) => (

handleTaskInteraction(e, task, columnId)} onMouseDown={(e) => handleTaskInteraction(e, task, columnId)} > {task.title} {isDeleteButtonVisible && ( )}

)} ))} {provided.placeholder}

)} ))}

{isEditModalOpen && (

{ if (e.target === e.currentTarget) setIsEditModalOpen(false); }} >

)} View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); const SCHEMA_VERSION = 7; await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_tasks_${SCHEMA_VERSION} ( id TEXT PRIMARY KEY, title TEXT NOT NULL, column TEXT NOT NULL ) `); if (request.method === "POST" && new URL(request.url).pathname === "/add-task") { const task = await request.json(); const id = crypto.randomUUID(); await sqlite.execute( `INSERT INTO ${KEY}_tasks_${SCHEMA_VERSION} (id, title, column) VALUES (?, ?, ?)`, [id, task.title, task.column], ); return await getAllTasks(sqlite, KEY, SCHEMA_VERSION); } if (request.method === "POST" && new URL(request.url).pathname === "/move-task") { const { taskId, destColumn } = await request.json(); await sqlite.execute( `UPDATE ${KEY}_tasks_${SCHEMA_VERSION} SET column = ? WHERE id = ?`, [destColumn, taskId], ); return await getAllTasks(sqlite, KEY, SCHEMA_VERSION); } if (request.method === "POST" && new URL(request.url).pathname === "/delete-task") { const { taskId } = await request.json(); await sqlite.execute( `DELETE FROM ${KEY}_tasks_${SCHEMA_VERSION} WHERE id = ?`, [taskId], ); return await getAllTasks(sqlite, KEY, SCHEMA_VERSION); } if (request.method === "POST" && new URL(request.url).pathname === "/update-task") { const { taskId, newTitle } = await request.json(); await sqlite.execute( `UPDATE ${KEY}_tasks_${SCHEMA_VERSION} SET title = ? WHERE id = ?`, [newTitle, taskId], ); return await getAllTasks(sqlite, KEY, SCHEMA_VERSION); } if (request.method === "GET" && new URL(request.url).pathname === "/get-tasks") { return await getAllTasks(sqlite, KEY, SCHEMA_VERSION); } return new Response( ` Task Board

`, { headers: { "content-type": "text/html" } }, ); } async function getAllTasks(sqlite, KEY, SCHEMA_VERSION) { const todo = await sqlite.execute( `SELECT * FROM ${KEY}_tasks_${SCHEMA_VERSION} WHERE column = 'todo'`, ); const inProgress = await sqlite.execute( `SELECT * FROM ${KEY}_tasks_${SCHEMA_VERSION} WHERE column = 'inProgress'`, ); const completed = await sqlite.execute( `SELECT * FROM ${KEY}_tasks_${SCHEMA_VERSION} WHERE column = 'completed'`, ); return new Response( JSON.stringify({ todo: todo.rows, inProgress: inProgress.rows, completed: completed.rows, }), { headers: { "content-type": "application/json" } }, ); } const css = ` :root { --bg-color: #ffffff; --text-color: #343a40; --border-color: #dee2e6; --input-bg: #ffffff; --input-border: #ced4da; --btn-primary-bg: #007bff; --btn-primary-color: #ffffff; --btn-success-bg: #28a745; --btn-success-color: #ffffff; --modal-overlay: rgba(0, 0, 0, 0.5); --modal-bg: #ffffff; --app-font: Quicksand; --app-font-size: 16px; --completed-column-bg: #e9ecef; --completed-column-text: #495057; } .dark-mode { --bg-color: #1a1a1a; --text-color: #f0f0f0; --border-color: #444; --input-bg: #2a2a2a; --input-border: #555; --btn-primary-bg: #0056b3; --btn-primary-color: #ffffff; --modal-overlay: rgba(255, 255, 255, 0.1); --modal-bg: #2a2a2a; --completed-column-bg: #343a40; --completed-column-text: #adb5bd; } .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--modal-overlay); display: flex; justify-content: center; align-items: center; z-index: 1000; } .settings-panel { background-color: var(--modal-bg); border-radius: 10px; padding: 20px; width: 90%; max-width: 500px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .btn-close { background: none; border: none; font-size: 20px; cursor: pointer; } .settings-section { margin-bottom: 20px; } .font-selection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .font-option { border: 2px solid transparent; border-radius: 8px; padding: 10px; text-align: center; cursor: pointer; transition: all 0.3s ease; } .font-option.selected { border-color: var(--btn-primary-bg); background-color: rgba(0, 123, 255, 0.1); } body { font-family: var(--app-font), sans-serif; font-size: var(--app-font-size); color: var(--text-color); background-color: var(--bg-color); padding-bottom: 20px; transition: background-color 0.3s, color 0.3s; } h1, h2, h3, label { font-weight: 600; } .btn { margin-right: 10px; margin-bottom: 10px; } .btn-custom { background-color: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-color); } .btn-custom:hover { background-color: #0056b3; border-color: #0056b3; color: white; } .form-control { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text-color); transition: background-color 0.3s, border-color 0.3s, color 0.3s; } .dark-mode .form-control { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text-color); box-shadow: none; } .dark-mode .form-control::placeholder { color: rgba(240, 240, 240, 0.6); } .form-control:focus { background-color: var(--input-bg); color: var(--text-color); border-color: var(--btn-primary-bg); box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .dark-mode .form-control:focus { background-color: var(--input-bg); color: var(--text-color); border-color: var(--btn-primary-bg); box-shadow: 0 0 0 0.2rem rgba(0, 88, 179, 0.25); } .task-item { border-bottom: 1px solid var(--border-color); padding: 10px 0; } .task-item:last-child { border-bottom: none; } .card { background-color: var(--input-bg); border-color: var(--border-color); } .card-header { background-color: var(--border-color); } .task-input { max-width: 600px; margin: 0 auto; } .completed-column { background-color: var(--completed-column-bg) !important; color: var(--completed-column-text) !important; opacity: 0.8; } .completed-column .card-header { background-color: var(--completed-column-bg) !important; color: var(--completed-column-text) !important; } .completed-column .task-item { opacity: 0.7; text-decoration: line-through; } .dark-mode #new-task-input { color: var(--text-color); } .form-control:focus { background-color: var(--input-bg); } .task-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; } `;

🗒️ Task Board

App Settings

{columnId.replace(/([A-Z])/g, " $1").toUpperCase()}

🗒️ Task Board

App Settings

{columnId.replace(/([A-Z])/g, " $1").toUpperCase()}

Edit Task

kanbanTodoList