TopherMayor/openclaw-taskboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: separate routes for each section #3

Closed
TopherMayor wants to merge 1 commits from feat/separate-routes into main
pull from: feat/separate-routes
merge into: TopherMayor:main
Conversation 0 Commits 1 Files Changed 9 +2598 -35
9 changed files with 2598 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
TASK.md Normal file
View File

@@ -0,0 +1,38 @@
# Task: Separate Routes for Each Section
## Current State
- Single page app with client-side navigation
- Navigation links: Tasks, Wiki, Agents, Usage
- All content in one index.html
## Required Changes
1. Add Express routes in server.js:
- GET /tasks - Renders tasks page with kanban board
- GET /wiki - Renders wiki page with documentation list
- GET /agents - Renders agents page with agent cards
- GET /usage - Renders usage page with provider info
- GET / - Redirect to /tasks or render tasks page
2. Create separate HTML templates or use template rendering:
- Each page should have its own route
- Navigation should use standard anchor links (href=/tasks, etc.)
- Remove client-side navigation JavaScript
3. Keep API endpoints unchanged:
- /api/tasks, /api/wiki, /api/agents, /api/usage remain as JSON APIs
- Pages can fetch data client-side from these APIs after loading
4. Remove SPA logic from app.js:
- Remove nav-link click handlers
- Remove page switching logic
- Keep only data loading for each page
## Files to Modify
- server.js - Add route handlers for each page
- public/index.html - Either split or make it a template
- public/app.js - Remove SPA navigation, keep data loading
## After Completion
git add -A
git commit -m "feat: separate routes for each section"
git push origin feat/separate-routes

2322
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

32
public/agents.html Normal file
View File

@@ -0,0 +1,32 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Agents - OpenClaw Agent Fleet Dashboard</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<nav class="navbar">
<div class="nav-brand">
<h1>🦞 OpenClaw Fleet Dashboard</h1>
</div>
<div class="nav-links">
<a href="/tasks" class="nav-link">📋 Tasks</a>
<a href="/wiki" class="nav-link">📚 Wiki</a>
<a href="/agents" class="nav-link active">🤖 Agents</a>
<a href="/usage" class="nav-link">📊 Usage</a>
</div>
</nav>
<div class="page active">
<header class="topbar">
<h2>🤖 Agents</h2>
<p>Fleet agent workspace and configuration</p>
</header>
<div class="agents-grid" id="agents-grid"></div>
</div>
<script src="/app.js"></script>
</body>
</html>

50
public/app.js
View File

@@ -1,31 +1,3 @@
// 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 // Task Dashboard
const COLUMNS = { const COLUMNS = {
'Backlog': { title: '📋 Backlog', tasks: [] }, 'Backlog': { title: '📋 Backlog', tasks: [] },
@@ -259,8 +231,21 @@ function escapeHtml(text) {
return div.innerHTML; return div.innerHTML;
} }
// Initialize // Initialize based on current page
loadTasks(); const path = window.location.pathname;
if (path === '/tasks' || path === '/') {
loadTasks();
} else if (path === '/wiki') {
loadWiki();
} else if (path === '/agents') {
loadAgents();
} else if (path === '/usage') {
loadUsage();
}
// Populate agent dropdown
populateAgentDropdown();
// WebSocket for real-time updates // WebSocket for real-time updates
const ws = new WebSocket(`ws://${window.location.host}`); const ws = new WebSocket(`ws://${window.location.host}`);
@@ -294,8 +279,3 @@ async function populateAgentDropdown() {
console.error('Failed to load agents for dropdown:', err); console.error('Failed to load agents for dropdown:', err);
} }
} }
// Populate dropdown on page load
document.addEventListener('DOMContentLoaded', () => {
populateAgentDropdown();
});

0
public/index.html → public/index.html.old
View File

59
public/tasks.html Normal file
View File

@@ -0,0 +1,59 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tasks - OpenClaw Agent Fleet Dashboard</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<nav class="navbar">
<div class="nav-brand">
<h1>🦞 OpenClaw Fleet Dashboard</h1>
</div>
<div class="nav-links">
<a href="/tasks" class="nav-link active">📋 Tasks</a>
<a href="/wiki" class="nav-link">📚 Wiki</a>
<a href="/agents" class="nav-link">🤖 Agents</a>
<a href="/usage" class="nav-link">📊 Usage</a>
</div>
</nav>
<div class="page active">
<header class="topbar">
<h2>Task Dashboard</h2>
<p>Real-time task coordination board</p>
</header>
<section class="composer">
<h3>Create Task</h3>
<form id="task-form">
<input id="title" name="title" placeholder="Task title" required />
<select id="assignee" name="assignee">
<option value="">Select agent...</option>
</select>
<select id="priority" name="priority">
<option>Low</option>
<option selected>Medium</option>
<option>High</option>
<option>Critical</option>
</select>
<select id="status" name="status">
<option selected>Backlog</option>
<option>Todo</option>
<option>In Progress</option>
<option>Review</option>
<option>Done</option>
</select>
<input id="tags" name="tags" placeholder="tags, comma, separated" />
<textarea id="description" name="description" placeholder="Description"></textarea>
<button type="submit">Add Task</button>
</form>
</section>
<main id="board" class="board"></main>
</div>
<script src="/app.js"></script>
</body>
</html>

