From 73f9c6b526989c18acba8e65db0fa2949505fa52 Mon Sep 17 00:00:00 2001 From: andrei-mihnea-cerbu Date: Wed, 12 Feb 2025 19:00:22 +0200 Subject: [PATCH] automatic fetch of users in overview_users.js --- Desktop App/render/ceo/js/overview_users.js | 132 ++++++++++++-------- Desktop App/src/main/main.ts | 2 +- 2 files changed, 83 insertions(+), 51 deletions(-) diff --git a/Desktop App/render/ceo/js/overview_users.js b/Desktop App/render/ceo/js/overview_users.js index 3efd9a0..1b6666b 100644 --- a/Desktop App/render/ceo/js/overview_users.js +++ b/Desktop App/render/ceo/js/overview_users.js @@ -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'); } diff --git a/Desktop App/src/main/main.ts b/Desktop App/src/main/main.ts index 7326b72..101afa1 100644 --- a/Desktop App/src/main/main.ts +++ b/Desktop App/src/main/main.ts @@ -102,7 +102,7 @@ app.whenReady().then(async () => { }, }) - mainWindow.removeMenu() + //mainWindow.removeMenu() await ensureDirectoryExists(pathToClientsBackups)