feat: disable Save button when content unchanged

- Save button starts disabled and only enables when title or description
  differs from the original task values
- updateSaveButton() compares current input values against task data
- input event listeners on title and desc fields call updateSaveButton
- Add global button:disabled style (opacity 0.5, cursor not-allowed)
This commit is contained in:
Yuyao Huang 2026-05-09 16:26:41 +08:00
parent ea21b0c78c
commit 3f0fccd218
2 changed files with 21 additions and 0 deletions

View File

@ -182,6 +182,11 @@ body {
background-color: #229954; background-color: #229954;
} }
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.error-message { .error-message {
color: #e74c3c; color: #e74c3c;
margin-bottom: 1rem; margin-bottom: 1rem;

View File

@ -235,6 +235,7 @@ function selectTask(taskId) {
document.getElementById("edit-task-title").value = task.title; document.getElementById("edit-task-title").value = task.title;
document.getElementById("edit-task-desc").value = task.desc || ""; document.getElementById("edit-task-desc").value = task.desc || "";
document.getElementById("side-panel-error").textContent = ""; document.getElementById("side-panel-error").textContent = "";
updateSaveButton();
document.querySelectorAll(".status-btn").forEach(btn => { document.querySelectorAll(".status-btn").forEach(btn => {
btn.classList.toggle("active", btn.dataset.status === task.status); btn.classList.toggle("active", btn.dataset.status === task.status);
@ -246,6 +247,17 @@ function selectTask(taskId) {
} }
} }
function updateSaveButton() {
const task = tasks.find(t => t.id === selectedTaskId);
if (!task) return;
const title = document.getElementById("edit-task-title").value.trim();
const desc = document.getElementById("edit-task-desc").value;
const changed = title !== task.title || desc !== (task.desc || "");
document.getElementById("save-task-btn").disabled = !changed;
}
function closeSidePanel() { function closeSidePanel() {
if (isLandscapeMode()) return; if (isLandscapeMode()) return;
document.getElementById("side-panel").classList.remove("active"); document.getElementById("side-panel").classList.remove("active");
@ -392,8 +404,12 @@ document.addEventListener("DOMContentLoaded", () => {
document.getElementById("side-panel-close").addEventListener("click", closeSidePanel); document.getElementById("side-panel-close").addEventListener("click", closeSidePanel);
document.getElementById("save-task-btn").addEventListener("click", saveTask); document.getElementById("save-task-btn").addEventListener("click", saveTask);
document.getElementById("save-task-btn").disabled = true;
document.getElementById("delete-task-btn").addEventListener("click", deleteTask); document.getElementById("delete-task-btn").addEventListener("click", deleteTask);
document.getElementById("edit-task-title").addEventListener("input", updateSaveButton);
document.getElementById("edit-task-desc").addEventListener("input", updateSaveButton);
initWheelScroll(); initWheelScroll();
loadGoals(); loadGoals();
}); });