Samuel Enocsson
7e5fa6cbf1
- Add HTMX CDN to layout - Replace client-side table rendering (displayRatings, displayCourses) with server-rendered EJS partials via hx-get - Add server-side course search with debounced hx-trigger - Lazy-load player history and course layouts via htmx.ajax() - Render rating chart via htmx:afterSwap with data attributes - Add partial routes: ratings-table, course-table, player-history, course-layouts
65 lines
4.3 KiB
Plaintext
65 lines
4.3 KiB
Plaintext
<% if (ratings.length === 0) { %>
|
|
<p>No ratings found.</p>
|
|
<% } else { %>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th class="mobile-hide">Rank</th>
|
|
<th>Player Name</th>
|
|
<th class="mobile-hide">PDGA #</th>
|
|
<th>Rating</th>
|
|
<th class="mobile-hide">Change</th>
|
|
<th class="mobile-hide">Predicted</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<% ratings.forEach(function(player, index) {
|
|
var difference = player.predictedRating && player.rating ? player.predictedRating - player.rating : 0;
|
|
var diffText = difference > 0 ? '+' + difference : difference.toString();
|
|
var diffClass = difference > 0 ? 'positive' : difference < 0 ? 'negative' : 'neutral';
|
|
var ratingChangeText = player.ratingChange ? (player.ratingChange > 0 ? '+' + player.ratingChange : player.ratingChange.toString()) : 'N/A';
|
|
var ratingChangeClass = player.ratingChange > 0 ? 'positive' : player.ratingChange < 0 ? 'negative' : 'neutral';
|
|
%>
|
|
<tr id="row-<%= player.pdgaNumber %>" class="expandable-row" onclick="togglePlayerHistory(<%= player.pdgaNumber %>)">
|
|
<td class="mobile-hide"><%= index + 1 %></td>
|
|
<td class="player-name">
|
|
<a href="https://www.pdga.com/player/<%= player.pdgaNumber %>" target="_blank" onclick="event.stopPropagation()"><%= player.name %></a>
|
|
<div class="mobile-only pdga-number" style="font-size: 11px; color: #999; margin-top: 2px;">PDGA #<%= player.pdgaNumber %></div>
|
|
</td>
|
|
<td class="pdga-number mobile-hide">#<%= player.pdgaNumber %></td>
|
|
<td class="rating">
|
|
<div class="refresh-section">
|
|
<span class="rating-value" data-rating="<%= player.rating || '' %>" data-stddev="<%= player.stdDev || '' %>" data-pdga="<%= player.pdgaNumber %>" style="cursor: help;"><%- player.rating || '<span style="color: #999; font-style: italic;">Click refresh</span>' %></span>
|
|
<i class="fas fa-sync-alt refresh-icon" onclick="refreshPlayer(<%= player.pdgaNumber %>)" title="Refresh player data"></i>
|
|
</div>
|
|
<div class="mobile-only rating-change <%= ratingChangeClass %>" style="font-size: 11px; margin-top: 2px;"><%= ratingChangeText %></div>
|
|
<div class="std-dev-tooltip" id="tooltip-rating-<%= player.pdgaNumber %>"></div>
|
|
</td>
|
|
<td class="rating-change <%= ratingChangeClass %> mobile-hide"><%= ratingChangeText %></td>
|
|
<td class="predicted-rating mobile-hide" id="predicted-<%= player.pdgaNumber %>">
|
|
<div class="refresh-section">
|
|
<span class="predicted-value" data-stddev="<%= player.stdDev || '' %>" data-pdga="<%= player.pdgaNumber %>" style="cursor: help;"><%= player.predictedRating || 'N/A' %></span>
|
|
<i class="fas fa-question-circle debug-icon" onclick="showDebugInfo(<%= player.pdgaNumber %>)" title="Show calculation details" style="margin-left: 5px; color: #6c757d; cursor: pointer; opacity: 0.6;"></i>
|
|
<i class="fas fa-sync-alt refresh-icon" onclick="refreshRoundHistory(<%= player.pdgaNumber %>)" title="Refresh prediction data"></i>
|
|
</div>
|
|
<div class="std-dev-tooltip" id="tooltip-stddev-<%= player.pdgaNumber %>"></div>
|
|
</td>
|
|
</tr>
|
|
<tr id="history-<%= player.pdgaNumber %>" class="expanded-content">
|
|
<td colspan="6" class="expanded-cell">
|
|
<div class="chart-title">
|
|
<div class="refresh-section">
|
|
Rating History for <%= player.name %>
|
|
<i class="fas fa-sync-alt refresh-icon" onclick="refreshRatingHistory(<%= player.pdgaNumber %>)" title="Refresh rating history"></i>
|
|
</div>
|
|
</div>
|
|
<div id="history-content-<%= player.pdgaNumber %>">
|
|
<div class="loading-chart">Click to load rating history...</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<% }); %>
|
|
</tbody>
|
|
</table>
|
|
<% } %>
|