974 lines
36 KiB
JavaScript
974 lines
36 KiB
JavaScript
const API_URL = '/api';
|
|
|
|
class Task {
|
|
constructor(id, title, description, size, reward) {
|
|
this.id = id;
|
|
this.title = title;
|
|
this.description = description;
|
|
this.size = size;
|
|
this.reward = reward;
|
|
this.completed = false;
|
|
this.expandDescription = false;
|
|
this.subtasks = [];
|
|
}
|
|
|
|
getProgressWeight() {
|
|
const weights = { small: 10, medium: 25, large: 50 };
|
|
return weights[this.size] || 25;
|
|
}
|
|
|
|
calculateProgress() {
|
|
if (this.subtasks.length === 0) {
|
|
return this.completed ? 100 : 0;
|
|
}
|
|
|
|
const totalWeight = this.subtasks.reduce((sum, st) => sum + st.getProgressWeight(), 0);
|
|
const completedWeight = this.subtasks.reduce((sum, st) => {
|
|
return sum + (st.completed ? st.getProgressWeight() : 0);
|
|
}, 0);
|
|
|
|
return totalWeight > 0 ? Math.round((completedWeight / totalWeight) * 100) : 0;
|
|
}
|
|
}
|
|
|
|
class App {
|
|
constructor() {
|
|
this.tasks = [];
|
|
this.archivedTasks = [];
|
|
this.viewMode = 'active'; // 'active' or 'archive'
|
|
this.draggedTask = null;
|
|
this.draggedSubtask = null;
|
|
this.draggedParent = null;
|
|
this.draggedSubtaskIndex = null;
|
|
this.dropZoneTimer = null;
|
|
this.contextMenuTarget = null;
|
|
this.contextMenuType = null;
|
|
this.contextMenuParent = null;
|
|
this.init();
|
|
}
|
|
|
|
async init() {
|
|
this.setupEventListeners();
|
|
await this.loadTasks();
|
|
await this.loadArchivedCount();
|
|
}
|
|
|
|
setupEventListeners() {
|
|
const form = document.getElementById('task-form');
|
|
const openModal = document.getElementById('open-modal');
|
|
const closeModal = document.getElementById('close-modal');
|
|
const modal = document.getElementById('modal');
|
|
const contextMenu = document.getElementById('context-menu');
|
|
|
|
form.addEventListener('submit', (e) => this.handleSubmit(e));
|
|
openModal.addEventListener('click', () => this.openCreateModal());
|
|
closeModal.addEventListener('click', () => this.toggleModal(false));
|
|
|
|
modal.addEventListener('click', (e) => {
|
|
if (e.target === modal) this.toggleModal(false);
|
|
});
|
|
|
|
// Context menu actions
|
|
document.getElementById('context-edit').addEventListener('click', () => this.handleContextEdit());
|
|
document.getElementById('context-delete').addEventListener('click', () => this.handleContextDelete());
|
|
document.getElementById('context-promote').addEventListener('click', () => this.handleContextPromote());
|
|
document.getElementById('context-archive').addEventListener('click', () => this.handleContextArchive());
|
|
document.getElementById('context-restore').addEventListener('click', () => this.handleContextRestore());
|
|
|
|
document.addEventListener('click', () => this.hideContextMenu());
|
|
contextMenu.addEventListener('click', (e) => e.stopPropagation());
|
|
|
|
// View toggle
|
|
document.getElementById('view-active').addEventListener('click', () => this.switchView('active'));
|
|
document.getElementById('view-archive').addEventListener('click', () => this.switchView('archive'));
|
|
}
|
|
|
|
// ─── View Switching ───
|
|
|
|
async switchView(mode) {
|
|
if (this.viewMode === mode) return;
|
|
this.viewMode = mode;
|
|
|
|
document.getElementById('view-active').classList.toggle('active', mode === 'active');
|
|
document.getElementById('view-archive').classList.toggle('active', mode === 'archive');
|
|
|
|
// Show/hide elements based on view
|
|
document.getElementById('overall-progress').classList.toggle('hidden', mode === 'archive');
|
|
document.getElementById('open-modal').style.display = mode === 'archive' ? 'none' : '';
|
|
|
|
if (mode === 'archive') {
|
|
await this.loadArchivedTasks();
|
|
} else {
|
|
await this.loadTasks();
|
|
}
|
|
}
|
|
|
|
// ─── Modal ───
|
|
|
|
openCreateModal() {
|
|
document.getElementById('modal-title').textContent = 'Create New Goal';
|
|
document.getElementById('submit-btn').textContent = 'Add Goal';
|
|
document.getElementById('task-form').reset();
|
|
document.getElementById('edit-task-id').value = '';
|
|
document.getElementById('edit-parent-id').value = '';
|
|
document.getElementById('task-expand-desc').checked = false;
|
|
this.toggleModal(true);
|
|
}
|
|
|
|
openEditModal(task, parentTask = null) {
|
|
document.getElementById('modal-title').textContent = parentTask ? 'Edit Subtask' : 'Edit Goal';
|
|
document.getElementById('submit-btn').textContent = 'Update';
|
|
document.getElementById('edit-task-id').value = task.id;
|
|
document.getElementById('edit-parent-id').value = parentTask ? parentTask.id : '';
|
|
document.getElementById('task-title').value = task.title;
|
|
document.getElementById('task-description').value = task.description || '';
|
|
document.getElementById('task-size').value = task.size;
|
|
document.getElementById('task-reward').value = task.reward || '';
|
|
document.getElementById('task-expand-desc').checked = !!task.expandDescription;
|
|
this.toggleModal(true);
|
|
}
|
|
|
|
toggleModal(open) {
|
|
const modal = document.getElementById('modal');
|
|
if (open) modal.classList.add('open');
|
|
else modal.classList.remove('open');
|
|
}
|
|
|
|
// ─── Context Menu ───
|
|
|
|
showContextMenu(e, target, type, parentTask = null) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
const contextMenu = document.getElementById('context-menu');
|
|
const promoteOption = document.getElementById('context-promote');
|
|
const archiveOption = document.getElementById('context-archive');
|
|
const restoreOption = document.getElementById('context-restore');
|
|
|
|
this.contextMenuTarget = target;
|
|
this.contextMenuType = type;
|
|
this.contextMenuParent = parentTask;
|
|
|
|
// Show/hide context-specific options
|
|
promoteOption.style.display = (type === 'subtask' && this.viewMode === 'active') ? 'flex' : 'none';
|
|
|
|
const isCompleted = target.completed || target.calculateProgress() === 100;
|
|
archiveOption.style.display = (type === 'task' && this.viewMode === 'active' && isCompleted) ? 'flex' : 'none';
|
|
restoreOption.style.display = (type === 'task' && this.viewMode === 'archive') ? 'flex' : 'none';
|
|
|
|
// Position using clientX/clientY for fixed menu, with viewport clamping
|
|
let x = e.clientX;
|
|
let y = e.clientY;
|
|
|
|
contextMenu.style.left = '-9999px';
|
|
contextMenu.style.top = '-9999px';
|
|
contextMenu.classList.add('show');
|
|
|
|
const menuWidth = contextMenu.offsetWidth;
|
|
const menuHeight = contextMenu.offsetHeight;
|
|
|
|
if (x + menuWidth > window.innerWidth) x = window.innerWidth - menuWidth - 5;
|
|
if (y + menuHeight > window.innerHeight) y = window.innerHeight - menuHeight - 5;
|
|
if (x < 0) x = 5;
|
|
if (y < 0) y = 5;
|
|
|
|
contextMenu.style.left = x + 'px';
|
|
contextMenu.style.top = y + 'px';
|
|
}
|
|
|
|
hideContextMenu() {
|
|
document.getElementById('context-menu').classList.remove('show');
|
|
}
|
|
|
|
handleContextEdit() {
|
|
if (this.contextMenuTarget) {
|
|
this.openEditModal(this.contextMenuTarget, this.contextMenuParent);
|
|
}
|
|
this.hideContextMenu();
|
|
}
|
|
|
|
async handleContextDelete() {
|
|
if (!this.contextMenuTarget) return;
|
|
|
|
const label = this.contextMenuType === 'task' ? 'task' : 'subtask';
|
|
if (!confirm(`Delete this ${label}?`)) {
|
|
this.hideContextMenu();
|
|
return;
|
|
}
|
|
|
|
if (this.contextMenuType === 'task') {
|
|
await this.deleteTask(this.contextMenuTarget.id);
|
|
} else if (this.contextMenuType === 'subtask' && this.contextMenuParent) {
|
|
await this.deleteSubtask(this.contextMenuParent.id, this.contextMenuTarget.id);
|
|
}
|
|
|
|
this.hideContextMenu();
|
|
}
|
|
|
|
async handleContextPromote() {
|
|
if (!this.contextMenuTarget || this.contextMenuType !== 'subtask' || !this.contextMenuParent) {
|
|
this.hideContextMenu();
|
|
return;
|
|
}
|
|
|
|
const parentTask = this.getCurrentTasks().find(t => t.id === this.contextMenuParent.id);
|
|
if (!parentTask) {
|
|
this.hideContextMenu();
|
|
return;
|
|
}
|
|
|
|
const subtask = this.contextMenuTarget;
|
|
parentTask.subtasks = parentTask.subtasks.filter(st => st.id !== subtask.id);
|
|
|
|
try {
|
|
await fetch(`${API_URL}/tasks/${parentTask.id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(parentTask)
|
|
});
|
|
|
|
await fetch(`${API_URL}/tasks`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
title: subtask.title,
|
|
description: subtask.description,
|
|
size: subtask.size,
|
|
reward: subtask.reward
|
|
})
|
|
});
|
|
|
|
await this.loadTasks();
|
|
} catch (error) {
|
|
console.error('Error promoting subtask:', error);
|
|
}
|
|
|
|
this.hideContextMenu();
|
|
}
|
|
|
|
async handleContextArchive() {
|
|
if (!this.contextMenuTarget || this.contextMenuType !== 'task') {
|
|
this.hideContextMenu();
|
|
return;
|
|
}
|
|
await this.archiveTask(this.contextMenuTarget.id);
|
|
this.hideContextMenu();
|
|
}
|
|
|
|
async handleContextRestore() {
|
|
if (!this.contextMenuTarget || this.contextMenuType !== 'task') {
|
|
this.hideContextMenu();
|
|
return;
|
|
}
|
|
await this.unarchiveTask(this.contextMenuTarget.id);
|
|
this.hideContextMenu();
|
|
}
|
|
|
|
// ─── Form Submit ───
|
|
|
|
async handleSubmit(e) {
|
|
e.preventDefault();
|
|
|
|
const title = document.getElementById('task-title').value.trim();
|
|
const description = document.getElementById('task-description').value.trim();
|
|
const size = document.getElementById('task-size').value;
|
|
const reward = document.getElementById('task-reward').value.trim();
|
|
const expandDescription = document.getElementById('task-expand-desc').checked;
|
|
const editId = document.getElementById('edit-task-id').value;
|
|
const parentId = document.getElementById('edit-parent-id').value;
|
|
|
|
const taskList = this.getCurrentTasks();
|
|
|
|
if (editId) {
|
|
if (parentId) {
|
|
const parentTask = taskList.find(t => t.id === parentId);
|
|
if (parentTask) {
|
|
const subtask = parentTask.subtasks.find(st => st.id === editId);
|
|
if (subtask) {
|
|
subtask.title = title;
|
|
subtask.description = description;
|
|
subtask.size = size;
|
|
subtask.reward = reward;
|
|
subtask.expandDescription = expandDescription;
|
|
await this.updateTask(parentTask);
|
|
}
|
|
}
|
|
} else {
|
|
const task = taskList.find(t => t.id === editId);
|
|
if (task) {
|
|
task.title = title;
|
|
task.description = description;
|
|
task.size = size;
|
|
task.reward = reward;
|
|
task.expandDescription = expandDescription;
|
|
await this.updateTask(task);
|
|
}
|
|
}
|
|
} else {
|
|
try {
|
|
const response = await fetch(`${API_URL}/tasks`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ title, description, size, reward, expandDescription })
|
|
});
|
|
if (response.ok) await this.loadTasks();
|
|
} catch (error) {
|
|
console.error('Error creating task:', error);
|
|
}
|
|
}
|
|
|
|
e.target.reset();
|
|
this.toggleModal(false);
|
|
}
|
|
|
|
// ─── Data Loading ───
|
|
|
|
getCurrentTasks() {
|
|
return this.viewMode === 'archive' ? this.archivedTasks : this.tasks;
|
|
}
|
|
|
|
async loadTasks() {
|
|
try {
|
|
const response = await fetch(`${API_URL}/tasks`);
|
|
const data = await response.json();
|
|
|
|
this.tasks = data.map(taskData => {
|
|
const task = new Task(taskData.id, taskData.title, taskData.description, taskData.size, taskData.reward);
|
|
task.completed = taskData.completed;
|
|
task.expandDescription = !!taskData.expandDescription;
|
|
if (taskData.subtasks && Array.isArray(taskData.subtasks)) {
|
|
task.subtasks = taskData.subtasks.map(stData => {
|
|
const subtask = new Task(stData.id, stData.title, stData.description, stData.size, stData.reward);
|
|
subtask.completed = stData.completed;
|
|
subtask.expandDescription = !!stData.expandDescription;
|
|
return subtask;
|
|
});
|
|
}
|
|
return task;
|
|
});
|
|
|
|
this.updateOverallProgress();
|
|
if (this.viewMode === 'active') this.render();
|
|
this.loadArchivedCount();
|
|
} catch (error) {
|
|
console.error('Error loading tasks:', error);
|
|
this.showError();
|
|
}
|
|
}
|
|
|
|
async loadArchivedTasks() {
|
|
try {
|
|
const response = await fetch(`${API_URL}/tasks?archived=1`);
|
|
const data = await response.json();
|
|
|
|
this.archivedTasks = data.map(taskData => {
|
|
const task = new Task(taskData.id, taskData.title, taskData.description, taskData.size, taskData.reward);
|
|
task.completed = taskData.completed;
|
|
task.expandDescription = !!taskData.expandDescription;
|
|
if (taskData.subtasks && Array.isArray(taskData.subtasks)) {
|
|
task.subtasks = taskData.subtasks.map(stData => {
|
|
const subtask = new Task(stData.id, stData.title, stData.description, stData.size, stData.reward);
|
|
subtask.completed = stData.completed;
|
|
subtask.expandDescription = !!stData.expandDescription;
|
|
return subtask;
|
|
});
|
|
}
|
|
return task;
|
|
});
|
|
|
|
if (this.viewMode === 'archive') this.renderArchive();
|
|
this.updateArchiveCount();
|
|
} catch (error) {
|
|
console.error('Error loading archived tasks:', error);
|
|
this.showError();
|
|
}
|
|
}
|
|
|
|
async loadArchivedCount() {
|
|
try {
|
|
const response = await fetch(`${API_URL}/tasks?archived=1`);
|
|
const data = await response.json();
|
|
this.archivedTasks = data.map(taskData => {
|
|
const task = new Task(taskData.id, taskData.title, taskData.description, taskData.size, taskData.reward);
|
|
task.completed = taskData.completed;
|
|
return task;
|
|
});
|
|
this.updateArchiveCount();
|
|
} catch (error) {
|
|
// Silently fail — count is non-critical
|
|
}
|
|
}
|
|
|
|
updateArchiveCount() {
|
|
const badge = document.getElementById('archive-count');
|
|
const count = this.archivedTasks.length;
|
|
badge.textContent = count;
|
|
badge.style.display = count > 0 ? 'inline-block' : 'none';
|
|
}
|
|
|
|
updateOverallProgress() {
|
|
const totalTasks = this.tasks.length;
|
|
const completedTasks = this.tasks.filter(t => t.calculateProgress() === 100).length;
|
|
|
|
document.getElementById('completed-count').textContent = completedTasks;
|
|
document.getElementById('total-count').textContent = totalTasks;
|
|
|
|
if (totalTasks === 0) {
|
|
document.getElementById('overall-percentage').textContent = '0%';
|
|
document.getElementById('overall-progress-fill').style.width = '0%';
|
|
return;
|
|
}
|
|
|
|
const totalWeight = this.tasks.reduce((sum, t) => sum + t.getProgressWeight(), 0);
|
|
const completedWeight = this.tasks.reduce((sum, t) => {
|
|
const progress = t.calculateProgress();
|
|
return sum + (t.getProgressWeight() * progress / 100);
|
|
}, 0);
|
|
|
|
const overallProgress = totalWeight > 0 ? Math.round((completedWeight / totalWeight) * 100) : 0;
|
|
document.getElementById('overall-percentage').textContent = overallProgress + '%';
|
|
document.getElementById('overall-progress-fill').style.width = overallProgress + '%';
|
|
}
|
|
|
|
// ─── Task Actions ───
|
|
|
|
async deleteTask(taskId) {
|
|
try {
|
|
const response = await fetch(`${API_URL}/tasks/${taskId}`, { method: 'DELETE' });
|
|
if (response.ok) {
|
|
if (this.viewMode === 'archive') await this.loadArchivedTasks();
|
|
else await this.loadTasks();
|
|
}
|
|
} catch (error) {
|
|
console.error('Error deleting task:', error);
|
|
}
|
|
}
|
|
|
|
async toggleTaskComplete(taskId) {
|
|
const task = this.getCurrentTasks().find(t => t.id === taskId);
|
|
if (!task) return;
|
|
|
|
task.completed = !task.completed;
|
|
if (task.subtasks.length > 0) {
|
|
task.subtasks.forEach(st => st.completed = task.completed);
|
|
}
|
|
await this.updateTask(task);
|
|
}
|
|
|
|
async toggleSubtaskComplete(taskId, subtaskId) {
|
|
const task = this.getCurrentTasks().find(t => t.id === taskId);
|
|
if (!task) return;
|
|
|
|
const subtask = task.subtasks.find(st => st.id === subtaskId);
|
|
if (!subtask) return;
|
|
|
|
subtask.completed = !subtask.completed;
|
|
await this.updateTask(task);
|
|
}
|
|
|
|
async deleteSubtask(taskId, subtaskId) {
|
|
const task = this.getCurrentTasks().find(t => t.id === taskId);
|
|
if (!task) return;
|
|
|
|
task.subtasks = task.subtasks.filter(st => st.id !== subtaskId);
|
|
await this.updateTask(task);
|
|
}
|
|
|
|
async updateTask(task) {
|
|
try {
|
|
const response = await fetch(`${API_URL}/tasks/${task.id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(task)
|
|
});
|
|
if (response.ok) {
|
|
if (this.viewMode === 'archive') await this.loadArchivedTasks();
|
|
else await this.loadTasks();
|
|
}
|
|
} catch (error) {
|
|
console.error('Error updating task:', error);
|
|
}
|
|
}
|
|
|
|
async archiveTask(taskId) {
|
|
try {
|
|
const response = await fetch(`${API_URL}/tasks/${taskId}/archive`, { method: 'PUT' });
|
|
if (response.ok) {
|
|
await this.loadTasks();
|
|
await this.loadArchivedCount();
|
|
}
|
|
} catch (error) {
|
|
console.error('Error archiving task:', error);
|
|
}
|
|
}
|
|
|
|
async unarchiveTask(taskId) {
|
|
try {
|
|
const response = await fetch(`${API_URL}/tasks/${taskId}/unarchive`, { method: 'PUT' });
|
|
if (response.ok) {
|
|
await this.loadArchivedTasks();
|
|
await this.loadTasks();
|
|
}
|
|
} catch (error) {
|
|
console.error('Error restoring task:', error);
|
|
}
|
|
}
|
|
|
|
// ─── Drag & Drop ───
|
|
|
|
handleDragStart(e, item, isSubtask = false, parentTask = null, index = null) {
|
|
if (isSubtask) {
|
|
this.draggedSubtask = item;
|
|
this.draggedParent = parentTask;
|
|
this.draggedSubtaskIndex = index;
|
|
this.draggedTask = null;
|
|
} else {
|
|
this.draggedTask = item;
|
|
this.draggedSubtask = null;
|
|
this.draggedParent = null;
|
|
this.draggedSubtaskIndex = null;
|
|
}
|
|
e.currentTarget.classList.add('dragging');
|
|
}
|
|
|
|
handleDragEnd(e) {
|
|
e.currentTarget.classList.remove('dragging');
|
|
document.querySelectorAll('.drag-over').forEach(el => el.classList.remove('drag-over'));
|
|
document.querySelectorAll('.drop-zone').forEach(el => el.classList.remove('visible'));
|
|
|
|
if (this.dropZoneTimer) {
|
|
clearTimeout(this.dropZoneTimer);
|
|
this.dropZoneTimer = null;
|
|
}
|
|
|
|
this.draggedTask = null;
|
|
this.draggedSubtask = null;
|
|
this.draggedParent = null;
|
|
this.draggedSubtaskIndex = null;
|
|
}
|
|
|
|
handleCardDragOver(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
e.currentTarget.classList.add('drag-over');
|
|
}
|
|
|
|
handleDragLeave(e) {
|
|
e.currentTarget.classList.remove('drag-over');
|
|
}
|
|
|
|
handleDragEnter(e, taskId) {
|
|
e.preventDefault();
|
|
if (!this.draggedTask && !this.draggedSubtask) return;
|
|
if (this.dropZoneTimer) clearTimeout(this.dropZoneTimer);
|
|
|
|
this.dropZoneTimer = setTimeout(() => {
|
|
const dropZone = document.querySelector(`[data-task-id="${taskId}"] .drop-zone`);
|
|
if (dropZone && (this.draggedTask || this.draggedSubtask)) {
|
|
dropZone.classList.add('visible');
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
async handleDrop(e, targetTask) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
e.currentTarget.classList.remove('drag-over');
|
|
|
|
if (this.draggedTask && this.draggedTask.id !== targetTask.id) {
|
|
targetTask.subtasks.push(this.draggedTask);
|
|
try {
|
|
await fetch(`${API_URL}/tasks/${this.draggedTask.id}`, { method: 'DELETE' });
|
|
await this.updateTask(targetTask);
|
|
} catch (error) {
|
|
console.error('Error moving task:', error);
|
|
}
|
|
} else if (this.draggedSubtask && this.draggedParent && targetTask.id !== this.draggedParent.id) {
|
|
this.draggedParent.subtasks = this.draggedParent.subtasks.filter(st => st.id !== this.draggedSubtask.id);
|
|
targetTask.subtasks.push(this.draggedSubtask);
|
|
try {
|
|
await this.updateTask(this.draggedParent);
|
|
await this.updateTask(targetTask);
|
|
} catch (error) {
|
|
console.error('Error moving subtask:', error);
|
|
}
|
|
}
|
|
}
|
|
|
|
async handleTaskReorder(e, targetIndex) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
e.currentTarget.classList.remove('drag-over');
|
|
|
|
if (!this.draggedTask) return;
|
|
|
|
const currentIndex = this.tasks.findIndex(t => t.id === this.draggedTask.id);
|
|
if (currentIndex === -1 || currentIndex === targetIndex) return;
|
|
|
|
this.tasks.splice(currentIndex, 1);
|
|
this.tasks.splice(targetIndex, 0, this.draggedTask);
|
|
|
|
try {
|
|
await fetch(`${API_URL}/tasks/reorder`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(this.tasks.map(t => t.id))
|
|
});
|
|
this.render();
|
|
} catch (error) {
|
|
console.error('Error reordering:', error);
|
|
await this.loadTasks();
|
|
}
|
|
}
|
|
|
|
async handleSubtaskReorder(e, parentTask, targetIndex) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
e.currentTarget.classList.remove('drag-over');
|
|
|
|
if (!this.draggedSubtask || !this.draggedParent) return;
|
|
if (this.draggedParent.id !== parentTask.id) return;
|
|
if (this.draggedSubtaskIndex === targetIndex) return;
|
|
|
|
const currentIndex = this.draggedSubtaskIndex;
|
|
const subtask = parentTask.subtasks[currentIndex];
|
|
|
|
parentTask.subtasks.splice(currentIndex, 1);
|
|
parentTask.subtasks.splice(targetIndex, 0, subtask);
|
|
|
|
await this.updateTask(parentTask);
|
|
}
|
|
|
|
// ─── Render: Active Tasks ───
|
|
|
|
renderTask(task, index) {
|
|
const progress = task.calculateProgress();
|
|
const isCompleted = progress === 100 || task.completed;
|
|
|
|
const card = document.createElement('div');
|
|
card.className = `task-card ${isCompleted ? 'completed' : ''}`;
|
|
card.draggable = true;
|
|
card.setAttribute('data-task-id', task.id);
|
|
|
|
// Drag events
|
|
card.addEventListener('dragstart', (e) => this.handleDragStart(e, task, false));
|
|
card.addEventListener('dragend', (e) => this.handleDragEnd(e));
|
|
card.addEventListener('dragover', (e) => this.handleCardDragOver(e));
|
|
card.addEventListener('dragleave', (e) => this.handleDragLeave(e));
|
|
card.addEventListener('dragenter', (e) => this.handleDragEnter(e, task.id));
|
|
card.addEventListener('drop', (e) => {
|
|
if (e.target.closest('.drop-zone')) {
|
|
this.handleDrop(e, task);
|
|
} else if (this.draggedTask && this.draggedTask.id !== task.id) {
|
|
this.handleTaskReorder(e, index);
|
|
}
|
|
});
|
|
card.addEventListener('contextmenu', (e) => {
|
|
if (!e.target.closest('.subtask')) {
|
|
this.showContextMenu(e, task, 'task');
|
|
}
|
|
});
|
|
card.addEventListener('dblclick', (e) => {
|
|
if (!e.target.closest('.subtask') && !e.target.closest('button')) {
|
|
this.openEditModal(task);
|
|
}
|
|
});
|
|
|
|
const descClass = task.expandDescription ? 'task-description expanded' : 'task-description';
|
|
|
|
card.innerHTML = `
|
|
<div class="task-header">
|
|
<div class="task-title">${this.escapeHtml(task.title)}</div>
|
|
<div class="task-meta">
|
|
<div class="task-size-badge ${task.size}">${task.size}</div>
|
|
</div>
|
|
</div>
|
|
${task.description ? `<div class="${descClass}">${this.escapeHtml(task.description)}</div>` : ''}
|
|
<div class="progress-row">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: ${progress}%"></div>
|
|
</div>
|
|
<div class="progress-text">${progress}%</div>
|
|
</div>
|
|
${task.reward ? `
|
|
<div class="reward-section">
|
|
<span>🎁</span>
|
|
${isCompleted
|
|
? `<span class="reward-revealed">${this.escapeHtml(task.reward)}</span>`
|
|
: `<span class="reward-hidden">Complete to reveal</span>`
|
|
}
|
|
</div>
|
|
` : ''}
|
|
<div class="task-actions">
|
|
<button class="btn-small btn-complete" onclick="app.toggleTaskComplete('${task.id}')">
|
|
${task.completed ? 'Undo' : 'Complete'}
|
|
</button>
|
|
${isCompleted ? `<button class="btn-small btn-archive" onclick="app.archiveTask('${task.id}')">Archive</button>` : ''}
|
|
</div>
|
|
`;
|
|
|
|
// Append subtasks as DOM nodes to preserve event listeners
|
|
if (task.subtasks.length > 0) {
|
|
card.appendChild(this.renderSubtasks(task));
|
|
}
|
|
|
|
// Drop zone
|
|
const dropZone = document.createElement('div');
|
|
dropZone.className = 'drop-zone';
|
|
dropZone.textContent = 'Drop tasks here to add as subtasks';
|
|
card.appendChild(dropZone);
|
|
|
|
return card;
|
|
}
|
|
|
|
renderSubtasks(task) {
|
|
const container = document.createElement('div');
|
|
container.className = 'subtasks-container';
|
|
|
|
task.subtasks.forEach((subtask, index) => {
|
|
const div = document.createElement('div');
|
|
div.className = 'subtask';
|
|
div.draggable = true;
|
|
div.setAttribute('data-subtask-id', subtask.id);
|
|
|
|
div.addEventListener('dragstart', (e) => {
|
|
e.stopPropagation();
|
|
this.handleDragStart(e, subtask, true, task, index);
|
|
});
|
|
div.addEventListener('dragend', (e) => {
|
|
e.stopPropagation();
|
|
this.handleDragEnd(e);
|
|
});
|
|
div.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (this.draggedSubtask && this.draggedParent && this.draggedParent.id === task.id) {
|
|
e.currentTarget.classList.add('drag-over');
|
|
}
|
|
});
|
|
div.addEventListener('dragleave', (e) => {
|
|
e.stopPropagation();
|
|
e.currentTarget.classList.remove('drag-over');
|
|
});
|
|
div.addEventListener('drop', (e) => {
|
|
e.stopPropagation();
|
|
this.handleSubtaskReorder(e, task, index);
|
|
});
|
|
div.addEventListener('contextmenu', (e) => {
|
|
e.stopPropagation();
|
|
this.showContextMenu(e, subtask, 'subtask', task);
|
|
});
|
|
div.addEventListener('dblclick', (e) => {
|
|
e.stopPropagation();
|
|
if (!e.target.closest('button')) {
|
|
this.openEditModal(subtask, task);
|
|
}
|
|
});
|
|
|
|
const progress = subtask.calculateProgress();
|
|
const stDescClass = subtask.expandDescription ? 'task-description expanded' : 'task-description';
|
|
|
|
div.innerHTML = `
|
|
<div class="subtask-header">
|
|
<div class="subtask-title">${this.escapeHtml(subtask.title)}</div>
|
|
<div class="task-size-badge ${subtask.size}">${subtask.size}</div>
|
|
</div>
|
|
${subtask.description ? `<div class="${stDescClass}">${this.escapeHtml(subtask.description)}</div>` : ''}
|
|
<div class="subtask-progress-row">
|
|
<div class="subtask-progress">
|
|
<div class="subtask-progress-fill" style="width: ${progress}%"></div>
|
|
</div>
|
|
<div class="progress-text" style="font-size:0.75em;">${progress}%</div>
|
|
</div>
|
|
${subtask.reward ? `
|
|
<div class="reward-section">
|
|
<span>🎁</span>
|
|
${subtask.completed
|
|
? `<span class="reward-revealed">${this.escapeHtml(subtask.reward)}</span>`
|
|
: `<span class="reward-hidden">Complete to reveal</span>`
|
|
}
|
|
</div>
|
|
` : ''}
|
|
<div class="subtask-actions">
|
|
<button class="btn-small btn-complete" onclick="event.stopPropagation(); app.toggleSubtaskComplete('${task.id}', '${subtask.id}')">
|
|
${subtask.completed ? 'Undo' : 'Complete'}
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
container.appendChild(div);
|
|
});
|
|
|
|
return container;
|
|
}
|
|
|
|
render() {
|
|
const container = document.getElementById('tasks-container');
|
|
container.innerHTML = '';
|
|
|
|
if (this.tasks.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<h2>No goals yet</h2>
|
|
<p>Click "+ New Goal" to get started</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
this.tasks.forEach((task, index) => {
|
|
container.appendChild(this.renderTask(task, index));
|
|
});
|
|
}
|
|
|
|
// ─── Render: Archive View ───
|
|
|
|
renderArchivedTask(task) {
|
|
const progress = task.calculateProgress();
|
|
const isCompleted = progress === 100 || task.completed;
|
|
|
|
const card = document.createElement('div');
|
|
card.className = `task-card archived-card ${isCompleted ? 'completed' : ''}`;
|
|
card.setAttribute('data-task-id', task.id);
|
|
|
|
card.addEventListener('contextmenu', (e) => {
|
|
if (!e.target.closest('.subtask')) {
|
|
this.showContextMenu(e, task, 'task');
|
|
}
|
|
});
|
|
card.addEventListener('dblclick', (e) => {
|
|
if (!e.target.closest('.subtask') && !e.target.closest('button')) {
|
|
this.openEditModal(task);
|
|
}
|
|
});
|
|
|
|
const descClass = task.expandDescription ? 'task-description expanded' : 'task-description';
|
|
|
|
card.innerHTML = `
|
|
<div class="task-header">
|
|
<div class="task-title">${this.escapeHtml(task.title)}</div>
|
|
<div class="task-meta">
|
|
<div class="task-size-badge ${task.size}">${task.size}</div>
|
|
</div>
|
|
</div>
|
|
${task.description ? `<div class="${descClass}">${this.escapeHtml(task.description)}</div>` : ''}
|
|
<div class="progress-row">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: ${progress}%"></div>
|
|
</div>
|
|
<div class="progress-text">${progress}%</div>
|
|
</div>
|
|
${task.reward ? `
|
|
<div class="reward-section">
|
|
<span>🎁</span>
|
|
${isCompleted
|
|
? `<span class="reward-revealed">${this.escapeHtml(task.reward)}</span>`
|
|
: `<span class="reward-hidden">Complete to reveal</span>`
|
|
}
|
|
</div>
|
|
` : ''}
|
|
<div class="task-actions">
|
|
<button class="btn-small btn-restore" onclick="app.unarchiveTask('${task.id}')">Restore</button>
|
|
<button class="btn-small btn-delete" onclick="if(confirm('Delete permanently?')) app.deleteTask('${task.id}')">Delete</button>
|
|
</div>
|
|
`;
|
|
|
|
// Subtasks (read-only, no drag)
|
|
if (task.subtasks.length > 0) {
|
|
card.appendChild(this.renderArchivedSubtasks(task));
|
|
}
|
|
|
|
return card;
|
|
}
|
|
|
|
renderArchivedSubtasks(task) {
|
|
const container = document.createElement('div');
|
|
container.className = 'subtasks-container';
|
|
|
|
task.subtasks.forEach((subtask) => {
|
|
const div = document.createElement('div');
|
|
div.className = 'subtask';
|
|
div.style.cursor = 'default';
|
|
|
|
div.addEventListener('contextmenu', (e) => {
|
|
e.stopPropagation();
|
|
this.showContextMenu(e, subtask, 'subtask', task);
|
|
});
|
|
div.addEventListener('dblclick', (e) => {
|
|
e.stopPropagation();
|
|
if (!e.target.closest('button')) {
|
|
this.openEditModal(subtask, task);
|
|
}
|
|
});
|
|
|
|
const progress = subtask.calculateProgress();
|
|
const stDescClass = subtask.expandDescription ? 'task-description expanded' : 'task-description';
|
|
|
|
div.innerHTML = `
|
|
<div class="subtask-header">
|
|
<div class="subtask-title">${this.escapeHtml(subtask.title)}</div>
|
|
<div class="task-size-badge ${subtask.size}">${subtask.size}</div>
|
|
</div>
|
|
${subtask.description ? `<div class="${stDescClass}">${this.escapeHtml(subtask.description)}</div>` : ''}
|
|
<div class="subtask-progress-row">
|
|
<div class="subtask-progress">
|
|
<div class="subtask-progress-fill" style="width: ${progress}%"></div>
|
|
</div>
|
|
<div class="progress-text" style="font-size:0.75em;">${progress}%</div>
|
|
</div>
|
|
${subtask.reward ? `
|
|
<div class="reward-section">
|
|
<span>🎁</span>
|
|
${subtask.completed
|
|
? `<span class="reward-revealed">${this.escapeHtml(subtask.reward)}</span>`
|
|
: `<span class="reward-hidden">Complete to reveal</span>`
|
|
}
|
|
</div>
|
|
` : ''}
|
|
`;
|
|
|
|
container.appendChild(div);
|
|
});
|
|
|
|
return container;
|
|
}
|
|
|
|
renderArchive() {
|
|
const container = document.getElementById('tasks-container');
|
|
container.innerHTML = '';
|
|
|
|
if (this.archivedTasks.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<h2>Archive is empty</h2>
|
|
<p>Completed tasks you archive will appear here</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
this.archivedTasks.forEach(task => {
|
|
container.appendChild(this.renderArchivedTask(task));
|
|
});
|
|
}
|
|
|
|
// ─── Utility ───
|
|
|
|
showError() {
|
|
const container = document.getElementById('tasks-container');
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<h2>Connection Error</h2>
|
|
<p>Cannot connect to server</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
}
|
|
|
|
const app = new App(); |