511 lines
17 KiB
JavaScript
511 lines
17 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.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, subtask) => sum + subtask.getProgressWeight(), 0);
|
|
const completedWeight = this.subtasks.reduce((sum, subtask) => {
|
|
return sum + (subtask.completed ? subtask.getProgressWeight() : 0);
|
|
}, 0);
|
|
|
|
return totalWeight > 0 ? Math.round((completedWeight / totalWeight) * 100) : 0;
|
|
}
|
|
|
|
addSubtask(subtask) {
|
|
this.subtasks.push(subtask);
|
|
}
|
|
|
|
removeSubtask(subtaskId) {
|
|
this.subtasks = this.subtasks.filter(st => st.id !== subtaskId);
|
|
}
|
|
|
|
toggleComplete() {
|
|
this.completed = !this.completed;
|
|
if (this.completed && this.subtasks.length > 0) {
|
|
this.subtasks.forEach(st => st.completed = true);
|
|
}
|
|
}
|
|
}
|
|
|
|
class App {
|
|
constructor() {
|
|
this.tasks = [];
|
|
this.draggedTask = null;
|
|
this.draggedSubtask = null;
|
|
this.draggedParent = null;
|
|
this.init();
|
|
}
|
|
|
|
async init() {
|
|
this.setupEventListeners();
|
|
await this.loadTasks();
|
|
}
|
|
|
|
setupEventListeners() {
|
|
const form = document.getElementById('task-form');
|
|
const openSidebar = document.getElementById('open-sidebar');
|
|
const closeSidebar = document.getElementById('close-sidebar');
|
|
const overlay = document.getElementById('overlay');
|
|
|
|
form.addEventListener('submit', (e) => this.handleSubmit(e));
|
|
openSidebar.addEventListener('click', () => this.toggleSidebar(true));
|
|
closeSidebar.addEventListener('click', () => this.toggleSidebar(false));
|
|
overlay.addEventListener('click', () => this.toggleSidebar(false));
|
|
}
|
|
|
|
toggleSidebar(open) {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const overlay = document.getElementById('overlay');
|
|
|
|
if (open) {
|
|
sidebar.classList.add('open');
|
|
overlay.classList.add('active');
|
|
} else {
|
|
sidebar.classList.remove('open');
|
|
overlay.classList.remove('active');
|
|
}
|
|
}
|
|
|
|
async handleSubmit(e) {
|
|
e.preventDefault();
|
|
|
|
const title = document.getElementById('task-title').value;
|
|
const description = document.getElementById('task-description').value;
|
|
const size = document.getElementById('task-size').value;
|
|
const reward = document.getElementById('task-reward').value;
|
|
|
|
try {
|
|
const response = await fetch(`${API_URL}/tasks`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ title, description, size, reward })
|
|
});
|
|
|
|
if (response.ok) {
|
|
await this.loadTasks();
|
|
e.target.reset();
|
|
this.toggleSidebar(false);
|
|
} else {
|
|
alert('Failed to create task');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error creating task:', error);
|
|
alert('Failed to create task');
|
|
}
|
|
}
|
|
|
|
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;
|
|
|
|
if (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;
|
|
return subtask;
|
|
});
|
|
}
|
|
|
|
return task;
|
|
});
|
|
|
|
this.render();
|
|
} catch (error) {
|
|
console.error('Error loading tasks:', error);
|
|
this.showError();
|
|
}
|
|
}
|
|
|
|
async deleteTask(taskId) {
|
|
if (!confirm('Are you sure you want to delete this task?')) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`${API_URL}/tasks/${taskId}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (response.ok) {
|
|
await this.loadTasks();
|
|
} else {
|
|
alert('Failed to delete task');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error deleting task:', error);
|
|
alert('Failed to delete task');
|
|
}
|
|
}
|
|
|
|
async toggleTaskComplete(taskId) {
|
|
const task = this.tasks.find(t => t.id === taskId);
|
|
if (!task) return;
|
|
|
|
task.toggleComplete();
|
|
|
|
try {
|
|
const response = await fetch(`${API_URL}/tasks/${taskId}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(task)
|
|
});
|
|
|
|
if (response.ok) {
|
|
await this.loadTasks();
|
|
} else {
|
|
alert('Failed to update task');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error updating task:', error);
|
|
alert('Failed to update task');
|
|
}
|
|
}
|
|
|
|
async toggleSubtaskComplete(taskId, subtaskId) {
|
|
const task = this.tasks.find(t => t.id === taskId);
|
|
if (!task) return;
|
|
|
|
const subtask = task.subtasks.find(st => st.id === subtaskId);
|
|
if (!subtask) return;
|
|
|
|
subtask.completed = !subtask.completed;
|
|
|
|
try {
|
|
const response = await fetch(`${API_URL}/tasks/${taskId}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(task)
|
|
});
|
|
|
|
if (response.ok) {
|
|
await this.loadTasks();
|
|
} else {
|
|
alert('Failed to update subtask');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error updating subtask:', error);
|
|
alert('Failed to update subtask');
|
|
}
|
|
}
|
|
|
|
async deleteSubtask(taskId, subtaskId) {
|
|
const task = this.tasks.find(t => t.id === taskId);
|
|
if (!task) return;
|
|
|
|
task.removeSubtask(subtaskId);
|
|
|
|
try {
|
|
const response = await fetch(`${API_URL}/tasks/${taskId}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(task)
|
|
});
|
|
|
|
if (response.ok) {
|
|
await this.loadTasks();
|
|
} else {
|
|
alert('Failed to delete subtask');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error deleting subtask:', error);
|
|
alert('Failed to delete subtask');
|
|
}
|
|
}
|
|
|
|
handleDragStart(e, task, isSubtask = false, parentTask = null) {
|
|
if (isSubtask) {
|
|
this.draggedSubtask = task;
|
|
this.draggedParent = parentTask;
|
|
} else {
|
|
this.draggedTask = task;
|
|
}
|
|
e.target.classList.add('dragging');
|
|
}
|
|
|
|
handleDragEnd(e) {
|
|
e.target.classList.remove('dragging');
|
|
this.draggedTask = null;
|
|
this.draggedSubtask = null;
|
|
this.draggedParent = null;
|
|
|
|
document.querySelectorAll('.drag-over').forEach(el => {
|
|
el.classList.remove('drag-over');
|
|
});
|
|
}
|
|
|
|
handleDragOver(e) {
|
|
e.preventDefault();
|
|
e.currentTarget.classList.add('drag-over');
|
|
}
|
|
|
|
handleDragLeave(e) {
|
|
e.currentTarget.classList.remove('drag-over');
|
|
}
|
|
|
|
async handleDrop(e, targetTask) {
|
|
e.preventDefault();
|
|
e.currentTarget.classList.remove('drag-over');
|
|
|
|
if (this.draggedTask && this.draggedTask.id !== targetTask.id) {
|
|
targetTask.addSubtask(this.draggedTask);
|
|
this.tasks = this.tasks.filter(t => t.id !== this.draggedTask.id);
|
|
|
|
try {
|
|
await fetch(`${API_URL}/tasks/${this.draggedTask.id}`, { method: 'DELETE' });
|
|
await fetch(`${API_URL}/tasks/${targetTask.id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(targetTask)
|
|
});
|
|
await this.loadTasks();
|
|
} catch (error) {
|
|
console.error('Error moving task:', error);
|
|
alert('Failed to move task');
|
|
}
|
|
} else if (this.draggedSubtask && this.draggedParent) {
|
|
if (targetTask.id !== this.draggedParent.id) {
|
|
this.draggedParent.removeSubtask(this.draggedSubtask.id);
|
|
targetTask.addSubtask(this.draggedSubtask);
|
|
|
|
try {
|
|
await fetch(`${API_URL}/tasks/${this.draggedParent.id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(this.draggedParent)
|
|
});
|
|
await fetch(`${API_URL}/tasks/${targetTask.id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(targetTask)
|
|
});
|
|
await this.loadTasks();
|
|
} catch (error) {
|
|
console.error('Error moving subtask:', error);
|
|
alert('Failed to move subtask');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
async handleTaskReorder(e, targetIndex) {
|
|
e.preventDefault();
|
|
e.currentTarget.classList.remove('drag-over');
|
|
|
|
if (this.draggedTask) {
|
|
const currentIndex = this.tasks.findIndex(t => t.id === this.draggedTask.id);
|
|
if (currentIndex !== -1 && currentIndex !== targetIndex) {
|
|
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))
|
|
});
|
|
await this.loadTasks();
|
|
} catch (error) {
|
|
console.error('Error reordering tasks:', error);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
renderTask(task, index) {
|
|
const progress = task.calculateProgress();
|
|
const isCompleted = progress === 100 || task.completed;
|
|
|
|
const taskCard = document.createElement('div');
|
|
taskCard.className = `task-card ${isCompleted ? 'completed' : ''}`;
|
|
taskCard.draggable = true;
|
|
|
|
taskCard.addEventListener('dragstart', (e) => this.handleDragStart(e, task));
|
|
taskCard.addEventListener('dragend', (e) => this.handleDragEnd(e));
|
|
taskCard.addEventListener('dragover', (e) => this.handleDragOver(e));
|
|
taskCard.addEventListener('dragleave', (e) => this.handleDragLeave(e));
|
|
taskCard.addEventListener('drop', (e) => {
|
|
if (this.draggedTask && this.draggedTask.id !== task.id) {
|
|
this.handleDrop(e, task);
|
|
} else {
|
|
this.handleTaskReorder(e, index);
|
|
}
|
|
});
|
|
|
|
taskCard.innerHTML = `
|
|
<div class="task-header">
|
|
<div class="task-title">${this.escapeHtml(task.title)}</div>
|
|
<div class="task-size-badge ${task.size}">${task.size}</div>
|
|
</div>
|
|
|
|
${task.description ? `<div class="task-description">${this.escapeHtml(task.description)}</div>` : ''}
|
|
|
|
<div class="progress-section">
|
|
<div class="progress-label">
|
|
<span>Progress</span>
|
|
<span>${progress}%</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: ${progress}%">
|
|
${progress > 20 ? progress + '%' : ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
${task.reward ? `
|
|
<div class="reward-section">
|
|
<strong>🎁 Reward:</strong>
|
|
${isCompleted
|
|
? `<span class="reward-revealed">${this.escapeHtml(task.reward)}</span>`
|
|
: `<span class="reward-hidden">Complete to reveal your reward!</span>`
|
|
}
|
|
</div>
|
|
` : ''}
|
|
|
|
<div class="task-actions">
|
|
<button class="btn-small btn-complete" onclick="app.toggleTaskComplete('${task.id}')">
|
|
${task.completed ? '↩️ Uncomplete' : '✓ Complete'}
|
|
</button>
|
|
<button class="btn-small btn-delete" onclick="app.deleteTask('${task.id}')">
|
|
🗑️ Delete
|
|
</button>
|
|
</div>
|
|
|
|
${task.subtasks.length > 0 ? this.renderSubtasks(task) : ''}
|
|
|
|
<div class="drop-zone"
|
|
ondragover="event.preventDefault(); event.currentTarget.classList.add('drag-over')"
|
|
ondragleave="event.currentTarget.classList.remove('drag-over')"
|
|
ondrop="app.handleDrop(event, app.tasks.find(t => t.id === '${task.id}'))">
|
|
📥 Drop tasks here to create subtasks
|
|
</div>
|
|
`;
|
|
|
|
return taskCard;
|
|
}
|
|
|
|
renderSubtasks(task) {
|
|
const container = document.createElement('div');
|
|
container.className = 'subtasks-container';
|
|
|
|
task.subtasks.forEach(subtask => {
|
|
const subtaskDiv = document.createElement('div');
|
|
subtaskDiv.className = 'subtask';
|
|
subtaskDiv.draggable = true;
|
|
|
|
subtaskDiv.addEventListener('dragstart', (e) => this.handleDragStart(e, subtask, true, task));
|
|
subtaskDiv.addEventListener('dragend', (e) => this.handleDragEnd(e));
|
|
|
|
const progress = subtask.calculateProgress();
|
|
|
|
subtaskDiv.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="task-description" style="font-size: 0.9em; margin-bottom: 8px;">${this.escapeHtml(subtask.description)}</div>` : ''}
|
|
|
|
<div class="subtask-progress">
|
|
<div class="subtask-progress-fill" style="width: ${progress}%"></div>
|
|
</div>
|
|
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" ${subtask.completed ? 'checked' : ''}
|
|
onchange="app.toggleSubtaskComplete('${task.id}', '${subtask.id}')">
|
|
<label>${progress}% complete</label>
|
|
</div>
|
|
|
|
${subtask.reward && subtask.completed ? `
|
|
<div style="font-size: 0.85em; color: #28a745; margin-top: 5px;">
|
|
🎁 ${this.escapeHtml(subtask.reward)}
|
|
</div>
|
|
` : ''}
|
|
|
|
<button class="btn-small btn-delete" style="margin-top: 8px;"
|
|
onclick="app.deleteSubtask('${task.id}', '${subtask.id}')">
|
|
Remove Subtask
|
|
</button>
|
|
`;
|
|
|
|
container.appendChild(subtaskDiv);
|
|
});
|
|
|
|
return container.outerHTML;
|
|
}
|
|
|
|
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 the "+ New Goal" button to create your first learning goal 🚀</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
this.tasks.forEach((task, index) => {
|
|
container.appendChild(this.renderTask(task, index));
|
|
});
|
|
}
|
|
|
|
showError() {
|
|
const container = document.getElementById('tasks-container');
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<h2>⚠️ Connection Error</h2>
|
|
<p>Unable to load your goals. Please check if the server is running.</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
}
|
|
|
|
const app = new App(); |