diff --git a/public/admin-reservations.html b/public/admin-reservations.html
index b58274f..bbd52c8 100644
--- a/public/admin-reservations.html
+++ b/public/admin-reservations.html
@@ -44,6 +44,18 @@
+
diff --git a/public/admin.html b/public/admin.html
index 762e940..14efa35 100644
--- a/public/admin.html
+++ b/public/admin.html
@@ -56,6 +56,19 @@
+
+
+
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/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 => `

@@ -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} |
@@ -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 d9f3604..2df3795 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..9e8ae1a 100644
--- a/public/student.html
+++ b/public/student.html
@@ -38,6 +38,15 @@
Available Items
+