sam/goalsbreakdown
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replace status dropdown with one-click toggle buttons

Browse Source 
Replace <select> in side panel with 4 toggle buttons (To Do / Doing /
Pending / Done). Clicking a button immediately sends the PATCH status
API call. Active button is highlighted with status-specific colors and
shadow. saveTask now only handles title/description changes.
This commit is contained in:
Yuyao Huang 2026-05-09 16:16:58 +08:00
parent 43ca6b8462
commit 9c1d45506a
3 changed files with 93 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
static/css/tasks.css
View File

@ -97,6 +97,72 @@
border-color: #28a745;
}
.status-toggle {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.status-btn {
padding: 0.5rem 1rem;
border: 2px solid #ddd;
border-radius: 6px;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.15s ease;
background: #f8f9fa;
color: #666;
}
.status-btn.todo:hover {
border-color: #667eea;
color: #667eea;
}
.status-btn.todo.active {
background: #f8f9fa;
border-color: #667eea;
color: #667eea;
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}
.status-btn.doing:hover {
border-color: #ffc107;
color: #b8860b;
}
.status-btn.doing.active {
background: #fff3cd;
border-color: #ffc107;
color: #856404;
box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2);
}
.status-btn.pending:hover {
border-color: #2196F3;
color: #2196F3;
}
.status-btn.pending.active {
background: #e7f3ff;
border-color: #2196F3;
color: #0d6efd;
box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}
.status-btn.done:hover {
border-color: #28a745;
color: #28a745;
}
.status-btn.done.active {
background: #d4edda;
border-color: #28a745;
color: #155724;
box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
}
.task-item:hover {
background: #e9ecef;
}

26
static/js/tasks.js
View File

@ -234,9 +234,12 @@ function selectTask(taskId) {
document.getElementById("edit-task-title").value = task.title;
document.getElementById("edit-task-desc").value = task.desc || "";
document.getElementById("edit-task-status").value = task.status;
document.getElementById("side-panel-error").textContent = "";
document.querySelectorAll(".status-btn").forEach(btn => {
btn.classList.toggle("active", btn.dataset.status === task.status);
});
const sidePanel = document.getElementById("side-panel");
if (!sidePanel.classList.contains("active")) {
sidePanel.classList.add("active");
@ -257,7 +260,6 @@ async function saveTask() {
const title = document.getElementById("edit-task-title").value.trim();
const desc = document.getElementById("edit-task-desc").value;
const status = document.getElementById("edit-task-status").value;
if (!title) {
error.textContent = "Title is required";
@ -266,12 +268,24 @@ async function saveTask() {
try {
await put(`/api/tasks/${selectedTaskId}`, { title, desc });
const currentTask = tasks.find(t => t.id === selectedTaskId);
if (status !== currentTask?.status) {
await patch(`/api/tasks/${selectedTaskId}/status`, { status });
await loadTasks();
} catch (err) {
error.textContent = err.message;
}
}
async function setTaskStatus(status) {
if (!selectedTaskId) return;
const error = document.getElementById("side-panel-error");
error.textContent = "";
document.querySelectorAll(".status-btn").forEach(btn => {
btn.classList.toggle("active", btn.dataset.status === status);
});
try {
await patch(`/api/tasks/${selectedTaskId}/status`, { status });
await loadTasks();
} catch (err) {
error.textContent = err.message;

14
templates/tasks.html
View File

@ -39,13 +39,13 @@
<textarea id="edit-task-desc" rows="12" autocomplete="off"></textarea>
</div>
<div class="form-group">
<label for="edit-task-status">Status</label>
<select id="edit-task-status">
<option value="todo">To Do</option>
<option value="doing">Doing</option>
<option value="pending">Pending</option>
<option value="done">Done</option>
</select>
<label>Status</label>
<div class="status-toggle" id="status-toggle">
<button class="status-btn todo" data-status="todo" onclick="setTaskStatus('todo')">To Do</button>
<button class="status-btn doing" data-status="doing" onclick="setTaskStatus('doing')">Doing</button>
<button class="status-btn pending" data-status="pending" onclick="setTaskStatus('pending')">Pending</button>
<button class="status-btn done" data-status="done" onclick="setTaskStatus('done')">Done</button>
</div>
</div>
<div id="side-panel-error" class="error-message"></div>
<div class="side-panel-actions">