Samuel Enocsson
686d7ca00c
The page body is assembled as a JS template literal inside <% ... %>;
EJS tags inside that string break the EJS parser (it sees the first %>
as the close of the outer tag). Switch to ${kpis.x} interpolation since
we're already inside a backtick string.
103 lines
4.5 KiB
Plaintext
103 lines
4.5 KiB
Plaintext
<% var body = `
|
|
<!-- Add Player Section -->
|
|
<div class="card-section">
|
|
<h3>Add Yourself to Tracked Players</h3>
|
|
<div class="card-section-form">
|
|
<input
|
|
type="number"
|
|
id="pdga-number-input"
|
|
class="input"
|
|
placeholder="Enter your PDGA number"
|
|
min="1"
|
|
style="width: 240px;"
|
|
/>
|
|
<button class="btn btn-add" onclick="searchAndAddPlayer()">
|
|
<i class="fas fa-user-plus"></i> Add Player
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KPI Summary Tiles -->
|
|
<section class="kpi-strip" aria-label="Tracker overview">
|
|
<article class="kpi-tile">
|
|
<span class="kpi-rail"></span>
|
|
<div class="kpi-body">
|
|
<div class="kpi-value">${kpis.tracked}</div>
|
|
<div class="kpi-label">Tracked</div>
|
|
<div class="kpi-sub">${kpis.active} active</div>
|
|
</div>
|
|
</article>
|
|
<article class="kpi-tile">
|
|
<span class="kpi-rail"></span>
|
|
<div class="kpi-body">
|
|
<div class="kpi-value">${kpis.avg ?? '—'}</div>
|
|
<div class="kpi-label">Avg rating</div>
|
|
<div class="kpi-sub">across active players</div>
|
|
</div>
|
|
</article>
|
|
<article class="kpi-tile">
|
|
<span class="kpi-rail up"></span>
|
|
<div class="kpi-body">
|
|
<div class="kpi-value">${kpis.climbing}</div>
|
|
<div class="kpi-label">Climbing</div>
|
|
<div class="kpi-sub">this month</div>
|
|
</div>
|
|
</article>
|
|
<article class="kpi-tile">
|
|
<span class="kpi-rail down"></span>
|
|
<div class="kpi-body">
|
|
<div class="kpi-value">${kpis.slipping}</div>
|
|
<div class="kpi-label">Slipping</div>
|
|
<div class="kpi-sub">this month</div>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
|
|
<div style="display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 16px;">
|
|
<a href="#" onclick="clearCache(); return false;" style="color: var(--text-muted); font-size: 12px; text-decoration: none; opacity: 0.4;" title="Clear cache"><i class="fas fa-cog"></i></a>
|
|
</div>
|
|
<div class="table-toolbar">
|
|
<button id="trendchart-toggle" class="pill-toggle" type="button" aria-pressed="false">
|
|
<svg class="pill-icon" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
|
|
<polyline points="1,9 4,5 7,7 11,2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<span class="pill-label">Trend chart</span>
|
|
<span class="pill-dot"></span>
|
|
</button>
|
|
</div>
|
|
<div id="ratings-table" hx-get="/partials/ratings-table" hx-trigger="load"></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',
|
|
activePage: 'players',
|
|
cssFiles: ['players.css'],
|
|
jsFiles: ['tooltips.js', 'chart.js', 'players.js'],
|
|
initScript: 'setupTooltipsAfterSwap();',
|
|
body: body,
|
|
modals: modals
|
|
}) %> |