shcizo/pdga-rating
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Add HTMX migration for server-rendered tables and lazy loading

Browse Source 
- 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
This commit is contained in:
Samuel Enocsson
2026-02-19 08:29:56 +01:00
parent 20bbdbbfcf
commit 7e5fa6cbf1
12 changed files with 468 additions and 527 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/courses.js
+10 -220
View File
@@ -1,112 +1,3 @@
let allCourses = [];
async function loadCourses() {
const loading = document.getElementById('loading');
const tableDiv = document.getElementById('courses-table');
loading.style.display = 'block';
tableDiv.innerHTML = '';
try {
const response = await fetch('/api/courses');
allCourses = await response.json();
loading.style.display = 'none';
displayCourses(allCourses);
updateSearchInfo(allCourses.length, allCourses.length);
} catch (error) {
console.error('Error loading courses:', error);
loading.style.display = 'none';
tableDiv.innerHTML = '<p>Error loading courses. Please try again.</p>';
}
}
function searchCourses() {
const searchInput = document.getElementById('course-search');
const searchTerm = searchInput.value.toLowerCase().trim();
if (!searchTerm) {
displayCourses(allCourses);
updateSearchInfo(allCourses.length, allCourses.length);
return;
}
const filtered = allCourses.filter(course => {
return course.name.toLowerCase().includes(searchTerm) ||
course.city.toLowerCase().includes(searchTerm);
});
displayCourses(filtered);
updateSearchInfo(filtered.length, allCourses.length);
}
function updateSearchInfo(showing, total) {
const infoDiv = document.getElementById('search-results-info');
if (showing === total) {
infoDiv.textContent = `Showing all ${total} courses`;
} else {
infoDiv.textContent = `Showing ${showing} of ${total} courses`;
}
}
function displayCourses(courses) {
const tableDiv = document.getElementById('courses-table');
if (courses.length === 0) {
tableDiv.innerHTML = '<p>No courses found. Click "Scrape Courses" to load Swedish courses from PDGA.</p>';
return;
}
let tableHTML = `
<table>
<thead>
<tr>
<th>Course Name</th>
<th class="mobile-hide">City</th>
<th class="mobile-hide">Last Updated</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
`;
courses.forEach(course => {
const lastUpdated = new Date(course.last_updated).toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric'
});
tableHTML += `
<tr id="row-${course.id}" class="expandable-row" onclick="toggleCourseLayouts(${course.id})">
<td>
<a href="${course.link}" target="_blank" onclick="event.stopPropagation()">${course.name}</a>
<div class="mobile-only" style="font-size: 11px; color: #999; margin-top: 2px;">${course.city}</div>
</td>
<td class="mobile-hide">${course.city}</td>
<td class="mobile-hide">${lastUpdated}</td>
<td>
<i class="fas fa-sync-alt refresh-icon" onclick="scrapeLayouts(${course.id}, '${course.name.replace(/'/g, "\\'")}'); event.stopPropagation();" title="Scrape layouts for this course"></i>
</td>
</tr>
<tr id="layouts-${course.id}" class="expanded-content">
<td colspan="4">
<div class="layouts-container" id="layouts-container-${course.id}">
<div class="no-layouts">Click to load layouts...</div>
</div>
</td>
</tr>
`;
});
tableHTML += `
</tbody>
</table>
`;
tableDiv.innerHTML = tableHTML;
}
function toggleAccordion(accordionId) {
const content = document.getElementById(accordionId);
const icon = document.getElementById(`${accordionId}-icon`);
@@ -120,7 +11,7 @@ function toggleAccordion(accordionId) {
}
}
async function toggleCourseLayouts(courseId) {
function toggleCourseLayouts(courseId) {
const layoutsRow = document.getElementById(`layouts-${courseId}`);
const layoutsContainer = document.getElementById(`layouts-container-${courseId}`);
@@ -135,120 +26,22 @@ async function toggleCourseLayouts(courseId) {
return;
}
layoutsContainer.innerHTML = '<div class="no-layouts">Loading layouts...</div>';
try {
const response = await fetch(`/api/layouts/${courseId}`);
const layouts = await response.json();
if (layouts.length > 0) {
const oneYearAgo = new Date();
oneYearAgo.setDate(oneYearAgo.getDate() - 365);
const activeLayouts = [];
const inactiveLayouts = [];
layouts.forEach(layout => {
if (layout.last_played) {
const lastPlayedDate = new Date(layout.last_played);
if (lastPlayedDate >= oneYearAgo) {
activeLayouts.push(layout);
} else {
inactiveLayouts.push(layout);
}
} else {
inactiveLayouts.push(layout);
}
});
let layoutsHTML = '<h4 style="margin-top: 0;">Layouts:</h4>';
if (activeLayouts.length > 0) {
activeLayouts.forEach(layout => {
const ratingDisplay = layout.mean_rating ?
`<span style="color: #28a745; font-weight: bold; margin-left: 10px;">Rating: ${layout.mean_rating}</span>` :
'';
const dateDisplay = layout.last_played ?
`<span style="color: #6c757d; font-size: 12px; margin-left: 10px;">Last played: ${new Date(layout.last_played).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</span>` :
'';
layoutsHTML += `
<div class="layout-item">
<div>
<span class="layout-name">${layout.name}</span>
${dateDisplay}
</div>
<span class="layout-par">Par ${layout.par}${ratingDisplay}</span>
</div>
`;
});
}
if (inactiveLayouts.length > 0) {
const accordionId = `accordion-${courseId}`;
layoutsHTML += `
<div class="inactive-layouts-accordion">
<div class="accordion-header" onclick="toggleAccordion('${accordionId}')">
<span class="accordion-header-text">Inactive Layouts (${inactiveLayouts.length}) - Not played in last year</span>
<span class="accordion-icon" id="${accordionId}-icon">&#9660;</span>
</div>
<div class="accordion-content" id="${accordionId}">
`;
inactiveLayouts.forEach(layout => {
const ratingDisplay = layout.mean_rating ?
`<span style="color: #28a745; font-weight: bold; margin-left: 10px;">Rating: ${layout.mean_rating}</span>` :
'';
const dateDisplay = layout.last_played ?
`<span style="color: #6c757d; font-size: 12px; margin-left: 10px;">Last played: ${new Date(layout.last_played).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</span>` :
`<span style="color: #dc3545; font-size: 12px; margin-left: 10px;">Never played</span>`;
layoutsHTML += `
<div class="layout-item inactive">
<div>
<span class="layout-name">${layout.name}</span>
${dateDisplay}
</div>
<span class="layout-par">Par ${layout.par}${ratingDisplay}</span>
</div>
`;
});
layoutsHTML += `
</div>
</div>
`;
}
if (activeLayouts.length === 0 && inactiveLayouts.length === 0) {
layoutsHTML = '<div class="no-layouts">No layouts found. Click the refresh icon to scrape layouts.</div>';
}
layoutsContainer.innerHTML = layoutsHTML;
layoutsContainer.dataset.loaded = 'true';
} else {
layoutsContainer.innerHTML = '<div class="no-layouts">No layouts found. Click the refresh icon to scrape layouts.</div>';
}
} catch (error) {
console.error('Error loading layouts:', error);
layoutsContainer.innerHTML = '<div class="no-layouts">Error loading layouts</div>';
}
htmx.ajax('GET', `/partials/course-layouts/${courseId}`, {target: `#layouts-container-${courseId}`, swap: 'innerHTML'});
layoutsContainer.dataset.loaded = 'true';
}
async function scrapeCourses() {
const btn = document.getElementById('scrape-courses-btn');
btn.disabled = true;
btn.innerHTML = '<i class="fas fa-sync-alt spinning"></i> Scraping...';
btn.textContent = 'Scraping...';
try {
const response = await fetch('/api/scrape-courses', {
method: 'POST'
});
const response = await fetch('/api/scrape-courses', { method: 'POST' });
const data = await response.json();
if (data.success) {
alert(data.message);
await loadCourses();
searchCourses();
htmx.ajax('GET', '/partials/course-table', '#courses-table');
} else {
alert('Failed to scrape courses');
}
@@ -257,7 +50,7 @@ async function scrapeCourses() {
alert('Error scraping courses');
} finally {
btn.disabled = false;
btn.innerHTML = '<i class="fas fa-sync-alt"></i> Scrape Courses';
btn.textContent = 'Scrape Courses';
}
}
@@ -266,10 +59,7 @@ async function scrapeLayouts(courseId, courseName) {
icon.classList.add('spinning');
try {
const response = await fetch(`/api/scrape-layouts/${courseId}`, {
method: 'POST'
});
const response = await fetch(`/api/scrape-layouts/${courseId}`, { method: 'POST' });
const data = await response.json();
if (response.status === 409) {
@@ -280,8 +70,8 @@ async function scrapeLayouts(courseId, courseName) {
const layoutsRow = document.getElementById(`layouts-${courseId}`);
if (layoutsRow.style.display === 'table-row') {
toggleCourseLayouts(courseId);
setTimeout(() => toggleCourseLayouts(courseId), 100);
htmx.ajax('GET', `/partials/course-layouts/${courseId}`, {target: `#layouts-container-${courseId}`, swap: 'innerHTML'});
layoutsContainer.dataset.loaded = 'true';
}
alert(data.message);
public/js/players.js
+172 -279
View File
@@ -1,90 +1,28 @@
let cachedDebugInfo = {};
let pendingPlayerData = null;
function displayRatings(ratings) {
const tableDiv = document.getElementById('ratings-table');
if (ratings.length === 0) {
tableDiv.innerHTML = '<p>No ratings found.</p>';
return;
}
let tableHTML = `
<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((player, index) => {
const difference = player.predictedRating && player.rating ?
player.predictedRating - player.rating : 0;
const diffText = difference > 0 ? `+${difference}` : difference.toString();
const diffClass = difference > 0 ? 'positive' : difference < 0 ? 'negative' : 'neutral';
const ratingChangeText = player.ratingChange ?
(player.ratingChange > 0 ? `+${player.ratingChange}` : player.ratingChange.toString()) : 'N/A';
const ratingChangeClass = player.ratingChange > 0 ? 'positive' :
player.ratingChange < 0 ? 'negative' : 'neutral';
tableHTML += `
<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 class="chart-container" id="chart-${player.pdgaNumber}" style="position: relative;">
<div class="loading-chart">Click to load rating history...</div>
</div>
<div class="chart-tooltip" id="tooltip-${player.pdgaNumber}"></div>
</td>
</tr>
`;
function setupTooltipsAfterSwap() {
document.body.addEventListener('htmx:afterSwap', function(event) {
if (event.detail.target.id === 'ratings-table') {
initRatingsTooltips();
}
// After player history partial loads, render the chart
const target = event.detail.target;
if (target.id && target.id.startsWith('history-content-')) {
const container = target.querySelector('.chart-container');
if (container && container.dataset.history) {
try {
const history = JSON.parse(container.dataset.history);
createRatingChart(container, history);
} catch (e) {
console.error('Error rendering chart:', e);
}
}
}
});
tableHTML += `
</tbody>
</table>
`;
tableDiv.innerHTML = tableHTML;
}
function initRatingsTooltips() {
document.querySelectorAll('.predicted-value').forEach(span => {
const pdgaNumber = span.dataset.pdga;
const stdDev = span.dataset.stddev;
@@ -109,47 +47,30 @@ function displayRatings(ratings) {
});
}
async function togglePlayerHistory(pdgaNumber) {
function togglePlayerHistory(pdgaNumber) {
const historyRow = document.getElementById(`history-${pdgaNumber}`);
const chartContainer = document.getElementById(`chart-${pdgaNumber}`);
const contentDiv = document.getElementById(`history-content-${pdgaNumber}`);
if (historyRow.style.display === 'table-row') {
historyRow.style.display = 'none';
return;
}
historyRow.style.display = 'table-row';
if (chartContainer.dataset.loaded === 'true') {
if (contentDiv.dataset.loaded === 'true') {
return;
}
chartContainer.innerHTML = '<div class="loading-chart">Loading rating history...</div>';
try {
const response = await fetch(`/api/rating-history/${pdgaNumber}`);
const data = await response.json();
if (data.history && data.history.length > 0) {
createRatingChart(chartContainer, data.history);
chartContainer.dataset.loaded = 'true';
} else {
chartContainer.innerHTML = '<div class="loading-chart">No rating history available</div>';
}
} catch (error) {
console.error('Error loading rating history:', error);
chartContainer.innerHTML = '<div class="loading-chart">Error loading rating history</div>';
}
htmx.ajax('GET', `/partials/player-history/${pdgaNumber}`, {target: `#history-content-${pdgaNumber}`, swap: 'innerHTML'});
contentDiv.dataset.loaded = 'true';
}
async function clearCache() {
try {
const response = await fetch('/api/clear-cache', {
method: 'POST'
});
const response = await fetch('/api/clear-cache', { method: 'POST' });
const data = await response.json();
if (data.success) {
alert(data.message);
if (confirm('Reload page to fetch fresh data?')) {
@@ -167,27 +88,24 @@ async function clearCache() {
async function refreshPlayer(pdgaNumber) {
const icon = document.querySelector(`#row-${pdgaNumber} .rating .refresh-icon`);
icon.classList.add('spinning');
try {
const response = await fetch(`/api/refresh-player/${pdgaNumber}`, {
method: 'POST'
});
const response = await fetch(`/api/refresh-player/${pdgaNumber}`, { method: 'POST' });
const data = await response.json();
if (data.success) {
const row = document.getElementById(`row-${pdgaNumber}`);
const ratingCell = row.querySelector('.rating');
const ratingChangeCell = row.querySelector('.rating-change');
const nameLink = row.querySelector('.player-name a');
nameLink.textContent = data.player.name;
const ratingChangeText = data.player.ratingChange ?
const ratingChangeText = data.player.ratingChange ?
(data.player.ratingChange > 0 ? `+${data.player.ratingChange}` : data.player.ratingChange.toString()) : 'N/A';
const ratingChangeClass = data.player.ratingChange > 0 ? 'positive' :
const ratingChangeClass = data.player.ratingChange > 0 ? 'positive' :
data.player.ratingChange < 0 ? 'negative' : 'neutral';
const ratingValue = ratingCell.querySelector('.rating-value');
if (ratingValue) {
ratingValue.textContent = data.player.rating || 'N/A';
@@ -224,18 +142,15 @@ async function refreshPlayer(pdgaNumber) {
async function refreshRoundHistory(pdgaNumber) {
const icon = document.querySelector(`#predicted-${pdgaNumber} .refresh-icon`);
icon.classList.add('spinning');
try {
const response = await fetch(`/api/refresh-round-history/${pdgaNumber}`, {
method: 'POST'
});
const response = await fetch(`/api/refresh-round-history/${pdgaNumber}`, { method: 'POST' });
const data = await response.json();
if (!response.ok) {
throw new Error(JSON.stringify(data));
}
if (data.success) {
if (data.debugLog) {
cachedDebugInfo[pdgaNumber] = data.debugLog;
@@ -271,27 +186,6 @@ async function refreshRoundHistory(pdgaNumber) {
replaceWithTooltip(ratingValue, ratingTooltip, () => `Rating Range: ${minRating} - ${maxRating} (\u00b1${stdDev})`);
}
}
const diffCell = document.getElementById(`diff-${pdgaNumber}`);
if (diffCell) {
const currentRatingElement = document.querySelector(`#row-${pdgaNumber} .rating .refresh-section`);
if (currentRatingElement && currentRatingElement.firstChild) {
const currentRatingText = currentRatingElement.firstChild.textContent;
const currentRating = parseInt(currentRatingText);
if (data.predictedRating && currentRating && !isNaN(currentRating)) {
const difference = data.predictedRating - currentRating;
const diffText = difference > 0 ? `+${difference}` : difference.toString();
const diffClass = difference > 0 ? 'positive' : difference < 0 ? 'negative' : 'neutral';
diffCell.className = `difference ${diffClass}`;
diffCell.textContent = diffText;
} else {
diffCell.innerHTML = '<span style="color: #999; font-style: italic;">Use refresh</span>';
}
}
}
}
} catch (error) {
console.error('Error refreshing round history:', error);
@@ -331,24 +225,16 @@ async function refreshRoundHistory(pdgaNumber) {
async function refreshRatingHistory(pdgaNumber) {
const icon = document.querySelector(`#history-${pdgaNumber} .chart-title .refresh-icon`);
icon.classList.add('spinning');
try {
const response = await fetch(`/api/refresh-rating-history/${pdgaNumber}`, {
method: 'POST'
});
const response = await fetch(`/api/refresh-rating-history/${pdgaNumber}`, { method: 'POST' });
const data = await response.json();
if (data.success) {
const chartContainer = document.getElementById(`chart-${pdgaNumber}`);
chartContainer.dataset.loaded = 'false';
if (data.history && data.history.length > 0) {
createRatingChart(chartContainer, data.history);
chartContainer.dataset.loaded = 'true';
} else {
chartContainer.innerHTML = '<div class="loading-chart">No rating history available</div>';
}
const contentDiv = document.getElementById(`history-content-${pdgaNumber}`);
contentDiv.dataset.loaded = 'false';
htmx.ajax('GET', `/partials/player-history/${pdgaNumber}`, {target: `#history-content-${pdgaNumber}`, swap: 'innerHTML'});
contentDiv.dataset.loaded = 'true';
}
} catch (error) {
console.error('Error refreshing rating history:', error);
@@ -358,61 +244,27 @@ async function refreshRatingHistory(pdgaNumber) {
}
}
async function refreshAllPlayers() {
const icons = document.querySelectorAll('th .refresh-icon');
const ratingIcon = icons[0];
ratingIcon.classList.add('spinning');
try {
const ratings = await getAllPlayersFromDB();
displayRatings(ratings);
} catch (error) {
console.error('Error refreshing all players:', error);
alert('Failed to refresh player data');
} finally {
ratingIcon.classList.remove('spinning');
}
}
async function refreshAllPredictions() {
const icons = document.querySelectorAll('th .refresh-icon');
const predictedIcon = icons[1];
predictedIcon.classList.add('spinning');
try {
alert('Bulk prediction refresh not implemented yet. Use individual refresh icons.');
} catch (error) {
console.error('Error refreshing all predictions:', error);
alert('Failed to refresh predictions');
} finally {
predictedIcon.classList.remove('spinning');
}
}
async function showDebugInfo(pdgaNumber) {
const modal = document.getElementById('debug-modal');
const header = document.getElementById('debug-header');
const log = document.getElementById('debug-log');
const playerNameElement = document.querySelector(`#row-${pdgaNumber} .player-name a`);
const playerName = playerNameElement ? playerNameElement.textContent : `PDGA #${pdgaNumber}`;
header.textContent = `Prediction Calculation Details - ${playerName}`;
log.textContent = 'Loading calculation details...';
modal.style.display = 'flex';
try {
if (cachedDebugInfo[pdgaNumber]) {
log.textContent = cachedDebugInfo[pdgaNumber].join('\n');
return;
}
const response = await fetch(`/api/refresh-round-history/${pdgaNumber}`, {
method: 'POST'
});
const response = await fetch(`/api/refresh-round-history/${pdgaNumber}`, { method: 'POST' });
const data = await response.json();
if (data.success && data.debugLog) {
cachedDebugInfo[pdgaNumber] = data.debugLog;
log.textContent = data.debugLog.join('\n');
@@ -426,8 +278,7 @@ async function showDebugInfo(pdgaNumber) {
}
function closeDebugModal(event) {
const modal = document.getElementById('debug-modal');
modal.style.display = 'none';
document.getElementById('debug-modal').style.display = 'none';
}
async function searchAndAddPlayer() {
@@ -440,9 +291,9 @@ async function searchAndAddPlayer() {
}
const button = document.querySelector('.btn-add');
const originalHTML = button.innerHTML;
const originalText = button.textContent;
button.disabled = true;
button.innerHTML = '<i class="fas fa-sync-alt spinning"></i> Searching...';
button.textContent = 'Searching...';
try {
const response = await fetch(`/api/search-player/${pdgaNumber}`);
@@ -466,70 +317,112 @@ async function searchAndAddPlayer() {
showErrorModal('Failed to search for player. Please try again.');
} finally {
button.disabled = false;
button.innerHTML = originalHTML;
button.textContent = originalText;
}
}
function showConfirmationModal(player) {
const modal = document.getElementById('add-player-modal');
const header = document.getElementById('add-player-modal-header');
const body = document.getElementById('add-player-modal-body');
const footer = document.getElementById('add-player-modal-footer');
document.getElementById('add-player-modal-header').textContent = 'Confirm Player';
header.textContent = 'Confirm Player';
body.innerHTML = `
<p>Is this the correct player you want to add?</p>
<div style="background-color: #f8f9fa; padding: 15px; border-radius: 4px; margin-top: 15px;">
<strong style="font-size: 18px; color: #007bff;">${player.name}</strong><br>
<span style="color: #6c757d;">PDGA #${player.pdgaNumber}</span><br>
${player.rating ? `<span style="color: #28a745; font-weight: bold;">Current Rating: ${player.rating}</span>` : '<span style="color: #999;">No rating available</span>'}
</div>
`;
footer.innerHTML = `
<button class="btn btn-cancel" onclick="closeAddPlayerModal()">Cancel</button>
<button class="btn btn-confirm" onclick="confirmAddPlayer()">Add Player</button>
`;
const body = document.getElementById('add-player-modal-body');
body.textContent = '';
const question = document.createElement('p');
question.textContent = 'Is this the correct player you want to add?';
body.appendChild(question);
const info = document.createElement('div');
info.style.cssText = 'background-color: #f8f9fa; padding: 15px; border-radius: 4px; margin-top: 15px;';
const name = document.createElement('strong');
name.style.cssText = 'font-size: 18px; color: #007bff;';
name.textContent = player.name;
info.appendChild(name);
info.appendChild(document.createElement('br'));
const pdga = document.createElement('span');
pdga.style.color = '#6c757d';
pdga.textContent = `PDGA #${player.pdgaNumber}`;
info.appendChild(pdga);
info.appendChild(document.createElement('br'));
const rating = document.createElement('span');
if (player.rating) {
rating.style.cssText = 'color: #28a745; font-weight: bold;';
rating.textContent = `Current Rating: ${player.rating}`;
} else {
rating.style.color = '#999';
rating.textContent = 'No rating available';
}
info.appendChild(rating);
body.appendChild(info);
const footer = document.getElementById('add-player-modal-footer');
footer.textContent = '';
const cancelBtn = document.createElement('button');
cancelBtn.className = 'btn btn-cancel';
cancelBtn.textContent = 'Cancel';
cancelBtn.onclick = closeAddPlayerModal;
footer.appendChild(cancelBtn);
const confirmBtn = document.createElement('button');
confirmBtn.className = 'btn btn-confirm';
confirmBtn.textContent = 'Add Player';
confirmBtn.onclick = confirmAddPlayer;
footer.appendChild(confirmBtn);
modal.style.display = 'flex';
}
function showErrorModal(message) {
const modal = document.getElementById('add-player-modal');
const header = document.getElementById('add-player-modal-header');
const body = document.getElementById('add-player-modal-body');
const footer = document.getElementById('add-player-modal-footer');
document.getElementById('add-player-modal-header').textContent = 'Player Not Found';
header.textContent = 'Player Not Found';
body.innerHTML = `
<p style="color: #dc3545;">
<i class="fas fa-exclamation-circle"></i> ${message}
</p>
<p style="margin-top: 10px; color: #6c757d; font-size: 14px;">
Please check the PDGA number and try again.
</p>
`;
footer.innerHTML = `
<button class="btn btn-cancel" onclick="closeAddPlayerModal()">Close</button>
`;
const body = document.getElementById('add-player-modal-body');
body.textContent = '';
const errorP = document.createElement('p');
errorP.style.color = '#dc3545';
errorP.textContent = message;
body.appendChild(errorP);
const helpP = document.createElement('p');
helpP.style.cssText = 'margin-top: 10px; color: #6c757d; font-size: 14px;';
helpP.textContent = 'Please check the PDGA number and try again.';
body.appendChild(helpP);
const footer = document.getElementById('add-player-modal-footer');
footer.textContent = '';
const closeBtn = document.createElement('button');
closeBtn.className = 'btn btn-cancel';
closeBtn.textContent = 'Close';
closeBtn.onclick = closeAddPlayerModal;
footer.appendChild(closeBtn);
modal.style.display = 'flex';
}
function showInfoModal(message) {
const modal = document.getElementById('add-player-modal');
const header = document.getElementById('add-player-modal-header');
const body = document.getElementById('add-player-modal-body');
const footer = document.getElementById('add-player-modal-footer');
document.getElementById('add-player-modal-header').textContent = 'Information';
header.textContent = 'Information';
body.innerHTML = `
<p style="color: #007bff;">
<i class="fas fa-info-circle"></i> ${message}
</p>
`;
footer.innerHTML = `
<button class="btn btn-cancel" onclick="closeAddPlayerModal()">Close</button>
`;
const body = document.getElementById('add-player-modal-body');
body.textContent = '';
const infoP = document.createElement('p');
infoP.style.color = '#007bff';
infoP.textContent = message;
body.appendChild(infoP);
const footer = document.getElementById('add-player-modal-footer');
footer.textContent = '';
const closeBtn = document.createElement('button');
closeBtn.className = 'btn btn-cancel';
closeBtn.textContent = 'Close';
closeBtn.onclick = closeAddPlayerModal;
footer.appendChild(closeBtn);
modal.style.display = 'flex';
}
@@ -540,19 +433,14 @@ async function confirmAddPlayer() {
return;
}
const modal = document.getElementById('add-player-modal');
const body = document.getElementById('add-player-modal-body');
const footer = document.getElementById('add-player-modal-footer');
body.innerHTML = '<p style="text-align: center;"><i class="fas fa-sync-alt spinning"></i> Adding player...</p>';
footer.innerHTML = '';
body.textContent = 'Adding player...';
document.getElementById('add-player-modal-footer').textContent = '';
try {
const response = await fetch('/api/add-player', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ pdgaNumber: pendingPlayerData.pdgaNumber })
});
@@ -562,34 +450,39 @@ async function confirmAddPlayer() {
throw new Error(data.error || 'Failed to add player');
}
body.innerHTML = `
<p style="color: #28a745; text-align: center;">
<i class="fas fa-check-circle" style="font-size: 48px; margin-bottom: 15px;"></i><br>
<strong>${data.player.name}</strong> has been added successfully!
</p>
`;
footer.innerHTML = `
<button class="btn btn-confirm" onclick="closeAddPlayerModal(); location.reload();">OK</button>
`;
body.textContent = '';
const successP = document.createElement('p');
successP.style.cssText = 'color: #28a745; text-align: center;';
successP.textContent = `${data.player.name} has been added successfully!`;
body.appendChild(successP);
const footer = document.getElementById('add-player-modal-footer');
footer.textContent = '';
const okBtn = document.createElement('button');
okBtn.className = 'btn btn-confirm';
okBtn.textContent = 'OK';
okBtn.onclick = function() { closeAddPlayerModal(); location.reload(); };
footer.appendChild(okBtn);
document.getElementById('pdga-number-input').value = '';
pendingPlayerData = null;
} catch (error) {
console.error('Error adding player:', error);
body.innerHTML = `
<p style="color: #dc3545;">
<i class="fas fa-exclamation-circle"></i> ${error.message}
</p>
`;
footer.innerHTML = `
<button class="btn btn-cancel" onclick="closeAddPlayerModal()">Close</button>
`;
body.textContent = error.message;
body.style.color = '#dc3545';
const footer = document.getElementById('add-player-modal-footer');
footer.textContent = '';
const closeBtn = document.createElement('button');
closeBtn.className = 'btn btn-cancel';
closeBtn.textContent = 'Close';
closeBtn.onclick = closeAddPlayerModal;
footer.appendChild(closeBtn);
}
}
function closeAddPlayerModal(event) {
const modal = document.getElementById('add-player-modal');
modal.style.display = 'none';
document.getElementById('add-player-modal').style.display = 'none';
pendingPlayerData = null;
}
public/js/progress.js
+17 -21
View File
@@ -3,15 +3,15 @@ function fetchRatingsWithProgress() {
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
const tableDiv = document.getElementById('ratings-table');
progressSection.style.display = 'block';
tableDiv.innerHTML = '';
const eventSource = new EventSource('/api/ratings/progress');
eventSource.onmessage = function(event) {
const data = JSON.parse(event.data);
if (data.status === 'loading') {
const percentage = Math.round((data.current / data.total) * 100);
progressBar.style.width = `${percentage}%`;
@@ -29,18 +29,14 @@ function fetchRatingsWithProgress() {
progressText.textContent = `Error loading PDGA #${data.pdgaNumber} (${data.current}/${data.total})`;
} else if (data.status === 'complete') {
progressSection.style.display = 'none';
displayRatings(data.ratings);
eventSource.close();
} else if (data.status === 'error') {
progressSection.style.display = 'none';
tableDiv.innerHTML = '<p>Error loading ratings. Please try again.</p>';
htmx.ajax('GET', '/partials/ratings-table', '#ratings-table');
eventSource.close();
}
};
eventSource.onerror = function() {
progressSection.style.display = 'none';
tableDiv.innerHTML = '<p>Connection error. Please refresh the page.</p>';
tableDiv.textContent = 'Connection error. Please refresh the page.';
eventSource.close();
};
}
@@ -50,26 +46,26 @@ function loadAllPlayers() {
const originalText = button.textContent;
button.textContent = 'Loading...';
button.style.pointerEvents = 'none';
try {
const progressSection = document.getElementById('progress-section');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
const tableDiv = document.getElementById('ratings-table');
progressSection.style.display = 'block';
tableDiv.innerHTML = '';
tableDiv.textContent = '';
const eventSource = new EventSource('/api/load-all-players');
eventSource.onmessage = function(event) {
const data = JSON.parse(event.data);
if (data.status === 'loading' || data.status === 'completed' || data.status === 'error') {
const percentage = Math.round((data.current / data.total) * 100);
progressBar.style.width = `${percentage}%`;
progressBar.textContent = `${percentage}%`;
if (data.status === 'loading') {
progressText.textContent = `Loading player ${data.current}/${data.total}: PDGA #${data.pdgaNumber}`;
} else if (data.status === 'completed') {
@@ -79,16 +75,16 @@ function loadAllPlayers() {
}
} else if (data.status === 'complete') {
progressSection.style.display = 'none';
displayRatings(data.ratings);
htmx.ajax('GET', '/partials/ratings-table', '#ratings-table');
eventSource.close();
button.textContent = originalText;
button.style.pointerEvents = 'auto';
}
};
eventSource.onerror = function() {
progressSection.style.display = 'none';
tableDiv.innerHTML = '<p>Connection error. Please refresh the page.</p>';
tableDiv.textContent = 'Connection error. Please refresh the page.';
eventSource.close();
button.textContent = originalText;
button.style.pointerEvents = 'auto';
src/routes/courses.js
+30
View File
@@ -8,6 +8,36 @@ const { layoutEventCache, scrapeCourseDirectory, scrapeCourseLayouts, scrapeEven
// Request locking to prevent concurrent scrapes of the same resource
const activeScrapes = new Map();
router.get('/partials/course-table', async (req, res) => {
try {
const allCourses = await getAllCoursesFromDB();
const query = req.query.q || '';
let courses = allCourses;
if (query) {
const q = query.toLowerCase();
courses = allCourses.filter(c =>
c.name.toLowerCase().includes(q) || c.city.toLowerCase().includes(q)
);
}
res.render('../partials/course-table', { courses, query, total: allCourses.length });
} catch (error) {
res.status(500).send('<p>Error loading courses. Please try again.</p>');
}
});
router.get('/partials/course-layouts/:courseId', async (req, res) => {
try {
const { courseId } = req.params;
const layouts = await getLayoutsForCourse(courseId);
res.render('../partials/course-layouts', { layouts, courseId });
} catch (error) {
console.error('Error loading course layouts:', error.message);
res.status(500).send('<div class="no-layouts">Error loading layouts</div>');
}
});
router.get('/api/courses', async (req, res) => {
try {
const courses = await getAllCoursesFromDB();
src/routes/players.js
+37
View File
@@ -8,6 +8,43 @@ const { launchBrowser } = require('../scrapers/browser');
const { getPlayerDataFromDB, scrapePDGARating, getAllRatingsFromDB, refreshAllPlayersInDB, getPredictedRatingFromDB } = require('../services/player-service');
const { calculatePredictedRating } = require('../services/rating-calculator');
router.get('/partials/ratings-table', async (req, res) => {
try {
const ratings = await getAllRatingsFromDB();
res.render('../partials/ratings-table', { ratings });
} catch (error) {
res.status(500).send('<p>Error loading ratings. Please try again.</p>');
}
});
router.get('/partials/player-history/:pdgaNumber', async (req, res) => {
try {
const { pdgaNumber } = req.params;
let history = await getRatingHistoryFromDB(pdgaNumber);
if (!history || history.length === 0) {
const html = await fetchRatingHistory(pdgaNumber);
history = parseRatingHistory(html);
try {
await saveRatingHistoryToDB(pdgaNumber, history);
} catch (dbErr) {
console.error('Failed to save rating history:', dbErr.message);
}
}
const formattedHistory = (history || []).map(row => ({
date: row.date,
rating: row.rating,
displayDate: new Date(row.date).toLocaleDateString('en-US', { day: '2-digit', month: 'short', year: 'numeric' })
}));
res.render('../partials/player-history', { pdgaNumber, history: formattedHistory });
} catch (error) {
console.error('Error loading player history:', error.message);
res.status(500).send('<div class="loading-chart">Error loading rating history</div>');
}
});
router.get('/api/ratings', async (req, res) => {
try {
const ratings = await getAllRatingsFromDB();
views/pages/courses.ejs
+6 -5
View File
@@ -4,11 +4,13 @@
type="text"
class="search-input"
id="course-search"
name="q"
placeholder="Search courses by name or city..."
oninput="searchCourses()"
hx-get="/partials/course-table"
hx-trigger="input changed delay:300ms, search"
hx-target="#courses-table"
/>
</div>
<div id="search-results-info" class="search-results-info"></div>
<div class="controls">
<button class="btn" onclick="scrapeCourses()" id="scrape-courses-btn">
@@ -17,7 +19,7 @@
</div>
<div id="loading" class="loading" style="display: none;">Loading courses...</div>
<div id="courses-table"></div>
<div id="courses-table" hx-get="/partials/course-table" hx-trigger="load"></div>
`; %>
<%- include('../partials/layout', {
@@ -26,6 +28,5 @@
activePage: 'courses',
cssFiles: ['courses.css'],
jsFiles: ['courses.js'],
initScript: 'loadCourses();',
body: body
}) %>
}) %>
views/pages/index.ejs
+2 -2
View File
@@ -26,7 +26,7 @@
</div>
<div id="progress-text" class="progress-text">Preparing to load ratings...</div>
</div>
<div id="ratings-table"></div>
<div id="ratings-table" hx-get="/partials/ratings-table" hx-trigger="load"></div>
`; %>
<% var modals = `
@@ -59,7 +59,7 @@
activePage: 'players',
cssFiles: ['players.css'],
jsFiles: ['tooltips.js', 'chart.js', 'progress.js', 'players.js'],
initScript: 'fetchRatingsWithProgress();',
initScript: 'setupTooltipsAfterSwap();',
body: body,
modals: modals
}) %>
views/partials/course-layouts.ejs
+71
View File
@@ -0,0 +1,71 @@
<% if (layouts.length === 0) { %>
<div class="no-layouts">No layouts found. Click the refresh icon to scrape layouts.</div>
<% } else {
var oneYearAgo = new Date();
oneYearAgo.setDate(oneYearAgo.getDate() - 365);
var activeLayouts = [];
var inactiveLayouts = [];
layouts.forEach(function(layout) {
if (layout.last_played) {
var lastPlayedDate = new Date(layout.last_played);
if (lastPlayedDate >= oneYearAgo) {
activeLayouts.push(layout);
} else {
inactiveLayouts.push(layout);
}
} else {
inactiveLayouts.push(layout);
}
});
%>
<h4 style="margin-top: 0;">Layouts:</h4>
<% if (activeLayouts.length > 0) { %>
<% activeLayouts.forEach(function(layout) {
var ratingDisplay = layout.mean_rating ?
'<span style="color: #28a745; font-weight: bold; margin-left: 10px;">Rating: ' + layout.mean_rating + '</span>' : '';
var dateDisplay = layout.last_played ?
'<span style="color: #6c757d; font-size: 12px; margin-left: 10px;">Last played: ' + new Date(layout.last_played).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) + '</span>' : '';
%>
<div class="layout-item">
<div>
<span class="layout-name"><%= layout.name %></span>
<%- dateDisplay %>
</div>
<span class="layout-par">Par <%= layout.par %><%- ratingDisplay %></span>
</div>
<% }); %>
<% } %>
<% if (inactiveLayouts.length > 0) { %>
<div class="inactive-layouts-accordion">
<div class="accordion-header" onclick="toggleAccordion('accordion-<%= courseId %>')">
<span class="accordion-header-text">Inactive Layouts (<%= inactiveLayouts.length %>) - Not played in last year</span>
<span class="accordion-icon" id="accordion-<%= courseId %>-icon">&#9660;</span>
</div>
<div class="accordion-content" id="accordion-<%= courseId %>">
<% inactiveLayouts.forEach(function(layout) {
var ratingDisplay = layout.mean_rating ?
'<span style="color: #28a745; font-weight: bold; margin-left: 10px;">Rating: ' + layout.mean_rating + '</span>' : '';
var dateDisplay = layout.last_played ?
'<span style="color: #6c757d; font-size: 12px; margin-left: 10px;">Last played: ' + new Date(layout.last_played).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) + '</span>' :
'<span style="color: #dc3545; font-size: 12px; margin-left: 10px;">Never played</span>';
%>
<div class="layout-item inactive">
<div>
<span class="layout-name"><%= layout.name %></span>
<%- dateDisplay %>
</div>
<span class="layout-par">Par <%= layout.par %><%- ratingDisplay %></span>
</div>
<% }); %>
</div>
</div>
<% } %>
<% if (activeLayouts.length === 0 && inactiveLayouts.length === 0) { %>
<div class="no-layouts">No layouts found. Click the refresh icon to scrape layouts.</div>
<% } %>
<% } %>
views/partials/course-table.ejs
+46
View File
@@ -0,0 +1,46 @@
<div id="search-results-info" class="search-results-info">
<% if (typeof query !== 'undefined' && query) { %>
Showing <%= courses.length %> of <%= total %> courses
<% } else { %>
Showing all <%= courses.length %> courses
<% } %>
</div>
<% if (courses.length === 0) { %>
<p>No courses found. Click "Scrape Courses" to load Swedish courses from PDGA.</p>
<% } else { %>
<table>
<thead>
<tr>
<th>Course Name</th>
<th class="mobile-hide">City</th>
<th class="mobile-hide">Last Updated</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<% courses.forEach(function(course) {
var lastUpdated = new Date(course.last_updated).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
%>
<tr id="row-<%= course.id %>" class="expandable-row" onclick="toggleCourseLayouts(<%= course.id %>)">
<td>
<a href="<%= course.link %>" target="_blank" onclick="event.stopPropagation()"><%= course.name %></a>
<div class="mobile-only" style="font-size: 11px; color: #999; margin-top: 2px;"><%= course.city %></div>
</td>
<td class="mobile-hide"><%= course.city %></td>
<td class="mobile-hide"><%= lastUpdated %></td>
<td>
<i class="fas fa-sync-alt refresh-icon" onclick="scrapeLayouts(<%= course.id %>, '<%= course.name.replace(/'/g, "\\'") %>'); event.stopPropagation();" title="Scrape layouts for this course"></i>
</td>
</tr>
<tr id="layouts-<%= course.id %>" class="expanded-content">
<td colspan="4">
<div class="layouts-container" id="layouts-container-<%= course.id %>">
<div class="no-layouts">Click to load layouts...</div>
</div>
</td>
</tr>
<% }); %>
</tbody>
</table>
<% } %>
views/partials/layout.ejs
+1
View File
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
<link rel="stylesheet" href="/css/shared.css">
<% if (typeof cssFiles !== 'undefined') { %>
<% cssFiles.forEach(function(file) { %>
views/partials/player-history.ejs
+12
View File
@@ -0,0 +1,12 @@
<% if (history && history.length > 0) { %>
<div class="chart-container" id="chart-<%= pdgaNumber %>"
data-history="<%= JSON.stringify(history) %>"
style="position: relative;">
<div class="loading-chart">Loading chart...</div>
</div>
<div class="chart-tooltip" id="tooltip-<%= pdgaNumber %>"></div>
<% } else { %>
<div class="chart-container">
<div class="loading-chart">No rating history available</div>
</div>
<% } %>
views/partials/ratings-table.ejs
+64
View File
@@ -0,0 +1,64 @@
<% 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>
<% } %>