automatic fetch of users in overview_users.js

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
+    const existingUserIds = new Set(filteredUsers.map(user => user.id));
-    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;
-    }
 
-    // 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 => {
+        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');
 
-        // Create user name paragraph
             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)
-
-        // Find and display user's department name
             const department = departments.find(dept => dept.id === user.departmentId);
             const departmentName = department ? department.name : 'Unknown';
 
-        // Create user department paragraph
             const departmentP = document.createElement('p');
             departmentP.classList.add('user-department');
             departmentP.textContent = `Department: ${departmentName}`;
 
-        // Append name and department to user info div
             userInfoDiv.appendChild(nameP);
             userInfoDiv.appendChild(departmentP);
 
-        // Create delete button
             const deleteButton = document.createElement('button');
             deleteButton.textContent = 'Delete';
             deleteButton.classList.add('delete-button');
             deleteButton.onclick = () => deleteUser(user.id);
 
-        // Append user info div and delete button to user card
             userDiv.appendChild(userInfoDiv);
             userDiv.appendChild(deleteButton);
-
-        // Append user card to the container
             usersContainer.appendChild(userDiv);
+
+            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');
+
+            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,7 +157,6 @@ async function fetchUsers() {
 }
 
 async function deleteUser(userId) {
-    // Send the request to delete the user
     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');
 }

Desktop App/src/main/main.ts

@@ -102,7 +102,7 @@ app.whenReady().then(async () => {
     },
   })
 
-  mainWindow.removeMenu()
+  //mainWindow.removeMenu()
 
   await ensureDirectoryExists(pathToClientsBackups)