mirror of
https://github.com/sstent/GarminSync.git
synced 2026-01-26 17:12:50 +00:00
updated web interface - v3
This commit is contained in:
@@ -4,118 +4,176 @@ const logsPerPage = 20;
|
||||
let totalLogs = 0;
|
||||
let currentFilters = {};
|
||||
|
||||
// Initialize logs page
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadLogs();
|
||||
});
|
||||
class LogsPage {
|
||||
constructor() {
|
||||
this.currentPage = 1;
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.loadLogs();
|
||||
this.setupEventListeners();
|
||||
}
|
||||
|
||||
async loadLogs() {
|
||||
try {
|
||||
// Build query string from filters
|
||||
const params = new URLSearchParams({
|
||||
page: this.currentPage,
|
||||
per_page: logsPerPage,
|
||||
...currentFilters
|
||||
}).toString();
|
||||
|
||||
async function loadLogs() {
|
||||
try {
|
||||
// Build query string from filters
|
||||
const params = new URLSearchParams({
|
||||
page: currentPage,
|
||||
perPage: logsPerPage,
|
||||
...currentFilters
|
||||
}).toString();
|
||||
|
||||
const response = await fetch(`/api/logs?${params}`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch logs');
|
||||
const response = await fetch(`/api/logs?${params}`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch logs');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
totalLogs = data.total;
|
||||
this.renderLogs(data.logs);
|
||||
this.renderPagination();
|
||||
} catch (error) {
|
||||
console.error('Error loading logs:', error);
|
||||
Utils.showError('Failed to load logs: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
renderLogs(logs) {
|
||||
const tbody = document.getElementById('logs-tbody');
|
||||
if (!tbody) return;
|
||||
|
||||
tbody.innerHTML = '';
|
||||
|
||||
if (!logs || logs.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="6">No logs found</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
totalLogs = data.total;
|
||||
renderLogs(data.logs);
|
||||
renderPagination();
|
||||
} catch (error) {
|
||||
console.error('Error loading logs:', error);
|
||||
alert('Failed to load logs: ' + error.message);
|
||||
logs.forEach(log => {
|
||||
const row = document.createElement('tr');
|
||||
row.className = 'row-odd'; // For alternating row colors
|
||||
|
||||
row.innerHTML = `
|
||||
<td>${Utils.formatTimestamp(log.timestamp)}</td>
|
||||
<td>${log.operation}</td>
|
||||
<td><span class="badge badge-${log.status === 'success' ? 'success' :
|
||||
log.status === 'error' ? 'error' :
|
||||
'warning'}">${log.status}</span></td>
|
||||
<td>${log.message || ''}</td>
|
||||
<td>${log.activities_processed}</td>
|
||||
<td>${log.activities_downloaded}</td>
|
||||
`;
|
||||
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function renderLogs(logs) {
|
||||
const tbody = document.getElementById('logs-tbody');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
logs.forEach(log => {
|
||||
const row = document.createElement('tr');
|
||||
renderPagination() {
|
||||
const totalPages = Math.ceil(totalLogs / logsPerPage);
|
||||
const pagination = document.getElementById('pagination');
|
||||
if (!pagination) return;
|
||||
|
||||
row.innerHTML = `
|
||||
<td>${log.timestamp}</td>
|
||||
<td>${log.operation}</td>
|
||||
<td><span class="badge badge-${log.status === 'success' ? 'success' :
|
||||
log.status === 'error' ? 'danger' :
|
||||
'warning'}">${log.status}</span></td>
|
||||
<td>${log.message || ''}</td>
|
||||
<td>${log.activities_processed}</td>
|
||||
<td>${log.activities_downloaded}</td>
|
||||
if (totalPages <= 1) {
|
||||
pagination.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
let paginationHtml = '';
|
||||
|
||||
// Previous button
|
||||
paginationHtml += `
|
||||
<li class="${this.currentPage === 1 ? 'disabled' : ''}">
|
||||
<a href="#" onclick="logsPage.changePage(${this.currentPage - 1}); return false;">Previous</a>
|
||||
</li>
|
||||
`;
|
||||
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
function renderPagination() {
|
||||
const totalPages = Math.ceil(totalLogs / logsPerPage);
|
||||
const pagination = document.getElementById('pagination');
|
||||
pagination.innerHTML = '';
|
||||
|
||||
// Previous button
|
||||
const prevLi = document.createElement('li');
|
||||
prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
|
||||
prevLi.innerHTML = `<a class="page-link" href="#" onclick="changePage(${currentPage - 1})">Previous</a>`;
|
||||
pagination.appendChild(prevLi);
|
||||
|
||||
// Page numbers
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
const li = document.createElement('li');
|
||||
li.className = `page-item ${i === currentPage ? 'active' : ''}`;
|
||||
li.innerHTML = `<a class="page-link" href="#" onclick="changePage(${i})">${i}</a>`;
|
||||
pagination.appendChild(li);
|
||||
// Page numbers
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
if (i === 1 || i === totalPages || (i >= this.currentPage - 2 && i <= this.currentPage + 2)) {
|
||||
paginationHtml += `
|
||||
<li class="${i === this.currentPage ? 'active' : ''}">
|
||||
<a href="#" onclick="logsPage.changePage(${i}); return false;">${i}</a>
|
||||
</li>
|
||||
`;
|
||||
} else if (i === this.currentPage - 3 || i === this.currentPage + 3) {
|
||||
paginationHtml += '<li><span>...</span></li>';
|
||||
}
|
||||
}
|
||||
|
||||
// Next button
|
||||
paginationHtml += `
|
||||
<li class="${this.currentPage === totalPages ? 'disabled' : ''}">
|
||||
<a href="#" onclick="logsPage.changePage(${this.currentPage + 1}); return false;">Next</a>
|
||||
</li>
|
||||
`;
|
||||
|
||||
pagination.innerHTML = paginationHtml;
|
||||
}
|
||||
|
||||
// Next button
|
||||
const nextLi = document.createElement('li');
|
||||
nextLi.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
|
||||
nextLi.innerHTML = `<a class="page-link" href="#" onclick="changePage(${currentPage + 1})">Next</a>`;
|
||||
pagination.appendChild(nextLi);
|
||||
changePage(page) {
|
||||
if (page < 1 || page > Math.ceil(totalLogs / logsPerPage)) return;
|
||||
this.currentPage = page;
|
||||
this.loadLogs();
|
||||
}
|
||||
|
||||
refreshLogs() {
|
||||
this.currentPage = 1;
|
||||
this.loadLogs();
|
||||
}
|
||||
|
||||
applyFilters() {
|
||||
currentFilters = {
|
||||
status: document.getElementById('status-filter').value,
|
||||
operation: document.getElementById('operation-filter').value,
|
||||
date: document.getElementById('date-filter').value
|
||||
};
|
||||
|
||||
this.currentPage = 1;
|
||||
this.loadLogs();
|
||||
}
|
||||
|
||||
async clearLogs() {
|
||||
if (!confirm('Are you sure you want to clear all logs? This cannot be undone.')) return;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/logs', { method: 'DELETE' });
|
||||
if (response.ok) {
|
||||
Utils.showSuccess('Logs cleared successfully');
|
||||
this.refreshLogs();
|
||||
} else {
|
||||
throw new Error('Failed to clear logs');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error clearing logs:', error);
|
||||
Utils.showError('Failed to clear logs: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Event listeners are handled in the global functions below
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize logs page when DOM is loaded
|
||||
let logsPage;
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
logsPage = new LogsPage();
|
||||
});
|
||||
|
||||
// Global functions for backward compatibility with HTML onclick attributes
|
||||
function changePage(page) {
|
||||
if (page < 1 || page > Math.ceil(totalLogs / logsPerPage)) return;
|
||||
currentPage = page;
|
||||
loadLogs();
|
||||
if (logsPage) logsPage.changePage(page);
|
||||
}
|
||||
|
||||
function refreshLogs() {
|
||||
currentPage = 1;
|
||||
loadLogs();
|
||||
if (logsPage) logsPage.refreshLogs();
|
||||
}
|
||||
|
||||
function applyFilters() {
|
||||
currentFilters = {
|
||||
status: document.getElementById('status-filter').value,
|
||||
operation: document.getElementById('operation-filter').value,
|
||||
date: document.getElementById('date-filter').value
|
||||
};
|
||||
|
||||
currentPage = 1;
|
||||
loadLogs();
|
||||
if (logsPage) logsPage.applyFilters();
|
||||
}
|
||||
|
||||
async function clearLogs() {
|
||||
if (!confirm('Are you sure you want to clear all logs? This cannot be undone.')) return;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/logs', { method: 'DELETE' });
|
||||
if (response.ok) {
|
||||
alert('Logs cleared successfully');
|
||||
refreshLogs();
|
||||
} else {
|
||||
throw new Error('Failed to clear logs');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error clearing logs:', error);
|
||||
alert('Failed to clear logs: ' + error.message);
|
||||
}
|
||||
function clearLogs() {
|
||||
if (logsPage) logsPage.clearLogs();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user