sstent/FitTrack2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added segments

Browse Source
This commit is contained in:
sstent
2026-01-09 12:10:58 -08:00
parent 55e37fbca8
commit 67357b5038
55 changed files with 2310 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

328
FitnessSync/backend/templates/segments.html Normal file
View File

@@ -0,0 +1,328 @@
{% extends "base.html" %}
{% block head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
{% endblock %}
{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Segments</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<button type="button" class="btn btn-sm btn-outline-secondary me-2" onclick="scanSegments()">
<i class="bi bi-arrow-repeat"></i> Scan All Activities
</button>
<div class="btn-group me-2">
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="loadSegments()">Refresh</button>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
data-bs-target="#createSegmentModal">
Create Segment
</button>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped table-hover" id="segments-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Type</th>
<th>Distance</th>
<th>Elevation</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="6" class="text-center">Loading...</td>
</tr>
</tbody>
</table>
</div>
<!-- View Modal -->
<div class="modal fade" id="viewSegmentModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="view-seg-title">Segment Details</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<!-- Tabs -->
<ul class="nav nav-tabs mb-3" id="segTabs" role="tablist">
<li class="nav-item">
<button class="nav-link active" id="map-tab" data-bs-toggle="tab" data-bs-target="#map-pane"
type="button">Map & Profile</button>
</li>
<li class="nav-item">
<button class="nav-link" id="leaderboard-tab" data-bs-toggle="tab"
data-bs-target="#leaderboard-pane" type="button">Leaderboard</button>
</li>
</ul>
<div class="tab-content">
<!-- Map & Profile Pane -->
<div class="tab-pane fade show active" id="map-pane">
<div id="seg-map" style="height: 300px; width: 100%;" class="mb-3 border rounded"></div>
<h6 class="text-muted">Elevation Profile</h6>
<div style="height: 150px; width: 100%;">
<canvas id="elevationChart"></canvas>
</div>
</div>
<!-- Leaderboard Pane -->
<div class="tab-pane fade" id="leaderboard-pane">
<div class="table-responsive">
<table class="table table-sm table-striped" id="leaderboard-table">
<thead>
<tr>
<th>Rank</th>
<th>Date</th>
<th>Time</th>
<th>Avg HR</th>
<th>Watts</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="text-center">Loading...</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
async function scanSegments() {
if (!confirm("This will rescan ALL activities for all segments. It may take a while. Continue?")) return;
try {
const response = await fetch('/api/segments/scan', { method: 'POST' });
if (!response.ok) throw new Error("Scan failed");
const data = await response.json();
alert("Scan started! Background Job ID: " + data.job_id);
} catch (e) {
alert("Error: " + e.message);
}
}
async function loadSegments() {
try {
const res = await fetch('/api/segments');
if (!res.ok) throw new Error("Failed to fetch segments");
const segments = await res.json();
const tbody = document.querySelector('#segments-table tbody');
tbody.innerHTML = '';
if (segments.length === 0) {
tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted">No segments found.</td></tr>';
return;
}
segments.forEach(seg => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${seg.id}</td>
<td><strong>${seg.name}</strong></td>
<td><span class="badge bg-secondary">${seg.activity_type}</span></td>
<td>${(seg.distance / 1000).toFixed(2)} km</td>
<td>${seg.elevation_gain ? seg.elevation_gain.toFixed(1) + ' m' : '-'}</td>
<td>
<button class="btn btn-sm btn-outline-primary me-1" onclick='viewSegment(${JSON.stringify(seg)})'>
<i class="bi bi-eye"></i> View
</button>
<button class="btn btn-sm btn-outline-danger" onclick="deleteSegment(${seg.id})">
<i class="bi bi-trash"></i>
</button>
</td>
`;
tbody.appendChild(tr);
});
} catch (e) {
console.error(e);
document.querySelector('#segments-table tbody').innerHTML = '<tr><td colspan="6" class="text-danger text-center">Error loading segments.</td></tr>';
}
}
async function deleteSegment(id) {
if (!confirm("Are you sure you want to delete this segment? All matched efforts will be lost.")) return;
try {
const res = await fetch(`/api/segments/${id}`, { method: 'DELETE' });
if (res.ok) {
loadSegments();
} else {
alert("Failed to delete segment");
}
} catch (e) {
alert("Error: " + e.message);
}
}
let map = null;
let elevationChart = null;
function viewSegment(seg) {
const modal = new bootstrap.Modal(document.getElementById('viewSegmentModal'));
document.getElementById('view-seg-title').textContent = seg.name;
// Reset Tabs
const triggerEl = document.querySelector('#segTabs button[data-bs-target="#map-pane"]');
bootstrap.Tab.getInstance(triggerEl)?.show() || new bootstrap.Tab(triggerEl).show();
modal.show();
// Load Leaderboard
loadLeaderboard(seg.id);
// Wait for modal to show
setTimeout(() => {
// --- Map Setup ---
if (map) {
map.remove();
map = null;
}
if (!seg.points || seg.points.length === 0) return;
map = L.map('seg-map');
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; OpenStreetMap'
}).addTo(map);
// Correct [lon, lat, ele] to [lat, lon]
const latlongs = seg.points.map(p => [p[1], p[0]]);
const poly = L.polyline(latlongs, { color: 'red' }).addTo(map);
map.fitBounds(poly.getBounds());
// --- Chart Setup ---
if (elevationChart) {
elevationChart.destroy();
elevationChart = null;
}
// Extract Elevation Data
// Points are [lon, lat, ele]. Some might be missing ele (undefined/null) or have only 2 coords.
const distances = [];
const elevations = [];
let distAccum = 0;
// Calculate cumulative distance for X-axis
for (let i = 0; i < seg.points.length; i++) {
const p = seg.points[i];
if (i > 0) {
const prev = seg.points[i - 1];
// Haversine approx
const R = 6371e3;
const φ1 = prev[1] * Math.PI / 180;
const φ2 = p[1] * Math.PI / 180;
const Δφ = (p[1] - prev[1]) * Math.PI / 180;
const Δλ = (p[0] - prev[0]) * Math.PI / 180;
const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
Math.cos(φ1) * Math.cos(φ2) *
Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
distAccum += R * c;
}
distances.push((distAccum / 1000).toFixed(2)); // km
// Check for elevation
const ele = (p.length > 2 && p[2] !== null) ? p[2] : null;
elevations.push(ele);
}
// Filter out nulls if mostly null? Or Chart.js handles nulls (gaps).
// Let's render what we have.
const ctx = document.getElementById('elevationChart').getContext('2d');
elevationChart = new Chart(ctx, {
type: 'line',
data: {
labels: distances,
datasets: [{
label: 'Elevation (m)',
data: elevations,
borderColor: 'rgb(75, 192, 192)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
fill: true,
tension: 0.1,
pointRadius: 0 // Hide points for smooth look
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: { display: true, title: { display: true, text: 'Distance (km)' } },
y: { display: true, title: { display: true, text: 'Elevation (m)' } }
},
plugins: { legend: { display: false } }
}
});
}, 500);
}
async function loadLeaderboard(segmentId) {
const tbody = document.querySelector('#leaderboard-table tbody');
tbody.innerHTML = '<tr><td colspan="5" class="text-center">Loading...</td></tr>';
try {
const res = await fetch(`/api/segments/${segmentId}/efforts`);
if (!res.ok) throw new Error("Failed to load leaderboard");
const efforts = await res.json();
tbody.innerHTML = '';
if (efforts.length === 0) {
tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">No efforts matching this segment.</td></tr>';
return;
}
efforts.forEach((effort, index) => {
const date = new Date(effort.start_time).toLocaleDateString();
const timeStr = new Date(effort.elapsed_time * 1000).toISOString().substr(11, 8); // HH:MM:SS
// Rank icons
let rank = index + 1;
if (rank === 1) rank = '🥇 1';
else if (rank === 2) rank = '🥈 2';
else if (rank === 3) rank = '🥉 3';
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${rank}</td>
<td>${date}</td>
<td>${timeStr}</td>
<td>${effort.avg_hr || '-'}</td>
<td>${effort.avg_power || '-'}</td>
`;
tbody.appendChild(tr);
});
} catch (e) {
console.error(e);
tbody.innerHTML = '<tr><td colspan="5" class="text-center text-danger">Error loading leaderboard.</td></tr>';
}
}
document.addEventListener('DOMContentLoaded', loadSegments);
</script>
{% endblock %}