feat(komoot): refine activity list for import status and mapped types

Signed-off-by: Marcus Fihlon <marcus@fihlon.swiss>
This commit is contained in:
Marcus Fihlon 2026-04-28 14:10:06 +02:00
parent aef23720d6
commit 6d89426584
Signed by: McPringle
GPG key ID: C6B7F469EE363E1F
5 changed files with 50 additions and 19 deletions

View file

@ -74,7 +74,7 @@
</button>
<button type="submit" class="btn btn-primary" id="loadActivitiesBtn">
<span id="loadActivitiesText">
<i class="bi bi-arrow-repeat"></i> Load Completed Activities
<i class="bi bi-arrow-repeat"></i> Load Komoot Activities
</span>
<span id="loadActivitiesSpinner" class="d-none">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
@ -90,7 +90,7 @@
<div class="d-flex justify-content-between align-items-center mb-3">
<h4 class="mb-0">
<i class="bi bi-list-check"></i>
Completed Activities
Komoot Activities
</h4>
<span class="badge text-bg-secondary" id="resultCount">0</span>
</div>
@ -101,10 +101,11 @@
<tr>
<th>Name</th>
<th>Date</th>
<th>Sport</th>
<th>Type</th>
<th>Distance</th>
<th>Duration</th>
<th>Elevation</th>
<th class="text-center">Status</th>
</tr>
</thead>
<tbody id="resultsBody"></tbody>
@ -210,26 +211,33 @@
.replaceAll("'", '&#39;');
}
function formatActivityTypeBadge(activityType) {
const normalizedType = String(activityType).toLowerCase().replaceAll('_', '-');
return `<span class="activity-type-badge activity-type-${escapeHtml(normalizedType)}">${escapeHtml(activityType)}</span>`;
}
function renderActivities(activities) {
resultCount.textContent = activities.length;
if (activities.length === 0) {
resultsBody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-4">No completed activities found.</td></tr>';
resultsBody.innerHTML = '<tr><td colspan="7" class="text-center text-muted py-4">No completed activities found.</td></tr>';
resultsSection.classList.remove('d-none');
return;
}
resultsBody.innerHTML = activities.map(activity => `
<tr>
<td>
<div class="fw-semibold">${escapeHtml(activity.name || 'Untitled activity')}</div>
<div class="text-muted small">${escapeHtml(activity.type || '-')}</div>
</td>
<td><div class="fw-semibold">${escapeHtml(activity.name || 'Untitled activity')}</div></td>
<td>${formatDate(activity.date)}</td>
<td>${escapeHtml(activity.sport || '-')}</td>
<td>${formatActivityTypeBadge(activity.mappedActivityType)}</td>
<td>${formatDistance(activity.distanceMeters)}</td>
<td>${formatDuration(activity.timeInMotionSeconds || activity.durationSeconds)}</td>
<td>${formatElevation(activity.elevationUp)}</td>
<td class="text-center">
${activity.imported
? '<i class="bi bi-check-circle-fill text-success" title="Already imported" aria-label="Already imported"></i>'
: '<i class="bi bi-plus-circle text-muted" title="New activity" aria-label="New activity"></i>'}
</td>
</tr>
`).join('');