332 lines
13 KiB
HTML
332 lines
13 KiB
HTML
{% 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>Distance</th>
|
|
<th>Elevation</th>
|
|
<th>Efforts</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.distance / 1000).toFixed(2)} km</td>
|
|
<td>${seg.elevation_gain ? seg.elevation_gain.toFixed(1) + ' m' : '-'}</td>
|
|
<td><span class="badge bg-info text-dark">${seg.effort_count || 0}</span></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: '© 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 %} |