127 lines
4.5 KiB
JavaScript
127 lines
4.5 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
let usersData = []; // To store user data for CSV export
|
|
|
|
const userTableContainer = document.getElementById('user-table-container');
|
|
const authLinks = document.getElementById('auth-links');
|
|
const downloadBtn = document.getElementById('download-users-csv');
|
|
|
|
// --- Auth Logic (for header consistency) ---
|
|
const updateAuthUI = (user) => {
|
|
if (user) {
|
|
let adminLink = user.role === 'admin' ? '<a href="/admin.php" class="btn btn-outline-warning me-3">Admin</a>' : '';
|
|
authLinks.innerHTML = `
|
|
${adminLink}
|
|
<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);
|
|
});
|
|
};
|
|
|
|
// --- User Management Logic ---
|
|
|
|
const renderUserTable = (users) => {
|
|
const roles = ['regular', 'sports_analyst', 'sports_bettor', 'admin'];
|
|
let tableHtml = `
|
|
<table class="table table-dark table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Username</th>
|
|
<th>Email</th>
|
|
<th>Role</th>
|
|
<th>Joined</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
`;
|
|
|
|
users.forEach(user => {
|
|
tableHtml += `
|
|
<tr>
|
|
<td>${user.id}</td>
|
|
<td>${user.username}</td>
|
|
<td>${user.email}</td>
|
|
<td>
|
|
<select class="form-select form-select-sm" data-user-id="${user.id}">
|
|
${roles.map(role => `<option value="${role}" ${user.role === role ? 'selected' : ''}>${role}</option>`).join('')}
|
|
</select>
|
|
</td>
|
|
<td>${new Date(user.created_at).toLocaleDateString()}</td>
|
|
<td><button class="btn btn-sm btn-primary save-role-btn" data-user-id="${user.id}">Save</button></td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
tableHtml += '</tbody></table>';
|
|
userTableContainer.innerHTML = tableHtml;
|
|
|
|
document.querySelectorAll('.save-role-btn').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const userId = this.dataset.userId;
|
|
const roleSelector = document.querySelector(`select[data-user-id="${userId}"]`);
|
|
const newRole = roleSelector.value;
|
|
updateUserRole(userId, newRole);
|
|
});
|
|
});
|
|
};
|
|
|
|
const updateUserRole = (userId, role) => {
|
|
fetch('/api/update_user_role.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ user_id: userId, role: role })
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
alert('User role updated!');
|
|
} else {
|
|
alert(`Error: ${data.message}`);
|
|
}
|
|
});
|
|
};
|
|
|
|
const loadUsers = () => {
|
|
fetch('/api/get_users.php')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
usersData = data.users; // Store for CSV export
|
|
renderUserTable(usersData);
|
|
} else {
|
|
userTableContainer.innerHTML = `<div class="alert alert-danger">${data.message}</div>`;
|
|
}
|
|
});
|
|
};
|
|
|
|
// --- Event Listeners ---
|
|
if (downloadBtn) {
|
|
downloadBtn.addEventListener('click', () => {
|
|
exportToCsv('stattracker_users.csv', usersData);
|
|
});
|
|
}
|
|
|
|
// --- Initial Load ---
|
|
checkSession();
|
|
loadUsers();
|
|
}); |