103 lines
4.1 KiB
HTML
103 lines
4.1 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Leaderboard — WeightTracker{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="page-header">
|
|
<h1>🏆 Leaderboard</h1>
|
|
<p>Ranked by % body weight lost. May the best loser win!</p>
|
|
</div>
|
|
|
|
<!-- Comparison Chart -->
|
|
<div class="card" style="margin-bottom: 1.5rem;">
|
|
<div class="card-header">
|
|
<h2>📊 % Weight Lost Comparison</h2>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="comparisonChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Leaderboard Table -->
|
|
<div class="card">
|
|
{% if ranked %}
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Rank</th>
|
|
<th>Name</th>
|
|
<th>Start</th>
|
|
<th>Current</th>
|
|
<th>Lost (kg)</th>
|
|
<th>Lost (%)</th>
|
|
<th>Goal Progress</th>
|
|
<th>Check-ins</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for u in ranked %}
|
|
<tr>
|
|
<td>
|
|
<span
|
|
class="rank-badge {{ 'rank-1' if loop.index == 1 else 'rank-2' if loop.index == 2 else 'rank-3' if loop.index == 3 else 'rank-other' }}">
|
|
{{ loop.index }}
|
|
</span>
|
|
</td>
|
|
<td style="font-weight: 600; color: var(--text-primary);">{{ u.display_name or u.username }}</td>
|
|
<td>{{ '%.1f' % (u.starting_weight_kg | float) if u.starting_weight_kg else '—' }}</td>
|
|
<td>{{ '%.1f' % (u.current_weight | float) if u.current_weight else '—' }}</td>
|
|
<td>
|
|
<span
|
|
style="color: {{ 'var(--success)' if u.weight_lost > 0 else 'var(--danger)' if u.weight_lost < 0 else 'var(--text-muted)' }}; font-weight: 600;">
|
|
{{ '%+.1f' % (-u.weight_lost) if u.weight_lost != 0 else '0.0' }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span
|
|
style="color: {{ 'var(--success)' if u.pct_lost > 0 else 'var(--danger)' if u.pct_lost < 0 else 'var(--text-muted)' }}; font-weight: 700;">
|
|
{{ '%.1f' % u.pct_lost }}%
|
|
</span>
|
|
</td>
|
|
<td>
|
|
{% if u.goal_progress is not none %}
|
|
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
|
<div class="progress-bar-track" style="flex: 1;">
|
|
<div class="progress-bar-fill" style="width: {{ u.goal_progress }}%;"></div>
|
|
</div>
|
|
<span style="font-size: 0.75rem; color: var(--text-muted); white-space: nowrap;">{{ '%.0f' %
|
|
u.goal_progress }}%</span>
|
|
</div>
|
|
{% else %}
|
|
<span style="color: var(--text-muted);">—</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>{{ u.total_checkins }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<div class="empty-state-icon">🏆</div>
|
|
<h3>No competitors yet</h3>
|
|
<p>Start checking in to appear on the leaderboard!</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="{{ url_for('static', filename='js/charts.js') }}"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
fetch('/api/comparison')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.names.length > 0) {
|
|
createComparisonChart('comparisonChart', data.names, data.pct_lost);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |