147 lines
6.2 KiB
JavaScript
147 lines
6.2 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
let gamesData = []; // To store games data for CSV export
|
|
|
|
const playerDetailContainer = document.getElementById('player-detail-container');
|
|
const authLinks = document.getElementById('auth-links');
|
|
|
|
// --- Auth Logic ---
|
|
const updateAuthUI = (user) => {
|
|
if (user) {
|
|
authLinks.innerHTML = `
|
|
<span class="navbar-text me-3">Welcome, ${user.username}</span>
|
|
<button id="logout-btn" class="btn btn-outline-light">Logout</button>
|
|
`;
|
|
document.getElementById('logout-btn').addEventListener('click', logout);
|
|
} else {
|
|
authLinks.innerHTML = `
|
|
<a href="/login.php" class="btn btn-outline-light me-2">Login</a>
|
|
<a href="/register.php" class="btn btn-light">Register</a>
|
|
`;
|
|
}
|
|
};
|
|
|
|
const logout = () => {
|
|
fetch('/api/logout.php').then(() => window.location.href = '/');
|
|
};
|
|
|
|
const checkSession = () => {
|
|
fetch('/api/check_session.php')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
updateAuthUI(data.loggedIn ? data.user : null);
|
|
});
|
|
};
|
|
|
|
// --- Player Detail Logic ---
|
|
const renderPlayerDetails = (playerData) => {
|
|
const details = playerData.details;
|
|
gamesData = playerData.recent_games; // Store for export
|
|
|
|
let biographyHtml = `
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="player-card text-center">
|
|
<img src="${details.strCutout || details.strThumb || 'https://picsum.photos/seed/placeholder/400/400'}" class="img-fluid rounded-circle" alt="${details.strPlayer}">
|
|
<h2 class="mt-3">${details.strPlayer}</h2>
|
|
<p class="text-secondary">${details.strTeam}</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="player-card">
|
|
<h3>Biography</h3>
|
|
<p>${details.strDescriptionEN || 'No biography available.'}</p>
|
|
<hr>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<p><strong>Position:</strong> ${details.strPosition}</p>
|
|
<p><strong>Height:</strong> ${details.strHeight}</p>
|
|
<p><strong>Weight:</strong> ${details.strWeight}</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p><strong>Nationality:</strong> ${details.strNationality}</p>
|
|
<p><strong>Date of Birth:</strong> ${details.dateBorn}</p>
|
|
<p><strong>Sport:</strong> ${details.strSport}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
let gamesHtml = '';
|
|
if (gamesData && gamesData.length > 0) {
|
|
gamesHtml = `
|
|
<div class="row mt-5">
|
|
<div class="col-12">
|
|
<div class="player-card">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h3>Recent Games</h3>
|
|
<button id="download-games-csv" class="btn btn-sm btn-success">Download as CSV</button>
|
|
</div>
|
|
<table class="table table-dark table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Event</th>
|
|
<th>Home Team</th>
|
|
<th>Away Team</th>
|
|
<th>Score</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${gamesData.map(game => `
|
|
<tr>
|
|
<td>${game.dateEvent}</td>
|
|
<td>${game.strEvent}</td>
|
|
<td>${game.strHomeTeam}</td>
|
|
<td>${game.strAwayTeam}</td>
|
|
<td>${game.intHomeScore} - ${game.intAwayScore}</td>
|
|
</tr>
|
|
`).join('')}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
playerDetailContainer.innerHTML = biographyHtml + gamesHtml;
|
|
|
|
const downloadBtn = document.getElementById('download-games-csv');
|
|
if (downloadBtn) {
|
|
downloadBtn.addEventListener('click', () => {
|
|
exportToCsv(`${details.strPlayer}_recent_games.csv', gamesData);
|
|
});
|
|
}
|
|
};
|
|
|
|
const loadPlayerDetails = () => {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const playerId = urlParams.get('id');
|
|
|
|
if (!playerId) {
|
|
playerDetailContainer.innerHTML = '<div class="alert alert-danger">No player ID provided.</div>';
|
|
return;
|
|
}
|
|
|
|
fetch(`/api/get_player_details.php?id=${playerId}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
renderPlayerDetails(data.player);
|
|
} else {
|
|
playerDetailContainer.innerHTML = `<div class="alert alert-danger">${data.message}</div>`;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading player details:', error);
|
|
playerDetailContainer.innerHTML = '<div class="alert alert-danger">An error occurred while fetching player data.</div>';
|
|
});
|
|
};
|
|
|
|
// --- Initial Load ---
|
|
checkSession();
|
|
loadPlayerDetails();
|
|
}); |