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 13:22:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add search functionality to admin and student pages

Browse Source
This commit is contained in:
Alvin
2025-10-29 10:01:42 +01:00
parent 880aa93649
commit 50368cc256
8 changed files with 167 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -46,11 +46,16 @@ async function loadReservations() {
function filterAndDisplayReservations() {
const locationFilter = document.getElementById('locationFilter').value;
const statusFilter = document.getElementById('statusFilter').value;
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
const filteredReservations = reservations.filter(reservation => {
const locationMatch = locationFilter === 'all' || reservation.location === locationFilter;
const statusMatch = statusFilter === 'all' || reservation.status === statusFilter;
return locationMatch && statusMatch;
const searchMatch = searchTerm === '' ||
reservation.studentName.toLowerCase().includes(searchTerm) ||
reservation.itemName.toLowerCase().includes(searchTerm) ||
reservation.location.toLowerCase().includes(searchTerm);
return locationMatch && statusMatch && searchMatch;
});
const reservationsList = document.getElementById('reservationsList');
@@ -190,6 +195,23 @@ function setupEventListeners() {
localStorage.clear();
window.location.href = '/index.html';
});
// Search functionality
const searchInput = document.getElementById('searchInput');
const clearSearch = document.getElementById('clearSearch');
searchInput.addEventListener('input', filterAndDisplayReservations);
searchInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
filterAndDisplayReservations();
}
});
clearSearch.addEventListener('click', () => {
searchInput.value = '';
filterAndDisplayReservations();
searchInput.focus();
});
}
// Auto refresh functionality

45
public/js/admin.js
View File

@@ -59,6 +59,22 @@ async function loadItems() {
}
}
// Filter items based on search term
function getFilteredItems() {
const searchTerm = document.getElementById('searchInput') ?
document.getElementById('searchInput').value.toLowerCase() : '';
if (searchTerm.trim() === '') {
return items;
}
return items.filter(item =>
item.name.toLowerCase().includes(searchTerm) ||
(item.description && item.description.toLowerCase().includes(searchTerm)) ||
item.location.toLowerCase().includes(searchTerm)
);
}
// Display items based on current view mode
function displayItems() {
if (currentView === 'grid') {
@@ -74,7 +90,8 @@ function displayGridView() {
document.getElementById('itemsList').classList.add('d-none');
itemsGrid.classList.remove('d-none');
itemsGrid.innerHTML = items.map(item => `
const filteredItems = getFilteredItems();
itemsGrid.innerHTML = filteredItems.map(item => `
<div class="col-md-4 col-lg-3">
<div class="card item-card">
<img src="${item.imageUrl || '/images/default-item.png'}" class="item-image" alt="${item.name}">
@@ -102,7 +119,8 @@ function displayListView() {
itemsList.classList.remove('d-none');
const itemsListBody = document.getElementById('itemsListBody');
itemsListBody.innerHTML = items.map(item => `
const filteredItems = getFilteredItems();
itemsListBody.innerHTML = filteredItems.map(item => `
<tr>
<td><img src="${item.imageUrl || '/images/default-item.png'}" class="item-thumbnail" alt="${item.name}"></td>
<td>${item.name}</td>
@@ -373,6 +391,29 @@ function setupEventListeners() {
});
}
// Search functionality
const searchInput = document.getElementById('searchInput');
const clearSearch = document.getElementById('clearSearch');
if (searchInput) {
searchInput.addEventListener('input', displayItems);
searchInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
displayItems();
}
});
}
if (clearSearch) {
clearSearch.addEventListener('click', () => {
if (searchInput) {
searchInput.value = '';
displayItems();
searchInput.focus();
}
});
}
// Edit form elements
const editItemImage = document.getElementById('editItemImage');
if (editItemImage) {

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

@@ -62,11 +62,15 @@ async function loadReservations() {
function filterAndDisplayReservations() {
const locationFilter = document.getElementById('locationFilter').value;
const statusFilter = document.getElementById('statusFilter').value;
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
const filteredReservations = reservations.filter(reservation => {
const locationMatch = locationFilter === 'all' || reservation.location === locationFilter;
const statusMatch = statusFilter === 'all' || reservation.status === statusFilter;
return locationMatch && statusMatch;
const searchMatch = searchTerm === '' ||
reservation.itemName.toLowerCase().includes(searchTerm) ||
reservation.location.toLowerCase().includes(searchTerm);
return locationMatch && statusMatch && searchMatch;
});
const reservationsList = document.getElementById('reservationsList');
@@ -171,6 +175,23 @@ function setupEventListeners() {
localStorage.clear();
window.location.href = '/index.html';
});
// Search functionality
const searchInput = document.getElementById('searchInput');
const clearSearch = document.getElementById('clearSearch');
searchInput.addEventListener('input', filterAndDisplayReservations);
searchInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
filterAndDisplayReservations();
}
});
clearSearch.addEventListener('click', () => {
searchInput.value = '';
filterAndDisplayReservations();
searchInput.focus();
});
}
// Auto refresh functionality

36
public/js/student.js
View File

@@ -103,9 +103,22 @@ let currentViewMode = localStorage.getItem('studentViewMode') || 'grid';
// Display items based on current view mode
function displayItems() {
const locationFilter = document.getElementById('locationFilter').value;
const filteredItems = locationFilter === 'all'
? items
: items.filter(item => item.location === locationFilter);
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
let filteredItems = items;
// Apply location filter
if (locationFilter !== 'all') {
filteredItems = filteredItems.filter(item => item.location === locationFilter);
}
// Apply search filter
if (searchTerm.trim() !== '') {
filteredItems = filteredItems.filter(item =>
item.name.toLowerCase().includes(searchTerm) ||
(item.description && item.description.toLowerCase().includes(searchTerm))
);
}
// Update view mode buttons active state
const viewButtons = document.querySelectorAll('.view-mode-btn');
@@ -231,6 +244,23 @@ function setupEventListeners() {
window.location.href = '/index.html';
});
// Search functionality
const searchInput = document.getElementById('searchInput');
const clearSearch = document.getElementById('clearSearch');
searchInput.addEventListener('input', displayItems);
searchInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
displayItems();
}
});
clearSearch.addEventListener('click', () => {
searchInput.value = '';
displayItems();
searchInput.focus();
});
// View mode toggle listeners
document.querySelectorAll('.view-mode-btn').forEach(btn => {
btn.addEventListener('click', () => switchViewMode(btn.getAttribute('data-mode')));