Newest Main page regreshing. Updated calculator. Removed unused stuff.
This commit is contained in:
+444
-189
@@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title data-i18n="scoring.results_calculator">Results Calculator</title>
|
||||
<title data-i18n="scoring.results_calculator">Kalkulator</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">
|
||||
@@ -45,34 +45,38 @@
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
padding: 0 0 70px 0;
|
||||
padding: 12px 16px;
|
||||
box-sizing: border-box;
|
||||
gap: 0;
|
||||
gap: 12px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.scrollable-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
/* Shared card style */
|
||||
.calc-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 5px 20px 20px 20px;
|
||||
box-sizing: border-box;
|
||||
gap: 0;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* All direct children of scrollable-content */
|
||||
.scrollable-content > *:not(.cards-wrapper) {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
flex-shrink: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
/* Middle column: scoring card + finish card stacked */
|
||||
.col-middle {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.col-middle .calc-card.scoring-card {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.header-section {
|
||||
@@ -207,36 +211,82 @@
|
||||
box-shadow: 0 4px 8px rgba(23, 162, 184, 0.3);
|
||||
}
|
||||
|
||||
.cards-wrapper {
|
||||
background: white;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
.players-search-bar {
|
||||
padding: 8px 10px;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.players-search-wrap {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
transition: border-color 0.15s;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.players-search-wrap:hover {
|
||||
transform: none !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.players-search-wrap:focus-within {
|
||||
border-color: #28a745;
|
||||
}
|
||||
|
||||
.players-search-input {
|
||||
flex: 1;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
padding: 5px 8px;
|
||||
font-size: 0.8rem;
|
||||
background: transparent;
|
||||
outline: none !important;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.players-search-clear {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 0.7rem;
|
||||
color: #adb5bd;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: color 0.15s;
|
||||
padding: 0;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.players-search-clear.visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.players-search-clear:hover {
|
||||
color: #dc3545;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.participants-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
width: 280px;
|
||||
max-width: none;
|
||||
width: 240px;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
background: white;
|
||||
border-right: 2px solid #e9ecef;
|
||||
padding: 12px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.participants-list::-webkit-scrollbar {
|
||||
@@ -335,8 +385,8 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding: 15px;
|
||||
background: white;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
min-height: 0;
|
||||
gap: 0;
|
||||
}
|
||||
@@ -345,7 +395,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
color: #999;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
@@ -1129,29 +1179,18 @@
|
||||
background: #e0a800;
|
||||
}
|
||||
|
||||
/* Bottom Finish Card - Full Width */
|
||||
/* Finish bar - standalone card */
|
||||
.finish-section {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #f0f1f3 100%);
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-top: 3px solid #e9ecef;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
|
||||
padding: 0 20px;
|
||||
margin: 0;
|
||||
background: #f8f9fa;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
z-index: 999;
|
||||
height: 70px;
|
||||
min-height: 70px;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.finish-title {
|
||||
@@ -1227,139 +1266,262 @@
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* ========== DRAFT PANEL (right) ========== */
|
||||
.draft-panel {
|
||||
width: 240px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.draft-panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 10px;
|
||||
background: #f8f9fa;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
border-radius: 12px 12px 0 0;
|
||||
flex-shrink: 0;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.draft-round-nav {
|
||||
background: #f0f1f3;
|
||||
border: 2px solid #dee2e6;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
color: #333;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.draft-round-nav:hover:not(:disabled) {
|
||||
background: #e9ecef;
|
||||
border-color: #28a745;
|
||||
color: #28a745;
|
||||
}
|
||||
|
||||
.draft-round-nav:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.draft-round-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.draft-positions {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.draft-positions::-webkit-scrollbar { width: 6px; }
|
||||
.draft-positions::-webkit-scrollbar-track { background: transparent; }
|
||||
.draft-positions::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
|
||||
|
||||
.draft-position-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 7px 9px;
|
||||
background: white;
|
||||
border: 2px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.draft-position-row:hover {
|
||||
border-color: #5a8fd1;
|
||||
background: #f0f5fc;
|
||||
}
|
||||
|
||||
.draft-position-num {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 6px;
|
||||
background: #5a8fd1;
|
||||
color: white;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.draft-position-row.empty .draft-position-num {
|
||||
background: #9ca3af;
|
||||
}
|
||||
|
||||
.draft-position-name {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.draft-position-row.empty .draft-position-name {
|
||||
color: #adb5bd;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.draft-panel-footer {
|
||||
margin-top: auto;
|
||||
padding: 12px;
|
||||
border-top: 1px solid #e9ecef;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script src="/static/js/i18n.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<div class="navbar-title">🎯 <span data-i18n="scoring.results_calculator">Results Calculator</span></div>
|
||||
<div class="navbar-title">🎯 <span data-i18n="scoring.results_calculator">Kalkulator</span></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">📋 <span data-i18n="tournament.view_draft">Draft</span></a>
|
||||
<a href="/results/calculator" class="nav-btn active">🎯 <span data-i18n="navigation.calculator">Results Calculator</span></a>
|
||||
<a href="/tournament/draft" class="nav-btn">📋 Razpored</a>
|
||||
<a href="/results/calculator" class="nav-btn active">🎯 <span data-i18n="navigation.calculator">Kalkulator</span></a>
|
||||
<a href="/" class="nav-btn">✕</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<div class="container">
|
||||
<div class="scrollable-content">
|
||||
<div class="header-section tournament-{{ results.tournament_type if results and results.tournament_type else 'default' }}">
|
||||
<img src="/static/logo.png" alt="Logo" class="header-logo" onerror="this.style.display='none'" />
|
||||
<div class="header-title">
|
||||
{% if results and results.tournament_type == '4_targets' %}
|
||||
🎯 <span data-i18n="scoring.tournament_scoring">Tournament Scoring</span>
|
||||
{% elif results and results.tournament_type == '40_targets' %}
|
||||
💪 <span data-i18n="scoring.tournament_scoring">Tournament Scoring</span>
|
||||
{% else %}
|
||||
⚡ <span data-i18n="scoring.tournament_scoring">Tournament Scoring</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="header-subtitle" id="tournamentSubtitle">
|
||||
{% if results.tournament_type == '40_targets' %}
|
||||
<span data-i18n="scoring.enter_scores_40_targets">Enter scores for each participant (40 targets, 2 shots each). Score 0 = miss.</span>
|
||||
{% elif results.tournament_type == '4_targets' %}
|
||||
<span data-i18n="scoring.enter_scores_4_targets">Enter scores for each participant (4 targets, 5 shots each). Score 0 = miss.</span>
|
||||
{% else %}
|
||||
<span data-i18n="scoring.enter_scores_20_targets">Enter scores for each participant (20 targets, 2 shots each). Score 0 = miss.</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="progress-info">
|
||||
<div class="progress-item">
|
||||
<div class="progress-number" id="completedCount">0</div>
|
||||
<div class="progress-label" data-i18n="scoring.completed">Zaključeno</div>
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<div class="progress-number" id="totalParticipants">{{ results.participants|length }}</div>
|
||||
<div class="progress-label" data-i18n="scoring.total">Skupaj</div>
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<div class="progress-number" id="totalShots">0</div>
|
||||
<div class="progress-label" data-i18n="scoring.total_shots">Skupaj Strelov</div>
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<div class="progress-number" id="totalTens">0</div>
|
||||
<div class="progress-label" data-i18n="results.tens">Tens</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cards-wrapper">
|
||||
<!-- Sidebar with participant list -->
|
||||
<div class="participants-list" id="participantsList">
|
||||
{% for player_id, participant in results.participants.items() %}
|
||||
<div class="participant-list-item {{ 'completed' if participant.completed else '' }}" onclick="selectParticipant({{ player_id }})" id="list-item-{{ player_id }}" data-player-id="{{ player_id }}">
|
||||
<div class="participant-list-item-content">
|
||||
<span class="participant-list-item-name">{{ participant.name }}</span>
|
||||
<span class="participant-list-item-score" id="list-score-{{ player_id }}">{{ participant.total_score }}</span>
|
||||
<span class="participant-list-item-tens" id="list-tens-{{ player_id }}">0</span>
|
||||
</div>
|
||||
<!-- LEFT: Players card -->
|
||||
<div class="calc-card" style="width:240px;flex-shrink:0;">
|
||||
<div class="players-search-bar">
|
||||
<div class="players-search-wrap">
|
||||
<input class="players-search-input" id="playerSearch" type="text" placeholder="🔍 Iskanje..." oninput="filterPlayers(this.value)">
|
||||
<button class="players-search-clear" onclick="clearPlayerSearch()" title="Clear">✕</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="participants-list" id="participantsList">
|
||||
{% for player_id, participant in results.participants.items() %}
|
||||
<div class="participant-list-item {{ 'completed' if participant.completed else '' }}" onclick="selectParticipant({{ player_id }})" id="list-item-{{ player_id }}" data-player-id="{{ player_id }}">
|
||||
<div class="participant-list-item-content">
|
||||
<span class="participant-list-item-name">{{ participant.name }}</span>
|
||||
<span class="participant-list-item-score" id="list-score-{{ player_id }}">{{ participant.total_score }}</span>
|
||||
<span class="participant-list-item-tens" id="list-tens-{{ player_id }}">0</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main card panel on the right -->
|
||||
<div class="main-card-panel" id="mainCardPanel">
|
||||
<div class="main-card-panel-empty" id="emptyPanel">
|
||||
👈 <span data-i18n="general.select">Select a participant</span>
|
||||
</div>
|
||||
{% for player_id, participant in results.participants.items() %}
|
||||
<div class="participant-card {{ 'completed' if participant.completed else 'in-progress' }}" id="card-{{ player_id }}" data-player-id="{{ player_id }}">
|
||||
<!-- Card Header on Top -->
|
||||
<div class="card-header-top">
|
||||
<div class="header-info">
|
||||
<div class="player-name">{{ participant.name }}</div>
|
||||
<div class="player-stats">
|
||||
<div style="display: flex; flex-direction: column; align-items: center;">
|
||||
<span class="total-score" id="total-{{ player_id }}">{{ participant.total_score }}</span>
|
||||
<span class="score-label" data-i18n="scoring.points">pts</span>
|
||||
<!-- MIDDLE: Scoring card + Finish card -->
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:12px;min-height:0;overflow:hidden;">
|
||||
|
||||
<!-- Scoring card -->
|
||||
<div class="calc-card" style="flex:1;min-height:0;">
|
||||
<div class="main-card-panel" id="mainCardPanel">
|
||||
<div class="main-card-panel-empty" id="emptyPanel">
|
||||
👈 <span data-i18n="general.select">Select a participant</span>
|
||||
</div>
|
||||
{% for player_id, participant in results.participants.items() %}
|
||||
<div class="participant-card {{ 'completed' if participant.completed else 'in-progress' }}" id="card-{{ player_id }}" data-player-id="{{ player_id }}">
|
||||
<!-- Card Header on Top -->
|
||||
<div class="card-header-top">
|
||||
<div class="header-info">
|
||||
<div class="player-name">{{ participant.name }}</div>
|
||||
<div class="player-stats">
|
||||
<div style="display: flex; flex-direction: column; align-items: center;">
|
||||
<span class="total-score" id="total-{{ player_id }}">{{ participant.total_score }}</span>
|
||||
<span class="score-label" data-i18n="scoring.points">pts</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center;">
|
||||
<span class="tens-count" id="tens-{{ player_id }}">0</span>
|
||||
<span class="tens-label">10s</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center;">
|
||||
<span class="tens-count" id="tens-{{ player_id }}">0</span>
|
||||
<span class="tens-label">10s</span>
|
||||
<div class="header-actions" onclick="event.stopPropagation();">
|
||||
<button class="header-btn clear-btn" onclick="clearParticipant({{ player_id }})" data-i18n-title="scoring.clear_all_scores">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="3 6 5 6 21 6"></polyline>
|
||||
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
||||
<line x1="10" y1="11" x2="10" y2="17"></line>
|
||||
<line x1="14" y1="11" x2="14" y2="17"></line>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="header-btn zero-fill-btn" onclick="fillEmptyWithZeros({{ player_id }})" data-i18n-title="scoring.fill_empty_with_zero">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" y1="6" x2="12" y2="18"></line>
|
||||
<line x1="6" y1="12" x2="18" y2="12"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- All Targets (scrollable) -->
|
||||
<div class="participant-targets-wrapper">
|
||||
<div class="targets-row" id="targets-{{ player_id }}">
|
||||
<!-- Targets will be populated by JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-actions" onclick="event.stopPropagation();">
|
||||
<button class="header-btn clear-btn" onclick="clearParticipant({{ player_id }})" data-i18n-title="scoring.clear_all_scores">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="3 6 5 6 21 6"></polyline>
|
||||
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
||||
<line x1="10" y1="11" x2="10" y2="17"></line>
|
||||
<line x1="14" y1="11" x2="14" y2="17"></line>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="header-btn zero-fill-btn" onclick="fillEmptyWithZeros({{ player_id }})" data-i18n-title="scoring.fill_empty_with_zero">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" y1="6" x2="12" y2="18"></line>
|
||||
<line x1="6" y1="12" x2="18" y2="12"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- All Targets (Middle - scrollable) -->
|
||||
<div class="participant-targets-wrapper">
|
||||
<div class="targets-row" id="targets-{{ player_id }}">
|
||||
<!-- Targets will be populated by JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="finish-section">
|
||||
<button class="fill-all-btn" onclick="fillAllPlayersRandom()">
|
||||
🎲 <span data-i18n="scoring.fill_all_players_random">Fill All Random</span>
|
||||
</button>
|
||||
<button class="finish-btn" id="finishBtn" onclick="finishTournament()" data-i18n="scoring.finish_tournament_button">🏁 Finish Tournament
|
||||
</button>
|
||||
<!-- Finish card -->
|
||||
<div class="calc-card finish-section">
|
||||
<button class="fill-all-btn" onclick="fillAllPlayersRandom()">
|
||||
🎲 <span data-i18n="scoring.fill_all_players_random">Fill All Random</span>
|
||||
</button>
|
||||
<button class="finish-btn" id="finishBtn" onclick="finishTournament()" data-i18n="scoring.finish_tournament_button">🏁 Finish Tournament
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div><!-- end middle column -->
|
||||
|
||||
<!-- RIGHT: Draft card -->
|
||||
{% if tournament and tournament.rounds %}
|
||||
<div class="calc-card draft-panel">
|
||||
<div class="draft-panel-header">
|
||||
<button class="draft-round-nav" id="draftPrevBtn" onclick="draftChangeRound(-1)">←</button>
|
||||
<span class="draft-round-label" id="draftRoundLabel">{{ tournament.current_round }} / {{ tournament.total_rounds }}</span>
|
||||
<button class="draft-round-nav" id="draftNextBtn" onclick="draftChangeRound(1)">→</button>
|
||||
</div>
|
||||
<div class="draft-positions" id="draftPositions">
|
||||
<!-- populated by JS -->
|
||||
</div>
|
||||
<div class="draft-panel-footer">
|
||||
<button class="nav-btn" id="btnTvDraft" onclick="toggleTvDraft()">📺 Pokaži Razpored</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div><!-- end container -->
|
||||
</div><!-- end content-wrapper -->
|
||||
|
||||
<script>
|
||||
let results = {{ results|tojson }};
|
||||
@@ -1431,7 +1593,7 @@
|
||||
totalTens += calculateTensCount(parseInt(playerId));
|
||||
}
|
||||
|
||||
document.getElementById('totalTens').textContent = totalTens;
|
||||
const ttEl = document.getElementById('totalTens'); if (ttEl) ttEl.textContent = totalTens;
|
||||
}
|
||||
|
||||
// Debounce function for auto-saving
|
||||
@@ -1723,8 +1885,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('completedCount').textContent = completedCount;
|
||||
document.getElementById('totalShots').textContent = totalShots;
|
||||
const ccEl = document.getElementById('completedCount'); if (ccEl) ccEl.textContent = completedCount;
|
||||
const tsEl = document.getElementById('totalShots'); if (tsEl) tsEl.textContent = totalShots;
|
||||
|
||||
// Update finish button state
|
||||
const finishBtn = document.getElementById('finishBtn');
|
||||
@@ -1762,32 +1924,14 @@
|
||||
}
|
||||
|
||||
async function saveAllPlayers() {
|
||||
const saveAllBtn = document.querySelector('.save-all-btn');
|
||||
const originalText = saveAllBtn.textContent;
|
||||
saveAllBtn.textContent = `💾 ${t('scoring.saving_all')}`;
|
||||
saveAllBtn.disabled = true;
|
||||
|
||||
try {
|
||||
const playerIds = Object.keys(results.participants);
|
||||
for (const playerId of playerIds) {
|
||||
await saveParticipant(parseInt(playerId), true);
|
||||
}
|
||||
|
||||
// Show success feedback
|
||||
saveAllBtn.textContent = `✅ ${t('scoring.all_saved')}`;
|
||||
saveAllBtn.style.background = '#28a745';
|
||||
|
||||
setTimeout(() => {
|
||||
saveAllBtn.textContent = originalText;
|
||||
saveAllBtn.style.background = '';
|
||||
saveAllBtn.disabled = false;
|
||||
}, 2000);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error saving all players:', error);
|
||||
alert('Failed to save all player data. Please try again.');
|
||||
saveAllBtn.textContent = originalText;
|
||||
saveAllBtn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2051,6 +2195,112 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ── PLAYER SEARCH ────────────────────────────────────────────────────────
|
||||
function filterPlayers(query) {
|
||||
const q = query.trim().toLowerCase();
|
||||
const clearBtn = document.querySelector('.players-search-clear');
|
||||
if (clearBtn) clearBtn.classList.toggle('visible', q.length > 0);
|
||||
document.querySelectorAll('.participant-list-item').forEach(item => {
|
||||
const name = item.querySelector('.participant-list-item-name').textContent.toLowerCase();
|
||||
item.style.display = (!q || name.includes(q)) ? '' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
function clearPlayerSearch() {
|
||||
const input = document.getElementById('playerSearch');
|
||||
input.value = '';
|
||||
filterPlayers('');
|
||||
input.focus();
|
||||
}
|
||||
|
||||
// ── DRAFT PANEL ──────────────────────────────────────────────────────────
|
||||
{% if tournament and tournament.rounds %}
|
||||
const draftRounds = {{ tournament.rounds | tojson }};
|
||||
let draftCurrentRound = {{ tournament.current_round }};
|
||||
const draftTotalRounds = {{ tournament.total_rounds }};
|
||||
|
||||
function renderDraftPanel() {
|
||||
const round = draftRounds.find(r => r.round_number === draftCurrentRound);
|
||||
const positions = document.getElementById('draftPositions');
|
||||
const label = document.getElementById('draftRoundLabel');
|
||||
const prevBtn = document.getElementById('draftPrevBtn');
|
||||
const nextBtn = document.getElementById('draftNextBtn');
|
||||
|
||||
if (!positions || !label) return;
|
||||
|
||||
label.textContent = `${draftCurrentRound} / ${draftTotalRounds}`;
|
||||
if (prevBtn) prevBtn.disabled = draftCurrentRound <= 1;
|
||||
if (nextBtn) nextBtn.disabled = draftCurrentRound >= draftTotalRounds;
|
||||
|
||||
const players = round ? round.players : [];
|
||||
let html = '';
|
||||
for (let pos = 1; pos <= 6; pos++) {
|
||||
const player = players[pos - 1];
|
||||
if (player) {
|
||||
html += `<div class="draft-position-row" onclick="selectParticipant(${player.id})">
|
||||
<div class="draft-position-num">${pos}</div>
|
||||
<div class="draft-position-name">${player.name}</div>
|
||||
</div>`;
|
||||
} else {
|
||||
html += `<div class="draft-position-row empty">
|
||||
<div class="draft-position-num">${pos}</div>
|
||||
<div class="draft-position-name">—</div>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
positions.innerHTML = html;
|
||||
}
|
||||
|
||||
async function draftChangeRound(direction) {
|
||||
const newRound = draftCurrentRound + direction;
|
||||
if (newRound < 1 || newRound > draftTotalRounds) return;
|
||||
|
||||
const prevBtn = document.getElementById('draftPrevBtn');
|
||||
const nextBtn = document.getElementById('draftNextBtn');
|
||||
if (prevBtn) prevBtn.disabled = true;
|
||||
if (nextBtn) nextBtn.disabled = true;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/tournament/round/${newRound}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
if (response.ok) {
|
||||
draftCurrentRound = newRound;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Round change failed:', e);
|
||||
}
|
||||
renderDraftPanel();
|
||||
}
|
||||
// TV draft toggle
|
||||
let currentTvView = 'cameras';
|
||||
|
||||
function updateTvDraftBtn(view) {
|
||||
currentTvView = view;
|
||||
const btn = document.getElementById('btnTvDraft');
|
||||
if (!btn) return;
|
||||
btn.style.background = (view === 'draft') ? '#28a745' : '';
|
||||
btn.style.color = (view === 'draft') ? 'white' : '';
|
||||
btn.style.borderColor = (view === 'draft') ? '#1e7e34' : '';
|
||||
btn.textContent = (view === 'draft') ? '📺 Skrij Razpored' : '📺 Pokaži Razpored';
|
||||
}
|
||||
|
||||
async function toggleTvDraft() {
|
||||
const newView = currentTvView === 'draft' ? 'cameras' : 'draft';
|
||||
try {
|
||||
await fetch('/api/tv/view', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ view: newView })
|
||||
});
|
||||
updateTvDraftBtn(newView);
|
||||
} catch (e) { console.error(e); }
|
||||
}
|
||||
|
||||
fetch('/api/dashboard/state').then(r => r.json()).then(d => updateTvDraftBtn(d.tv_view || 'cameras')).catch(() => {});
|
||||
{% endif %}
|
||||
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.ctrlKey && event.key === 's') {
|
||||
@@ -2091,7 +2341,12 @@
|
||||
|
||||
updateOverallProgress();
|
||||
updateOverallTens();
|
||||
|
||||
|
||||
// Initialize draft panel
|
||||
{% if tournament and tournament.rounds %}
|
||||
renderDraftPanel();
|
||||
{% endif %}
|
||||
|
||||
// Add input validation and navigation
|
||||
document.addEventListener('input', function(e) {
|
||||
if (e.target.classList.contains('shot-input')) {
|
||||
|
||||
Reference in New Issue
Block a user