Extract inline CSS/JS, add EJS templates with shared layout
- Extract CSS into public/css/{shared,players,courses}.css
- Extract JS into public/js/{chart,tooltips,progress,players,courses}.js
- Consolidate 5 duplicated tooltip blocks into setupTooltip() helper
- Add EJS view engine with layout partial and nav partial
- Convert HTML pages to EJS templates (index.ejs, courses.ejs)
- Add /courses route with redirect from /courses.html
- Remove old monolithic HTML files (1478 + 612 lines)
This commit is contained in:
Samuel Enocsson
@@ -0,0 +1,31 @@
|
||||
<% var body = `
|
||||
<div class="search-container">
|
||||
<input
|
||||
type="text"
|
||||
class="search-input"
|
||||
id="course-search"
|
||||
placeholder="Search courses by name or city..."
|
||||
oninput="searchCourses()"
|
||||
/>
|
||||
</div>
|
||||
<div id="search-results-info" class="search-results-info"></div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="btn" onclick="scrapeCourses()" id="scrape-courses-btn">
|
||||
<i class="fas fa-sync-alt"></i> Scrape Courses
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="loading" class="loading" style="display: none;">Loading courses...</div>
|
||||
<div id="courses-table"></div>
|
||||
`; %>
|
||||
|
||||
<%- include('../partials/layout', {
|
||||
title: 'PDGA Courses - Sweden',
|
||||
heading: 'PDGA Courses - Sweden',
|
||||
activePage: 'courses',
|
||||
cssFiles: ['courses.css'],
|
||||
jsFiles: ['courses.js'],
|
||||
initScript: 'loadCourses();',
|
||||
body: body
|
||||
}) %>
|
||||
@@ -0,0 +1,65 @@
|
||||
<% var body = `
|
||||
<!-- Add Player Section -->
|
||||
<div class="add-player-section">
|
||||
<h3>Add Yourself to Tracked Players</h3>
|
||||
<div class="add-player-form">
|
||||
<input
|
||||
type="number"
|
||||
id="pdga-number-input"
|
||||
class="pdga-input"
|
||||
placeholder="Enter your PDGA number"
|
||||
min="1"
|
||||
/>
|
||||
<button class="btn btn-add" onclick="searchAndAddPlayer()">
|
||||
<i class="fas fa-user-plus"></i> Add Player
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: absolute; top: 10px; right: 15px;">
|
||||
<a href="#" onclick="loadAllPlayers(); return false;" style="color: #007bff; font-size: 11px; text-decoration: none; margin-right: 10px;" title="Load all player data" id="load-all-btn">Load All</a>
|
||||
<a href="#" onclick="clearCache(); return false;" style="color: #ccc; font-size: 12px; text-decoration: none; opacity: 0.3;" title="Clear cache"><i class="fas fa-cog"></i></a>
|
||||
</div>
|
||||
<div id="loading" class="loading" style="display: none;">Loading ratings...</div>
|
||||
<div id="progress-section" style="display: none;">
|
||||
<div class="progress-container">
|
||||
<div id="progress-bar" class="progress-bar">0%</div>
|
||||
</div>
|
||||
<div id="progress-text" class="progress-text">Preparing to load ratings...</div>
|
||||
</div>
|
||||
<div id="ratings-table"></div>
|
||||
`; %>
|
||||
|
||||
<% var modals = `
|
||||
<!-- Debug Modal -->
|
||||
<div id="debug-modal" class="debug-modal" onclick="closeDebugModal(event)">
|
||||
<div class="debug-content" onclick="event.stopPropagation()">
|
||||
<button class="debug-close" onclick="closeDebugModal()">×</button>
|
||||
<div class="debug-header" id="debug-header">Prediction Calculation Details</div>
|
||||
<div class="debug-log" id="debug-log">Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Player Confirmation Modal -->
|
||||
<div id="add-player-modal" class="modal" onclick="closeAddPlayerModal(event)">
|
||||
<div class="modal-content" onclick="event.stopPropagation()">
|
||||
<button class="modal-close" onclick="closeAddPlayerModal()">×</button>
|
||||
<div class="modal-header" id="add-player-modal-header">Confirm Player</div>
|
||||
<div class="modal-body" id="add-player-modal-body">Loading...</div>
|
||||
<div class="modal-footer" id="add-player-modal-footer">
|
||||
<button class="btn btn-cancel" onclick="closeAddPlayerModal()">Cancel</button>
|
||||
<button class="btn btn-confirm" id="confirm-add-btn" onclick="confirmAddPlayer()">Add Player</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`; %>
|
||||
|
||||
<%- include('../partials/layout', {
|
||||
title: 'PDGA Ratings',
|
||||
heading: 'PDGA Player Ratings',
|
||||
activePage: 'players',
|
||||
cssFiles: ['players.css'],
|
||||
jsFiles: ['tooltips.js', 'chart.js', 'progress.js', 'players.js'],
|
||||
initScript: 'fetchRatingsWithProgress();',
|
||||
body: body,
|
||||
modals: modals
|
||||
}) %>
|
||||
@@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
<link rel="stylesheet" href="/css/shared.css">
|
||||
<% if (typeof cssFiles !== 'undefined') { %>
|
||||
<% cssFiles.forEach(function(file) { %>
|
||||
<link rel="stylesheet" href="/css/<%= file %>">
|
||||
<% }); %>
|
||||
<% } %>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1><%= heading %></h1>
|
||||
<%- include('../partials/nav') %>
|
||||
<%- body %>
|
||||
</div>
|
||||
|
||||
<% if (typeof modals !== 'undefined') { %>
|
||||
<%- modals %>
|
||||
<% } %>
|
||||
|
||||
<% if (typeof jsFiles !== 'undefined') { %>
|
||||
<% jsFiles.forEach(function(file) { %>
|
||||
<script src="/js/<%= file %>"></script>
|
||||
<% }); %>
|
||||
<% } %>
|
||||
|
||||
<% if (typeof initScript !== 'undefined') { %>
|
||||
<script>
|
||||
<%- initScript %>
|
||||
</script>
|
||||
<% } %>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,4 @@
|
||||
<div style="text-align: center; margin-bottom: 20px;">
|
||||
<a href="/" style="margin: 0 15px; color: <%= activePage === 'players' ? '#333' : '#007bff' %>; text-decoration: none; font-weight: bold;">Player Ratings</a>
|
||||
<a href="/courses" style="margin: 0 15px; color: <%= activePage === 'courses' ? '#333' : '#007bff' %>; text-decoration: none; font-weight: bold;">Courses</a>
|
||||
</div>
|
||||
Reference in New Issue
Block a user