612 lines
24 KiB
HTML
612 lines
24 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><input type="checkbox" id="select-all-efforts"
|
|
onclick="toggleAllEfforts(this)"></th>
|
|
<th>Rank</th>
|
|
<th>Date</th>
|
|
<th>Time</th>
|
|
<th>Avg HR</th>
|
|
<th>Watts</th>
|
|
<th>Max Watts</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td colspan="5" class="text-center">Loading...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="mt-3">
|
|
<button class="btn btn-primary" onclick="compareSelectedEfforts()" id="btn-compare"
|
|
disabled>
|
|
<i class="bi bi-bar-chart-line"></i> Compare Selected
|
|
</button>
|
|
<button class="btn btn-outline-secondary" onclick="exportSelectedEfforts()" id="btn-export"
|
|
disabled>
|
|
<i class="bi bi-download"></i> Export JSON
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Comparison Modal -->
|
|
<div class="modal fade" id="compareModal" tabindex="-1">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Effort Comparison</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-striped text-center align-middle" id="comparison-table">
|
|
<!-- Filled by JS -->
|
|
</table>
|
|
</div>
|
|
<div class="mt-4" style="height: 300px;">
|
|
<canvas id="comparisonChart"></canvas>
|
|
</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?force=true', { 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>
|
|
<button class="btn btn-sm btn-outline-secondary" onclick="scanSingleSegment(${seg.id})" title="Scan for matches">
|
|
<i class="bi bi-arrow-repeat"></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 scanSingleSegment(id) {
|
|
if (!confirm("Rescan this segment against all activities?")) return;
|
|
|
|
try {
|
|
// Show loading state?
|
|
const res = await fetch(`/api/segments/${id}/scan`, { method: 'POST' });
|
|
if (!res.ok) throw new Error("Scan failed");
|
|
const data = await res.json();
|
|
|
|
alert(`Scan Complete!\nFound ${data.matches_found} matching activities.`);
|
|
loadSegments(); // Refresh counts
|
|
|
|
} catch (e) {
|
|
alert("Error: " + e.message);
|
|
}
|
|
}
|
|
|
|
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;
|
|
let comparisonChart = 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>
|
|
<input type="checkbox" class="effort-checkbox form-check-input"
|
|
value="${effort.id}"
|
|
onchange="updateActionButtons()">
|
|
</td>
|
|
<td>${rank}</td>
|
|
<td>${date}</td>
|
|
<td>${timeStr}</td>
|
|
<td>${effort.avg_hr || '-'}</td>
|
|
<td>${effort.avg_power || '-'}</td>
|
|
<td>${effort.max_power || '-'}</td>
|
|
`;
|
|
tbody.appendChild(tr);
|
|
});
|
|
updateActionButtons();
|
|
|
|
} catch (e) {
|
|
console.error(e);
|
|
tbody.innerHTML = '<tr><td colspan="5" class="text-center text-danger">Error loading leaderboard.</td></tr>';
|
|
}
|
|
}
|
|
|
|
function toggleAllEfforts(source) {
|
|
document.querySelectorAll('.effort-checkbox').forEach(cb => {
|
|
cb.checked = source.checked;
|
|
});
|
|
updateActionButtons();
|
|
}
|
|
|
|
function updateActionButtons() {
|
|
const selected = document.querySelectorAll('.effort-checkbox:checked').length;
|
|
document.getElementById('btn-compare').disabled = selected < 2;
|
|
document.getElementById('btn-export').disabled = selected < 1;
|
|
}
|
|
|
|
async function compareSelectedEfforts() {
|
|
const checkboxes = document.querySelectorAll('.effort-checkbox:checked');
|
|
const ids = Array.from(checkboxes).map(cb => parseInt(cb.value));
|
|
|
|
if (ids.length < 2) return;
|
|
|
|
try {
|
|
const res = await fetch('/api/segments/efforts/compare', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(ids)
|
|
});
|
|
|
|
if (!res.ok) throw new Error("Comparison failed");
|
|
const data = await res.json();
|
|
|
|
renderComparisonTable(data);
|
|
new bootstrap.Modal(document.getElementById('compareModal')).show();
|
|
|
|
} catch (e) {
|
|
alert("Error: " + e.message);
|
|
}
|
|
}
|
|
|
|
function renderComparisonTable(data) {
|
|
const table = document.getElementById('comparison-table');
|
|
const efforts = data.efforts;
|
|
const winners = data.winners;
|
|
|
|
// Define rows to display
|
|
const rows = [
|
|
{ key: 'date', label: 'Date', format: v => new Date(v).toLocaleDateString() },
|
|
{ key: 'elapsed_time', label: 'Time', format: v => new Date(v * 1000).toISOString().substr(11, 8) },
|
|
{ key: 'avg_power', label: 'Avg Power (W)' },
|
|
{ key: 'max_power', label: 'Max Power (W)' },
|
|
{ key: 'avg_hr', label: 'Avg HR (bpm)' },
|
|
{ key: 'watts_per_kg', label: 'Watts/kg' },
|
|
{ key: 'avg_speed', label: 'Speed (m/s)', format: v => v ? v.toFixed(2) : '-' },
|
|
{ key: 'avg_cadence', label: 'Cadence' },
|
|
{ key: 'avg_respiration_rate', label: 'Respiration (br/min)', format: v => v ? v.toFixed(1) : '-' },
|
|
{ key: 'avg_temperature', label: 'Temp (C)', format: v => v ? v.toFixed(1) : '-' },
|
|
{ key: 'body_weight', label: 'Body Weight (kg)', format: v => v ? v.toFixed(2) : '-' },
|
|
{ key: 'bike_weight', label: 'Bike Weight (kg)', format: v => v ? v.toFixed(2) : '-' },
|
|
{ key: 'total_weight', label: 'Total Weight (kg)', format: v => v ? v.toFixed(2) : '-' },
|
|
{ key: 'bike_name', label: 'Bike' }
|
|
];
|
|
|
|
let html = '<thead><tr><th>Metric</th>';
|
|
efforts.forEach(e => {
|
|
html += `<th>${e.activity_name}</th>`;
|
|
});
|
|
html += '</tr></thead><tbody>';
|
|
|
|
rows.forEach(row => {
|
|
html += `<tr><td class="fw-bold text-start">${row.label}</td>`;
|
|
efforts.forEach(e => {
|
|
let val = e[row.key];
|
|
let displayVal = val;
|
|
if (val === null || val === undefined) displayVal = '-';
|
|
else if (row.format) displayVal = row.format(val);
|
|
|
|
// Highlight winner
|
|
let bgClass = '';
|
|
if (winners[row.key] === e.effort_id) {
|
|
bgClass = 'table-success fw-bold';
|
|
}
|
|
|
|
html += `<td class="${bgClass}">${displayVal}</td>`;
|
|
});
|
|
html += '</tr>';
|
|
});
|
|
|
|
html += '</tbody>';
|
|
table.innerHTML = html;
|
|
}
|
|
|
|
async function exportSelectedEfforts() {
|
|
const checkboxes = document.querySelectorAll('.effort-checkbox:checked');
|
|
const ids = Array.from(checkboxes).map(cb => parseInt(cb.value));
|
|
|
|
if (ids.length === 0) return;
|
|
|
|
try {
|
|
const res = await fetch('/api/segments/efforts/export', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(ids)
|
|
});
|
|
|
|
if (!res.ok) throw new Error("Export failed");
|
|
|
|
const blob = await res.blob();
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = "efforts_analysis.json";
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
a.remove();
|
|
|
|
} catch (e) {
|
|
alert("Error: " + e.message);
|
|
}
|
|
}
|
|
|
|
function renderComparisonChart(efforts) {
|
|
if (comparisonChart) {
|
|
comparisonChart.destroy();
|
|
comparisonChart = null;
|
|
}
|
|
|
|
const ctx = document.getElementById('comparisonChart').getContext('2d');
|
|
|
|
// Prepare datasets
|
|
// We will plot formatted 'Watts/kg' and 'Avg Speed' side by side?
|
|
// Or normalized?
|
|
// Let's plot Power, HR, and Watts/kg as bars.
|
|
// Since scales are different, we might need multiple axes or just plot one metric?
|
|
// User asked for "charts" (plural?).
|
|
// Getting simple: Grouped Bar Chart for Power and HR (scale 0-300ish).
|
|
// Watts/kg is small (0-10).
|
|
|
|
// Let's use two y-axes: Left for Power/HR, Right for W/kg
|
|
|
|
const labels = efforts.map(e => e.activity_name);
|
|
|
|
comparisonChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [
|
|
{
|
|
label: 'Avg Power (W)',
|
|
data: efforts.map(e => e.avg_power),
|
|
backgroundColor: 'rgba(255, 99, 132, 0.6)',
|
|
yAxisID: 'y'
|
|
},
|
|
{
|
|
label: 'Avg HR (bpm)',
|
|
data: efforts.map(e => e.avg_hr),
|
|
backgroundColor: 'rgba(54, 162, 235, 0.6)',
|
|
yAxisID: 'y'
|
|
},
|
|
{
|
|
label: 'Watts/kg',
|
|
type: 'line', // Line overlay for W / kg
|
|
data: efforts.map(e => e.watts_per_kg),
|
|
borderColor: 'rgba(75, 192, 192, 1)',
|
|
borderWidth: 2,
|
|
yAxisID: 'y1'
|
|
},
|
|
{
|
|
label: 'Avg Speed (m/s)',
|
|
data: efforts.map(e => e.avg_speed),
|
|
backgroundColor: 'rgba(153, 102, 255, 0.6)',
|
|
yAxisID: 'y2',
|
|
hidden: false
|
|
},
|
|
{
|
|
label: 'Avg Cadence (rpm)',
|
|
data: efforts.map(e => e.avg_cadence),
|
|
backgroundColor: 'rgba(255, 159, 64, 0.6)',
|
|
yAxisID: 'y',
|
|
hidden: true
|
|
},
|
|
{
|
|
label: 'Avg Respiration (br/min)',
|
|
data: efforts.map(e => e.avg_respiration_rate),
|
|
backgroundColor: 'rgba(201, 203, 207, 0.6)',
|
|
yAxisID: 'y',
|
|
hidden: true
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: {
|
|
type: 'linear',
|
|
display: true,
|
|
position: 'left',
|
|
title: { display: true, text: 'Power (W) / HR (bpm)' }
|
|
},
|
|
y1: {
|
|
type: 'linear',
|
|
display: true,
|
|
position: 'right',
|
|
grid: { drawOnChartArea: false },
|
|
title: { display: true, text: 'Watts/kg' }
|
|
},
|
|
y2: {
|
|
type: 'linear',
|
|
display: true,
|
|
position: 'right',
|
|
grid: { drawOnChartArea: false },
|
|
title: { display: true, text: 'Speed' }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', loadSegments);
|
|
</script>
|
|
{% endblock %} |