/** @jsxImportSource https://esm.sh/react@18.2.0?dev */ import { DragDropContext, Draggable, Droppable } from "https://esm.sh/react-beautiful-dnd@13.1.1?deps=react@18.2.0"; import ReactDOM from "https://esm.sh/react-dom@18.2.0?dev"; import React, { useEffect, useState } from "https://esm.sh/react@18.2.0"; // CSS styles const css = ` :root { --primary-color: #007bff; --secondary-color: #6c757d; --success-color: #28a745; --danger-color: #dc3545; --light-color: #f8f9fa; --dark-color: #343a40; --bg-color: #ffffff; --text-color: #343a40; --border-color: #dee2e6; --input-bg: #ffffff; --input-border: #ced4da; --modal-overlay: rgba(0, 0, 0, 0.5); --modal-bg: #ffffff; --completed-column-bg: #e9ecef; --completed-column-text: #495057; --font-family: 'Quicksand', sans-serif; --font-size-base: 16px; --font-size-lg: 1.25rem; --font-size-sm: 0.875rem; --transition-speed: 0.3s; } .dark-mode { --bg-color: #1a1a1a; --text-color: #f0f0f0; --border-color: #444; --input-bg: #2a2a2a; --input-border: #555; --modal-overlay: rgba(255, 255, 255, 0.1); --modal-bg: #2a2a2a; --completed-column-bg: #343a40; --completed-column-text: #adb5bd; } body { font-family: var(--font-family); font-size: var(--font-size-base); color: var(--text-color); background-color: var(--bg-color); transition: background-color var(--transition-speed), color var(--transition-speed); } .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: var(--font-size-lg); 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 var(--transition-speed) ease; } .font-option.selected { border-color: var(--primary-color); background-color: rgba(0, 123, 255, 0.1); } h1, h2, h3, label { font-weight: 600; } .btn { margin-right: 10px; margin-bottom: 10px; } .btn-custom { background-color: var(--primary-color); border-color: var(--primary-color); color: var(--light-color); } .btn-custom:hover { background-color: #0056b3; border-color: #0056b3; color: var(--light-color); } .form-control { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text-color); transition: background-color var(--transition-speed), border-color var(--transition-speed), color var(--transition-speed); } .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(--primary-color); box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 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; } .task-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; } `; // JavaScript constants const STORAGE_KEYS = { THEME: 'app-theme', FONT: 'app-font', FONT_SIZE: 'app-font-size', SHOW_DELETE: 'app-show-delete' }; const DEFAULT_FONT = 'Quicksand'; const DEFAULT_FONT_SIZE = 16; const COLUMN_NAMES = { TODO: 'todo', IN_PROGRESS: 'inProgress', COMPLETED: 'completed' }; const AVAILABLE_FONTS = [ "Courier New", "DM Serif Text", "Dancing Script", "Jersey 10", "Playfair Display", "Playwrite AU SA", "Playwrite IE Guides", "Roboto Mono", "Roboto", "Rubik Vinyl", ]; // Main TaskBoard component function TaskBoard() { // State variables const [taskLists, setTaskLists] = useState({ [COLUMN_NAMES.TODO]: [], [COLUMN_NAMES.IN_PROGRESS]: [], [COLUMN_NAMES.COMPLETED]: [], }); const [newTaskText, setNewTaskText] = useState(""); const [isDarkMode, setIsDarkMode] = useState(false); const [isSettingsOpen, setIsSettingsOpen] = useState(false); const [chosenFont, setChosenFont] = useState(DEFAULT_FONT); const [fontSize, setFontSize] = useState(DEFAULT_FONT_SIZE); const [isDeleteButtonVisible, setIsDeleteButtonVisible] = useState(true); const [isEditModalOpen, setIsEditModalOpen] = useState(false); const [taskBeingEdited, setTaskBeingEdited] = useState(null); const [editedTaskText, setEditedTaskText] = useState(""); const listProgression = [COLUMN_NAMES.TODO, COLUMN_NAMES.IN_PROGRESS, COLUMN_NAMES.COMPLETED, COLUMN_NAMES.TODO]; // Effect to fetch tasks and load user preferences on component mount useEffect(() => { fetchTasks(); loadUserPreferences(); }, []); // Function to load user preferences from local storage function loadUserPreferences() { const savedDarkMode = localStorage.getItem(STORAGE_KEYS.THEME) === "true"; setIsDarkMode(savedDarkMode); document.body.classList.toggle("dark-mode", savedDarkMode); const savedFont = localStorage.getItem(STORAGE_KEYS.FONT) || DEFAULT_FONT; const savedFontSize = parseInt(localStorage.getItem(STORAGE_KEYS.FONT_SIZE) || DEFAULT_FONT_SIZE.toString()); const savedDeleteSetting = localStorage.getItem(STORAGE_KEYS.SHOW_DELETE) !== "false"; setChosenFont(savedFont); setFontSize(savedFontSize); setIsDeleteButtonVisible(savedDeleteSetting); updateAppStyle(savedFont, savedFontSize); } // Function to update app style based on font and font size function updateAppStyle(font, size) { document.body.style.setProperty("--font-family", font); document.body.style.setProperty("--font-size-base", `${size}px`); } // Function to save user preferences to local storage function saveUserPreferences() { localStorage.setItem(STORAGE_KEYS.FONT, chosenFont); localStorage.setItem(STORAGE_KEYS.FONT_SIZE, fontSize.toString()); localStorage.setItem(STORAGE_KEYS.SHOW_DELETE, isDeleteButtonVisible.toString()); updateAppStyle(chosenFont, fontSize); setIsSettingsOpen(false); } // Function to fetch tasks from the server 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); } } // Function to add a new task 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: COLUMN_NAMES.TODO, }), }); const updatedTasks = await response.json(); setTaskLists(updatedTasks); setNewTaskText(""); } catch (error) { console.error("Error adding task", error); } } // Function to handle task movement between columns 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); } } // Function to remove a task 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); } } // Function to move a task to the next column 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 to toggle dark mode function toggleDarkMode() { const newDarkMode = !isDarkMode; setIsDarkMode(newDarkMode); document.body.classList.toggle("dark-mode", newDarkMode); localStorage.setItem(STORAGE_KEYS.THEME, newDarkMode.toString()); } // Function to open the edit modal for a task function openEditModal(task) { setTaskBeingEdited(task); setEditedTaskText(task.title); setIsEditModalOpen(true); } // Function to save the edited task 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 to handle task interactions (middle click and right click) 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

{AVAILABLE_FONTS.map((font) => (

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

))}

Text Size

setIsDeleteButtonVisible(e.target.checked)} aria-label="Show Delete Button" /> Show Delete Button

)}

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

{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

); } // Error Boundary component to catch and display React errors class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false, error: null }; } static getDerivedStateFromError(error) { return { hasError: true, error }; } render() { if (this.state.hasError) { return (

Something went wrong.

{this.state.error.toString()}

); } return this.props.children; } } 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" } }, ); }

🗒️ Task Board

App Settings

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

Something went wrong.

🗒️ Task Board

App Settings

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

Edit Task

Something went wrong.

kanban_test1