From 50368cc256a60fe634a20a82e0c82736e46a2d32 Mon Sep 17 00:00:00 2001 From: Alvin <524715@vistacollege.nl> Date: Wed, 29 Oct 2025 10:01:42 +0100 Subject: [PATCH 1/2] Add search functionality to admin and student pages --- public/admin-reservations.html | 12 +++++++++ public/admin.html | 13 +++++++++ public/js/admin-reservations.js | 24 ++++++++++++++++- public/js/admin.js | 45 +++++++++++++++++++++++++++++-- public/js/student-reservations.js | 23 +++++++++++++++- public/js/student.js | 36 ++++++++++++++++++++++--- public/student-reservations.html | 12 +++++++++ public/student.html | 9 +++++++ 8 files changed, 167 insertions(+), 7 deletions(-) diff --git a/public/admin-reservations.html b/public/admin-reservations.html index b58274f..8783f43 100644 --- a/public/admin-reservations.html +++ b/public/admin-reservations.html @@ -44,6 +44,18 @@
Filter Reservations
+
+
+ +
+ + + +
+
+
diff --git a/public/admin.html b/public/admin.html index 762e940..69a16a8 100644 --- a/public/admin.html +++ b/public/admin.html @@ -56,6 +56,19 @@
+ +
+
+
+ + + +
+
+
+
diff --git a/public/js/admin-reservations.js b/public/js/admin-reservations.js index 6ef0d19..393089a 100644 --- a/public/js/admin-reservations.js +++ b/public/js/admin-reservations.js @@ -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 diff --git a/public/js/admin.js b/public/js/admin.js index a84feca..ea3686f 100644 --- a/public/js/admin.js +++ b/public/js/admin.js @@ -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 => `
${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 => ` ${item.name} ${item.name} @@ -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) { diff --git a/public/js/student-reservations.js b/public/js/student-reservations.js index eac0c1b..c71763a 100644 --- a/public/js/student-reservations.js +++ b/public/js/student-reservations.js @@ -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 diff --git a/public/js/student.js b/public/js/student.js index 4d35bc4..9ea62b0 100644 --- a/public/js/student.js +++ b/public/js/student.js @@ -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'))); diff --git a/public/student-reservations.html b/public/student-reservations.html index a8ac5f4..45a45b6 100644 --- a/public/student-reservations.html +++ b/public/student-reservations.html @@ -63,6 +63,18 @@
+
+
+ +
+ + + +
+
+
diff --git a/public/student.html b/public/student.html index 881e617..ced38f4 100644 --- a/public/student.html +++ b/public/student.html @@ -38,6 +38,15 @@

Available Items

+
+
+ + + +
+
+ diff --git a/public/admin.html b/public/admin.html index 69a16a8..14efa35 100644 --- a/public/admin.html +++ b/public/admin.html @@ -57,11 +57,11 @@
-
+
-
+
- + diff --git a/public/css/style.css b/public/css/style.css index 0ab4b84..56e7f2f 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -447,4 +447,31 @@ body { /* Small button spacing */ .btn-sm { margin: 0 2px; +} + +/* Simple Search Bar Styling */ +.search-input-group .input-group-text { + background-color: var(--vista-coral); + border-color: var(--vista-coral); + color: var(--vista-white); +} + +.search-input-group .form-control { + border-color: var(--vista-coral); +} + +.search-input-group .form-control:focus { + border-color: var(--vista-coral); + box-shadow: 0 0 0 0.25rem rgba(211, 112, 90, 0.25); +} + +.search-input-group .btn-outline-secondary { + border-color: var(--vista-coral); + color: var(--vista-coral); +} + +.search-input-group .btn-outline-secondary:hover { + background-color: var(--vista-coral); + border-color: var(--vista-coral); + color: var(--vista-white); } \ No newline at end of file diff --git a/public/student-reservations.html b/public/student-reservations.html index 45a45b6..d46fd8f 100644 --- a/public/student-reservations.html +++ b/public/student-reservations.html @@ -64,11 +64,11 @@
-
+
-
+
- + diff --git a/public/student.html b/public/student.html index ced38f4..9e8ae1a 100644 --- a/public/student.html +++ b/public/student.html @@ -39,9 +39,9 @@

Available Items

-
+
- +