123 lines
4.4 KiB
JavaScript
123 lines
4.4 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
const body = document.body;
|
|
|
|
// Check for saved theme in localStorage
|
|
const savedTheme = localStorage.getItem('theme');
|
|
if (savedTheme) {
|
|
body.className = savedTheme;
|
|
updateButtonText();
|
|
}
|
|
|
|
// Toggle theme on button click
|
|
if (themeToggle) {
|
|
themeToggle.addEventListener('click', () => {
|
|
if (body.classList.contains('light-mode')) {
|
|
body.className = 'dark-mode';
|
|
localStorage.setItem('theme', 'dark-mode');
|
|
} else {
|
|
body.className = 'light-mode';
|
|
localStorage.setItem('theme', 'light-mode');
|
|
}
|
|
updateButtonText();
|
|
});
|
|
}
|
|
|
|
// Function to update the button text
|
|
function updateButtonText() {
|
|
if (body.classList.contains('light-mode')) {
|
|
themeToggle.textContent = 'Change to dark theme';
|
|
} else {
|
|
themeToggle.textContent = 'Change to light theme';
|
|
}
|
|
}
|
|
|
|
const createUserBtn = document.getElementById('create-user-btn');
|
|
const createUserPopup = document.getElementById('create-user-popup');
|
|
const closePopupBtn = document.getElementById('close-popup-btn');
|
|
|
|
// Open the popup
|
|
createUserBtn.addEventListener('click', () => {
|
|
createUserPopup.style.display = 'flex';
|
|
});
|
|
|
|
// Close the popup
|
|
closePopupBtn.addEventListener('click', () => {
|
|
createUserPopup.style.display = 'none';
|
|
});
|
|
|
|
// Close the popup when clicking outside the popup content
|
|
createUserPopup.addEventListener('click', (e) => {
|
|
if (e.target === createUserPopup) {
|
|
createUserPopup.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
const editButtons = document.querySelectorAll('.edit-btn');
|
|
const editUserPopup = document.getElementById('edit-user-popup');
|
|
const closeEditPopupBtn = document.getElementById('close-edit-popup-btn');
|
|
|
|
// Open the edit user popup
|
|
editButtons.forEach((button) => {
|
|
button.addEventListener('click', (e) => {
|
|
const userElement = e.target.closest('li');
|
|
const username = userElement.querySelector('.user-name').textContent;
|
|
const role = userElement.querySelector('.user-role').textContent.split(': ')[1];
|
|
const userId = userElement.dataset.userId;
|
|
|
|
// Populate the form fields
|
|
document.getElementById('edit-user-id').value = userId;
|
|
document.getElementById('edit-username').value = username;
|
|
document.getElementById('edit-role').value = role;
|
|
|
|
// Show the popup
|
|
editUserPopup.style.display = 'flex';
|
|
});
|
|
});
|
|
|
|
// Close the edit user popup
|
|
closeEditPopupBtn.addEventListener('click', () => {
|
|
editUserPopup.style.display = 'none';
|
|
});
|
|
|
|
// Close the popup when clicking outside the popup content
|
|
editUserPopup.addEventListener('click', (e) => {
|
|
if (e.target === editUserPopup) {
|
|
editUserPopup.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
const deleteButtons = document.querySelectorAll('.delete-btn');
|
|
const deleteUserPopup = document.getElementById('delete-user-popup');
|
|
const closeDeletePopupBtn = document.getElementById('close-delete-popup-btn');
|
|
const deleteUsernameSpan = document.getElementById('delete-username');
|
|
const deleteUserIdInput = document.getElementById('delete-user-id');
|
|
|
|
// Open the delete user popup
|
|
deleteButtons.forEach((button) => {
|
|
button.addEventListener('click', (e) => {
|
|
const userElement = e.target.closest('li');
|
|
const username = userElement.querySelector('.user-name').textContent;
|
|
const userId = userElement.dataset.userId;
|
|
|
|
// Populate the popup with user details
|
|
deleteUsernameSpan.textContent = username;
|
|
deleteUserIdInput.value = userId;
|
|
|
|
// Show the popup
|
|
deleteUserPopup.style.display = 'flex';
|
|
});
|
|
});
|
|
|
|
// Close the delete user popup
|
|
closeDeletePopupBtn.addEventListener('click', () => {
|
|
deleteUserPopup.style.display = 'none';
|
|
});
|
|
|
|
// Close the popup when clicking outside the popup content
|
|
deleteUserPopup.addEventListener('click', (e) => {
|
|
if (e.target === deleteUserPopup) {
|
|
deleteUserPopup.style.display = 'none';
|
|
}
|
|
});
|
|
}); |