Finalize three-state toggle feature

This commit is contained in:
2026-02-11 12:27:52 -08:00
parent d48b934f5d
commit 6be1cfb6ab
3 changed files with 79 additions and 51 deletions

2
db.php
View File

@@ -1,5 +1,5 @@
<?php
$host = '192.168.0.201';
$host = 'localhost';
$db = 'tinytask';
$user = 'tinytask'; // change this if needed
$pass = 'GD3AVEZRNnE@A3P]'; // change this if needed

View File

@@ -104,6 +104,11 @@
background-color: #transparent;
}
.completed {
text-decoration: line-through;
opacity: 0.5;
}
.btn-icon {
width: 20px;
height: 20px;
@@ -458,7 +463,8 @@
<div class="project-body">
${project.tasks.map(task => `
<div class="d-flex justify-content-between align-items-center small-text mb-1 task-text">
<span class="${task.highlighted ? 'highlighted' : ''}" data-task-id="${task.id}">${task.name}</span>
<span class="${task.highlighted == 1 ? 'highlighted' : ''} ${task.highlighted == 2 ? 'completed' : ''}".trim()
data-task-id="${task.id}">${task.name}</span>
<div class="d-flex">
<button class="btn-icon add-subtask-btn" data-task-id="${task.id}" title="Add Subtask">
<i class="bi bi-plus"></i>
@@ -471,7 +477,8 @@
<div class="ms-3">
${task.subtasks.map(sub => `
<div class="d-flex justify-content-between align-items-center small-text mb-1">
<span class="${sub.highlighted ? 'highlighted' : ''}" data-subtask-id="${sub.id}">${sub.name}</span>
<span class="${sub.highlighted == 1 ? 'highlighted' : ''} ${sub.highlighted == 2 ? 'completed' : ''}".trim()
data-subtask-id="${sub.id}">${sub.name}</span>
<button class="btn-icon text-danger delete-subtask-btn" data-subtask-id="${sub.id}" title="Delete Subtask">
<i class="bi bi-dash"></i>
</button>
@@ -618,12 +625,18 @@ document.querySelectorAll('.project-column').forEach(col => {
document.querySelectorAll('[data-task-id]').forEach(span => {
span.addEventListener('click', () => {
const taskId = span.dataset.taskId;
const isHighlighted = span.classList.toggle('highlighted');
fetch('toggle_highlight.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ type: 'task', id: taskId, highlighted: isHighlighted })
body: JSON.stringify({ type: 'task', id: taskId })
})
.then(res => res.json())
.then(data => {
if (!data.success) return;
span.classList.toggle('highlighted', data.highlighted === 1);
span.classList.toggle('completed', data.highlighted === 2);
});
});
});
@@ -631,12 +644,18 @@ document.querySelectorAll('.project-column').forEach(col => {
document.querySelectorAll('[data-subtask-id]').forEach(span => {
span.addEventListener('click', () => {
const subtaskId = span.dataset.subtaskId;
const isHighlighted = span.classList.toggle('highlighted');
fetch('toggle_highlight.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ type: 'subtask', id: subtaskId, highlighted: isHighlighted })
body: JSON.stringify({ type: 'subtask', id: subtaskId })
})
.then(res => res.json())
.then(data => {
if (!data.success) return;
span.classList.toggle('highlighted', data.highlighted === 1);
span.classList.toggle('completed', data.highlighted === 2);
});
});
});

View File

@@ -3,19 +3,28 @@ require 'db.php';
$data = json_decode(file_get_contents('php://input'), true);
$type = $data['type'];
$id = intval($data['id']);
$highlighted = isset($data['highlighted']) && $data['highlighted'] ? 1 : 0;
$type = $data['type'] ?? '';
$id = intval($data['id'] ?? 0);
if ($id <= 0 || ($type !== 'task' && $type !== 'subtask')) {
echo json_encode(['success' => false, 'error' => 'Invalid request']);
exit;
}
if ($type === 'task') {
$stmt = $pdo->prepare("UPDATE tasks SET highlighted = ? WHERE id = ?");
$stmt->execute([$highlighted, $id]);
echo json_encode(['success' => true]);
} elseif ($type === 'subtask') {
$stmt = $pdo->prepare("UPDATE subtasks SET highlighted = ? WHERE id = ?");
$stmt->execute([$highlighted, $id]);
echo json_encode(['success' => true]);
$stmt = $pdo->prepare("UPDATE tasks SET highlighted = (highlighted + 1) % 3 WHERE id = ?");
$stmt->execute([$id]);
$stmt = $pdo->prepare("SELECT highlighted FROM tasks WHERE id = ?");
$stmt->execute([$id]);
$newState = intval($stmt->fetchColumn());
} else {
echo json_encode(['success' => false, 'error' => 'Invalid type']);
$stmt = $pdo->prepare("UPDATE subtasks SET highlighted = (highlighted + 1) % 3 WHERE id = ?");
$stmt->execute([$id]);
$stmt = $pdo->prepare("SELECT highlighted FROM subtasks WHERE id = ?");
$stmt->execute([$id]);
$newState = intval($stmt->fetchColumn());
}
?>
echo json_encode(['success' => true, 'highlighted' => $newState]);