Files
Sdk_TV_app/templates/modern_archive_index.html
T

501 lines
21 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title data-i18n="navigation.archive">Arhiv</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/css/base.css">
<link rel="stylesheet" href="/static/css/navbar.css">
<link rel="stylesheet" href="/static/css/buttons.css">
<link rel="stylesheet" href="/static/css/components.css">
<link rel="stylesheet" href="/static/css/responsive.css">
<style>
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
height: 100vh; overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f5f5f5;
color: #333;
}
.archive-layout {
display: flex;
height: calc(100vh - 50px);
gap: 8px;
padding: 8px 20px 30px 20px;
}
/* ── LEFT TREE PANEL ── */
.left-panel {
width: 270px;
flex-shrink: 0;
display: flex;
flex-direction: column;
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
overflow: hidden;
}
.panel-header {
display: flex; align-items: center; justify-content: space-between;
padding: 7px 12px;
background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
border-radius: 12px 12px 0 0;
flex-shrink: 0;
}
.panel-header-title {
font-size: 0.8rem; font-weight: 700; color: white; letter-spacing: 0.3px;
white-space: nowrap;
}
.panel-header-count {
font-size: 0.7rem; font-weight: 600;
background: rgba(255,255,255,0.25); color: white;
padding: 2px 7px; border-radius: 10px;
}
.tree-sort-bar {
display: flex; flex-direction: column; gap: 5px;
padding: 6px 8px; border-bottom: 1px solid #e9ecef;
flex-shrink: 0; background: #f8f9fa;
}
.tree-sort-bar input {
width: 100%; border: 1px solid #dee2e6; border-radius: 6px;
padding: 5px 9px; font-size: 0.78rem; outline: none; background: white; box-sizing: border-box;
}
.tree-sort-bar input:focus { border-color: #28a745; }
.filter-tabs {
display: flex; gap: 4px;
}
.filter-tab {
flex: 1; padding: 2px 4px;
border: 2px solid #dee2e6; background: white;
cursor: pointer; font-size: 0.6rem; font-weight: 600; color: #666;
border-radius: 6px; transition: all 0.15s; white-space: nowrap; text-align: center;
}
.filter-tab.active { background: #28a745; border-color: #1e7e34; color: white; }
.filter-tab:hover:not(.active) { border-color: #28a745; color: #28a745; }
.tree-list { flex: 1; overflow-y: auto; overflow-x: hidden; }
.tree-list::-webkit-scrollbar { width: 5px; }
.tree-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.tree-group-header {
display: flex; align-items: center; gap: 5px;
padding: 7px 10px 3px;
font-size: 0.67rem; font-weight: 700; color: #999;
text-transform: uppercase; letter-spacing: 0.5px;
cursor: pointer; user-select: none;
}
.tree-group-header:hover { color: #666; }
.tree-toggle { font-size: 0.6rem; transition: transform 0.15s; }
.tree-group.collapsed .tree-toggle { transform: rotate(-90deg); }
.tree-group.collapsed .tree-group-items { display: none; }
.tree-item {
display: flex; align-items: center;
padding: 7px 10px 7px 14px;
cursor: pointer; border-left: 4px solid transparent;
gap: 7px; font-size: 0.8rem; color: #333; transition: all 0.15s;
}
.tree-item:hover { background: #f0faf3; border-left-color: #7dcf95; color: #1a6b30; }
.tree-item.active {
background: #28a745; border-left-color: #28a745;
font-weight: 700; color: white;
}
.tree-item.active .tree-item-date { color: white; }
.tree-item.active .tree-item-meta { color: rgba(255,255,255,0.75); }
.tree-item.active .tbadge { background: rgba(255,255,255,0.2); color: white; }
.tree-item-info { flex: 1; min-width: 0; }
.tree-item-date { display: block; font-size: 0.8rem; font-weight: 600; }
.tree-item-meta { display: block; font-size: 0.66rem; color: #999; }
.tbadge { padding: 2px 5px; border-radius: 6px; font-size: 0.6rem; font-weight: 700; flex-shrink: 0; }
.tbadge-40 { background: #e9d8fd; color: #6b21a8; }
.tbadge-20 { background: #fef9c3; color: #b45309; }
.tbadge-4 { background: #dcfce7; color: #166534; }
.tbadge-league { background: #dbeafe; color: #1d4ed8; }
.tree-empty { padding: 24px; text-align: center; color: #bbb; font-size: 0.82rem; }
.tree-view-btn {
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 6px;
background: rgba(0,0,0,0.06); color: #666;
font-size: 0.9rem; text-decoration: none; transition: all 0.15s;
border: 1px solid rgba(0,0,0,0.08);
}
.tree-view-btn:hover { background: #28a745; color: white; border-color: #1e7e34; }
.tree-item.active .tree-view-btn { background: rgba(255,255,255,0.2); color: white; border-color: rgba(255,255,255,0.3); }
.tree-item.active .tree-view-btn:hover { background: white; color: #28a745; }
/* ── RIGHT PANEL ── */
.right-panel {
flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0;
}
.result-placeholder {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center;
color: #ccc; gap: 10px;
background: white; border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.result-placeholder-icon { font-size: 2.5rem; }
.result-placeholder-text { font-size: 0.95rem; }
.loading-overlay {
flex: 1; display: flex; align-items: center; justify-content: center;
color: #bbb; font-size: 0.9rem;
background: white; border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* ── RESULTS CARD ── */
.tv-container {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
/* Right Column */
.right-column {
background: white; border-radius: 12px; box-shadow: none;
overflow: hidden; display: flex; flex-direction: column; border: 1px solid #e9ecef;
}
.table-header { background: #f8f9fa; padding: 8px 12px; border-bottom: 1px solid #dee2e6; flex-shrink: 0; }
.table-title { font-size: 0.95rem; font-weight: 600; color: #2c3e50; margin: 0; }
.table-container { flex: 1; overflow: auto; min-height: 0; }
.results-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.results-table th, .results-table td {
padding: 4px 6px; text-align: center;
border-bottom: 1px solid #f1f3f4; border-right: 1px solid #f1f3f4;
}
.results-table th {
background: #f8f9fa; font-weight: 600; color: #495057;
text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.3px;
position: sticky; top: 0; z-index: 10;
}
.results-table th.rank-col { width: auto; }
.results-table th.player-col { text-align: left; width: auto; }
.results-table th.score-col { width: auto; background: #e3f2fd; }
.results-table th.tens-col { width: auto; background: #fff3cd; }
.results-table tbody tr:hover td { background: #f8f9fa; }
.results-table tbody tr:nth-child(1) td { background: #fff9e6; }
.results-table tbody tr:nth-child(1):hover td { background: #fff3cd; }
.results-table tbody tr:nth-child(2) td { background: #f5f5f5; }
.results-table tbody tr:nth-child(2):hover td { background: #e9ecef; }
.results-table tbody tr:nth-child(3) td { background: #fdf6f0; }
.results-table tbody tr:nth-child(3):hover td { background: #f8f1e6; }
.rank-cell { font-size: 1rem; font-weight: 700; text-align: center; }
.rank-1 { color: #b8860b; }
.rank-2 { color: #6c757d; }
.rank-3 { color: #8b4513; }
.player-cell { text-align: left !important; }
.player-name { font-size: 0.75rem; font-weight: 600; color: #2c3e50; }
.score-cell { background: #e3f2fd !important; font-size: 0.75rem; font-weight: 700; color: #1976d2; }
.tens-cell { background: #fff3cd !important; font-size: 0.75rem; font-weight: 700; color: #856404; }
/* League extras */
.final-cell { background: #dbeafe !important; font-size: 0.75rem; font-weight: 700; color: #1d4ed8; }
.part-cell { font-size: 0.72rem; color: #888; }
.stats-footer {
background: white; border-top: 1px solid #dee2e6;
padding: 6px 15px; display: flex; justify-content: space-around;
font-size: 0.7rem; color: #6c757d; flex-shrink: 0;
}
.stat-item { text-align: center; }
.stat-value { font-weight: 600; color: #28a745; }
</style>
<script src="/static/js/i18n.js"></script>
</head>
<body>
<div class="navbar">
<div class="navbar-title">📚 Arhiv</div>
<div class="navbar-controls">
<a href="/archive/player-analysis" class="nav-btn">👤 <span data-i18n="players.player_analysis">Player Analysis</span></a>
<a href="/archive" class="nav-btn active">📚 <span data-i18n="navigation.archive">Archive</span></a>
<a href="/" class="nav-btn"></a>
</div>
</div>
<div class="archive-layout">
<!-- LEFT -->
<div class="left-panel">
<div class="panel-header">
<div class="panel-header-title">📚 Turnirji</div>
<div class="panel-header-count" id="treeCount">0</div>
</div>
<div class="tree-sort-bar">
<input type="text" id="treeSearch" placeholder="🔍 Iskanje po datumu…" oninput="renderTree()">
<div class="filter-tabs">
<button class="filter-tab active" data-filter="all" onclick="setFilter('all')">Vsi</button>
<button class="filter-tab" data-filter="league" onclick="setFilter('league')">🎖️ Liga</button>
<button class="filter-tab" data-filter="40" onclick="setFilter('40')">💪 40</button>
<button class="filter-tab" data-filter="20" onclick="setFilter('20')">⚡ 20</button>
<button class="filter-tab" data-filter="4" onclick="setFilter('4')">🎯 4</button>
</div>
</div>
<div class="tree-list" id="treeList"></div>
</div>
<!-- RIGHT -->
<div class="right-panel" id="rightPanel">
<div class="result-placeholder" id="placeholder">
<div class="result-placeholder-icon">🏆</div>
<div class="result-placeholder-text">Izberi zapis iz drevesa</div>
</div>
<div class="loading-overlay" id="loadingOverlay" style="display:none">Nalagam…</div>
<div class="tv-container" id="tvContainer" style="display:none">
<div class="right-column">
<div class="table-header">
<h3 class="table-title" id="tableTitle">📊 Uvrstitve</h3>
</div>
<div class="table-container">
<table class="results-table">
<thead id="tableHead"></thead>
<tbody id="tableBody"></tbody>
</table>
</div>
<div class="stats-footer">
<div class="stat-item"><div class="stat-value" id="footerParticipants">0</div><div>Udeleženci</div></div>
<div class="stat-item"><div class="stat-value" id="footerHighest">0</div><div>Najvišji rezultat</div></div>
<div class="stat-item"><div class="stat-value" id="footerAverage">0</div><div>Povprečje</div></div>
<div class="stat-item"><div class="stat-value" id="footerMostTens">0</div><div>Največ desetk</div></div>
<div class="stat-item"><div class="stat-value" id="footerDate"></div><div>Datum</div></div>
</div>
</div>
</div><!-- end tv-container -->
</div><!-- end right-panel -->
</div><!-- end archive-layout -->
<script>
const tournaments = {{ tournaments | tojson }};
const leagues = {{ leagues | tojson }};
const allItems = [
...tournaments.map(t => ({
kind: 'tournament',
type: (t.tournament_type || '20_targets').split('_')[0],
date: t.archived_at || 'Unknown',
players: t.participants_count || 0,
rounds: t.total_rounds || '?',
filename: t.filename,
apiUrl: `/api/archive/tournament/${t.filename}/standings`
})),
...leagues.map(l => ({
kind: 'league',
type: 'league',
date: l.archived_at || 'Unknown',
players: l.participants_count || 0,
progress: `${l.completed_tournaments}/${l.total_tournaments}`,
filename: l.filename,
apiUrl: `/api/archive/league/${l.filename}/standings`
}))
].sort((a, b) => new Date(b.date) - new Date(a.date));
let activeFilter = 'all';
let activeFilename = null;
const GROUP_ORDER = ['liga', 't40', 't20', 't4'];
const itemIndex = new Map(allItems.map((item, i) => [item.filename, i]));
function fmtDate(d) {
if (!d || d === 'Unknown') return 'Unknown';
const p = d.slice(0, 10).split('-');
return p.length === 3 ? `${p[2]}.${p[1]}.${p[0].slice(2)}` : d.slice(0, 10);
}
function groupOf(item) {
if (item.kind === 'league') return { key: 'liga', label: '🎖️ Lige' };
if (item.type === '40') return { key: 't40', label: '💪 40 Tarč' };
if (item.type === '20') return { key: 't20', label: '⚡ 20 Tarč' };
return { key: 't4', label: '🎯 4 Tarč' };
}
function icon(item) {
if (item.kind === 'league') return '🎖️';
if (item.type === '40') return '💪';
if (item.type === '20') return '⚡';
return '🎯';
}
function badgeHtml(item) {
if (item.kind === 'league') return `<span class="tbadge tbadge-league">Liga</span>`;
if (item.type === '40') return `<span class="tbadge tbadge-40">40T</span>`;
if (item.type === '20') return `<span class="tbadge tbadge-20">20T</span>`;
return `<span class="tbadge tbadge-4">4T</span>`;
}
function setFilter(f) {
activeFilter = f;
document.querySelectorAll('.filter-tab').forEach(t =>
t.classList.toggle('active', t.dataset.filter === f));
renderTree();
}
function renderTree() {
const search = document.getElementById('treeSearch').value.toLowerCase().trim();
const filtered = allItems.filter(item => {
const matchFilter = activeFilter === 'all'
|| item.type === activeFilter
|| (activeFilter === 'league' && item.kind === 'league');
const matchSearch = !search
|| fmtDate(item.date).toLowerCase().includes(search)
|| item.date.slice(0, 10).includes(search);
return matchFilter && matchSearch;
});
const groups = {};
filtered.forEach(item => {
const g = groupOf(item);
if (!groups[g.key]) groups[g.key] = { label: g.label, items: [] };
groups[g.key].items.push(item);
});
const treeList = document.getElementById('treeList');
document.getElementById('treeCount').textContent = filtered.length;
if (!filtered.length) {
treeList.innerHTML = '<div class="tree-empty">Ni zadetkov</div>';
return;
}
let html = '';
GROUP_ORDER.forEach(key => {
if (!groups[key]) return;
const g = groups[key];
html += `<div class="tree-group" id="grp-${key}">
<div class="tree-group-header" onclick="toggleGroup('grp-${key}')">
<span class="tree-toggle">▾</span>${g.label}
<span style="margin-left:auto;font-size:0.65rem;color:#bbb">${g.items.length}</span>
</div>
<div class="tree-group-items">`;
g.items.forEach(item => {
const active = item.filename === activeFilename ? ' active' : '';
const meta = item.kind === 'league'
? `${item.players} igralcev · ${item.progress} tur.`
: `${item.players} igralcev · ${item.rounds} krogov`;
const idx = itemIndex.get(item.filename);
const viewUrl = item.kind === 'league'
? `/archive/league/${item.filename}`
: `/archive/tournament/${item.filename}`;
html += `<div class="tree-item${active}" onclick="openItem(${idx})">
<span>${icon(item)}</span>
<div class="tree-item-info">
<span class="tree-item-date">${fmtDate(item.date)}</span>
<span class="tree-item-meta">${meta}</span>
</div>
${badgeHtml(item)}
<button class="tree-view-btn" onclick="event.stopPropagation(); window.location='${viewUrl}'" title="Celotni rezultati">⛶</button>
</div>`;
});
html += `</div></div>`;
});
treeList.innerHTML = html;
}
function toggleGroup(id) {
document.getElementById(id)?.classList.toggle('collapsed');
}
async function openItem(idx) {
const item = allItems[idx];
activeFilename = item.filename;
renderTree();
document.getElementById('placeholder').style.display = 'none';
document.getElementById('tvContainer').style.display = 'none';
document.getElementById('loadingOverlay').style.display = 'flex';
try {
const res = await fetch(item.apiUrl);
const data = await res.json();
renderResults(data, item);
} catch(e) {
document.getElementById('loadingOverlay').textContent = 'Napaka pri nalaganju.';
}
}
function renderResults(data, item) {
document.getElementById('loadingOverlay').style.display = 'none';
document.getElementById('tvContainer').style.display = 'grid';
const p = data.participants;
const isTournament = data.kind === 'tournament';
const highest = p.length ? p[0][isTournament ? 'total_score' : 'final_score'] : 0;
const mostTens = isTournament ? (p.length ? Math.max(...p.map(x => x.tens_count)) : 0) : '—';
// ── Table ────────────────────────────────────────────────────────────
if (isTournament) {
document.getElementById('tableTitle').textContent = '📊 Uvrstitve';
document.getElementById('tableHead').innerHTML = `<tr>
<th class="rank-col">Mesto</th>
<th class="player-col">Udeleženec</th>
<th class="score-col">Rezultat</th>
<th class="tens-col">Desetke</th>
</tr>`;
document.getElementById('tableBody').innerHTML = p.map(pl => {
const rankClass = pl.rank <= 3 ? `rank-${pl.rank}` : 'rank-other';
const medal = pl.rank === 1 ? '🥇' : pl.rank === 2 ? '🥈' : pl.rank === 3 ? '🥉' : '';
return `<tr>
<td class="rank-cell ${rankClass}">${pl.rank} ${medal}</td>
<td class="player-cell"><div class="player-name">${pl.name}</div></td>
<td class="score-cell">${pl.total_score}</td>
<td class="tens-cell">🎯 ${pl.tens_count}</td>
</tr>`;
}).join('');
} else {
document.getElementById('tableTitle').textContent = '📊 Ligaška lestvica';
document.getElementById('tableHead').innerHTML = `<tr>
<th class="rank-col">Mesto</th>
<th class="player-col">Udeleženec</th>
<th class="score-col">Finale</th>
<th class="tens-col">Skupaj</th>
<th>Tur.</th>
</tr>`;
document.getElementById('tableBody').innerHTML = p.map(pl => {
const rankClass = pl.rank <= 3 ? `rank-${pl.rank}` : 'rank-other';
const medal = pl.rank === 1 ? '🥇' : pl.rank === 2 ? '🥈' : pl.rank === 3 ? '🥉' : '';
return `<tr>
<td class="rank-cell ${rankClass}">${pl.rank} ${medal}</td>
<td class="player-cell"><div class="player-name">${pl.name}</div></td>
<td class="final-cell">${pl.final_score}</td>
<td class="score-cell">${pl.total_score}</td>
<td class="part-cell">${pl.tournaments_participated}</td>
</tr>`;
}).join('');
}
// ── Footer stats ─────────────────────────────────────────────────────
const scores = p.map(x => isTournament ? x.total_score : x.final_score);
const avg = scores.length ? Math.round(scores.reduce((a, b) => a + b, 0) / scores.length) : 0;
const totalShots = isTournament
? p.length * (data.tournament_type === '40_targets' ? 80 : data.tournament_type === '4_targets' ? 20 : 40)
: 0;
document.getElementById('footerParticipants').textContent = p.length;
document.getElementById('footerHighest').textContent = highest;
document.getElementById('footerAverage').textContent = avg;
document.getElementById('footerMostTens').textContent = isTournament ? mostTens : '—';
document.getElementById('footerDate').textContent = fmtDate(data.archived_at || item.date);
}
document.addEventListener('DOMContentLoaded', renderTree);
</script>
</body>
</html>