updated web interface - logs and config not working

This commit is contained in:
2025-08-09 06:49:00 -07:00
parent b481694ad2
commit 07d19cfd7a
9 changed files with 919 additions and 486 deletions

1015
Design.md

File diff suppressed because it is too large Load Diff

View File

@@ -23,12 +23,30 @@ class GarminSyncDaemon:
# Setup scheduled job # Setup scheduled job
if config_data['enabled']: if config_data['enabled']:
self.scheduler.add_job( cron_str = config_data['schedule_cron']
func=self.sync_and_download, try:
trigger=CronTrigger.from_crontab(config_data['schedule_cron']), # Validate cron string
id='sync_job', if not cron_str or len(cron_str.strip().split()) != 5:
replace_existing=True logger.error(f"Invalid cron schedule: '{cron_str}'. Using default '0 */6 * * *'")
) cron_str = "0 */6 * * *"
self.scheduler.add_job(
func=self.sync_and_download,
trigger=CronTrigger.from_crontab(cron_str),
id='sync_job',
replace_existing=True
)
logger.info(f"Scheduled job created with cron: '{cron_str}'")
except Exception as e:
logger.error(f"Failed to create scheduled job: {str(e)}")
# Fallback to default schedule
self.scheduler.add_job(
func=self.sync_and_download,
trigger=CronTrigger.from_crontab("0 */6 * * *"),
id='sync_job',
replace_existing=True
)
logger.info("Using default schedule '0 */6 * * *'")
# Start scheduler # Start scheduler
self.scheduler.start() self.scheduler.start()
@@ -123,8 +141,12 @@ class GarminSyncDaemon:
try: try:
config = session.query(DaemonConfig).first() config = session.query(DaemonConfig).first()
if not config: if not config:
# Create default configuration # Create default configuration with explicit cron schedule
config = DaemonConfig() config = DaemonConfig(
schedule_cron="0 */6 * * *",
enabled=True,
status="stopped"
)
session.add(config) session.add(config)
session.commit() session.commit()
session.refresh(config) # Ensure we have the latest data session.refresh(config) # Ensure we have the latest data
@@ -223,4 +245,4 @@ class GarminSyncDaemon:
try: try:
return session.query(Activity).filter_by(downloaded=False).count() return session.query(Activity).filter_by(downloaded=False).count()
finally: finally:
session.close() session.close()

View File

@@ -126,11 +126,35 @@ async def get_activity_stats():
return get_offline_stats() return get_offline_stats()
@router.get("/logs") @router.get("/logs")
async def get_logs(limit: int = 50): async def get_logs(
"""Get recent sync logs""" status: str = None,
operation: str = None,
date: str = None,
page: int = 1,
per_page: int = 20
):
"""Get sync logs with filtering and pagination"""
session = get_session() session = get_session()
try: try:
logs = session.query(SyncLog).order_by(SyncLog.timestamp.desc()).limit(limit).all() query = session.query(SyncLog)
# Apply filters
if status:
query = query.filter(SyncLog.status == status)
if operation:
query = query.filter(SyncLog.operation == operation)
if date:
# Filter by date (assuming ISO format)
query = query.filter(SyncLog.timestamp.like(f"{date}%"))
# Get total count for pagination
total = query.count()
# Apply pagination
logs = query.order_by(SyncLog.timestamp.desc()) \
.offset((page - 1) * per_page) \
.limit(per_page) \
.all()
log_data = [] log_data = []
for log in logs: for log in logs:
@@ -144,7 +168,12 @@ async def get_logs(limit: int = 50):
"activities_downloaded": log.activities_downloaded "activities_downloaded": log.activities_downloaded
}) })
return {"logs": log_data} return {
"logs": log_data,
"total": total,
"page": page,
"per_page": per_page
}
finally: finally:
session.close() session.close()

View File

@@ -6,11 +6,17 @@ async function updateStatus() {
const response = await fetch('/api/status'); const response = await fetch('/api/status');
const data = await response.json(); const data = await response.json();
// Update sync status
const syncStatus = document.getElementById('sync-status');
const statusBadge = data.daemon.running ?
'<span class="badge badge-success">Running</span>' :
'<span class="badge badge-danger">Stopped</span>';
syncStatus.innerHTML = `${statusBadge}`;
// Update daemon status // Update daemon status
document.getElementById('daemon-status').innerHTML = ` document.getElementById('daemon-status').innerHTML = `
<p>Status: <span class="badge ${data.daemon.running ? 'badge-success' : 'badge-danger'}"> <p>Status: ${statusBadge}</p>
${data.daemon.running ? 'Running' : 'Stopped'}
</span></p>
<p>Last Run: ${data.daemon.last_run || 'Never'}</p> <p>Last Run: ${data.daemon.last_run || 'Never'}</p>
<p>Next Run: ${data.daemon.next_run || 'Not scheduled'}</p> <p>Next Run: ${data.daemon.next_run || 'Not scheduled'}</p>
<p>Schedule: ${data.daemon.schedule || 'Not configured'}</p> <p>Schedule: ${data.daemon.schedule || 'Not configured'}</p>

View File

@@ -0,0 +1,37 @@
// Initialize the activity progress chart
document.addEventListener('DOMContentLoaded', function() {
// Fetch activity stats from the API
fetch('/api/activities/stats')
.then(response => response.json())
.then(data => {
// Create doughnut chart
const ctx = document.getElementById('activityChart').getContext('2d');
const chart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Downloaded', 'Missing'],
datasets: [{
data: [data.downloaded, data.missing],
backgroundColor: ['#28a745', '#dc3545'],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Activity Status'
}
}
}
});
})
.catch(error => {
console.error('Error fetching activity stats:', error);
});
});

