Newest Main page regreshing. Updated calculator. Removed unused stuff.

This commit is contained in:
2026-04-11 17:09:00 +02:00
parent d6f8ff78e1
commit 30d480f053
16 changed files with 1578 additions and 3705 deletions
+261 -240
View File
@@ -31,39 +31,33 @@
.tournament-header {
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 15px 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
padding: 10px 16px;
flex-shrink: 0;
position: relative;
margin: 10px 15px 5px 15px;
}
.tournament-header .nav-btn {
position: absolute;
top: 10px;
right: 15px;
margin: 0;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.tournament-title {
font-size: 1.5rem;
font-weight: bold;
font-size: 1rem;
font-weight: 700;
color: #333;
margin-bottom: 6px;
white-space: nowrap;
}
.tournament-stats {
color: #666;
font-size: 0.9rem;
margin-bottom: 12px;
color: #888;
font-size: 0.82rem;
}
.tournament-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
gap: 10px;
margin-left: auto;
}
.round-nav-btn {
@@ -94,7 +88,7 @@
.current-round-display {
font-size: 1rem;
font-weight: bold;
color: #28a745;
color: #333;
margin: 0 15px;
min-width: 140px;
text-align: center;
@@ -387,6 +381,14 @@
display: none !important;
}
.print-logo {
display: block !important;
height: 80px !important;
max-width: 300px !important;
object-fit: contain !important;
margin: 0 auto 16px auto !important;
}
html, body {
height: auto !important;
overflow: visible !important;
@@ -410,20 +412,47 @@
page-break-inside: avoid;
}
.tournament-title {
font-size: 24pt !important;
font-weight: bold !important;
color: #333 !important;
margin-bottom: 10px;
}
.tournament-title,
.tournament-stats {
font-size: 12pt !important;
color: #666 !important;
margin-bottom: 0 !important;
display: none !important;
}
.current-round-info {
.tournament-header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 0 16px 0 !important;
margin-bottom: 16px !important;
border-bottom: 1px solid #ddd !important;
}
.print-logo {
display: block !important;
height: 80px !important;
max-width: 300px !important;
object-fit: contain !important;
margin: 0 !important;
}
.print-meta {
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
font-size: 11pt !important;
color: #555 !important;
gap: 4px;
}
.current-round-info,
.round-badge,
.round-print-info,
.player-id,
.no-tournament {
display: none !important;
}
@@ -431,209 +460,106 @@
display: block !important;
overflow: visible !important;
padding: 0 !important;
}
.round-row {
background: white !important;
border: 1px solid #ddd !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
page-break-inside: avoid;
display: flex !important;
flex-direction: row !important;
margin-bottom: 15px;
flex-shrink: 0 !important;
margin: 0 !important;
}
.round-row,
.round-row.current,
.round-row.completed,
.round-row.waiting {
border-left: 2px solid #ddd !important;
box-shadow: none !important;
page-break-inside: avoid !important;
opacity: 1 !important;
}
.round-header {
background: #f8f9fa !important;
border: none !important;
border-right: 1px solid #ddd !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
padding: 10px 15px !important;
min-width: 130px !important;
margin-bottom: 6px !important;
min-height: 0 !important;
border-top: 1px solid #dee2e6 !important;
border-right: 1px solid #dee2e6 !important;
border-bottom: 1px solid #dee2e6 !important;
border-left: 1px solid #dee2e6 !important;
border-color: #dee2e6 !important;
}
.round-row.current .round-header,
.round-row.completed .round-header,
.round-row.waiting .round-header {
background: #f8f9fa !important;
background: linear-gradient(135deg, #f8f9fa 0%, #f0f1f3 100%) !important;
}
.round-title {
font-size: 14pt !important;
font-weight: bold !important;
}
.round-badge {
display: none !important;
}
.round-print-info {
display: none !important;
}
.round-time-field {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.round-time-label {
font-size: 11pt !important;
color: #666 !important;
font-weight: 500 !important;
}
.round-time-input {
border: 2px solid #333 !important;
border-radius: 4px !important;
padding: 6px 10px !important;
width: 100px !important;
height: 32px !important;
background: white !important;
}
.round-checkbox-field {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.round-checkbox-label {
font-size: 11pt !important;
color: #666 !important;
font-weight: 500 !important;
}
.round-checkbox {
width: 24px !important;
height: 24px !important;
border: 2px solid #333 !important;
border-radius: 4px !important;
background: white !important;
display: inline-block !important;
}
.positions-container {
display: grid !important;
grid-template-columns: repeat(6, 1fr) !important;
gap: 8px !important;
padding: 15px !important;
overflow: visible !important;
}
.position-card {
border: 1px solid #5a8fd1 !important;
border-radius: 4px !important;
overflow: visible !important;
background: white !important;
box-shadow: none !important;
min-height: 70px !important;
page-break-inside: avoid;
display: flex !important;
flex-direction: row !important;
flex-shrink: 0 !important;
}
/* All cards in print have same blue color */
.round-row.current .position-card,
.round-row.completed .position-card,
.round-row.waiting .position-card {
border-color: #5a8fd1 !important;
}
.position-header {
background: #5a8fd1 !important;
padding: 10px 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
min-width: 40px !important;
width: 40px !important;
min-height: 70px !important;
}
.position-number {
font-size: 12pt !important;
font-weight: bold !important;
color: white !important;
}
.position-body {
padding: 6px 10px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
flex: 1 !important;
background: white !important;
overflow: hidden !important;
}
.player-name {
font-size: 10pt !important;
font-weight: 600 !important;
color: #2c3e50 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
}
.round-row.current .position-card .position-header,
.round-row.completed .position-card .position-header,
.round-row.waiting .position-card .position-header {
background: #5a8fd1 !important;
}
.position-card.empty .position-header {
background: #9ca3af !important;
.round-header {
padding: 8px 12px !important;
min-width: 90px !important;
}
.round-title {
font-size: 9pt !important;
}
.round-badge {
display: none !important;
}
.positions-container {
gap: 5px !important;
padding: 8px !important;
}
.position-card {
box-shadow: none !important;
transform: none !important;
transition: none !important;
page-break-inside: avoid !important;
min-height: 48px !important;
overflow: hidden !important;
border-radius: 10px !important;
}
.position-header {
min-width: 36px !important;
width: 36px !important;
}
.position-number {
font-size: 14pt !important;
color: white !important;
}
.position-body {
padding: 10px !important;
background: white !important;
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
}
.position-card.empty .position-body {
background: #f8f9fa !important;
font-size: 1.2rem !important;
}
.player-name {
font-size: 10pt !important;
color: #2c3e50 !important;
white-space: normal !important;
overflow: visible !important;
}
.position-card.empty .player-name {
color: #6c757d !important;
/* Done checkbox */
.print-done-check {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 14px !important;
flex-shrink: 0 !important;
border-left: 1px solid rgba(0,0,0,0.1) !important;
}
.player-id {
.print-done-box {
width: 20px !important;
height: 20px !important;
border: 1.5px solid #555 !important;
border-radius: 4px !important;
display: block !important;
}
.print-done-label {
display: none !important;
}
@@ -641,68 +567,53 @@
display: none !important;
}
/* Print header - show logo in tournament header */
.print-header {
display: none !important;
}
.tournament-header .print-logo {
display: block !important;
height: 60px !important;
max-width: 160px !important;
margin: 0 auto 10px auto !important;
}
}
/* Print-only elements - hidden on screen */
.print-header,
.round-print-info,
.tournament-header .print-logo {
display: none;
@media screen {
.round-print-info,
.print-logo,
.print-meta,
.print-done-check {
display: none !important;
}
}
</style>
<script src="/static/js/i18n.js"></script>
</head>
<body>
<div class="navbar">
<div class="navbar-title">🏆 <span data-i18n="draft.tournament_draft">Tournament Draft</span></div>
<div class="navbar-title">🏆 Razpored Turnirja</div>
<div class="navbar-controls">
<a href="/" class="nav-btn">📺 <span data-i18n="navigation.dashboard">Dashboard</span></a>
<a href="/tournament" class="nav-btn">🏆 <span data-i18n="navigation.tournament">Tournament</span></a>
<a href="/tournament/draft" class="nav-btn active">📋 <span data-i18n="tournament.view_draft">Draft</span></a>
<a href="/tournament/draft" class="nav-btn active">📋 Razpored</a>
<a href="/results/calculator" class="nav-btn">🎯 <span data-i18n="navigation.calculator">Results Calculator</span></a>
<a href="/" class="nav-btn"></a>
</div>
</div>
<!-- Print-only header with logo -->
<div class="print-header">
<img src="/static/logo.png" alt="Logo" class="print-logo" onerror="this.style.display='none'" />
</div>
<div class="main-container">
{% if tournament %}
<div class="tournament-header">
<button class="nav-btn" onclick="printDraft()" title="Print Tournament Draft">🖨️ <span data-i18n="general.print">Print</span></button>
<img src="/static/logo.png" alt="Logo" class="print-logo" onerror="this.style.display='none'" />
<img src="/static/logo.png" alt="Logo" class="print-logo" />
<div class="tournament-title">🎯 <span data-i18n="draft.shooting_tournament">Shooting Tournament</span></div>
<div class="tournament-stats">
{{ tournament.total_players }} <span data-i18n="draft.players">players</span> • {{ tournament.total_rounds }} <span data-i18n="draft.rounds">rounds</span>
{% if tournament.current_round %}
<span class="current-round-info"><span data-i18n="draft.currently_on_round">Currently on Round</span> {{ tournament.current_round }}</span>
{% endif %}
</div>
<div class="print-meta">
<div>{{ tournament.total_players }} <span data-i18n="draft.players">igralcev</span></div>
<div id="printDate"></div>
</div>
{% if tournament.current_round %}
<div class="tournament-controls">
<button class="round-nav-btn" id="prevRoundBtn" onclick="changeRound(-1)" title="Previous Round">
<span data-i18n="draft.previous">Previous</span>
</button>
<span class="current-round-display"><span data-i18n="draft.round">Round</span> {{ tournament.current_round }} <span data-i18n="draft.of">of</span> {{ tournament.total_rounds }}</span>
<button class="round-nav-btn" id="nextRoundBtn" onclick="changeRound(1)" title="Next Round">
<span data-i18n="draft.next">Next</span>
</button>
<button class="round-nav-btn" id="prevRoundBtn" onclick="changeRound(-1)"></button>
<span class="current-round-display"><span data-i18n="draft.round">Round</span> {{ tournament.current_round }} / {{ tournament.total_rounds }}</span>
<button class="round-nav-btn" id="nextRoundBtn" onclick="changeRound(1)"></button>
</div>
{% endif %}
<button class="nav-btn" onclick="printDraft()" title="Print">🖨️</button>
</div>
<div class="rounds-container" data-total-rounds="{{ tournament.total_rounds }}">
@@ -751,6 +662,10 @@
</div>
{% endfor %}
</div>
<div class="print-done-check">
<span class="print-done-box"></span>
<span class="print-done-label">Done</span>
</div>
</div>
{% endfor %}
</div>
@@ -770,6 +685,24 @@
let currentRound = {{ tournament.current_round if tournament else 1 }};
const totalRounds = {{ tournament.total_rounds if tournament else 1 }};
// TV view toggle — only active when loaded as TV display (?tv=1)
const isTvDisplay = new URLSearchParams(window.location.search).get('tv') === '1';
if (isTvDisplay) {
const btn = document.getElementById('btnSwitchView');
if (btn) btn.style.display = '';
}
async function switchToView() {
try {
await fetch('/api/tv/view', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ view: 'cameras' })
});
window.location.href = '/';
} catch (e) { console.error(e); }
}
function updateRoundNavigation() {
if (tournamentActive) {
const prevBtn = document.getElementById('prevRoundBtn');
@@ -822,8 +755,19 @@
}
}
// Set print date
const printDateEl = document.getElementById('printDate');
if (printDateEl) {
const now = new Date();
printDateEl.textContent = now.toLocaleDateString('sl-SI', { day: '2-digit', month: '2-digit', year: 'numeric' });
}
// Print function
function printDraft() {
document.querySelectorAll('.round-row').forEach(el => {
el.classList.remove('current', 'completed', 'waiting');
el.classList.add('waiting');
});
window.print();
}
@@ -836,7 +780,7 @@
window.location.reload();
} else if (event.key === 'p' || event.key === 'P') {
event.preventDefault();
window.print();
printDraft();
} else if (tournamentActive) {
if (event.key === 'ArrowLeft') {
event.preventDefault();
@@ -856,17 +800,94 @@
setTimeout(() => {
const currentRoundRow = document.querySelector('.round-row.current');
if (currentRoundRow) {
currentRoundRow.scrollIntoView({
behavior: 'smooth',
block: 'center'
currentRoundRow.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
}, 500);
}, 300);
console.log('🖥️ PC Tournament Draft (Vertical Rows) loaded');
console.log('🏆 Tournament active:', tournamentActive);
console.log(`📊 Displaying ${totalRounds} rounds in vertical layout`);
// Poll for state changes
let lastStateHash = null;
setInterval(async () => {
if (document.visibilityState !== 'visible') return;
try {
const response = await fetch('/api/dashboard/state');
if (!response.ok) return;
const data = await response.json();
// If tournament just became inactive, redirect to archive (not reload)
if (!data.tournament_active) {
if (data.archive_filename) {
window.location.href = `/archive/tournament/${data.archive_filename}`;
} else if (data.league_archive_filename) {
window.location.href = `/archive/league/${data.league_archive_filename}`;
} else {
window.location.href = '/results';
}
return;
}
// Follow TV view changes when used as TV display
if (isTvDisplay) {
if (data.tv_view === 'cameras') { window.location.href = '/'; return; }
if (data.tv_view === 'results') {
if (data.archive_filename) {
window.location.href = `/archive/tournament/${data.archive_filename}?tv=1`;
} else if (data.league_archive_filename) {
window.location.href = `/archive/league/${data.league_archive_filename}?tv=1`;
} else {
window.location.href = '/results?tv=1';
}
return;
}
}
// Reload on round change to keep draft display in sync
const hash = JSON.stringify({ round: data.current_round });
if (lastStateHash !== null && hash !== lastStateHash) {
window.location.reload();
}
lastStateHash = hash;
updateTvViewBtn(data.tv_view || 'cameras');
} catch (e) {}
}, 3000);
});
// ── TV VIEW TOGGLE ────────────────────────────────────────────────────────
let currentTvView = 'cameras';
function updateTvViewBtn(view) {
currentTvView = view;
const btn = document.getElementById('btnTvView');
if (!btn) return;
if (view === 'draft') {
btn.textContent = '📺';
btn.style.background = '#28a745';
btn.style.color = 'white';
btn.style.borderColor = '#1e7e34';
} else {
btn.textContent = '📺';
btn.style.background = '';
btn.style.color = '';
btn.style.borderColor = '';
}
}
async function toggleTvView() {
const newView = currentTvView === 'draft' ? 'cameras' : 'draft';
try {
await fetch('/api/tv/view', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ view: newView })
});
updateTvViewBtn(newView);
} catch (e) { console.error(e); }
}
// Load initial tv_view state
fetch('/api/dashboard/state').then(r => r.json()).then(d => updateTvViewBtn(d.tv_view || 'cameras')).catch(() => {});
</script>
</body>
</html>