feat: refactor dashboard with enhanced wiki, agents, and usage views
- Added comprehensive wiki backend with CRUD operations (GET, POST, PUT, DELETE) - Enhanced agents backend with workload tracking, task history, and capabilities - Implemented usage tracking with SQLite database and statistics endpoints - Added wiki frontend with markdown editor, page management, and search - Enhanced agents frontend with search, filtering, task assignment, and detailed modals - Enhanced usage frontend with charts (Chart.js), date filtering, and export functionality - Updated styles for all new components with responsive design - Added new API endpoints: /api/wiki/*, /api/usage/stats, /api/usage/agents, /api/usage/export - Enhanced /api/agents with workload and task history data - Maintained backwards compatibility with existing task management features The refactoring includes: - Wiki: Full CRUD operations with markdown support - Agents: Search, workload tracking, task assignment modals - Usage: Charts, statistics, date range filtering, CSV/JSON export - Styles: Responsive design with dark theme support
This commit is contained in:
279
public/app.js.backup
Normal file
279
public/app.js.backup
Normal file
@@ -0,0 +1,279 @@
|
||||
// Navigation
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
const pages = document.querySelectorAll('.page');
|
||||
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const targetPage = link.dataset.page;
|
||||
|
||||
// Update active nav link
|
||||
navLinks.forEach(l => l.classList.remove('active'));
|
||||
link.classList.add('active');
|
||||
|
||||
// Show target page
|
||||
pages.forEach(page => {
|
||||
page.classList.remove('active');
|
||||
if (page.id === `page-${targetPage}`) {
|
||||
page.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Load page data
|
||||
if (targetPage === 'wiki') loadWiki();
|
||||
if (targetPage === 'agents') loadAgents();
|
||||
if (targetPage === 'usage') loadUsage();
|
||||
});
|
||||
});
|
||||
|
||||
// Task Dashboard
|
||||
const COLUMNS = {
|
||||
'Backlog': { title: '📋 Backlog', tasks: [] },
|
||||
'Todo': { title: '📝 Todo', tasks: [] },
|
||||
'In Progress': { title: '🔄 In Progress', tasks: [] },
|
||||
'Review': { title: '👀 Review', tasks: [] },
|
||||
'Done': { title: '✅ Done', tasks: [] }
|
||||
};
|
||||
|
||||
async function loadTasks() {
|
||||
const res = await fetch('/api/tasks');
|
||||
const tasks = await res.json();
|
||||
|
||||
// Reset columns
|
||||
Object.keys(COLUMNS).forEach(status => {
|
||||
COLUMNS[status].tasks = [];
|
||||
});
|
||||
|
||||
// Group tasks by status
|
||||
tasks.forEach(task => {
|
||||
if (COLUMNS[task.status]) {
|
||||
COLUMNS[task.status].tasks.push(task);
|
||||
}
|
||||
});
|
||||
|
||||
renderBoard();
|
||||
}
|
||||
|
||||
function renderBoard() {
|
||||
const board = document.getElementById('board');
|
||||
board.innerHTML = '';
|
||||
|
||||
Object.entries(COLUMNS).forEach(([status, column]) => {
|
||||
const columnEl = document.createElement('div');
|
||||
columnEl.className = 'column';
|
||||
|
||||
columnEl.innerHTML = `
|
||||
<div class="column-header">
|
||||
<h3>${column.title}</h3>
|
||||
<span class="column-count">${column.tasks.length}</span>
|
||||
</div>
|
||||
<div class="cards"></div>
|
||||
`;
|
||||
|
||||
const cardsEl = columnEl.querySelector('.cards');
|
||||
|
||||
column.tasks.forEach(task => {
|
||||
const cardEl = document.createElement('div');
|
||||
cardEl.className = 'card';
|
||||
cardEl.innerHTML = `
|
||||
<div class="card-head">
|
||||
<h3 class="card-title">${escapeHtml(task.title)}</h3>
|
||||
<span class="badge priority-${task.priority}">${task.priority}</span>
|
||||
</div>
|
||||
<p class="card-desc">${escapeHtml(task.description || '')}</p>
|
||||
<p class="meta assignee">${task.assignee || 'Unassigned'}</p>
|
||||
<p class="meta tags">${task.tags.map(t => `<span class="tag">${escapeHtml(t)}</span>`).join(' ')}</p>
|
||||
<label>
|
||||
<input type="checkbox" class="card-check" ${task.status === 'Done' ? 'checked' : ''} />
|
||||
Mark Complete
|
||||
</label>
|
||||
`;
|
||||
|
||||
// Checkbox handler
|
||||
const checkbox = cardEl.querySelector('.card-check');
|
||||
checkbox.addEventListener('change', async () => {
|
||||
await fetch(`/api/tasks/${task.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ status: 'Done' })
|
||||
});
|
||||
loadTasks();
|
||||
});
|
||||
|
||||
cardsEl.appendChild(cardEl);
|
||||
});
|
||||
|
||||
board.appendChild(columnEl);
|
||||
});
|
||||
}
|
||||
|
||||
// Task form
|
||||
document.getElementById('task-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = new FormData(e.target);
|
||||
const task = {
|
||||
title: formData.get('title'),
|
||||
description: formData.get('description'),
|
||||
assignee: formData.get('assignee'),
|
||||
priority: formData.get('priority'),
|
||||
status: formData.get('status'),
|
||||
tags: formData.get('tags').split(',').map(t => t.trim()).filter(t => t)
|
||||
};
|
||||
|
||||
await fetch('/api/tasks', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(task)
|
||||
});
|
||||
|
||||
e.target.reset();
|
||||
loadTasks();
|
||||
});
|
||||
|
||||
// Populate agent dropdown
|
||||
async function populateAgentDropdown() {
|
||||
try {
|
||||
const res = await fetch('/api/agents');
|
||||
const agents = await res.json();
|
||||
|
||||
const select = document.getElementById('assignee');
|
||||
if (!select) return;
|
||||
|
||||
// Keep the first option ("Select agent...")
|
||||
const firstOption = select.options[0];
|
||||
select.innerHTML = '';
|
||||
select.appendChild(firstOption);
|
||||
|
||||
// Add agent options
|
||||
agents.forEach(agent => {
|
||||
const option = document.createElement('option');
|
||||
option.value = agent.name;
|
||||
option.textContent = agent.name;
|
||||
select.appendChild(option);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Failed to load agents for dropdown:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// Populate dropdown on page load
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
populateAgentDropdown();
|
||||
});
|
||||
|
||||
// Wiki
|
||||
async function loadWiki() {
|
||||
const res = await fetch('/api/wiki');
|
||||
const pages = await res.json();
|
||||
|
||||
const wikiList = document.getElementById('wiki-list');
|
||||
wikiList.innerHTML = '';
|
||||
|
||||
pages.forEach(page => {
|
||||
const itemEl = document.createElement('div');
|
||||
itemEl.className = 'wiki-item';
|
||||
itemEl.innerHTML = `
|
||||
<h4 class="wiki-title">${escapeHtml(page.filename.replace('.md', ''))}</h4>
|
||||
<p class="wiki-date">${new Date(page.created).toLocaleDateString()}</p>
|
||||
`;
|
||||
|
||||
itemEl.addEventListener('click', async () => {
|
||||
// Mark active
|
||||
wikiList.querySelectorAll('.wiki-item').forEach(i => i.classList.remove('active'));
|
||||
itemEl.classList.add('active');
|
||||
|
||||
// Load content
|
||||
const contentRes = await fetch(`/api/wiki/${page.filename}`);
|
||||
const contentData = await contentRes.json();
|
||||
|
||||
const wikiContent = document.getElementById('wiki-content');
|
||||
wikiContent.innerHTML = `<pre>${escapeHtml(contentData.content)}</pre>`;
|
||||
});
|
||||
|
||||
wikiList.appendChild(itemEl);
|
||||
});
|
||||
}
|
||||
|
||||
// Agents
|
||||
async function loadAgents() {
|
||||
const res = await fetch('/api/agents');
|
||||
const agents = await res.json();
|
||||
|
||||
const grid = document.getElementById('agents-grid');
|
||||
grid.innerHTML = '';
|
||||
|
||||
agents.forEach(agent => {
|
||||
const cardEl = document.createElement('div');
|
||||
cardEl.className = 'agent-card';
|
||||
|
||||
cardEl.innerHTML = `
|
||||
<div class="agent-header">
|
||||
<h3 class="agent-name">${escapeHtml(agent.name)}</h3>
|
||||
<span class="agent-status">${agent.status}</span>
|
||||
</div>
|
||||
<div class="agent-body">
|
||||
<div class="agent-section">
|
||||
<h4>📋 Current Task</h4>
|
||||
<p class="agent-task">${agent.currentTask || 'No active task'}</p>
|
||||
</div>
|
||||
<div class="agent-section">
|
||||
<h4>🛠️ Tools</h4>
|
||||
<div class="agent-tools">
|
||||
${agent.tools.map(tool => `<span class="tool-tag">${escapeHtml(tool)}</span>`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
<div class="agent-section">
|
||||
<h4>📄 Workspace Files</h4>
|
||||
<div class="agent-files">
|
||||
${agent.files.map(file => `<span class="file-tag">${escapeHtml(file)}</span>`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
grid.appendChild(cardEl);
|
||||
});
|
||||
}
|
||||
|
||||
// Usage
|
||||
async function loadUsage() {
|
||||
const res = await fetch('/api/usage');
|
||||
const usage = await res.json();
|
||||
|
||||
const usageData = document.getElementById('usage-data');
|
||||
usageData.innerHTML = `
|
||||
<h3>📊 Provider Usage</h3>
|
||||
<div class="usage-grid">
|
||||
${usage.providers.map(provider => `
|
||||
<div class="provider-card">
|
||||
<h4>${escapeHtml(provider.name)}</h4>
|
||||
<div class="model-list">
|
||||
${provider.models.map(model => `
|
||||
<div class="model-item">
|
||||
<span class="model-name">${escapeHtml(model.name)}</span>
|
||||
<span class="model-type">${escapeHtml(model.type)}</span>
|
||||
<span class="model-context">${escapeHtml(model.contextWindow)}</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Helper function to escape HTML
|
||||
function escapeHtml(text) {
|
||||
const map = {
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
'"': '"',
|
||||
"'": '''
|
||||
};
|
||||
return text.replace(/[&<>"']/g, m => map[m]);
|
||||
}
|
||||
|
||||
// Initial load
|
||||
loadTasks();
|
||||
Reference in New Issue
Block a user