feat(typescript): add feature modules for template conversion
- Add search.ts - header search with keyboard navigation - Debounced search with 300ms delay - Arrow key navigation through results - Escape to close, Enter to select - Library type icons and highlighting - Add collections.ts - collection and rule management - Rule CRUD operations (create, update, delete) - Rule testing functionality - Bulk collection operations - Add bookshelf.ts - book display and navigation - Library selection state management - Book viewing interactions - Pagination logic - Add linking.ts - book matching and manual linking - Search and match functionality - Manual link modal - Bulk auto-link and suggestions - Add api-explorer.ts - API testing interface - Request/response display - cURL command generation - History tracking - Add admin.ts - admin dashboard actions - Library scan triggers - System statistics display - Profile management - Add analytics.ts - analytics data loading - Chart.js integration - Daily reading minutes chart - Device usage and popular books display - Add queue.ts - sync queue management - Process pending items - Clear failed/all items - Filter by status, type, device - Add conflicts.ts - conflict resolution - Individual and bulk resolve operations - Winner device selection - Manual override inputs - Add docs.ts - documentation search - Lunr.js search integration - Sidebar toggle for mobile
This commit is contained in:
@@ -0,0 +1,118 @@
|
||||
import type { ReadingStatsResponse, DeviceUsageResponse, PopularBooksResponse } from './types/api';
|
||||
|
||||
async function loadAnalytics(): Promise<void> {
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token) return;
|
||||
|
||||
try {
|
||||
const [statsRes, devicesRes, popularRes] = await Promise.all([
|
||||
fetch('/api/analytics/stats', {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
}),
|
||||
fetch('/api/analytics/devices', {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
}),
|
||||
fetch('/api/analytics/popular', {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
})
|
||||
]);
|
||||
|
||||
if (statsRes.ok) {
|
||||
const stats: ReadingStatsResponse = await statsRes.json();
|
||||
renderReadingStats(stats);
|
||||
}
|
||||
|
||||
if (devicesRes.ok) {
|
||||
const devices: DeviceUsageResponse = await devicesRes.json();
|
||||
renderDeviceUsage(devices);
|
||||
}
|
||||
|
||||
if (popularRes.ok) {
|
||||
const popular: PopularBooksResponse = await popularRes.json();
|
||||
renderPopularBooks(popular);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load analytics:', error);
|
||||
if ((window as any).showToast?.error) {
|
||||
(window as any).showToast.error('Failed to load analytics data');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function renderReadingStats(stats: ReadingStatsResponse): void {
|
||||
const container = document.getElementById('reading-stats');
|
||||
if (!container) return;
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div class="stat-card p-4 rounded-lg" style="background-color: var(--bg-secondary)">
|
||||
<p class="text-2xl font-bold" style="color: var(--text-primary)">${stats.total_books_read}</p>
|
||||
<p class="text-sm" style="color: var(--text-secondary)">Books Read</p>
|
||||
</div>
|
||||
<div class="stat-card p-4 rounded-lg" style="background-color: var(--bg-secondary)">
|
||||
<p class="text-2xl font-bold" style="color: var(--text-primary)">${stats.total_pages_read}</p>
|
||||
<p class="text-sm" style="color: var(--text-secondary)">Pages Read</p>
|
||||
</div>
|
||||
<div class="stat-card p-4 rounded-lg" style="background-color: var(--bg-secondary)">
|
||||
<p class="text-2xl font-bold" style="color: var(--text-primary)">${stats.total_reading_time_minutes}</p>
|
||||
<p class="text-sm" style="color: var(--text-secondary)">Minutes Reading</p>
|
||||
</div>
|
||||
<div class="stat-card p-4 rounded-lg" style="background-color: var(--bg-secondary)">
|
||||
<p class="text-2xl font-bold" style="color: var(--text-primary)">${Math.round(stats.completion_rate * 100)}%</p>
|
||||
<p class="text-sm" style="color: var(--text-secondary)">Completion Rate</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderDeviceUsage(devices: DeviceUsageResponse): void {
|
||||
const container = document.getElementById('device-usage');
|
||||
if (!container) return;
|
||||
|
||||
if (!devices.devices || devices.devices.length === 0) {
|
||||
container.innerHTML = '<p style="color: var(--text-secondary)">No device usage data available</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = devices.devices.map(device => `
|
||||
<div class="p-3 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<p class="font-medium" style="color: var(--text-primary)">${device.device_name}</p>
|
||||
<p class="text-sm" style="color: var(--text-secondary)">${device.device_type}</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="font-medium" style="color: var(--text-primary)">${Math.round(device.total_time_minutes)} min</p>
|
||||
<p class="text-sm" style="color: var(--text-secondary)">${device.sync_count} syncs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function renderPopularBooks(popular: PopularBooksResponse): void {
|
||||
const container = document.getElementById('popular-books');
|
||||
if (!container) return;
|
||||
|
||||
if (!popular.books || popular.books.length === 0) {
|
||||
container.innerHTML = '<p style="color: var(--text-secondary)">No reading history available</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = popular.books.map(book => `
|
||||
<div class="p-3 rounded-lg border flex items-center space-x-3" style="background-color: var(--bg-secondary); border-color: var(--border)">
|
||||
<div class="flex-1">
|
||||
<p class="font-medium" style="color: var(--text-primary)">${book.title}</p>
|
||||
<p class="text-sm" style="color: var(--text-secondary)">${book.author}</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="font-medium" style="color: var(--text-primary)">${book.read_count}x</p>
|
||||
<p class="text-sm" style="color: var(--text-secondary)">${Math.round(book.avg_completion * 100)}%</p>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', loadAnalytics);
|
||||
|
||||
(window as any).loadAnalytics = loadAnalytics;
|
||||
Reference in New Issue
Block a user