878 lines
23 KiB
HTML
878 lines
23 KiB
HTML
<div class="tasks-container">
|
|
<!-- Header -->
|
|
<div class="tasks-header">
|
|
<div class="header-content">
|
|
<h1 class="tasks-title">
|
|
<span class="tasks-icon">✓</span>
|
|
Tasks
|
|
</h1>
|
|
<div class="header-stats" id="task-stats">
|
|
<span class="stat-item">
|
|
<span class="stat-value">0</span>
|
|
<span class="stat-label">Total</span>
|
|
</span>
|
|
<span class="stat-item">
|
|
<span class="stat-value">0</span>
|
|
<span class="stat-label">Active</span>
|
|
</span>
|
|
<span class="stat-item">
|
|
<span class="stat-value">0</span>
|
|
<span class="stat-label">Completed</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Task Form -->
|
|
<div class="add-task-section">
|
|
<form
|
|
class="add-task-form"
|
|
hx-post="/api/tasks"
|
|
hx-target="#task-list"
|
|
hx-swap="afterbegin"
|
|
hx-on::after-request="this.reset()"
|
|
>
|
|
<input
|
|
type="text"
|
|
name="text"
|
|
class="task-input"
|
|
placeholder="What needs to be done?"
|
|
required
|
|
autofocus
|
|
/>
|
|
<select name="category" class="task-category-select">
|
|
<option value="">No Category</option>
|
|
<option value="work">Work</option>
|
|
<option value="personal">Personal</option>
|
|
<option value="shopping">Shopping</option>
|
|
<option value="health">Health</option>
|
|
</select>
|
|
<input
|
|
type="date"
|
|
name="dueDate"
|
|
class="task-date-input"
|
|
placeholder="Due date"
|
|
/>
|
|
<button type="submit" class="button-primary add-task-btn">
|
|
<span class="plus-icon">+</span>
|
|
Add Task
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Filter Tabs -->
|
|
<div class="filter-tabs">
|
|
<button
|
|
class="filter-tab active"
|
|
hx-get="/api/tasks?filter=all"
|
|
hx-target="#task-list"
|
|
hx-swap="innerHTML"
|
|
onclick="setActiveTab(this)"
|
|
>
|
|
<span class="tab-icon">📋</span>
|
|
<span>All</span>
|
|
<span class="tab-count" id="count-all">0</span>
|
|
</button>
|
|
<button
|
|
class="filter-tab"
|
|
hx-get="/api/tasks?filter=active"
|
|
hx-target="#task-list"
|
|
hx-swap="innerHTML"
|
|
onclick="setActiveTab(this)"
|
|
>
|
|
<span class="tab-icon">⏳</span>
|
|
<span>Active</span>
|
|
<span class="tab-count" id="count-active">0</span>
|
|
</button>
|
|
<button
|
|
class="filter-tab"
|
|
hx-get="/api/tasks?filter=completed"
|
|
hx-target="#task-list"
|
|
hx-swap="innerHTML"
|
|
onclick="setActiveTab(this)"
|
|
>
|
|
<span class="tab-icon">✓</span>
|
|
<span>Completed</span>
|
|
<span class="tab-count" id="count-completed">0</span>
|
|
</button>
|
|
<button
|
|
class="filter-tab priority-tab"
|
|
hx-get="/api/tasks?filter=priority"
|
|
hx-target="#task-list"
|
|
hx-swap="innerHTML"
|
|
onclick="setActiveTab(this)"
|
|
>
|
|
<span class="tab-icon">⭐</span>
|
|
<span>Priority</span>
|
|
<span class="tab-count" id="count-priority">0</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Task List Container -->
|
|
<div class="task-list-container">
|
|
<div
|
|
class="task-list"
|
|
id="task-list"
|
|
hx-get="/api/tasks"
|
|
hx-trigger="load"
|
|
hx-swap="innerHTML"
|
|
>
|
|
<!-- Loading state -->
|
|
<div class="loading-state">
|
|
<div class="spinner"></div>
|
|
<p>Loading tasks...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer Actions -->
|
|
<div class="tasks-footer" id="task-footer">
|
|
<div class="footer-info">
|
|
<span class="info-text" id="footer-text">
|
|
<strong>0</strong> tasks remaining
|
|
</span>
|
|
</div>
|
|
<div class="footer-actions">
|
|
<button
|
|
class="button-secondary"
|
|
hx-delete="/api/tasks/completed"
|
|
hx-target="#task-list"
|
|
hx-swap="innerHTML"
|
|
hx-confirm="Are you sure you want to clear all completed tasks?"
|
|
>
|
|
Clear Completed
|
|
</button>
|
|
<button
|
|
class="button-secondary"
|
|
onclick="exportTasks()"
|
|
title="Export as JSON"
|
|
>
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
|
<polyline points="7 10 12 15 17 10"></polyline>
|
|
<line x1="12" y1="15" x2="12" y2="3"></line>
|
|
</svg>
|
|
Export
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Container */
|
|
.tasks-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Header */
|
|
.tasks-header {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.tasks-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 2rem;
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
.tasks-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 48px;
|
|
height: 48px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 12px;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.header-stats {
|
|
display: flex;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
color: #64748b;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* Add Task Section */
|
|
.add-task-section {
|
|
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
|
|
border-radius: 16px;
|
|
padding: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.add-task-form {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.task-input {
|
|
flex: 1;
|
|
min-width: 200px;
|
|
padding: 0.75rem 1rem;
|
|
background: rgba(15, 23, 42, 0.5);
|
|
border: 1px solid #475569;
|
|
border-radius: 8px;
|
|
color: #f1f5f9;
|
|
font-size: 1rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.task-input:focus {
|
|
outline: none;
|
|
border-color: #667eea;
|
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
}
|
|
|
|
.task-category-select,
|
|
.task-date-input {
|
|
padding: 0.75rem;
|
|
background: rgba(15, 23, 42, 0.5);
|
|
border: 1px solid #475569;
|
|
border-radius: 8px;
|
|
color: #f1f5f9;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.task-category-select:focus,
|
|
.task-date-input:focus {
|
|
outline: none;
|
|
border-color: #667eea;
|
|
}
|
|
|
|
.button-primary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.5rem;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.button-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
|
}
|
|
|
|
.button-primary:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
.plus-icon {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
/* Filter Tabs */
|
|
.filter-tabs {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem;
|
|
background: #1e293b;
|
|
border-radius: 12px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.filter-tab {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 8px;
|
|
color: #94a3b8;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.filter-tab:hover {
|
|
background: rgba(100, 116, 139, 0.1);
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
.filter-tab.active {
|
|
background: #334155;
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
.priority-tab.active {
|
|
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
|
|
color: #0f172a;
|
|
}
|
|
|
|
.tab-icon {
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.tab-count {
|
|
padding: 0.125rem 0.5rem;
|
|
background: rgba(100, 116, 139, 0.2);
|
|
border-radius: 999px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.filter-tab.active .tab-count {
|
|
background: rgba(241, 245, 249, 0.2);
|
|
}
|
|
|
|
/* Task List */
|
|
.task-list-container {
|
|
min-height: 300px;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.task-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.task-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1rem 1.25rem;
|
|
background: #1e293b;
|
|
border-radius: 12px;
|
|
transition: all 0.2s;
|
|
animation: slideIn 0.3s ease;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.task-item:hover {
|
|
background: #334155;
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.task-item.completed {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.task-item.completed .task-text {
|
|
text-decoration: line-through;
|
|
color: #64748b;
|
|
}
|
|
|
|
.task-checkbox {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 6px;
|
|
border: 2px solid #475569;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.task-checkbox:checked {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-color: transparent;
|
|
}
|
|
|
|
.task-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.task-text-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.task-text {
|
|
color: #f1f5f9;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.task-meta {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.task-category {
|
|
padding: 0.25rem 0.75rem;
|
|
background: rgba(100, 116, 139, 0.2);
|
|
border-radius: 999px;
|
|
font-size: 0.75rem;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.task-due-date {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
font-size: 0.75rem;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.task-due-date.overdue {
|
|
color: #ef4444;
|
|
}
|
|
|
|
.task-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.action-btn {
|
|
padding: 0.5rem;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 6px;
|
|
color: #64748b;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
background: rgba(100, 116, 139, 0.1);
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
.priority-btn.active {
|
|
color: #fbbf24;
|
|
}
|
|
|
|
.edit-btn:hover {
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.delete-btn:hover {
|
|
color: #ef4444;
|
|
}
|
|
|
|
/* Task input for editing */
|
|
.task-edit-input {
|
|
flex: 1;
|
|
padding: 0.5rem;
|
|
background: rgba(15, 23, 42, 0.5);
|
|
border: 1px solid #475569;
|
|
border-radius: 6px;
|
|
color: #f1f5f9;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* Empty state */
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 4rem 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.empty-state svg {
|
|
color: #475569;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.empty-state h3 {
|
|
font-size: 1.25rem;
|
|
color: #94a3b8;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.empty-state p {
|
|
color: #64748b;
|
|
}
|
|
|
|
/* Loading state */
|
|
.loading-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 4rem;
|
|
color: #64748b;
|
|
}
|
|
|
|
/* Footer */
|
|
.tasks-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1.5rem;
|
|
background: #1e293b;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.footer-info {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.footer-actions {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.button-secondary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
background: transparent;
|
|
border: 1px solid #475569;
|
|
border-radius: 8px;
|
|
color: #94a3b8;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.button-secondary:hover {
|
|
background: #334155;
|
|
color: #f1f5f9;
|
|
border-color: #475569;
|
|
}
|
|
|
|
/* Spinner */
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.spinner {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border: 3px solid #334155;
|
|
border-top-color: #667eea;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* HTMX loading states */
|
|
.htmx-request .task-item {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.htmx-request.filter-tab {
|
|
pointer-events: none;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 640px) {
|
|
.tasks-container {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.header-content {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.header-stats {
|
|
width: 100%;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.add-task-form {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.task-input {
|
|
width: 100%;
|
|
}
|
|
|
|
.filter-tabs {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tasks-footer {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Set active tab
|
|
function setActiveTab(button) {
|
|
document.querySelectorAll(".filter-tab").forEach((tab) => {
|
|
tab.classList.remove("active");
|
|
});
|
|
button.classList.add("active");
|
|
}
|
|
|
|
// Export tasks as JSON
|
|
function exportTasks() {
|
|
fetch("/api/tasks?format=json")
|
|
.then((response) => response.json())
|
|
.then((tasks) => {
|
|
const dataStr = JSON.stringify(tasks, null, 2);
|
|
const dataUri =
|
|
"data:application/json;charset=utf-8," +
|
|
encodeURIComponent(dataStr);
|
|
|
|
const exportFileDefaultName = `tasks-${new Date().toISOString().split("T")[0]}.json`;
|
|
|
|
const linkElement = document.createElement("a");
|
|
linkElement.setAttribute("href", dataUri);
|
|
linkElement.setAttribute("download", exportFileDefaultName);
|
|
linkElement.click();
|
|
});
|
|
}
|
|
|
|
// Update task statistics
|
|
function updateStats() {
|
|
fetch("/api/tasks/stats")
|
|
.then((response) => response.json())
|
|
.then((stats) => {
|
|
// Update header stats
|
|
document.querySelector(
|
|
".stat-item:nth-child(1) .stat-value",
|
|
).textContent = stats.total || 0;
|
|
document.querySelector(
|
|
".stat-item:nth-child(2) .stat-value",
|
|
).textContent = stats.active || 0;
|
|
document.querySelector(
|
|
".stat-item:nth-child(3) .stat-value",
|
|
).textContent = stats.completed || 0;
|
|
|
|
// Update tab counts
|
|
document.getElementById("count-all").textContent =
|
|
stats.total || 0;
|
|
document.getElementById("count-active").textContent =
|
|
stats.active || 0;
|
|
document.getElementById("count-completed").textContent =
|
|
stats.completed || 0;
|
|
document.getElementById("count-priority").textContent =
|
|
stats.priority || 0;
|
|
|
|
// Update footer text
|
|
const footerText = document.getElementById("footer-text");
|
|
if (stats.active === 0) {
|
|
footerText.innerHTML = "All tasks completed! 🎉";
|
|
} else {
|
|
footerText.innerHTML = `<strong>${stats.active}</strong> ${stats.active === 1 ? "task" : "tasks"} remaining`;
|
|
}
|
|
|
|
// Show/hide footer
|
|
const footer = document.getElementById("task-footer");
|
|
footer.style.display = stats.total > 0 ? "flex" : "none";
|
|
});
|
|
}
|
|
|
|
// Handle checkbox changes
|
|
document.addEventListener("change", function (e) {
|
|
if (e.target.classList.contains("task-checkbox")) {
|
|
const taskId = e.target.dataset.taskId;
|
|
const completed = e.target.checked;
|
|
|
|
fetch(`/api/tasks/${taskId}/status`, {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ completed }),
|
|
}).then(() => {
|
|
const taskItem = e.target.closest(".task-item");
|
|
if (completed) {
|
|
taskItem.classList.add("completed");
|
|
} else {
|
|
taskItem.classList.remove("completed");
|
|
}
|
|
updateStats();
|
|
});
|
|
}
|
|
});
|
|
|
|
// Handle task actions
|
|
document.addEventListener("click", function (e) {
|
|
// Priority toggle
|
|
if (e.target.closest('[data-action="priority"]')) {
|
|
const btn = e.target.closest('[data-action="priority"]');
|
|
const taskId = btn.dataset.taskId;
|
|
const priority = !btn.classList.contains("active");
|
|
|
|
fetch(`/api/tasks/${taskId}/priority`, {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ priority }),
|
|
}).then(() => {
|
|
btn.classList.toggle("active");
|
|
updateStats();
|
|
});
|
|
}
|
|
|
|
// Edit task
|
|
if (e.target.closest('[data-action="edit"]')) {
|
|
const btn = e.target.closest('[data-action="edit"]');
|
|
const taskId = btn.dataset.taskId;
|
|
const taskItem = btn.closest(".task-item");
|
|
const taskText = taskItem.querySelector(".task-text");
|
|
const currentText = taskText.textContent;
|
|
|
|
const input = document.createElement("input");
|
|
input.type = "text";
|
|
input.className = "task-edit-input";
|
|
input.value = currentText;
|
|
|
|
taskText.replaceWith(input);
|
|
input.focus();
|
|
input.select();
|
|
|
|
input.addEventListener("blur", function () {
|
|
saveEdit();
|
|
});
|
|
|
|
input.addEventListener("keydown", function (e) {
|
|
if (e.key === "Enter") {
|
|
saveEdit();
|
|
} else if (e.key === "Escape") {
|
|
cancelEdit();
|
|
}
|
|
});
|
|
|
|
function saveEdit() {
|
|
const newText = input.value.trim();
|
|
if (newText && newText !== currentText) {
|
|
fetch(`/api/tasks/${taskId}`, {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ text: newText }),
|
|
}).then(() => {
|
|
const span = document.createElement("span");
|
|
span.className = "task-text";
|
|
span.textContent = newText;
|
|
input.replaceWith(span);
|
|
});
|
|
} else {
|
|
cancelEdit();
|
|
}
|
|
}
|
|
|
|
function cancelEdit() {
|
|
const span = document.createElement("span");
|
|
span.className = "task-text";
|
|
span.textContent = currentText;
|
|
input.replaceWith(span);
|
|
}
|
|
}
|
|
|
|
// Delete task
|
|
if (e.target.closest('[data-action="delete"]')) {
|
|
const btn = e.target.closest('[data-action="delete"]');
|
|
const taskId = btn.dataset.taskId;
|
|
|
|
if (confirm("Delete this task?")) {
|
|
fetch(`/api/tasks/${taskId}`, {
|
|
method: "DELETE",
|
|
}).then(() => {
|
|
const taskItem = btn.closest(".task-item");
|
|
taskItem.style.animation = "slideOut 0.3s ease";
|
|
setTimeout(() => {
|
|
taskItem.remove();
|
|
updateStats();
|
|
}, 300);
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
// Animation for removing tasks
|
|
const style = document.createElement("style");
|
|
style.textContent = `
|
|
@keyframes slideOut {
|
|
to {
|
|
opacity: 0;
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
// Update stats after any HTMX request
|
|
document.body.addEventListener("htmx:afterSwap", function (evt) {
|
|
if (evt.detail.target.id === "task-list") {
|
|
updateStats();
|
|
}
|
|
});
|
|
|
|
// Initial stats load
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
updateStats();
|
|
});
|
|
|
|
// Keyboard shortcuts
|
|
document.addEventListener("keydown", function (e) {
|
|
// Alt + N for new task
|
|
if (e.altKey && e.key === "n") {
|
|
e.preventDefault();
|
|
document.querySelector(".task-input").focus();
|
|
}
|
|
|
|
// Alt + 1-4 for filter tabs
|
|
if (e.altKey && e.key >= "1" && e.key <= "4") {
|
|
e.preventDefault();
|
|
const tabs = document.querySelectorAll(".filter-tab");
|
|
const index = parseInt(e.key) - 1;
|
|
if (tabs[index]) {
|
|
tabs[index].click();
|
|
}
|
|
}
|
|
});
|
|
</script>
|