mirror of
https://github.com/Alvin-Zilverstand/Challenge_15_Magazijn_App_Maken.git
synced 2026-03-06 13:22:35 +01:00
init
This commit is contained in:
Alvin
188
public/js/admin-reservations.js
Normal file
188
public/js/admin-reservations.js
Normal file
@@ -0,0 +1,188 @@
|
||||
// Admin reservations page functionality
|
||||
let reservations = [];
|
||||
|
||||
// Check authentication
|
||||
function checkAuth() {
|
||||
const token = localStorage.getItem('token');
|
||||
const role = localStorage.getItem('userRole');
|
||||
|
||||
if (!token || role !== 'admin') {
|
||||
window.location.href = '/index.html';
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize page
|
||||
async function initializePage() {
|
||||
checkAuth();
|
||||
await loadReservations();
|
||||
setupEventListeners();
|
||||
displayUserInfo();
|
||||
}
|
||||
|
||||
// Display user info
|
||||
function displayUserInfo() {
|
||||
const username = localStorage.getItem('username');
|
||||
document.getElementById('userInfo').textContent = `Admin: ${username}`;
|
||||
}
|
||||
|
||||
// Load and filter reservations
|
||||
async function loadReservations() {
|
||||
try {
|
||||
const response = await fetch('/api/reservations', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||
}
|
||||
});
|
||||
reservations = await response.json();
|
||||
filterAndDisplayReservations();
|
||||
} catch (error) {
|
||||
console.error('Error loading reservations:', error);
|
||||
alert('Failed to load reservations');
|
||||
}
|
||||
}
|
||||
|
||||
// Filter and display reservations
|
||||
function filterAndDisplayReservations() {
|
||||
const locationFilter = document.getElementById('locationFilter').value;
|
||||
const statusFilter = document.getElementById('statusFilter').value;
|
||||
|
||||
const filteredReservations = reservations.filter(reservation => {
|
||||
const locationMatch = locationFilter === 'all' || reservation.location === locationFilter;
|
||||
const statusMatch = statusFilter === 'all' || reservation.status === statusFilter;
|
||||
return locationMatch && statusMatch;
|
||||
});
|
||||
|
||||
const reservationsList = document.getElementById('reservationsList');
|
||||
reservationsList.innerHTML = filteredReservations.map(reservation => `
|
||||
<tr>
|
||||
<td><strong>${reservation.studentName}</strong></td>
|
||||
<td>${reservation.itemName}</td>
|
||||
<td><span class="badge bg-info">${reservation.quantity || 1}</span></td>
|
||||
<td>${reservation.location}</td>
|
||||
<td>${new Date(reservation.reservedDate).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
})}</td>
|
||||
<td><span class="badge reservation-${reservation.status.toLowerCase()}">${reservation.status}</span></td>
|
||||
<td>
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
${reservation.status === 'PENDING' ? `
|
||||
<button class="btn btn-success" onclick="updateReservation('${reservation._id}', 'APPROVED')" title="Approve">
|
||||
<i class="bi bi-check-lg"></i><span class="btn-text"> Approve</span>
|
||||
</button>
|
||||
<button class="btn btn-warning" onclick="updateReservation('${reservation._id}', 'REJECTED')" title="Reject">
|
||||
<i class="bi bi-x-lg"></i><span class="btn-text"> Reject</span>
|
||||
</button>
|
||||
` : reservation.status === 'APPROVED' ? `
|
||||
<button class="btn btn-info" onclick="updateReservation('${reservation._id}', 'RETURNED')" title="Mark as Returned">
|
||||
<i class="bi bi-arrow-return-left"></i><span class="btn-text"> Return</span>
|
||||
</button>
|
||||
` : reservation.status === 'RETURNED' ? `
|
||||
<button class="btn btn-secondary" onclick="archiveReservation('${reservation._id}')" title="Archive Reservation">
|
||||
<i class="bi bi-archive"></i><span class="btn-text"> Archive</span>
|
||||
</button>
|
||||
` : ''}
|
||||
<button class="btn btn-danger" onclick="deleteReservation('${reservation._id}')" title="Delete">
|
||||
<i class="bi bi-trash"></i><span class="btn-text"> Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// Update reservation status
|
||||
async function updateReservation(reservationId, status) {
|
||||
try {
|
||||
const response = await fetch(`/api/reservations/${reservationId}`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||
},
|
||||
body: JSON.stringify({ status })
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
await loadReservations();
|
||||
} else {
|
||||
const error = await response.json();
|
||||
alert(error.message || 'Failed to update reservation');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating reservation:', error);
|
||||
alert('Failed to update reservation');
|
||||
}
|
||||
}
|
||||
|
||||
// Delete reservation
|
||||
async function deleteReservation(reservationId) {
|
||||
if (!confirm('Are you sure you want to delete this reservation?')) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/reservations/${reservationId}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
await loadReservations();
|
||||
} else {
|
||||
const error = await response.json();
|
||||
alert(error.message || 'Failed to delete reservation');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error deleting reservation:', error);
|
||||
alert('Failed to delete reservation');
|
||||
}
|
||||
}
|
||||
|
||||
// Archive reservation
|
||||
async function archiveReservation(reservationId) {
|
||||
if (!confirm('Are you sure you want to archive this reservation? It will be hidden from the list but remain in the database.')) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/reservations/${reservationId}/archive`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
await loadReservations();
|
||||
// Show success message
|
||||
const alert = document.createElement('div');
|
||||
alert.className = 'alert alert-success alert-dismissible fade show';
|
||||
alert.innerHTML = `
|
||||
Reservation archived successfully!
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
`;
|
||||
const container = document.querySelector('.container');
|
||||
container.prepend(alert);
|
||||
setTimeout(() => alert.remove(), 3000);
|
||||
} else {
|
||||
const error = await response.json();
|
||||
alert(error.message || 'Failed to archive reservation');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error archiving reservation:', error);
|
||||
alert('Failed to archive reservation');
|
||||
}
|
||||
}
|
||||
|
||||
// Set up event listeners
|
||||
function setupEventListeners() {
|
||||
document.getElementById('locationFilter').addEventListener('change', filterAndDisplayReservations);
|
||||
document.getElementById('statusFilter').addEventListener('change', filterAndDisplayReservations);
|
||||
document.getElementById('logoutBtn').addEventListener('click', () => {
|
||||
localStorage.clear();
|
||||
window.location.href = '/index.html';
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize the page when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', initializePage);
|
||||
Reference in New Issue
Block a user