First Commit

public/app.js

@@ -0,0 +1,511 @@
+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();