automatic fetch of users in overview_users.js
This commit is contained in:
@@ -2,15 +2,36 @@ let codeGetDepartments = '';
|
||||
let codeGetUsers = '';
|
||||
let codeDeleteUser = '';
|
||||
let codeOk = '';
|
||||
let fetchInterval = null; // Store interval ID
|
||||
const userElementsMap = new Map(); // Track user elements by ID
|
||||
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
const backButton = document.getElementById('backButton');
|
||||
backButton.addEventListener('click', async () => {
|
||||
await stopFetchingUsers(); // Stop interval before leaving
|
||||
await window.networkAPI.closeUcSocket();
|
||||
fadeOut('main_menu');
|
||||
});
|
||||
|
||||
await startFetchingUsers(); // Start fetching users every 5 seconds
|
||||
});
|
||||
|
||||
async function startFetchingUsers() {
|
||||
await fetchData(); // Initial fetch
|
||||
|
||||
// Set interval to fetch users every 5 seconds
|
||||
fetchInterval = setInterval(async () => {
|
||||
await fetchData();
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
async function stopFetchingUsers() {
|
||||
if (fetchInterval) {
|
||||
clearInterval(fetchInterval); // Stop interval when leaving the page
|
||||
fetchInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchData() {
|
||||
const operationCodes = await window.networkAPI.getOperationsCodes();
|
||||
if (!operationCodes) {
|
||||
@@ -23,13 +44,11 @@ async function fetchData() {
|
||||
codeDeleteUser = operationCodes.DELETE_USER;
|
||||
codeOk = operationCodes.OK;
|
||||
|
||||
// Open the TCP socket right after fetching the operation codes
|
||||
if (!await window.networkAPI.openUcSocket()) {
|
||||
alert('Failed to open socket. Internal error of the application.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Fetch departments
|
||||
const departmentsResponse = await fetchDepartments();
|
||||
if (!departmentsResponse || departmentsResponse.operationCode !== codeOk) {
|
||||
alert('Failed to fetch departments. Redirecting to main menu...');
|
||||
@@ -39,7 +58,6 @@ async function fetchData() {
|
||||
|
||||
const departments = departmentsResponse.metaInfo.departments;
|
||||
|
||||
// Fetch users
|
||||
const usersResponse = await fetchUsers();
|
||||
if (!usersResponse || usersResponse.operationCode !== codeOk) {
|
||||
alert('Failed to fetch users. Redirecting to main menu...');
|
||||
@@ -48,72 +66,83 @@ async function fetchData() {
|
||||
}
|
||||
|
||||
const users = usersResponse.metaInfo.users;
|
||||
updateUsersList(users, departments);
|
||||
}
|
||||
|
||||
function updateUsersList(users, departments) {
|
||||
const usersContainer = document.getElementById('users-container');
|
||||
usersContainer.innerHTML = ''; // Clear the container
|
||||
|
||||
// Filter out users in the CEO department
|
||||
const ceoDepartment = departments.find(dept => dept.name.toLowerCase() === 'ceo');
|
||||
const filteredUsers = users.filter(user => user.departmentId !== ceoDepartment.id);
|
||||
|
||||
// Check if there are no users after filtering
|
||||
if (!filteredUsers.length) {
|
||||
const noUsersMessage = document.createElement('p');
|
||||
noUsersMessage.textContent = 'No users exist.';
|
||||
noUsersMessage.classList.add('no-users-message'); // Add a class for styling
|
||||
usersContainer.appendChild(noUsersMessage);
|
||||
fadeIn(); // Fade in the container when the message is loaded
|
||||
return;
|
||||
}
|
||||
const existingUserIds = new Set(filteredUsers.map(user => user.id));
|
||||
|
||||
// Render users if there are any
|
||||
// Remove users that no longer exist
|
||||
userElementsMap.forEach((element, userId) => {
|
||||
if (!existingUserIds.has(userId)) {
|
||||
element.remove();
|
||||
userElementsMap.delete(userId);
|
||||
}
|
||||
});
|
||||
|
||||
// Update or add users
|
||||
filteredUsers.forEach(user => {
|
||||
const userDiv = document.createElement('div');
|
||||
userDiv.classList.add('user-card');
|
||||
if (!userElementsMap.has(user.id)) {
|
||||
// Create new user element
|
||||
const userDiv = document.createElement('div');
|
||||
userDiv.classList.add('user-card');
|
||||
|
||||
// Create user info div
|
||||
const userInfoDiv = document.createElement('div');
|
||||
userInfoDiv.classList.add('user-info');
|
||||
const userInfoDiv = document.createElement('div');
|
||||
userInfoDiv.classList.add('user-info');
|
||||
|
||||
// Create user name paragraph
|
||||
const nameP = document.createElement('p');
|
||||
nameP.classList.add('user-name');
|
||||
nameP.textContent = user.name;
|
||||
const nameP = document.createElement('p');
|
||||
nameP.classList.add('user-name');
|
||||
nameP.textContent = user.name;
|
||||
|
||||
console.log(user)
|
||||
console.log(user);
|
||||
console.log(departments);
|
||||
|
||||
console.log(departments)
|
||||
const department = departments.find(dept => dept.id === user.departmentId);
|
||||
const departmentName = department ? department.name : 'Unknown';
|
||||
|
||||
// Find and display user's department name
|
||||
const department = departments.find(dept => dept.id === user.departmentId);
|
||||
const departmentName = department ? department.name : 'Unknown';
|
||||
const departmentP = document.createElement('p');
|
||||
departmentP.classList.add('user-department');
|
||||
departmentP.textContent = `Department: ${departmentName}`;
|
||||
|
||||
// Create user department paragraph
|
||||
const departmentP = document.createElement('p');
|
||||
departmentP.classList.add('user-department');
|
||||
departmentP.textContent = `Department: ${departmentName}`;
|
||||
userInfoDiv.appendChild(nameP);
|
||||
userInfoDiv.appendChild(departmentP);
|
||||
|
||||
// Append name and department to user info div
|
||||
userInfoDiv.appendChild(nameP);
|
||||
userInfoDiv.appendChild(departmentP);
|
||||
const deleteButton = document.createElement('button');
|
||||
deleteButton.textContent = 'Delete';
|
||||
deleteButton.classList.add('delete-button');
|
||||
deleteButton.onclick = () => deleteUser(user.id);
|
||||
|
||||
// Create delete button
|
||||
const deleteButton = document.createElement('button');
|
||||
deleteButton.textContent = 'Delete';
|
||||
deleteButton.classList.add('delete-button');
|
||||
deleteButton.onclick = () => deleteUser(user.id);
|
||||
userDiv.appendChild(userInfoDiv);
|
||||
userDiv.appendChild(deleteButton);
|
||||
usersContainer.appendChild(userDiv);
|
||||
|
||||
// Append user info div and delete button to user card
|
||||
userDiv.appendChild(userInfoDiv);
|
||||
userDiv.appendChild(deleteButton);
|
||||
userElementsMap.set(user.id, userDiv); // Store reference
|
||||
} else {
|
||||
// Update existing user info if necessary
|
||||
const existingDiv = userElementsMap.get(user.id);
|
||||
const nameElement = existingDiv.querySelector('.user-name');
|
||||
const departmentElement = existingDiv.querySelector('.user-department');
|
||||
|
||||
// Append user card to the container
|
||||
usersContainer.appendChild(userDiv);
|
||||
if (nameElement.textContent !== user.name) {
|
||||
nameElement.textContent = user.name;
|
||||
}
|
||||
const department = departments.find(dept => dept.id === user.departmentId);
|
||||
const departmentName = department ? department.name : 'Unknown';
|
||||
|
||||
if (departmentElement.textContent !== `Department: ${departmentName}`) {
|
||||
departmentElement.textContent = `Department: ${departmentName}`;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchDepartments() {
|
||||
// Send the request to get departments
|
||||
if (!await window.networkAPI.sendUcMessage(codeGetDepartments)) {
|
||||
return null;
|
||||
}
|
||||
@@ -121,7 +150,6 @@ async function fetchDepartments() {
|
||||
}
|
||||
|
||||
async function fetchUsers() {
|
||||
// Send the request to get users
|
||||
if (!await window.networkAPI.sendUcMessage(codeGetUsers)) {
|
||||
return null;
|
||||
}
|
||||
@@ -129,8 +157,7 @@ async function fetchUsers() {
|
||||
}
|
||||
|
||||
async function deleteUser(userId) {
|
||||
// Send the request to delete the user
|
||||
if (!await window.networkAPI.sendUcMessage(codeDeleteUser, {id: userId})) {
|
||||
if (!await window.networkAPI.sendUcMessage(codeDeleteUser, { id: userId })) {
|
||||
alert('Failed to send request to delete user.');
|
||||
return;
|
||||
}
|
||||
@@ -141,10 +168,15 @@ async function deleteUser(userId) {
|
||||
return;
|
||||
}
|
||||
|
||||
await fetchData();
|
||||
// Remove user from UI
|
||||
if (userElementsMap.has(userId)) {
|
||||
userElementsMap.get(userId).remove();
|
||||
userElementsMap.delete(userId);
|
||||
}
|
||||
}
|
||||
|
||||
async function redirectToMainMenu() {
|
||||
await stopFetchingUsers();
|
||||
await window.networkAPI.closeUcSocket();
|
||||
fadeOut('main_menu');
|
||||
}
|
||||
|
||||
@@ -102,7 +102,7 @@ app.whenReady().then(async () => {
|
||||
},
|
||||
})
|
||||
|
||||
mainWindow.removeMenu()
|
||||
//mainWindow.removeMenu()
|
||||
|
||||
await ensureDirectoryExists(pathToClientsBackups)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user