bl3kunja/Sdk_TV_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new translation fix and some overall imrpovement to how the tournament and league workflow works.

Browse Source
This commit is contained in:
bl3kunja
2025-11-10 15:04:09 +01:00
parent 1e709e0248
commit 21bd6b74d2
23 changed files with 5855 additions and 1508 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/draft.html
+16 -85
View File
@@ -4,11 +4,13 @@
<meta charset="UTF-8" />
<title data-i18n="draft.tournament_draft">Tournament Draft</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;
}
/* Draft-specific styles */
html, body {
margin: 0;
padding: 0;
@@ -18,75 +20,6 @@
overflow: hidden;
}
.navbar {
background: white;
color: black;
padding: 15px 25px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid #ccc;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
height: 70px;
flex-shrink: 0;
}
.navbar-title {
font-size: 1.8rem;
font-weight: bold;
color: #333;
}
.navbar-controls {
display: flex;
gap: 12px;
align-items: center;
}
.nav-btn {
background: #f8f9fa;
border: 2px solid #e9ecef;
cursor: pointer;
padding: 12px 20px;
border-radius: 8px;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
color: #333;
text-decoration: none;
font-weight: bold;
font-size: 0.9rem;
}
.nav-btn:hover {
background: #e9ecef;
border-color: #007bff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
transform: translateY(-1px);
color: #007bff;
}
.nav-btn.primary {
background: #007bff;
border-color: #0056b3;
color: white;
}
.nav-btn.primary:hover {
background: #0056b3;
color: white;
}
.nav-btn.active {
background: #007bff;
border-color: #0056b3;
color: white;
}
.nav-btn.active:hover {
background: #0056b3;
color: white;
}
.main-container {
height: calc(100vh - 70px);
display: flex;
@@ -102,6 +35,14 @@
padding: 15px 20px;
text-align: center;
flex-shrink: 0;
position: relative;
}
.tournament-header .nav-btn {
position: absolute;
top: 10px;
right: 15px;
margin: 0;
}
.tournament-title {
@@ -620,6 +561,7 @@
display: none;
}
</style>
<script src="/static/js/i18n.js"></script>
</head>
<body>
<div class="navbar">
@@ -627,11 +569,8 @@
<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="/archive/player-analysis" class="nav-btn">👤 <span data-i18n="players.player_analysis">Player Analysis</span></a>
<a href="/archive" class="nav-btn">📚 <span data-i18n="navigation.archive">Archive</span></a>
<a href="/tournament/draft" class="nav-btn active">📋 <span data-i18n="tournament.view_draft">Draft</span></a>
<a href="/results/calculator" class="nav-btn">🎯 <span data-i18n="navigation.calculator">Results Calculator</span></a>
<button class="nav-btn" onclick="printDraft()">🖨️ <span data-i18n="general.print">Print</span></button>
</div>
</div>
@@ -643,6 +582,7 @@
<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'" />
<div class="tournament-title">🎯 <span data-i18n="draft.shooting_tournament">Shooting Tournament</span></div>
<div class="tournament-stats">
@@ -828,14 +768,5 @@
console.log(`📊 Displaying ${totalRounds} rounds in vertical layout`);
});
</script>
<!-- Include i18n support -->
<script src="/static/js/i18n.js"></script>
<script>
// Initialize language selector and i18n
document.addEventListener('DOMContentLoaded', function() {
translatePage();
});
</script>
</body>
</html>
templates/fullscreen.html
+6 -1
View File
@@ -4,8 +4,13 @@
<meta charset="UTF-8" />
<title>{{ title }} - Fullscreen</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>
/* Reset and base styles */
/* Fullscreen-specific styles */
* {
box-sizing: border-box;
}
templates/index.html
+136 -105
View File
@@ -4,7 +4,13 @@
<meta charset="UTF-8" />
<title data-i18n="camera.title">Nadzorna Plošča Kamer</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>
/* Dashboard-specific styles override and extensions */
html, body {
margin: 0;
padding: 0;
@@ -14,52 +20,31 @@
font-family: Arial, sans-serif;
}
.navbar {
background: white;
color: black;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid #ccc;
height: 60px;
box-sizing: border-box;
}
.navbar img.logo {
height: 40px;
}
.navbar-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
/* Tournament Navigation */
.tournament-nav {
display: flex;
align-items: center;
gap: 15px;
gap: 8px;
}
.round-nav-btn {
background: #f8f9fa;
border: 2px solid #e9ecef;
cursor: pointer;
padding: 12px;
padding: 12px 20px;
border-radius: 8px;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
color: #333;
font-weight: bold;
font-size: 1.2rem;
width: 50px;
height: 50px;
font-size: 0.9rem;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
height: 44px;
margin: 0;
flex-shrink: 0;
}
.round-nav-btn:hover {
@@ -82,96 +67,78 @@
.current-round-info {
text-align: center;
min-width: 120px;
min-width: 100px;
margin: 0;
padding: 0;
}
.round-title {
font-size: 1.4rem;
font-size: 1.2rem;
font-weight: bold;
color: #333;
margin-bottom: 2px;
margin: 0;
padding: 0;
line-height: 1.2;
}
.round-progress {
font-size: 0.8rem;
font-size: 0.9rem;
color: #666;
padding: 2px 8px;
background: rgba(0, 123, 255, 0.1);
border-radius: 10px;
border-radius: 6px;
border: 1px solid rgba(0, 123, 255, 0.2);
margin: 2px 0 0 0;
}
/* Regular time/date display */
.datetime {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0;
margin: 0;
line-height: 1.2;
}
.datetime .time {
font-size: 1.6rem;
font-weight: bold;
color: #333;
padding: 0;
margin: 0;
line-height: 1.2;
}
.datetime .date {
font-size: 0.9rem;
color: #666;
}
.hamburger-menu {
background: #f8f9fa;
border: 2px solid #e9ecef;
cursor: pointer;
padding: 12px;
display: flex;
flex-direction: column;
justify-content: space-around;
width: 50px;
height: 50px;
border-radius: 8px;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.hamburger-menu:hover {
background: #e9ecef;
border-color: #007bff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
transform: translateY(-1px);
}
.hamburger-line {
width: 100%;
height: 3px;
background: #333;
border-radius: 2px;
transition: all 0.3s ease;
}
.hamburger-menu:hover .hamburger-line {
background: #007bff;
padding: 0;
margin: 0;
line-height: 1.2;
}
.grid {
height: calc(100vh - 60px);
height: calc(100vh - 50px);
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
padding: 10px;
gap: 20px;
padding: 20px;
box-sizing: border-box;
align-items: center;
justify-items: center;
}
.camera-card {
background: transparent;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
position: relative;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.camera-card:hover {
@@ -194,7 +161,6 @@
.stream-wrapper {
position: relative;
background: #2a2a2a;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
overflow: hidden;
@@ -205,6 +171,9 @@
max-height: 100%;
width: fit-content;
height: fit-content;
gap: 0;
margin: 0;
padding: 0;
}
.image-container {
@@ -216,12 +185,14 @@
justify-content: center;
overflow: hidden;
border-radius: 0 0 12px 12px;
background: #1a1a1a;
flex: 1;
}
/* Calculate optimal size to fit within grid cell */
@supports (width: min(100%, calc((100vh - 60px - 20px) / 2 - 60px) * 4 / 3)) {
@supports (width: min(100%, calc((100vh - 50px - 20px) / 2 - 60px) * 4 / 3)) {
.stream-wrapper {
width: min(100%, calc(((100vh - 60px - 20px) / 2 - 60px) * 4 / 3));
width: min(100%, calc(((100vh - 50px - 20px) / 2 - 60px) * 4 / 3));
}
}
@@ -268,6 +239,8 @@
transition: all 0.2s ease;
border-radius: 12px 12px 0 0;
flex-shrink: 0;
margin: 0;
line-height: 1;
}
.target-number {
@@ -282,6 +255,12 @@
font-weight: bold;
flex-shrink: 0;
margin-right: 15px;
transition: color 0.2s ease;
}
/* Style when no player is assigned */
.camera-card.no-player .card-header {
background: linear-gradient(90deg, #999 0%, #999 60px, #1a1a1a 60px);
}
.camera-card:hover .card-header {
@@ -467,6 +446,7 @@
color: #007bff;
transform: translateY(-2px);
box-shadow: 0 5px 12px rgba(0, 123, 255, 0.15);
text-decoration: none !important;
}
.camera-input {
@@ -523,6 +503,7 @@
background: #0056b3 !important;
border-color: #004085 !important;
color: white !important;
text-decoration: none !important;
}
/* Desktop-only styles - mobile users are redirected */
@@ -630,6 +611,7 @@
}
}
</style>
<script src="/static/js/i18n.js"></script>
</head>
<body>
<div class="navbar">
@@ -688,7 +670,6 @@
<a href="/tournament/draft" class="nav-link tournament-btn">📋 <span data-i18n="tournament.view_full_tournament_draft">Oglej si Celoten Žreb Turnirja</span></a>
<a href="/tournament" class="nav-link tournament-btn" id="manageTournamentLink">⚙️ <span data-i18n="tournament.manage_tournament">Upravljaj Turnir</span></a>
<a href="/results/calculator" class="nav-link tournament-btn">🎯 <span data-i18n="scoring.results_calculator">Calculator</span></a>
<a href="/results" class="nav-link tournament-btn">📊 <span data-i18n="results.results">Results</span></a>
</div>
</div>
{% endif %}
@@ -738,6 +719,20 @@
style="width: 100%;">
</div>
<div style="margin-bottom: 15px;">
<label style="display: block; margin-bottom: 8px; font-weight: bold; color: #333;">
<span data-i18n="camera.target_number_size">Velikost Števila Tarče</span>: <span id="targetNumberSizeValue">{{ settings.display_options.get('target_number_size', settings.display_options.title_size) }}</span>rem
</label>
<input type="range"
id="targetNumberSize"
min="0.8"
max="2.5"
step="0.1"
value="{{ settings.display_options.get('target_number_size', settings.display_options.title_size) }}"
oninput="adjustTargetNumberSize(this.value)"
style="width: 100%;">
</div>
<div style="margin-top: 20px;">
<h5 data-i18n="camera.titles">Naslovi Kamer</h5>
{% for i in range(1, 7) %}
@@ -1019,7 +1014,7 @@
const prevBtn = document.getElementById('prevRoundBtn');
const nextBtn = document.getElementById('nextRoundBtn');
const currentRoundNum = document.getElementById('currentRoundNum');
if (prevBtn) prevBtn.disabled = currentRound <= 1;
if (nextBtn) nextBtn.disabled = currentRound >= totalRounds;
if (currentRoundNum) currentRoundNum.textContent = currentRound;
@@ -1029,14 +1024,14 @@
// Change round function
async function changeRound(direction) {
if (!tournamentActive) return;
const newRound = currentRound + direction;
if (newRound < 1 || newRound > totalRounds) return;
// Disable buttons during request
const prevBtn = document.getElementById('prevRoundBtn');
const nextBtn = document.getElementById('nextRoundBtn');
if (prevBtn) prevBtn.disabled = true;
if (nextBtn) nextBtn.disabled = true;
@@ -1186,7 +1181,7 @@
cardTitle.style.fontSize = `${size}rem`;
}
}
if (event && event.target === document.getElementById('titleSize')) {
currentSettings.display_options.title_size = parseFloat(size);
debouncedSaveSettings({
@@ -1197,6 +1192,28 @@
}
}
function adjustTargetNumberSize(size) {
document.getElementById('targetNumberSizeValue').textContent = size;
for (let i = 1; i <= 6; i++) {
const targetNumber = document.querySelector(`[data-camera-id="${i}"] .target-number`);
if (targetNumber) {
targetNumber.style.fontSize = `${size}rem`;
}
}
if (event && event.target === document.getElementById('targetNumberSize')) {
if (!currentSettings.display_options) {
currentSettings.display_options = {};
}
currentSettings.display_options.target_number_size = parseFloat(size);
debouncedSaveSettings({
display_options: {
target_number_size: parseFloat(size)
}
});
}
}
// Open camera fullscreen
function openCameraFullscreen(cameraId) {
const customTitle = currentSettings.camera_titles[cameraId.toString()] || `Camera ${cameraId}`;
@@ -1237,15 +1254,46 @@
cardTitle.style.fontSize = `${titleSize}rem`;
}
}
// Apply target number size separately
const targetNumberSize = currentSettings.display_options.target_number_size || titleSize;
const targetNumberSizeValueEl = document.getElementById('targetNumberSizeValue');
const targetNumberSizeEl = document.getElementById('targetNumberSize');
if (targetNumberSizeValueEl) {
targetNumberSizeValueEl.textContent = targetNumberSize;
}
if (targetNumberSizeEl) {
targetNumberSizeEl.value = targetNumberSize;
}
for (let i = 1; i <= 6; i++) {
const targetNumber = document.querySelector(`[data-camera-id="${i}"] .target-number`);
if (targetNumber) {
targetNumber.style.fontSize = `${targetNumberSize}rem`;
}
}
// Apply card titles
for (let i = 1; i <= 6; i++) {
const cardTitle = document.getElementById(`cardTitle${i}`);
const cameraCard = document.querySelector(`[data-camera-id="${i}"]`);
if (cardTitle) {
const title = currentSettings.camera_titles[i.toString()] || `Camera ${i}`;
cardTitle.textContent = title;
// Check if no player is assigned (title is Empty or Prazno)
if (title === 'Empty' || title === 'Prazno') {
if (cameraCard) {
cameraCard.classList.add('no-player');
}
} else {
if (cameraCard) {
cameraCard.classList.remove('no-player');
}
}
}
if (!tournamentActive) {
const input = document.getElementById(`titleInput${i}`);
if (input) {
@@ -1400,22 +1448,5 @@
}
});
</script>
<!-- Internationalization Support -->
<script src="/static/js/i18n.js"></script>
<script>
// Initialize translations with server data
document.addEventListener('DOMContentLoaded', function() {
try {
// Only try to initialize translations if variables are available
if (typeof currentTranslations !== 'undefined' && typeof currentLanguage !== 'undefined') {
translatePage();
createLanguageSelector('languageSelectorContainer');
}
} catch (e) {
console.log('Translations not available:', e);
}
});
</script>
</body>
</html>
templates/league_scoreboard_display.html
+22 -13
View File
@@ -4,7 +4,13 @@
<meta charset="UTF-8" />
<title data-i18n="league.league_results">League Results</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>
/* League scoreboard specific styles */
* {
box-sizing: border-box;
}
@@ -772,6 +778,7 @@
}
}
</style>
<script src="/static/js/i18n.js"></script>
</head>
<body>
<div class="navbar">
@@ -779,7 +786,7 @@
<div class="navbar-title">🎖️ <span data-i18n="league.league_results">League Results</span></div>
</div>
<div class="navbar-controls">
<a href="/" class="nav-btn"> <span data-i18n="navigation.dashboard">Dashboard</span></a>
<a href="/" class="nav-btn">📺 <span data-i18n="navigation.dashboard">Dashboard</span></a>
<button class="nav-btn" onclick="window.print()">🖨️ <span data-i18n="general.print">Print</span></button>
</div>
</div>
@@ -1129,9 +1136,20 @@
const mostTens = count > 0 ? Math.max(...processedParticipants.map(p => p.total_tens)) : 0;
const averageFinal = count > 0 ? Math.round(processedParticipants.reduce((sum, p) => sum + p.final_score, 0) / count) : 0;
const currentDate = league && league.finished_at ?
league.finished_at.substring(0, 10) :
new Date().toISOString().substring(0, 10);
// Format date from YYYY-MM-DD to DD-MM-YY
function formatFooterDate(dateString) {
if (!dateString) return '';
const parts = dateString.split('-');
if (parts.length !== 3) return dateString;
const year = parts[0].slice(-2);
const month = parts[1];
const day = parts[2];
return `${day}-${month}-${year}`;
}
const currentDate = league && league.finished_at ?
formatFooterDate(league.finished_at.substring(0, 10)) :
formatFooterDate(new Date().toISOString().substring(0, 10));
// Update header stats
document.getElementById('participantCount').textContent = count;
@@ -1192,14 +1210,5 @@
}
});
</script>
<!-- Include i18n support -->
<script src="/static/js/i18n.js"></script>
<script>
// Initialize language selector and i18n
document.addEventListener('DOMContentLoaded', function() {
translatePage();
});
</script>
</body>
</html>
templates/mobile_streams.html
+18 -16
View File
@@ -4,7 +4,13 @@
<meta charset="UTF-8" />
<title data-i18n="mobile.camera_streams">📱 Camera Streams</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui, viewport-fit=cover">
<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>
/* Mobile streams specific styles */
* {
box-sizing: border-box;
}
@@ -211,6 +217,11 @@
text-align: center;
}
/* Style for unavailable/empty streams - grey out the camera title */
.camera-option .stream-preview.unavailable ~ .camera-info .camera-title {
color: #999;
}
@media (orientation: portrait) {
.camera-info {
padding: 10px 12px;
@@ -358,6 +369,7 @@
margin-left: 5px;
}
</style>
<script src="/static/js/i18n.js"></script>
</head>
<body>
<div class="mobile-navbar">
@@ -408,7 +420,12 @@
<script>
function handleStreamError(img, cameraId) {
const loadingIndicator = img.parentElement.querySelector('.stream-loading');
const streamPreview = img.parentElement;
const loadingIndicator = streamPreview.querySelector('.stream-loading');
// Add unavailable class to stream-preview
streamPreview.classList.add('unavailable');
if (loadingIndicator) {
loadingIndicator.textContent = 'Unavailable';
loadingIndicator.style.color = '#ff6b6b';
@@ -595,20 +612,5 @@
}
});
</script>
<!-- Internationalization Support -->
<script src="/static/js/i18n.js"></script>
<script>
// Initialize translations with server data
if (typeof {{ translations|tojson }} !== 'undefined') {
currentTranslations = {{ translations|tojson }};
currentLanguage = '{{ current_language }}';
// Apply translations when DOM is ready
document.addEventListener('DOMContentLoaded', function() {
translatePage();
});
}
</script>
</body>
</html>
templates/modern_archive_index.html
+584 -864
View File
File diff suppressed because it is too large Load Diff
templates/modern_player_analysis.html
+12 -18
View File
@@ -4,6 +4,11 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title data-i18n="players.player_analysis">👤 Player Analysis - Camera Dashboard</title>
<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">
<script src="/static/js/chart.min.js"></script>
<script>
// Fallback: if Chart.js fails to load, create a simple notification
@@ -747,6 +752,7 @@
}
}
</style>
<script src="/static/js/i18n.js"></script>
</head>
<body>
<!-- Navigation Bar -->
@@ -754,7 +760,6 @@
<div class="navbar-title" data-i18n="players.player_analysis">🎯 👤 Player Analysis</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="/archive/player-analysis" class="nav-btn active">👤 <span data-i18n="players.player_analysis">Player Analysis</span></a>
<a href="/archive" class="nav-btn">📚 <span data-i18n="navigation.archive">Archive</span></a>
</div>
@@ -1315,23 +1320,12 @@
window.location.href = `/archive/player/${playerId}`;
}
// Initialize page when DOM is loaded
document.addEventListener('DOMContentLoaded', initializePage);
</script>
<!-- Internationalization Support -->
<script src="/static/js/i18n.js"></script>
<script>
// Initialize translations with server data
if (typeof {{ translations|tojson }} !== 'undefined') {
currentTranslations = {{ translations|tojson }};
currentLanguage = '{{ current_language }}';
// Apply translations when DOM is ready
document.addEventListener('DOMContentLoaded', function() {
translatePage();
});
}
// Initialize page when DOM is loaded and translations are ready
document.addEventListener('DOMContentLoaded', function() {
window.addEventListener('i18nReady', function() {
initializePage();
}, { once: true });
});
</script>
</body>
</html>
templates/modern_player_stats.html
+8 -17
View File
@@ -4,8 +4,14 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ player.name }} - Player Stats</title>
<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">
<script src="/static/js/chart.min.js"></script>
<style>
/* Player stats specific styles */
* {
margin: 0;
padding: 0;
@@ -653,14 +659,14 @@
}
}
</style>
<script src="/static/js/i18n.js"></script>
</head>
<body>
<!-- Navigation Bar -->
<div class="navbar">
<div class="navbar-title">📊 {{ player.name }} - <span data-i18n="players.player_stats">Stats</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="/" class="nav-btn">📺 <span data-i18n="navigation.dashboard">Dashboard</span></a>
<a href="/archive/player-analysis" class="nav-btn active">👤 <span data-i18n="players.player_analysis">Player Analysis</span></a>
<a href="/archive" class="nav-btn">📚 <span data-i18n="navigation.archive">Archive</span></a>
</div>
@@ -1238,20 +1244,5 @@
// Initialize page when DOM is loaded
document.addEventListener('DOMContentLoaded', initializePage);
</script>
<!-- Internationalization Support -->
<script src="/static/js/i18n.js"></script>
<script>
// Initialize translations with server data
if (typeof {{ translations|tojson }} !== 'undefined') {
currentTranslations = {{ translations|tojson }};
currentLanguage = '{{ current_language }}';
// Apply translations when DOM is ready
document.addEventListener('DOMContentLoaded', function() {
translatePage();
});
}
</script>
</body>
</html>
templates/results_calculator.html
+35 -114
View File
@@ -4,86 +4,13 @@
<meta charset="UTF-8" />
<title data-i18n="scoring.results_calculator">Results Calculator</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;
background: #f5f5f5;
font-family: Arial, sans-serif;
min-height: 100vh;
}
.navbar {
background: white;
color: black;
padding: 15px 25px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid #ccc;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.navbar-title {
font-size: 1.8rem;
font-weight: bold;
color: #333;
}
.navbar-controls {
display: flex;
gap: 12px;
align-items: center;
}
.nav-btn {
background: #f8f9fa;
border: 2px solid #e9ecef;
cursor: pointer;
padding: 12px 20px;
border-radius: 8px;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
color: #333;
text-decoration: none;
font-weight: bold;
font-size: 0.9rem;
}
.nav-btn:hover {
background: #e9ecef;
border-color: #007bff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
transform: translateY(-1px);
color: #007bff;
}
.nav-btn.active {
background: #007bff;
border-color: #0056b3;
color: white;
}
.nav-btn.active:hover {
background: #0056b3;
color: white;
}
.nav-btn.danger {
background: #dc3545;
border-color: #c82333;
color: white;
}
.nav-btn.danger:hover {
background: #c82333;
color: white;
}
/* Results Calculator specific styles */
.container {
max-width: 1000px;
margin: 0 auto;
@@ -409,7 +336,7 @@
.targets-grid {
display: grid;
gap: 10px;
gap: 15px;
margin-bottom: 20px;
max-width: 100%;
}
@@ -420,11 +347,11 @@
}
.targets-grid.targets-20 {
grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.targets-grid.targets-40 {
grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
/* Responsive adjustments */
@@ -483,7 +410,7 @@
.target-group {
border: 2px solid #e9ecef;
border-radius: 8px;
padding: 10px;
padding: 15px 12px;
background: #f8f9fa;
text-align: center;
}
@@ -494,10 +421,10 @@
}
.target-number {
font-size: 0.8rem;
font-size: 1rem;
font-weight: bold;
color: #333;
margin-bottom: 5px;
margin-bottom: 10px;
}
.shots-container {
@@ -512,17 +439,24 @@
.shot-input {
width: 100%;
padding: 6px;
border: 1px solid #ddd;
border-radius: 4px;
padding: 12px 8px;
border: 2px solid #ddd;
border-radius: 6px;
text-align: center;
font-size: 0.9rem;
font-size: 1.2rem;
font-weight: bold;
color: #333;
background-color: #ffffff;
min-height: 45px;
display: flex;
align-items: center;
justify-content: center;
}
.shots-container.shots-5 .shot-input {
padding: 4px;
font-size: 0.8rem;
padding: 10px 6px;
font-size: 1rem;
min-height: 40px;
}
.shot-input:focus {
@@ -668,6 +602,7 @@
100% { transform: rotate(360deg); }
}
</style>
<script src="/static/js/i18n.js"></script>
</head>
<body>
<div class="navbar">
@@ -675,8 +610,6 @@
<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="/archive/player-analysis" class="nav-btn">👤 <span data-i18n="players.player_analysis">Player Analysis</span></a>
<a href="/archive" class="nav-btn">📚 <span data-i18n="navigation.archive">Archive</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>
</div>
@@ -1347,20 +1280,20 @@
async function finishTournament() {
const allCompleted = Object.values(results.participants).every(p => p.completed);
if (!allCompleted) {
alert('Please complete scoring for all participants before finishing the tournament.');
return;
}
if (!confirm('Are you sure you want to finish the tournament? This will finalize all results and make them viewable.')) {
return;
}
const finishBtn = document.getElementById('finishBtn');
finishBtn.disabled = true;
finishBtn.textContent = '🔄 Finishing Tournament...';
try {
const response = await fetch('/api/results/finish', {
method: 'POST',
@@ -1368,10 +1301,12 @@
'Content-Type': 'application/json',
}
});
if (response.ok) {
alert('Tournament finished successfully! Redirecting to results...');
// Small delay to ensure the alert is seen
const responseData = await response.json();
// Always show results first when tournament finishes
alert('Tournament finished successfully! Showing results...');
setTimeout(() => {
window.location.href = '/results';
}, 1000);
@@ -1439,19 +1374,5 @@
});
});
</script>
<!-- Internationalization Support -->
<script src="/static/js/i18n.js"></script>
<script>
// Initialize translations with server data
if (typeof {{ translations|tojson }} !== 'undefined') {
currentTranslations = {{ translations|tojson }};
currentLanguage = '{{ current_language }}';
}
// Apply translations when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
translatePage();
});
</script>
</body>
</html>
templates/results_display.html
+22 -13
View File
@@ -4,7 +4,13 @@
<meta charset="UTF-8" />
<title data-i18n="tournament.tournament_results">Tournament Results</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>
/* Results display specific styles */
* {
box-sizing: border-box;
}
@@ -642,6 +648,7 @@
}
}
</style>
<script src="/static/js/i18n.js"></script>
</head>
<body>
<div class="navbar">
@@ -649,7 +656,7 @@
<div class="navbar-title">🏆 <span data-i18n="tournament.tournament_results">Tournament Results</span></div>
</div>
<div class="navbar-controls">
<a href="/" class="nav-btn"> <span data-i18n="navigation.dashboard">Dashboard</span></a>
<a href="/" class="nav-btn">📺 <span data-i18n="navigation.dashboard">Dashboard</span></a>
<button class="nav-btn" onclick="printResults()">🖨️ <span data-i18n="general.print">Print</span></button>
</div>
</div>
@@ -888,9 +895,20 @@
const mostTens = count > 0 ? Math.max(...processedParticipants.map(p => p.tens_count)) : 0;
const averageScore = count > 0 ? Math.round(processedParticipants.reduce((sum, p) => sum + p.total_score, 0) / count) : 0;
const currentDate = results && results.created_at ?
results.created_at.substring(0, 10) :
new Date().toISOString().substring(0, 10);
// Format date from YYYY-MM-DD to DD-MM-YY
function formatFooterDate(dateString) {
if (!dateString) return '';
const parts = dateString.split('-');
if (parts.length !== 3) return dateString;
const year = parts[0].slice(-2);
const month = parts[1];
const day = parts[2];
return `${day}-${month}-${year}`;
}
const currentDate = results && results.created_at ?
formatFooterDate(results.created_at.substring(0, 10)) :
formatFooterDate(new Date().toISOString().substring(0, 10));
// Update header stats
document.getElementById('participantCount').textContent = count;
@@ -958,14 +976,5 @@
}
});
</script>
<!-- Include i18n support -->
<script src="/static/js/i18n.js"></script>
<script>
// Initialize language selector and i18n
document.addEventListener('DOMContentLoaded', function() {
translatePage();
});
</script>
</body>
</html>
templates/tournament.html
+872 -230
View File
File diff suppressed because it is too large Load Diff