<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mannschaftsstatistiken</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
th { background-color: #f2f2f2; }
.error { color: red; }
select { padding: 5px; margin-bottom: 10px; }
</style>
</head>
<body>
<h1>Mannschaftsstatistiken</h1>
<label for="team-filter">Wähle eine Mannschaft:</label>
<select id="team-filter">
<option value="">Alle Teams</option>
<!-- Dynamische Teams werden hier hinzugefügt -->
</select>
<div id="team-stats">Lade Mannschaftsstatistiken...</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const apiToken = "NTVhMDE4YTdlZmY1ZjhkNGIzYmM1YWM0MWVmMTg0YjhhYjFhYzFiOTViNjAyMjBhMjM2ZmE3YmQyZWRiNDIwOWQ3ODVlYWM2YTdkMWMxZGFiYWMwN2JjMGE5YzZmZmM0"; //
const apiUrl = "https://api.tyg.rocks/external/v1/competitions/COZBOC6G/stats/team/TEJGHFCM/players"; //
function loadTeamStats(selectedTeam = "") {
fetch(apiUrl, {
method: "GET",
headers: {
"Authorization": `Bearer ${apiToken}`,
"Content-Type": "application/json"
}
})
.then(response => response.json())
.then(data => {
// Filterung der Teams
const teams = [...new Set(data.players.map(player => player.team))];
const teamFilter = document.getElementById("team-filter");
if (teamFilter.options.length === 1) { // Nur einmal befüllen
teams.forEach(team => {
const option = document.createElement("option");
option.value = team;
option.textContent = team;
teamFilter.appendChild(option);
});
}
let filteredPlayers = selectedTeam ? data.players.filter(player => player.team === selectedTeam) : data.players;
let table = '<table><tr><th>Spielername</th><th>Position</th><th>Tore</th><th>Assists</th></tr>';
filteredPlayers.forEach(player => {
table += `<tr><td>${player.name}</td><td>${player.position}</td><td>${player.goals}</td><td>${player.assists}</td></tr>`;
});
table += '</table>';
document.getElementById("team-stats").innerHTML = table;
})
.catch(error => {
console.error("Fehler beim Abrufen der Daten:", error);
document.getElementById("team-stats").innerHTML = "<p class='error'>Fehler beim Laden der Daten.</p>";
});
}
// Initiales Laden der Daten
loadTeamStats();
// Filter-Änderung überwachen
document.getElementById("team-filter").addEventListener("change", function() {
loadTeamStats(this.value);
});
});
</script>
</body>
</html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mannschaftsstatistiken</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
th { background-color: #f2f2f2; }
.error { color: red; }
select { padding: 5px; margin-bottom: 10px; }
</style>
</head>
<body>
<h1>Mannschaftsstatistiken</h1>
<label for="team-filter">Wähle eine Mannschaft:</label>
<select id="team-filter">
<option value="">Alle Teams</option>
<!-- Dynamische Teams werden hier hinzugefügt -->
</select>
<div id="team-stats">Lade Mannschaftsstatistiken...</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const apiToken = "NTVhMDE4YTdlZmY1ZjhkNGIzYmM1YWM0MWVmMTg0YjhhYjFhYzFiOTViNjAyMjBhMjM2ZmE3YmQyZWRiNDIwOWQ3ODVlYWM2YTdkMWMxZGFiYWMwN2JjMGE5YzZmZmM0"; //
const apiUrl = "https://api.tyg.rocks/external/v1/competitions/COZBOC6G/stats/team/TEJGHFCM/players"; //
function loadTeamStats(selectedTeam = "") {
fetch(apiUrl, {
method: "GET",
headers: {
"Authorization": `Bearer ${apiToken}`,
"Content-Type": "application/json"
}
})
.then(response => response.json())
.then(data => {
// Filterung der Teams
const teams = [...new Set(data.players.map(player => player.team))];
const teamFilter = document.getElementById("team-filter");
if (teamFilter.options.length === 1) { // Nur einmal befüllen
teams.forEach(team => {
const option = document.createElement("option");
option.value = team;
option.textContent = team;
teamFilter.appendChild(option);
});
}
let filteredPlayers = selectedTeam ? data.players.filter(player => player.team === selectedTeam) : data.players;
let table = '<table><tr><th>Spielername</th><th>Position</th><th>Tore</th><th>Assists</th></tr>';
filteredPlayers.forEach(player => {
table += `<tr><td>${player.name}</td><td>${player.position}</td><td>${player.goals}</td><td>${player.assists}</td></tr>`;
});
table += '</table>';
document.getElementById("team-stats").innerHTML = table;
})
.catch(error => {
console.error("Fehler beim Abrufen der Daten:", error);
document.getElementById("team-stats").innerHTML = "<p class='error'>Fehler beim Laden der Daten.</p>";
});
}
// Initiales Laden der Daten
loadTeamStats();
// Filter-Änderung überwachen
document.getElementById("team-filter").addEventListener("change", function() {
loadTeamStats(this.value);
});
});
</script>
</body>
</html>