alvin/Challenge_15_Magazijn_App_Maken
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/Challenge_15_Magazijn_App_Maken.git synced 2026-03-06 11:06:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add auto-refresh functionality for reservations and items with notifications

Browse Source
This commit is contained in:
Alvin
2025-10-22 10:49:45 +02:00
parent a5c73ad907
commit 94e51f1f9a
4 changed files with 256 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
public/js/admin-reservations.js
View File

@@ -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);

64
public/js/admin.js
View File

@@ -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);
}

69
public/js/student-reservations.js
View File

@@ -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');
h2Element.insertAdjacentElement('afterend', alert);
container.prepend(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);

61
public/js/student.js
View File

@@ -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);