feat: 9.0 - Frontend - Display habits list
This commit is contained in:
Echo
@@ -77,13 +77,118 @@
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/* Habits list (for future use) */
|
||||
/* Habits list */
|
||||
.habits-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.habit-card {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.habit-card:hover {
|
||||
border-color: var(--accent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.habit-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-elevated);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.habit-icon svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.habit-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.habit-name {
|
||||
font-size: var(--text-base);
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
|
||||
.habit-frequency {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.habit-streak {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Loading state */
|
||||
.loading-state {
|
||||
text-align: center;
|
||||
padding: var(--space-6) var(--space-4);
|
||||
color: var(--text-muted);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loading-state.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loading-state svg {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: var(--space-3);
|
||||
opacity: 0.5;
|
||||
color: var(--text-muted);
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Error state */
|
||||
.error-state {
|
||||
text-align: center;
|
||||
padding: var(--space-6) var(--space-4);
|
||||
color: var(--text-danger);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.error-state.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.error-state svg {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: var(--space-3);
|
||||
color: var(--text-danger);
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
@@ -241,8 +346,21 @@
|
||||
|
||||
<!-- Habits container -->
|
||||
<div id="habitsContainer">
|
||||
<!-- Loading state -->
|
||||
<div class="loading-state" id="loadingState">
|
||||
<i data-lucide="loader"></i>
|
||||
<p>Se încarcă obiceiurile...</p>
|
||||
</div>
|
||||
|
||||
<!-- Error state -->
|
||||
<div class="error-state" id="errorState">
|
||||
<i data-lucide="alert-circle"></i>
|
||||
<p>Eroare la încărcarea obiceiurilor</p>
|
||||
<button class="btn btn-secondary" onclick="loadHabits()">Încearcă din nou</button>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div class="empty-state">
|
||||
<div class="empty-state" id="emptyState" style="display: none;">
|
||||
<i data-lucide="target"></i>
|
||||
<p class="empty-state-message">Nicio obișnuință încă. Creează prima!</p>
|
||||
<button class="add-habit-btn" onclick="showAddHabitModal()">
|
||||
@@ -397,10 +515,95 @@
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Load habits (placeholder for future API integration)
|
||||
// Load habits from API
|
||||
async function loadHabits() {
|
||||
// Will be implemented in next story
|
||||
const loadingState = document.getElementById('loadingState');
|
||||
const errorState = document.getElementById('errorState');
|
||||
const emptyState = document.getElementById('emptyState');
|
||||
const habitsList = document.getElementById('habitsList');
|
||||
|
||||
// Show loading state
|
||||
loadingState.classList.add('active');
|
||||
errorState.classList.remove('active');
|
||||
emptyState.style.display = 'none';
|
||||
habitsList.style.display = 'none';
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/habits');
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch habits');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const habits = data.habits || [];
|
||||
|
||||
// Hide loading state
|
||||
loadingState.classList.remove('active');
|
||||
|
||||
// Sort habits by streak descending (highest first)
|
||||
habits.sort((a, b) => (b.streak || 0) - (a.streak || 0));
|
||||
|
||||
if (habits.length === 0) {
|
||||
// Show empty state
|
||||
emptyState.style.display = 'block';
|
||||
} else {
|
||||
// Render habits list
|
||||
habitsList.innerHTML = '';
|
||||
habits.forEach(habit => {
|
||||
const card = createHabitCard(habit);
|
||||
habitsList.appendChild(card);
|
||||
});
|
||||
habitsList.style.display = 'flex';
|
||||
}
|
||||
|
||||
// Re-initialize Lucide icons
|
||||
lucide.createIcons();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading habits:', error);
|
||||
loadingState.classList.remove('active');
|
||||
errorState.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
// Create habit card element
|
||||
function createHabitCard(habit) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'habit-card';
|
||||
|
||||
// Determine icon based on frequency
|
||||
const iconName = habit.frequency === 'daily' ? 'calendar' : 'clock';
|
||||
|
||||
// Create card HTML
|
||||
card.innerHTML = `
|
||||
<div class="habit-icon">
|
||||
<i data-lucide="${iconName}"></i>
|
||||
</div>
|
||||
<div class="habit-info">
|
||||
<div class="habit-name">${escapeHtml(habit.name)}</div>
|
||||
<div class="habit-frequency">${habit.frequency === 'daily' ? 'Zilnic' : 'Săptămânal'}</div>
|
||||
</div>
|
||||
<div class="habit-streak">
|
||||
<span>${habit.streak || 0}</span>
|
||||
<span>🔥</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
// Escape HTML to prevent XSS
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// Load habits on page load
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadHabits();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user