32
public/usage.html Normal file
View File

@@ -0,0 +1,32 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Usage - OpenClaw Agent Fleet Dashboard</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<nav class="navbar">
<div class="nav-brand">
<h1>🦞 OpenClaw Fleet Dashboard</h1>
</div>
<div class="nav-links">
<a href="/tasks" class="nav-link">📋 Tasks</a>
<a href="/wiki" class="nav-link">📚 Wiki</a>
<a href="/agents" class="nav-link">🤖 Agents</a>
<a href="/usage" class="nav-link active">📊 Usage</a>
</div>
</nav>
<div class="page active">
<header class="topbar">
<h2>📊 Usage & Quotas</h2>
<p>Provider models, quotas, and limits</p>
</header>
<div class="usage-container" id="usage-container"></div>
</div>
<script src="/app.js"></script>
</body>
</html>

37
public/wiki.html Normal file
View File

@@ -0,0 +1,37 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wiki - OpenClaw Agent Fleet Dashboard</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<nav class="navbar">
<div class="nav-brand">
<h1>🦞 OpenClaw Fleet Dashboard</h1>
</div>
<div class="nav-links">
<a href="/tasks" class="nav-link">📋 Tasks</a>
<a href="/wiki" class="nav-link active">📚 Wiki</a>
<a href="/agents" class="nav-link">🤖 Agents</a>
<a href="/usage" class="nav-link">📊 Usage</a>
</div>
</nav>
<div class="page active">
<header class="topbar">
<h2>📚 Wiki</h2>
<p>Task documentation and implementation details</p>
</header>
<div class="wiki-container">
<div class="wiki-list" id="wiki-list"></div>
<div class="wiki-content" id="wiki-content">
<p>Select a wiki page to view documentation</p>
</div>
</div>
</div>
<script src="/app.js"></script>
</body>
</html>

63
server.js
View File

@@ -43,6 +43,26 @@ const wss = new WebSocketServer({ server });
app.use(express.json()); app.use(express.json());
app.use(express.static(path.join(__dirname, 'public'))); app.use(express.static(path.join(__dirname, 'public')));
app.get('/tasks', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'tasks.html'));
});
app.get('/wiki', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'wiki.html'));
});
app.get('/agents', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'agents.html'));
});
app.get('/usage', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'usage.html'));
});
app.get('/', (req, res) => {
res.redirect('/tasks');
});
function normalizeTask(row) { function normalizeTask(row) {
return { return {
...row, ...row,
@@ -122,6 +142,49 @@ app.get('/api/tasks', (req, res) => {
}); });
}); });
app.get('/api/wiki', (req, res) => {
try {
const files = [];
if (fs.existsSync(WIKI_DIR)) {
const wikiFiles = fs.readdirSync(WIKI_DIR).filter(f => f.endsWith('.md'));
wikiFiles.forEach(filename => {
const filePath = path.join(WIKI_DIR, filename);
const stats = fs.statSync(filePath);
files.push({
filename,
created: stats.mtime.toISOString()
});
});
files.sort((a, b) => new Date(b.created) - new Date(a.created));
}
res.json(files);
} catch (err) {
console.error('Error reading wiki:', err);
res.status(500).json({ error: 'failed_to_fetch_wiki' });
}
});
app.get('/api/wiki/:filename', (req, res) => {
try {
const filename = req.params.filename;
const filePath = path.join(WIKI_DIR, filename);
if (!fs.existsSync(filePath)) {
return res.status(404).json({ error: 'wiki_page_not_found' });
}
const content = fs.readFileSync(filePath, 'utf8');
res.json({ content });
} catch (err) {
console.error('Error reading wiki page:', err);
res.status(500).json({ error: 'failed_to_fetch_wiki_page' });
}
});
app.post('/api/tasks', (req, res) => { app.post('/api/tasks', (req, res) => {
const errors = validatePayload(req.body, false); const errors = validatePayload(req.body, false);
if (errors.length) { if (errors.length) {