File size: 5,227 Bytes
715c874 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 | document.addEventListener('DOMContentLoaded', function() {
// Tab switching functionality
const tabButtons = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');
tabButtons.forEach(button => {
button.addEventListener('click', () => {
tabButtons.forEach(btn => btn.classList.remove('active'));
tabContents.forEach(content => content.classList.remove('active'));
button.classList.add('active');
const tabId = button.getAttribute('data-tab');
document.getElementById(tabId).classList.add('active');
});
});
// Mock data - in a real app, this would come from an API
const playersData = [
{
id: 1,
name: "Sipho Mthembu",
position: "Flyhalf",
years: "2016-2019",
varsityShield: true,
clubsAfter: ["Border Bulldogs", "EP Elephants"],
graduated: true,
qualifications: "BSc Computer Science",
photo: "http://static.photos/sport/200x200/1"
},
{
id: 2,
name: "Lungelo Ndlovu",
position: "Prop",
years: "2014-2018",
varsityShield: true,
clubsAfter: ["Sharks Academy", "Pumas"],
graduated: true,
qualifications: "BA Education",
photo: "http://static.photos/sport/200x200/2"
},
{
id: 3,
name: "Thando Dlamini",
position: "Center",
years: "2019-Present",
varsityShield: true,
clubsAfter: [],
graduated: false,
qualifications: "In Progress: BCom",
photo: "http://static.photos/sport/200x200/3"
}
];
const coachesData = [
{
id: 1,
name: "Mike Venter",
role: "Head Coach",
years: "2016-2020",
achievements: "Varsity Shield Qualification 2016",
photo: "http://static.photos/people/200x200/1"
},
{
id: 2,
name: "Nomvula Khumalo",
role: "Skills Coach",
years: "2018-Present",
achievements: "Developed backline play system",
photo: "http://static.photos/people/200x200/2"
}
];
// Render players table
function renderPlayersTable(players) {
const tableBody = document.getElementById('players-data');
tableBody.innerHTML = '';
players.forEach(player => {
const row = document.createElement('tr');
row.innerHTML = `
<td><img src="${player.photo}" alt="${player.name}" class="player-photo"></td>
<td>${player.name}</td>
<td>${player.position}</td>
<td>${player.years}</td>
<td class="${player.varsityShield ? 'varsity-shield' : ''}">
${player.varsityShield ? 'Yes' : 'No'}
</td>
<td>${player.clubsAfter.join(', ') || 'N/A'}</td>
<td class="${player.graduated ? 'graduated' : 'not-graduated'}">
${player.graduated ? 'Graduated' : 'Current Student'}
</td>
<td>${player.qualifications}</td>
`;
tableBody.appendChild(row);
});
}
// Render coaches table
function renderCoachesTable(coaches) {
const tableBody = document.getElementById('coaches-data');
tableBody.innerHTML = '';
coaches.forEach(coach => {
const row = document.createElement('tr');
row.innerHTML = `
<td><img src="${coach.photo}" alt="${coach.name}" class="player-photo"></td>
<td>${coach.name}</td>
<td>${coach.role}</td>
<td>${coach.years}</td>
<td>${coach.achievements}</td>
`;
tableBody.appendChild(row);
});
}
// Filter functionality
document.getElementById('search-btn').addEventListener('click', function() {
const yearFilter = document.getElementById('year-filter').value;
const statusFilter = document.getElementById('status-filter').value;
let filteredPlayers = [...playersData];
if (yearFilter === '2016') {
filteredPlayers = filteredPlayers.filter(player => player.years.split('-').some(year => parseInt(year) >= 2016));
} else if (yearFilter === '2010') {
filteredPlayers = filteredPlayers.filter(player => player.years.split('-').every(year => parseInt(year) <= 2015));
}
if (statusFilter === 'graduated') {
filteredPlayers = filteredPlayers.filter(player => player.graduated);
} else if (statusFilter === 'current') {
filteredPlayers = filteredPlayers.filter(player => !player.graduated);
}
renderPlayersTable(filteredPlayers);
});
// Initial render
renderPlayersTable(playersData);
renderCoachesTable(coachesData);
}); |