Add auto-refresh functionality for reservations and items with notifications

public/js/admin-reservations.js

@@ -17,6 +17,7 @@ async function initializePage() {
     await loadReservations();
     setupEventListeners();
     displayUserInfo();
+    startAutoRefresh();
 }
 
 // Display user info
@@ -184,5 +185,68 @@ function setupEventListeners() {
     });
 }
 
+// Auto refresh functionality
+let refreshInterval;
+let lastReservationsChecksum = '';
+
+function startAutoRefresh() {
+    // Refresh every 15 seconds for reservations (more frequent for status changes)
+    refreshInterval = setInterval(async () => {
+        await checkForReservationUpdates();
+    }, 15000);
+}
+
+function stopAutoRefresh() {
+    if (refreshInterval) {
+        clearInterval(refreshInterval);
+    }
+}
+
+async function checkForReservationUpdates() {
+    try {
+        const response = await fetch('/api/reservations', {
+            headers: {
+                'Authorization': `Bearer ${localStorage.getItem('token')}`
+            }
+        });
+        
+        if (response.ok) {
+            const currentReservations = await response.json();
+            
+            // Create a simple checksum of the reservations data
+            const currentChecksum = JSON.stringify(currentReservations.map(res => ({
+                id: res._id,
+                status: res.status,
+                quantity: res.quantity || 1
+            })));
+
+            // If reservations changed, refresh the display
+            if (lastReservationsChecksum && currentChecksum !== lastReservationsChecksum) {
+                reservations = currentReservations;
+                filterAndDisplayReservations();
+                
+                // Show update notification
+                showUpdateNotification();
+            }
+            
+            lastReservationsChecksum = currentChecksum;
+        }
+    } catch (error) {
+        console.error('Error checking for reservation updates:', error);
+    }
+}
+
+function showUpdateNotification() {
+    const notification = document.createElement('div');
+    notification.className = 'alert alert-info alert-dismissible fade show';
+    notification.innerHTML = `
+        <i class="bi bi-info-circle"></i> Reservations updated!
+        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+    `;
+    const container = document.querySelector('.container');
+    container.prepend(notification);
+    setTimeout(() => notification.remove(), 3000);
+}
+
 // Initialize the page when DOM is loaded
 document.addEventListener('DOMContentLoaded', initializePage);

public/js/admin.js

@@ -20,6 +20,7 @@ async function initializePage() {
         await loadItems();
         displayUserInfo();
         setupEventListeners();  // Move this after displayUserInfo to ensure DOM is ready
+        startAutoRefresh();
         console.log('Page initialization complete');
     } catch (error) {
         console.error('Error during page initialization:', error);
@@ -434,3 +435,66 @@ document.addEventListener('DOMContentLoaded', async () => {
         alert('Error initializing page: ' + error.message);
     }
 });
+
+// Auto refresh functionality
+let refreshInterval;
+let lastItemsChecksum = '';
+
+function startAutoRefresh() {
+    // Refresh every 30 seconds
+    refreshInterval = setInterval(async () => {
+        await checkForUpdates();
+    }, 30000);
+}
+
+function stopAutoRefresh() {
+    if (refreshInterval) {
+        clearInterval(refreshInterval);
+    }
+}
+
+async function checkForUpdates() {
+    try {
+        const response = await fetch('/api/items', {
+            headers: {
+                'Authorization': `Bearer ${localStorage.getItem('token')}`
+            }
+        });
+        
+        if (response.ok) {
+            const currentItems = await response.json();
+            
+            // Create a simple checksum of the items data
+            const currentChecksum = JSON.stringify(currentItems.map(item => ({
+                id: item._id,
+                quantity: item.quantity,
+                reserved: item.reserved || 0
+            })));
+
+            // If items changed, refresh the display
+            if (lastItemsChecksum && currentChecksum !== lastItemsChecksum) {
+                items = currentItems;
+                displayItems();
+                
+                // Show update notification
+                showUpdateNotification();
+            }
+            
+            lastItemsChecksum = currentChecksum;
+        }
+    } catch (error) {
+        console.error('Error checking for updates:', error);
+    }
+}
+
+function showUpdateNotification() {
+    const notification = document.createElement('div');
+    notification.className = 'alert alert-info alert-dismissible fade show';
+    notification.innerHTML = `
+        <i class="bi bi-info-circle"></i> Items updated!
+        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+    `;
+    const container = document.querySelector('.container');
+    container.prepend(notification);
+    setTimeout(() => notification.remove(), 3000);
+}

public/js/student-reservations.js

@@ -17,6 +17,7 @@ async function initializePage() {
     await loadReservations();
     setupEventListeners();
     displayUserInfo();
+    startAutoRefresh();
 }
 
 // Display user info
