many updates

FitnessSync/backend/templates/segments.html

@@ -82,11 +82,14 @@
                             <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>
@@ -96,12 +99,45 @@
                                 </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 %}
@@ -113,7 +149,7 @@
         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' });
+            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);
@@ -181,6 +217,7 @@
 
     let map = null;
     let elevationChart = null;
+    let comparisonChart = null;
 
     function viewSegment(seg) {
         const modal = new bootstrap.Modal(document.getElementById('viewSegmentModal'));
@@ -312,14 +349,21 @@
 
                 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);
@@ -327,6 +371,222 @@
         }
     }
 
+    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 %}