Task Board

\n \n\n {isSettingsOpen && (\n {\n if (e.target === e.currentTarget) setIsSettingsOpen(false);\n }}\n >\n

e.stopPropagation()}>\n

App Settings

\n \n

\n\n

\n Font Family\n

\n {availableFonts.map((font) => (\n {\n setChosenFont(font);\n updateAppStyle(font, fontSize);\n }}\n >\n {font}\n

\n ))}\n

\n\n

\n Text Size\n

\n setFontSize(14)}\n >\n S\n \n setFontSize(16)}\n >\n M\n \n setFontSize(20)}\n >\n L\n \n

\n\n

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

\n\n \n

\n \n )}\n\n

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

\n\n \n

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

\n \n

\n {tasks.map((task, index) => (\n \n {(provided) => (\n handleTaskInteraction(e, task, columnId)}\n onMouseDown={(e) => handleTaskInteraction(e, task, columnId)}\n >\n \n {task.title}\n \n {isDeleteButtonVisible && (\n removeTask(task.id, columnId)}\n className=\"btn btn-link text-danger p-0 ms-2\"\n >\n \n \n )}\n

\n )}\n \n ))}\n {provided.placeholder}\n

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

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

🗒️ Task Board

App Settings

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

🗒️ Task Board

App Settings

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

Edit Task