@@ -142,14 +143,13 @@ async function returnReservation(reservationId) {
             await loadReservations();
             // Show success message
             const alert = document.createElement('div');
-            alert.className = 'alert alert-success alert-dismissible fade show mt-3';
+            alert.className = 'alert alert-success alert-dismissible fade show';
             alert.innerHTML = `
                 Item returned successfully!
                 <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
             `;
             const container = document.querySelector('.container');
-            const h2Element = container.querySelector('h2');
+            container.prepend(alert);
-            h2Element.insertAdjacentElement('afterend', alert);
             setTimeout(() => alert.remove(), 3000);
         } else {
             const error = await response.json();
@@ -171,5 +171,68 @@ function setupEventListeners() {
     });
 }
 
+// Auto refresh functionality
+let refreshInterval;
+let lastReservationsChecksum = '';
+
+function startAutoRefresh() {
+    // Refresh every 15 seconds for reservations (more frequent for status changes)
+    refreshInterval = setInterval(async () => {
+        await checkForReservationUpdates();
+    }, 15000);
+}
+
+function stopAutoRefresh() {
+    if (refreshInterval) {
+        clearInterval(refreshInterval);
+    }
+}
+
+async function checkForReservationUpdates() {
+    try {
+        const response = await fetch('/api/reservations/my', {
+            headers: {
+                'Authorization': `Bearer ${localStorage.getItem('token')}`
+            }
+        });
+        
+        if (response.ok) {
+            const currentReservations = await response.json();
+            
+            // Create a simple checksum of the reservations data
+            const currentChecksum = JSON.stringify(currentReservations.map(res => ({
+                id: res._id,
+                status: res.status,
+                quantity: res.quantity
+            })));
+
+            // If reservations changed, refresh the display
+            if (lastReservationsChecksum && currentChecksum !== lastReservationsChecksum) {
+                reservations = currentReservations;
+                filterAndDisplayReservations();
+                
+                // Show update notification
+                showUpdateNotification();
+            }
+            
+            lastReservationsChecksum = currentChecksum;
+        }
+    } catch (error) {
+        console.error('Error checking for reservation updates:', error);
+    }
+}
+
+function showUpdateNotification() {
+    const notification = document.createElement('div');
+    notification.className = 'alert alert-info alert-dismissible fade show';
+    notification.innerHTML = `
+        <i class="bi bi-info-circle"></i> Reservations updated!
+        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+    `;
+    const container = document.querySelector('.container');
+    container.prepend(notification);
+    setTimeout(() => notification.remove(), 3000);
+}
+
 // Initialize the page when DOM is loaded
 document.addEventListener('DOMContentLoaded', initializePage);

public/js/student.js

@@ -18,6 +18,7 @@ async function initializePage() {
     setupEventListeners();
     displayUserInfo();
     initializeModal();
+    startAutoRefresh();
 }
 
 // Display user info
@@ -236,5 +237,65 @@ function setupEventListeners() {
     });
 }
 
+// Auto refresh functionality
+let refreshInterval;
+let lastItemsChecksum = '';
+
+function startAutoRefresh() {
+    // Refresh every 30 seconds
+    refreshInterval = setInterval(async () => {
+        await checkForUpdates();
+    }, 30000);
+}
+
+function stopAutoRefresh() {
+    if (refreshInterval) {
+        clearInterval(refreshInterval);
+    }
+}
+
+async function checkForUpdates() {
+    try {
+        const response = await fetch('/api/items', {
+            headers: {
+                'Authorization': `Bearer ${localStorage.getItem('token')}`
+            }
+        });
+        const currentItems = await response.json();
+        
+        // Create a simple checksum of the items data
+        const currentChecksum = JSON.stringify(currentItems.map(item => ({
+            id: item._id,
+            quantity: item.quantity,
+            reserved: item.reserved || 0
+        })));
+
+        // If items changed, refresh the display
+        if (lastItemsChecksum && currentChecksum !== lastItemsChecksum) {
+            items = currentItems;
+            displayItems();
+            
+            // Show update notification
+            showUpdateNotification();
+        }
+        
+        lastItemsChecksum = currentChecksum;
+    } catch (error) {
+        console.error('Error checking for updates:', error);
+    }
+}
+
+function showUpdateNotification() {
+    const notification = document.createElement('div');
+    notification.className = 'alert alert-info alert-dismissible fade show';
+    notification.innerHTML = `
+        <i class="bi bi-info-circle"></i> Items updated!
+        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+    `;
+    const container = document.querySelector('.container');
+    container.prepend(notification);
+    setTimeout(() => notification.remove(), 3000);
+}
+
 // Initialize the page when DOM is loaded
 document.addEventListener('DOMContentLoaded', initializePage);