Claudia
f158a3d09c
- Express backend with SQLite - Session-based authentication - Drag-and-drop Kanban board - API key auth for service integration - Dark vainplex theme
725 lines
19 KiB
HTML
725 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>vainplex TaskBoard</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--bg-primary: #0a0a0f;
|
|
--bg-secondary: #12121a;
|
|
--bg-card: #1a1a24;
|
|
--bg-hover: #242430;
|
|
--border: #2a2a3a;
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #a0a0b0;
|
|
--accent: #6366f1;
|
|
--accent-hover: #818cf8;
|
|
--success: #10b981;
|
|
--warning: #f59e0b;
|
|
--danger: #ef4444;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, sans-serif;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
min-height: 100vh;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.header {
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 1rem 2rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: linear-gradient(135deg, var(--accent), #8b5cf6);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, var(--accent), #8b5cf6);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.board {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
padding: 2rem;
|
|
min-height: calc(100vh - 70px);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.column {
|
|
flex: 0 0 320px;
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
border: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: calc(100vh - 110px);
|
|
}
|
|
|
|
.column.trigger {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 20px rgba(99, 102, 241, 0.1);
|
|
}
|
|
|
|
.column-header {
|
|
padding: 1rem 1.25rem;
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.column-title {
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.column-count {
|
|
background: var(--bg-hover);
|
|
padding: 0.25rem 0.6rem;
|
|
border-radius: 99px;
|
|
font-size: 0.8rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.column-tasks {
|
|
flex: 1;
|
|
padding: 0.75rem;
|
|
overflow-y: auto;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.column-tasks.drag-over {
|
|
background: rgba(99, 102, 241, 0.05);
|
|
}
|
|
|
|
.task {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
margin-bottom: 0.75rem;
|
|
cursor: grab;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.task:hover {
|
|
border-color: var(--accent);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.task.dragging {
|
|
opacity: 0.5;
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.task-title {
|
|
font-weight: 500;
|
|
margin-bottom: 0.5rem;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.task-description {
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 0.75rem;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.task-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.task-priority {
|
|
font-size: 0.7rem;
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.task-priority.high {
|
|
background: rgba(239, 68, 68, 0.15);
|
|
color: var(--danger);
|
|
}
|
|
|
|
.task-priority.medium {
|
|
background: rgba(245, 158, 11, 0.15);
|
|
color: var(--warning);
|
|
}
|
|
|
|
.task-priority.low {
|
|
background: rgba(16, 185, 129, 0.15);
|
|
color: var(--success);
|
|
}
|
|
|
|
.task-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
.task:hover .task-actions {
|
|
opacity: 1;
|
|
}
|
|
|
|
.task-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
padding: 0.25rem;
|
|
font-size: 0.9rem;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.task-btn:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.task-btn.delete:hover {
|
|
color: var(--danger);
|
|
}
|
|
|
|
.add-task-btn {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
background: transparent;
|
|
border: 1px dashed var(--border);
|
|
border-radius: 8px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
transition: all 0.15s ease;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.add-task-btn:hover {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.column-footer {
|
|
padding: 0.75rem;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
/* Modal */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.modal-overlay.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.modal {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
width: 90%;
|
|
max-width: 480px;
|
|
transform: scale(0.95);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.modal-overlay.active .modal {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.form-input, .form-textarea, .form-select {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
color: var(--text-primary);
|
|
font-family: inherit;
|
|
font-size: 0.95rem;
|
|
transition: border-color 0.15s ease;
|
|
}
|
|
|
|
.form-input:focus, .form-textarea:focus, .form-select:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.form-textarea {
|
|
resize: vertical;
|
|
min-height: 100px;
|
|
}
|
|
|
|
.modal-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.75rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.btn {
|
|
padding: 0.6rem 1.25rem;
|
|
border-radius: 8px;
|
|
font-weight: 500;
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
border: none;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--bg-card);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--accent);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--accent-hover);
|
|
}
|
|
|
|
/* Quick add */
|
|
.quick-add {
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.quick-add.active {
|
|
display: flex;
|
|
}
|
|
|
|
.quick-add input {
|
|
padding: 0.6rem 0.75rem;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
color: var(--text-primary);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.quick-add input:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.quick-add-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.quick-add-actions button {
|
|
flex: 1;
|
|
padding: 0.5rem;
|
|
border-radius: 6px;
|
|
font-size: 0.85rem;
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
|
|
.quick-add-actions .save {
|
|
background: var(--accent);
|
|
color: white;
|
|
}
|
|
|
|
.quick-add-actions .cancel {
|
|
background: var(--bg-card);
|
|
color: var(--text-secondary);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
/* Empty state */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 2rem 1rem;
|
|
color: var(--text-secondary);
|
|
font-size: 0.9rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<div class="logo">
|
|
<div class="logo-icon">📋</div>
|
|
<span class="logo-text">vainplex TaskBoard</span>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 1rem;">
|
|
<button class="btn btn-primary" onclick="openModal()">+ New Task</button>
|
|
<div class="user-menu">
|
|
<span id="username" style="color: var(--text-secondary); font-size: 0.9rem;"></span>
|
|
<a href="/logout" class="btn btn-secondary" style="margin-left: 0.5rem; padding: 0.4rem 0.8rem; font-size: 0.85rem; text-decoration: none;">Logout</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="board" id="board"></div>
|
|
|
|
<div class="modal-overlay" id="modal">
|
|
<div class="modal">
|
|
<h2 class="modal-title" id="modalTitle">New Task</h2>
|
|
<form id="taskForm" onsubmit="saveTask(event)">
|
|
<input type="hidden" id="taskId">
|
|
<div class="form-group">
|
|
<label class="form-label">Title *</label>
|
|
<input type="text" class="form-input" id="taskTitle" required placeholder="What needs to be done?">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Description</label>
|
|
<textarea class="form-textarea" id="taskDescription" placeholder="Add more details..."></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Priority</label>
|
|
<select class="form-select" id="taskPriority">
|
|
<option value="low">🟢 Low</option>
|
|
<option value="medium" selected>🟡 Medium</option>
|
|
<option value="high">🔴 High</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Column</label>
|
|
<select class="form-select" id="taskColumn"></select>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="closeModal()">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Save Task</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let board = [];
|
|
let draggedTask = null;
|
|
|
|
async function loadBoard() {
|
|
const res = await fetch('/api/board');
|
|
board = await res.json();
|
|
renderBoard();
|
|
populateColumnSelect();
|
|
}
|
|
|
|
function renderBoard() {
|
|
const boardEl = document.getElementById('board');
|
|
boardEl.innerHTML = board.map(column => `
|
|
<div class="column ${column.is_trigger ? 'trigger' : ''}" data-column-id="${column.id}">
|
|
<div class="column-header">
|
|
<span class="column-title">${column.name}</span>
|
|
<span class="column-count">${column.tasks.length}</span>
|
|
</div>
|
|
<div class="column-tasks"
|
|
ondragover="handleDragOver(event)"
|
|
ondragleave="handleDragLeave(event)"
|
|
ondrop="handleDrop(event, '${column.id}')">
|
|
${column.tasks.length === 0 ?
|
|
'<div class="empty-state">Drop tasks here</div>' :
|
|
column.tasks.map(task => renderTask(task)).join('')}
|
|
</div>
|
|
<div class="column-footer">
|
|
<div class="quick-add" id="quick-${column.id}">
|
|
<input type="text" placeholder="Task title..." onkeydown="handleQuickAddKey(event, '${column.id}')">
|
|
<div class="quick-add-actions">
|
|
<button class="cancel" onclick="toggleQuickAdd('${column.id}')">Cancel</button>
|
|
<button class="save" onclick="quickAddTask('${column.id}')">Add</button>
|
|
</div>
|
|
</div>
|
|
<button class="add-task-btn" id="btn-${column.id}" onclick="toggleQuickAdd('${column.id}')">+ Add task</button>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function renderTask(task) {
|
|
return `
|
|
<div class="task" draggable="true"
|
|
data-task-id="${task.id}"
|
|
ondragstart="handleDragStart(event, '${task.id}')"
|
|
ondragend="handleDragEnd(event)">
|
|
<div class="task-title">${escapeHtml(task.title)}</div>
|
|
${task.description ? `<div class="task-description">${escapeHtml(task.description)}</div>` : ''}
|
|
<div class="task-meta">
|
|
<span class="task-priority ${task.priority}">${task.priority}</span>
|
|
<div class="task-actions">
|
|
<button class="task-btn" onclick="editTask('${task.id}')" title="Edit">✏️</button>
|
|
<button class="task-btn delete" onclick="deleteTask('${task.id}')" title="Delete">🗑️</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function handleDragStart(e, taskId) {
|
|
draggedTask = taskId;
|
|
e.target.classList.add('dragging');
|
|
}
|
|
|
|
function handleDragEnd(e) {
|
|
e.target.classList.remove('dragging');
|
|
draggedTask = null;
|
|
}
|
|
|
|
function handleDragOver(e) {
|
|
e.preventDefault();
|
|
e.currentTarget.classList.add('drag-over');
|
|
}
|
|
|
|
function handleDragLeave(e) {
|
|
e.currentTarget.classList.remove('drag-over');
|
|
}
|
|
|
|
async function handleDrop(e, columnId) {
|
|
e.preventDefault();
|
|
e.currentTarget.classList.remove('drag-over');
|
|
|
|
if (!draggedTask) return;
|
|
|
|
const column = board.find(c => c.id === columnId);
|
|
const position = column.tasks.length;
|
|
|
|
await fetch(`/api/tasks/${draggedTask}/move`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ column_id: columnId, position })
|
|
});
|
|
|
|
loadBoard();
|
|
}
|
|
|
|
function populateColumnSelect() {
|
|
const select = document.getElementById('taskColumn');
|
|
select.innerHTML = board.map(col =>
|
|
`<option value="${col.id}">${col.name}</option>`
|
|
).join('');
|
|
}
|
|
|
|
function openModal(taskId = null) {
|
|
const modal = document.getElementById('modal');
|
|
const title = document.getElementById('modalTitle');
|
|
const form = document.getElementById('taskForm');
|
|
|
|
if (taskId) {
|
|
title.textContent = 'Edit Task';
|
|
const task = findTask(taskId);
|
|
if (task) {
|
|
document.getElementById('taskId').value = task.id;
|
|
document.getElementById('taskTitle').value = task.title;
|
|
document.getElementById('taskDescription').value = task.description || '';
|
|
document.getElementById('taskPriority').value = task.priority;
|
|
document.getElementById('taskColumn').value = task.column_id;
|
|
}
|
|
} else {
|
|
title.textContent = 'New Task';
|
|
form.reset();
|
|
document.getElementById('taskId').value = '';
|
|
}
|
|
|
|
modal.classList.add('active');
|
|
document.getElementById('taskTitle').focus();
|
|
}
|
|
|
|
function closeModal() {
|
|
document.getElementById('modal').classList.remove('active');
|
|
}
|
|
|
|
function findTask(taskId) {
|
|
for (const col of board) {
|
|
const task = col.tasks.find(t => t.id === taskId);
|
|
if (task) return { ...task, column_id: col.id };
|
|
}
|
|
return null;
|
|
}
|
|
|
|
async function saveTask(e) {
|
|
e.preventDefault();
|
|
|
|
const taskId = document.getElementById('taskId').value;
|
|
const data = {
|
|
title: document.getElementById('taskTitle').value,
|
|
description: document.getElementById('taskDescription').value,
|
|
priority: document.getElementById('taskPriority').value,
|
|
column_id: document.getElementById('taskColumn').value
|
|
};
|
|
|
|
if (taskId) {
|
|
await fetch(`/api/tasks/${taskId}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(data)
|
|
});
|
|
|
|
// Move if column changed
|
|
const task = findTask(taskId);
|
|
if (task && task.column_id !== data.column_id) {
|
|
const column = board.find(c => c.id === data.column_id);
|
|
await fetch(`/api/tasks/${taskId}/move`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ column_id: data.column_id, position: column.tasks.length })
|
|
});
|
|
}
|
|
} else {
|
|
await fetch('/api/tasks', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(data)
|
|
});
|
|
}
|
|
|
|
closeModal();
|
|
loadBoard();
|
|
}
|
|
|
|
function editTask(taskId) {
|
|
openModal(taskId);
|
|
}
|
|
|
|
async function deleteTask(taskId) {
|
|
if (!confirm('Delete this task?')) return;
|
|
|
|
await fetch(`/api/tasks/${taskId}`, { method: 'DELETE' });
|
|
loadBoard();
|
|
}
|
|
|
|
function toggleQuickAdd(columnId) {
|
|
const quickAdd = document.getElementById(`quick-${columnId}`);
|
|
const btn = document.getElementById(`btn-${columnId}`);
|
|
|
|
const isActive = quickAdd.classList.toggle('active');
|
|
btn.style.display = isActive ? 'none' : 'block';
|
|
|
|
if (isActive) {
|
|
quickAdd.querySelector('input').focus();
|
|
}
|
|
}
|
|
|
|
async function quickAddTask(columnId) {
|
|
const input = document.querySelector(`#quick-${columnId} input`);
|
|
const title = input.value.trim();
|
|
|
|
if (!title) return;
|
|
|
|
await fetch('/api/tasks', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ title, column_id: columnId, priority: 'medium' })
|
|
});
|
|
|
|
input.value = '';
|
|
toggleQuickAdd(columnId);
|
|
loadBoard();
|
|
}
|
|
|
|
function handleQuickAddKey(e, columnId) {
|
|
if (e.key === 'Enter') {
|
|
quickAddTask(columnId);
|
|
} else if (e.key === 'Escape') {
|
|
toggleQuickAdd(columnId);
|
|
}
|
|
}
|
|
|
|
// Close modal on escape
|
|
document.addEventListener('keydown', e => {
|
|
if (e.key === 'Escape') closeModal();
|
|
});
|
|
|
|
// Close modal on overlay click
|
|
document.getElementById('modal').addEventListener('click', e => {
|
|
if (e.target.classList.contains('modal-overlay')) closeModal();
|
|
});
|
|
|
|
// Load current user
|
|
async function loadUser() {
|
|
try {
|
|
const res = await fetch('/api/me');
|
|
if (res.ok) {
|
|
const user = await res.json();
|
|
document.getElementById('username').textContent = user.username;
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to load user');
|
|
}
|
|
}
|
|
|
|
// Initial load
|
|
loadUser();
|
|
loadBoard();
|
|
</script>
|
|
</body>
|
|
</html>
|