feat: US-006 - Frontend - Page structure, layout, and navigation link
This commit is contained in:
Echo
267
dashboard/habits.html
Normal file
267
dashboard/habits.html
Normal file
@@ -0,0 +1,267 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ro">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/svg+xml" href="/echo/favicon.svg">
|
||||
<title>Echo · Habits</title>
|
||||
<link rel="stylesheet" href="/echo/common.css">
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
<script src="/echo/swipe-nav.js"></script>
|
||||
<style>
|
||||
.main {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-6);
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Habits grid */
|
||||
.habits-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.habits-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) and (max-width: 1200px) {
|
||||
.habits-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1201px) {
|
||||
.habits-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: var(--space-10);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.empty-state svg {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-bottom: var(--space-4);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
font-size: var(--text-lg);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.empty-state .hint {
|
||||
font-size: var(--text-sm);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Habit card (placeholder for next story) */
|
||||
.habit-card {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-4);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.habit-card:hover {
|
||||
border-color: var(--accent);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.habit-name {
|
||||
font-size: var(--text-base);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.habit-meta {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<a href="/echo/index.html" class="logo">
|
||||
<i data-lucide="circle-dot"></i>
|
||||
Echo
|
||||
</a>
|
||||
<nav class="nav">
|
||||
<a href="/echo/index.html" class="nav-item">
|
||||
<i data-lucide="layout-dashboard"></i>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a href="/echo/workspace.html" class="nav-item">
|
||||
<i data-lucide="code"></i>
|
||||
<span>Workspace</span>
|
||||
</a>
|
||||
<a href="/echo/notes.html" class="nav-item">
|
||||
<i data-lucide="file-text"></i>
|
||||
<span>KB</span>
|
||||
</a>
|
||||
<a href="/echo/habits.html" class="nav-item active">
|
||||
<i data-lucide="dumbbell"></i>
|
||||
<span>Habits</span>
|
||||
</a>
|
||||
<a href="/echo/files.html" class="nav-item">
|
||||
<i data-lucide="folder"></i>
|
||||
<span>Files</span>
|
||||
</a>
|
||||
<button class="theme-toggle" onclick="toggleTheme()" title="Schimbă tema">
|
||||
<i data-lucide="sun" id="themeIcon"></i>
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">Habits</h1>
|
||||
<button class="btn btn-primary" onclick="showAddHabitModal()">
|
||||
<i data-lucide="plus"></i>
|
||||
Add Habit
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="habitsContainer">
|
||||
<div class="empty-state">
|
||||
<i data-lucide="loader"></i>
|
||||
<p>Loading habits...</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Theme management
|
||||
function initTheme() {
|
||||
const saved = localStorage.getItem('theme') || 'dark';
|
||||
document.documentElement.setAttribute('data-theme', saved);
|
||||
updateThemeIcon(saved);
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
const current = document.documentElement.getAttribute('data-theme') || 'dark';
|
||||
const next = current === 'dark' ? 'light' : 'dark';
|
||||
document.documentElement.setAttribute('data-theme', next);
|
||||
localStorage.setItem('theme', next);
|
||||
updateThemeIcon(next);
|
||||
}
|
||||
|
||||
function updateThemeIcon(theme) {
|
||||
const icon = document.getElementById('themeIcon');
|
||||
if (icon) {
|
||||
icon.setAttribute('data-lucide', theme === 'dark' ? 'sun' : 'moon');
|
||||
lucide.createIcons();
|
||||
}
|
||||
}
|
||||
|
||||
initTheme();
|
||||
|
||||
// Habits state
|
||||
let habits = [];
|
||||
|
||||
// Load habits from API
|
||||
async function loadHabits() {
|
||||
try {
|
||||
const response = await fetch('/echo/api/habits');
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
habits = await response.json();
|
||||
renderHabits();
|
||||
} catch (error) {
|
||||
console.error('Failed to load habits:', error);
|
||||
showError('Failed to load habits: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Render habits grid
|
||||
function renderHabits() {
|
||||
const container = document.getElementById('habitsContainer');
|
||||
|
||||
if (habits.length === 0) {
|
||||
container.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<i data-lucide="dumbbell"></i>
|
||||
<p>No habits yet. Create your first habit!</p>
|
||||
<p class="hint">Click "Add Habit" to get started</p>
|
||||
</div>
|
||||
`;
|
||||
lucide.createIcons();
|
||||
return;
|
||||
}
|
||||
|
||||
const habitsHtml = habits.map(habit => renderHabitCard(habit)).join('');
|
||||
container.innerHTML = `<div class="habits-grid">${habitsHtml}</div>`;
|
||||
lucide.createIcons();
|
||||
}
|
||||
|
||||
// Render single habit card (placeholder - full card in next story)
|
||||
function renderHabitCard(habit) {
|
||||
return `
|
||||
<div class="habit-card">
|
||||
<div class="habit-name">${escapeHtml(habit.name)}</div>
|
||||
<div class="habit-meta">
|
||||
Frequency: ${habit.frequency.type}
|
||||
${habit.category ? ` · ${habit.category}` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Show add habit modal (placeholder - full modal in next stories)
|
||||
function showAddHabitModal() {
|
||||
alert('Add Habit modal - coming in next story!');
|
||||
}
|
||||
|
||||
// Show error message
|
||||
function showError(message) {
|
||||
const container = document.getElementById('habitsContainer');
|
||||
container.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<i data-lucide="alert-circle"></i>
|
||||
<p style="color: var(--error)">${escapeHtml(message)}</p>
|
||||
</div>
|
||||
`;
|
||||
lucide.createIcons();
|
||||
}
|
||||
|
||||
// Escape HTML to prevent XSS
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// Initialize page
|
||||
lucide.createIcons();
|
||||
loadHabits();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1071,6 +1071,10 @@
|
||||
<i data-lucide="file-text"></i>
|
||||
<span>KB</span>
|
||||
</a>
|
||||
<a href="/echo/habits.html" class="nav-item">
|
||||
<i data-lucide="dumbbell"></i>
|
||||
<span>Habits</span>
|
||||
</a>
|
||||
<a href="/echo/files.html" class="nav-item">
|
||||
<i data-lucide="folder"></i>
|
||||
<span>Files</span>
|
||||
|
||||
191
dashboard/tests/test_habits_frontend.py
Normal file
191
dashboard/tests/test_habits_frontend.py
Normal file
@@ -0,0 +1,191 @@
|
||||
"""
|
||||
Test suite for Habits frontend page structure and navigation
|
||||
Story US-006: Frontend - Page structure, layout, and navigation link
|
||||
"""
|
||||
|
||||
import sys
|
||||
import os
|
||||
from pathlib import Path
|
||||
|
||||
# Add parent directory to path for imports
|
||||
sys.path.insert(0, str(Path(__file__).parent.parent))
|
||||
|
||||
def test_habits_html_exists():
|
||||
"""Test 1: habits.html exists in dashboard/"""
|
||||
habits_path = Path(__file__).parent.parent / 'habits.html'
|
||||
assert habits_path.exists(), "habits.html should exist in dashboard/"
|
||||
print("✓ Test 1: habits.html exists")
|
||||
|
||||
def test_habits_html_structure():
|
||||
"""Test 2: Page includes common.css, Lucide icons, and swipe-nav.js"""
|
||||
habits_path = Path(__file__).parent.parent / 'habits.html'
|
||||
content = habits_path.read_text()
|
||||
|
||||
assert 'href="/echo/common.css"' in content, "Should include common.css"
|
||||
assert 'lucide@latest/dist/umd/lucide.min.js' in content, "Should include Lucide icons"
|
||||
assert 'src="/echo/swipe-nav.js"' in content, "Should include swipe-nav.js"
|
||||
print("✓ Test 2: Page includes required CSS and JS")
|
||||
|
||||
def test_page_has_header():
|
||||
"""Test 3: Page has header with 'Habits' title and 'Add Habit' button"""
|
||||
habits_path = Path(__file__).parent.parent / 'habits.html'
|
||||
content = habits_path.read_text()
|
||||
|
||||
assert 'class="page-title"' in content, "Should have page-title element"
|
||||
assert '>Habits</' in content, "Should have 'Habits' title"
|
||||
assert 'Add Habit' in content, "Should have 'Add Habit' button"
|
||||
assert 'showAddHabitModal()' in content, "Add Habit button should have onclick handler"
|
||||
print("✓ Test 3: Page has header with title and Add Habit button")
|
||||
|
||||
def test_empty_state():
|
||||
"""Test 4: Empty state message shown when no habits exist"""
|
||||
habits_path = Path(__file__).parent.parent / 'habits.html'
|
||||
content = habits_path.read_text()
|
||||
|
||||
assert 'No habits yet' in content, "Should have empty state message"
|
||||
assert 'Create your first habit' in content, "Should have call-to-action"
|
||||
assert 'empty-state' in content, "Should have empty-state class"
|
||||
print("✓ Test 4: Empty state message present")
|
||||
|
||||
def test_grid_container():
|
||||
"""Test 5: Grid container uses CSS grid with responsive breakpoints (1/2/3 columns)"""
|
||||
habits_path = Path(__file__).parent.parent / 'habits.html'
|
||||
content = habits_path.read_text()
|
||||
|
||||
assert 'habits-grid' in content, "Should have habits-grid class"
|
||||
assert 'display: grid' in content, "Should use CSS grid"
|
||||
assert 'grid-template-columns' in content, "Should define grid columns"
|
||||
|
||||
# Check responsive breakpoints
|
||||
assert '@media (max-width: 768px)' in content or '@media (max-width:768px)' in content, \
|
||||
"Should have mobile breakpoint"
|
||||
assert 'grid-template-columns: 1fr' in content or 'grid-template-columns:1fr' in content, \
|
||||
"Should have 1 column on mobile"
|
||||
|
||||
# Check for 2 or 3 column layouts
|
||||
assert ('grid-template-columns: repeat(2, 1fr)' in content or
|
||||
'grid-template-columns:repeat(2,1fr)' in content or
|
||||
'grid-template-columns: repeat(3, 1fr)' in content or
|
||||
'grid-template-columns:repeat(3,1fr)' in content), \
|
||||
"Should have multi-column layout for larger screens"
|
||||
|
||||
print("✓ Test 5: Grid container with responsive breakpoints")
|
||||
|
||||
def test_index_navigation_link():
|
||||
"""Test 6: index.html navigation includes 'Habits' link with dumbbell icon"""
|
||||
index_path = Path(__file__).parent.parent / 'index.html'
|
||||
content = index_path.read_text()
|
||||
|
||||
assert '/echo/habits.html' in content, "Should link to /echo/habits.html"
|
||||
assert 'dumbbell' in content, "Should have dumbbell icon"
|
||||
assert '>Habits</' in content, "Should have 'Habits' label"
|
||||
|
||||
# Check that Habits link is in the nav
|
||||
nav_start = content.find('<nav class="nav">')
|
||||
nav_end = content.find('</nav>', nav_start)
|
||||
nav_section = content[nav_start:nav_end]
|
||||
|
||||
assert '/echo/habits.html' in nav_section, "Habits link should be in navigation"
|
||||
assert 'dumbbell' in nav_section, "Dumbbell icon should be in navigation"
|
||||
|
||||
print("✓ Test 6: index.html includes Habits navigation link")
|
||||
|
||||
def test_page_fetches_habits():
|
||||
"""Test 7: Page fetches GET /echo/api/habits on load"""
|
||||
habits_path = Path(__file__).parent.parent / 'habits.html'
|
||||
content = habits_path.read_text()
|
||||
|
||||
assert "fetch('/echo/api/habits')" in content or 'fetch("/echo/api/habits")' in content, \
|
||||
"Should fetch from /echo/api/habits"
|
||||
assert 'loadHabits' in content, "Should have loadHabits function"
|
||||
|
||||
# Check that loadHabits is called on page load
|
||||
# (either in inline script or as last statement)
|
||||
assert content.count('loadHabits()') > 0, "loadHabits should be called"
|
||||
|
||||
print("✓ Test 7: Page fetches habits on load")
|
||||
|
||||
def test_habit_card_rendering():
|
||||
"""Test 8: Placeholder habit card rendering exists"""
|
||||
habits_path = Path(__file__).parent.parent / 'habits.html'
|
||||
content = habits_path.read_text()
|
||||
|
||||
assert 'renderHabitCard' in content, "Should have renderHabitCard function"
|
||||
assert 'habit-card' in content, "Should have habit-card class"
|
||||
assert 'renderHabits' in content, "Should have renderHabits function"
|
||||
|
||||
print("✓ Test 8: Habit card rendering functions exist")
|
||||
|
||||
def test_no_console_errors_structure():
|
||||
"""Test 9: No obvious console error sources (basic structure check)"""
|
||||
habits_path = Path(__file__).parent.parent / 'habits.html'
|
||||
content = habits_path.read_text()
|
||||
|
||||
# Check for basic script structure
|
||||
assert '<script>' in content, "Should have script tags"
|
||||
assert 'function' in content, "Should have JavaScript functions"
|
||||
|
||||
# Check for proper escaping in rendering
|
||||
assert 'escapeHtml' in content or 'textContent' in content, \
|
||||
"Should have XSS protection (escapeHtml or textContent)"
|
||||
|
||||
print("✓ Test 9: No obvious console error sources")
|
||||
|
||||
def test_typecheck():
|
||||
"""Test 10: HTML file is well-formed"""
|
||||
habits_path = Path(__file__).parent.parent / 'habits.html'
|
||||
content = habits_path.read_text()
|
||||
|
||||
# Basic HTML structure checks
|
||||
assert '<!DOCTYPE html>' in content, "Should have DOCTYPE"
|
||||
assert '<html' in content and '</html>' in content, "Should have html tags"
|
||||
assert '<head>' in content and '</head>' in content, "Should have head tags"
|
||||
assert '<body>' in content and '</body>' in content, "Should have body tags"
|
||||
|
||||
# Check for matching script tags
|
||||
script_open = content.count('<script')
|
||||
script_close = content.count('</script>')
|
||||
assert script_open == script_close, f"Script tags should match (found {script_open} opens, {script_close} closes)"
|
||||
|
||||
print("✓ Test 10: HTML structure is well-formed")
|
||||
|
||||
def run_all_tests():
|
||||
"""Run all tests in sequence"""
|
||||
tests = [
|
||||
test_habits_html_exists,
|
||||
test_habits_html_structure,
|
||||
test_page_has_header,
|
||||
test_empty_state,
|
||||
test_grid_container,
|
||||
test_index_navigation_link,
|
||||
test_page_fetches_habits,
|
||||
test_habit_card_rendering,
|
||||
test_no_console_errors_structure,
|
||||
test_typecheck,
|
||||
]
|
||||
|
||||
print(f"\nRunning {len(tests)} frontend tests for US-006...\n")
|
||||
|
||||
failed = []
|
||||
for test in tests:
|
||||
try:
|
||||
test()
|
||||
except AssertionError as e:
|
||||
print(f"✗ {test.__name__}: {e}")
|
||||
failed.append((test.__name__, str(e)))
|
||||
except Exception as e:
|
||||
print(f"✗ {test.__name__}: Unexpected error: {e}")
|
||||
failed.append((test.__name__, str(e)))
|
||||
|
||||
print(f"\n{'='*60}")
|
||||
if failed:
|
||||
print(f"FAILED: {len(failed)} test(s) failed:")
|
||||
for name, error in failed:
|
||||
print(f" - {name}: {error}")
|
||||
sys.exit(1)
|
||||
else:
|
||||
print(f"SUCCESS: All {len(tests)} tests passed!")
|
||||
sys.exit(0)
|
||||
|
||||
if __name__ == '__main__':
|
||||
run_all_tests()
|
||||
Reference in New Issue
Block a user