319 lines
8.6 KiB
HTML
319 lines
8.6 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Player of the Year - HKFC MOTM System{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Page Header -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body text-center">
|
|
<h1 class="card-title">
|
|
<i class="fas fa-trophy text-warning me-2"></i>Player of the Year
|
|
</h1>
|
|
<p class="lead text-muted">MOTM and DotD vote standings</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart Container -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header bg-primary text-white">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-chart-bar me-2"></i>Current Standings
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="poty-chart-container">
|
|
<!-- Chart will be loaded here -->
|
|
<div class="text-center py-5">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
<p class="mt-3 text-muted">Loading player data...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Legend -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h6 class="card-title">
|
|
<i class="fas fa-info-circle me-2"></i>Legend
|
|
</h6>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<div class="motm-bar me-3" style="width: 20px; height: 20px; background: linear-gradient(135deg, #28a745, #20c997); border-radius: 4px;"></div>
|
|
<span><strong>MOTM Votes</strong> - Man of the Match</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<div class="dotd-bar me-3" style="width: 20px; height: 20px; background: linear-gradient(135deg, #dc3545, #fd7e14); border-radius: 4px;"></div>
|
|
<span><strong>DotD Votes</strong> - Dick of the Day</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<div class="row mt-4">
|
|
<div class="col-12 text-center">
|
|
<a href="/admin" class="btn btn-primary">
|
|
<i class="fas fa-arrow-left me-2"></i>Back to Admin
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.poty-player-card {
|
|
background: #fff;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
margin-bottom: 1rem;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.poty-player-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.poty-player-name {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.poty-stats {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.poty-stat {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.poty-stat-value {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
min-width: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.poty-stat-label {
|
|
font-size: 0.9rem;
|
|
color: #6c757d;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.poty-bar-container {
|
|
flex: 1;
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.poty-bar {
|
|
height: 8px;
|
|
border-radius: 4px;
|
|
margin-bottom: 4px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background-color: #e9ecef; /* Light gray background for empty bars */
|
|
}
|
|
|
|
.poty-bar-motm {
|
|
background-color: rgba(40, 167, 69, 0.1); /* Very light green background */
|
|
}
|
|
|
|
.poty-bar-dotd {
|
|
background-color: rgba(220, 53, 69, 0.1); /* Very light red background */
|
|
}
|
|
|
|
.poty-bar-fill {
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
transition: width 0.8s ease-in-out;
|
|
}
|
|
|
|
.poty-bar-motm .poty-bar-fill {
|
|
background: linear-gradient(90deg, #28a745, #20c997);
|
|
}
|
|
|
|
.poty-bar-dotd .poty-bar-fill {
|
|
background: linear-gradient(90deg, #dc3545, #fd7e14);
|
|
}
|
|
|
|
.poty-no-data {
|
|
text-align: center;
|
|
padding: 3rem;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.poty-no-data i {
|
|
font-size: 3rem;
|
|
margin-bottom: 1rem;
|
|
color: #dee2e6;
|
|
}
|
|
|
|
.poty-ranking {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
background: linear-gradient(135deg, #007bff, #0056b3);
|
|
color: white;
|
|
border-radius: 50%;
|
|
font-weight: 700;
|
|
font-size: 0.9rem;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.poty-ranking.gold {
|
|
background: linear-gradient(135deg, #ffd700, #ffb347);
|
|
}
|
|
|
|
.poty-ranking.silver {
|
|
background: linear-gradient(135deg, #c0c0c0, #a8a8a8);
|
|
}
|
|
|
|
.poty-ranking.bronze {
|
|
background: linear-gradient(135deg, #cd7f32, #b8860b);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadPOTYData();
|
|
});
|
|
|
|
function loadPOTYData() {
|
|
fetch('/api/poty-results')
|
|
.then(response => {
|
|
console.log('Response status:', response.status);
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
console.log('Raw API data:', data);
|
|
renderPOTYChart(data);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading POTY data:', error);
|
|
renderNoData();
|
|
});
|
|
}
|
|
|
|
function renderPOTYChart(data) {
|
|
const container = document.getElementById('poty-chart-container');
|
|
|
|
console.log('POTY Data received:', data);
|
|
|
|
if (!data || data.length === 0) {
|
|
renderNoData();
|
|
return;
|
|
}
|
|
|
|
// Sort by MOTM votes (descending), then by DotD votes (ascending for better ranking)
|
|
data.sort((a, b) => {
|
|
if (b.motmTotal !== a.motmTotal) {
|
|
return b.motmTotal - a.motmTotal;
|
|
}
|
|
return a.dotdTotal - b.dotdTotal;
|
|
});
|
|
|
|
// Find max values for independent scaling - each bar type scales to its own maximum
|
|
const maxMotm = Math.max(...data.map(p => p.motmTotal || 0));
|
|
const maxDotd = Math.max(...data.map(p => p.dotdTotal || 0));
|
|
|
|
let html = '';
|
|
|
|
data.forEach((player, index) => {
|
|
console.log('Processing player:', player);
|
|
const ranking = index + 1;
|
|
const rankingClass = ranking === 1 ? 'gold' : ranking === 2 ? 'silver' : ranking === 3 ? 'bronze' : '';
|
|
|
|
const motmVotes = player.motmTotal || 0;
|
|
const dotdVotes = player.dotdTotal || 0;
|
|
|
|
html += '<div class="poty-player-card">';
|
|
html += '<div class="d-flex align-items-center">';
|
|
html += '<div class="poty-ranking ' + rankingClass + '">' + ranking + '</div>';
|
|
html += '<div class="flex-grow-1">';
|
|
html += '<div class="poty-player-name">' + (player.playerName || 'Unknown Player') + '</div>';
|
|
html += '<div class="poty-stats">';
|
|
html += '<div class="poty-stat">';
|
|
html += '<div class="poty-stat-value text-success">' + motmVotes + '</div>';
|
|
html += '<div class="poty-stat-label">MOTM</div>';
|
|
html += '</div>';
|
|
html += '<div class="poty-stat">';
|
|
html += '<div class="poty-stat-value text-danger">' + dotdVotes + '</div>';
|
|
html += '<div class="poty-stat-label">DotD</div>';
|
|
html += '</div>';
|
|
html += '<div class="poty-bar-container">';
|
|
html += '<div class="poty-bar poty-bar-motm">';
|
|
html += '<div class="poty-bar-fill" style="width: ' + (maxMotm > 0 ? (motmVotes / maxMotm * 100) : 0) + '%"></div>';
|
|
html += '</div>';
|
|
html += '<div class="poty-bar poty-bar-dotd">';
|
|
html += '<div class="poty-bar-fill" style="width: ' + (maxDotd > 0 ? (dotdVotes / maxDotd * 100) : 0) + '%"></div>';
|
|
html += '</div>';
|
|
html += '</div>';
|
|
html += '</div>';
|
|
html += '</div>';
|
|
html += '</div>';
|
|
html += '</div>';
|
|
});
|
|
|
|
container.innerHTML = html;
|
|
|
|
// Animate bars after a short delay
|
|
setTimeout(() => {
|
|
const bars = container.querySelectorAll('.poty-bar-fill');
|
|
bars.forEach(bar => {
|
|
const width = bar.style.width;
|
|
bar.style.width = '0%';
|
|
setTimeout(() => {
|
|
bar.style.width = width;
|
|
}, 100);
|
|
});
|
|
}, 200);
|
|
}
|
|
|
|
function renderNoData() {
|
|
const container = document.getElementById('poty-chart-container');
|
|
container.innerHTML = '<div class="poty-no-data">' +
|
|
'<i class="fas fa-chart-line"></i>' +
|
|
'<h4>No Vote Data Available</h4>' +
|
|
'<p>No players have received MOTM or DotD votes yet.</p>' +
|
|
'<p class="text-muted">Votes will appear here once players start receiving votes.</p>' +
|
|
'</div>';
|
|
}
|
|
|
|
// Test function to verify basic functionality
|
|
function testPOTYChart() {
|
|
const testData = [
|
|
{playerName: 'Test Player 1', motmTotal: 5, dotdTotal: 1},
|
|
{playerName: 'Test Player 2', motmTotal: 3, dotdTotal: 2}
|
|
];
|
|
console.log('Testing with sample data:', testData);
|
|
renderPOTYChart(testData);
|
|
}
|
|
</script>
|
|
{% endblock %} |