View File

@@ -0,0 +1,121 @@
// Global variables for pagination and filtering
let currentPage = 1;
const logsPerPage = 20;
let totalLogs = 0;
let currentFilters = {};
// Initialize logs page
document.addEventListener('DOMContentLoaded', function() {
loadLogs();
});
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 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);
}
}
function renderLogs(logs) {
const tbody = document.getElementById('logs-tbody');
tbody.innerHTML = '';
logs.forEach(log => {
const row = document.createElement('tr');
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>
`;
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);
}
// 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);
}
function changePage(page) {
if (page < 1 || page > Math.ceil(totalLogs / logsPerPage)) return;
currentPage = page;
loadLogs();
}
function refreshLogs() {
currentPage = 1;
loadLogs();
}
function applyFilters() {
currentFilters = {
status: document.getElementById('status-filter').value,
operation: document.getElementById('operation-filter').value,
date: document.getElementById('date-filter').value
};
currentPage = 1;
loadLogs();
}
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);
}
}

View File

@@ -6,6 +6,8 @@
<title>GarminSync Dashboard</title> <title>GarminSync Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/style.css" rel="stylesheet"> <link href="/static/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
@@ -17,10 +19,19 @@
<div class="collapse navbar-collapse" id="navbarNav"> <div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="/">Dashboard</a> <a class="nav-link active" href="/">
<i class="fas fa-tachometer-alt me-1"></i> Dashboard
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/config">Configuration</a> <a class="nav-link" href="/logs">
<i class="fas fa-clipboard-list me-1"></i> Logs
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/config">
<i class="fas fa-cog me-1"></i> Configuration
</a>
</li> </li>
</ul> </ul>
</div> </div>

View File

@@ -5,7 +5,40 @@
<h1>GarminSync Dashboard</h1> <h1>GarminSync Dashboard</h1>
<div class="row"> <div class="row">
<!-- Real-time Activity Counter -->
<div class="col-md-3">
<div class="card bg-info text-white">
<div class="card-body">
<h4 id="sync-status">Idle</h4>
<p>Current Operation</p>
</div>
</div>
</div>
<!-- Activity Progress Chart -->
<div class="col-md-5">
<div class="card">
<div class="card-header">Activity Progress</div>
<div class="card-body">
<canvas id="activityChart" width="400" height="200"></canvas>
</div>
</div>
</div>
<!-- Daemon Status -->
<div class="col-md-4"> <div class="col-md-4">
<div class="card">
<div class="card-header">Daemon Status</div>
<div class="card-body" id="daemon-status">
<!-- Populated by JavaScript -->
</div>
</div>
</div>
</div>
<div class="row mt-4">
<!-- Statistics Card -->
<div class="col-md-6">
<div class="card"> <div class="card">
<div class="card-header">Statistics</div> <div class="card-header">Statistics</div>
<div class="card-body"> <div class="card-body">
@@ -17,16 +50,8 @@
</div> </div>
</div> </div>
<div class="col-md-4"> <!-- Quick Actions Card -->
<div class="card"> <div class="col-md-6">
<div class="card-header">Daemon Status</div>
<div class="card-body" id="daemon-status">
<!-- Populated by JavaScript -->
</div>
</div>
</div>
<div class="col-md-4">
<div class="card"> <div class="card">
<div class="card-header">Quick Actions</div> <div class="card-header">Quick Actions</div>
<div class="card-body"> <div class="card-body">
@@ -77,3 +102,7 @@
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
{% block scripts %}
<script src="/static/charts.js"></script>
{% endblock %}

View File

@@ -0,0 +1,79 @@
{% extends "base.html" %}
{% block content %}
<div class="container">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1>Sync Logs</h1>
<div>
<button class="btn btn-secondary" onclick="refreshLogs()">Refresh</button>
<button class="btn btn-warning" onclick="clearLogs()">Clear Logs</button>
</div>
</div>
<!-- Filters -->
<div class="card mb-4">
<div class="card-header">Filters</div>
<div class="card-body">
<div class="row">
<div class="col-md-3">
<select id="status-filter" class="form-control">
<option value="">All Statuses</option>
<option value="success">Success</option>
<option value="error">Error</option>
<option value="partial">Partial</option>
</select>
</div>
<div class="col-md-3">
<select id="operation-filter" class="form-control">
<option value="">All Operations</option>
<option value="sync">Sync</option>
<option value="download">Download</option>
<option value="daemon">Daemon</option>
</select>
</div>
<div class="col-md-3">
<input type="date" id="date-filter" class="form-control">
</div>
<div class="col-md-3">
<button class="btn btn-primary" onclick="applyFilters()">Apply</button>
</div>
</div>
</div>
</div>
<!-- Logs Table -->
<div class="card">
<div class="card-header">Log Entries</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped" id="logs-table">
<thead>
<tr>
<th>Timestamp</th>
<th>Operation</th>
<th>Status</th>
<th>Message</th>
<th>Activities Processed</th>
<th>Activities Downloaded</th>
</tr>
</thead>
<tbody id="logs-tbody">
<!-- Populated by JavaScript -->
</tbody>
</table>
</div>
<!-- Pagination -->
<nav>
<ul class="pagination justify-content-center" id="pagination">
<!-- Populated by JavaScript -->
</ul>
</nav>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script src="/static/logs.js"></script>
{% endblock %}