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

Merge branch 'main' of https://github.com/Alvin-Zilverstand/Challenge_15_Magazijn_App_Maken

Browse Source
This commit is contained in:
Adin272
2025-10-29 10:56:42 +01:00
parent 5ccfa626f1 79a605a5e9
commit 789b8a6bd3
9 changed files with 194 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
public/admin-reservations.html
View File

@@ -44,6 +44,18 @@
<h5 class="mb-0">Filter Reservations</h5>
</div>
<div class="card-body">
<div class="row g-3 mb-3">
<div class="col-md-6">
<label for="searchInput" class="form-label">Search</label>
<div class="input-group search-input-group">
<span class="input-group-text"><i class="bi bi-search"></i></span>
<input type="text" class="form-control" id="searchInput" placeholder="Search reservations...">
<button class="btn btn-outline-secondary" type="button" id="clearSearch" title="Clear search">
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>
</div>
<div class="row g-3 mb-3">
<div class="col-md-6">
<label for="locationFilter" class="form-label">Location</label>

13
public/admin.html
View File

@@ -56,6 +56,19 @@
</div>
</div>
<!-- Search Bar -->
<div class="row mb-3">
<div class="col-md-6">
<div class="input-group search-input-group">
<span class="input-group-text"><i class="bi bi-search"></i></span>
<input type="text" class="form-control" id="searchInput" placeholder="Search items...">
<button class="btn btn-outline-secondary" type="button" id="clearSearch" title="Clear search">
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>
</div>
<div id="itemsGrid" class="row g-4">
<!-- Grid items will be populated dynamically -->
</div>

27
public/css/style.css
View File

@@ -448,3 +448,30 @@ body {
.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);
}

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

12
public/student-reservations.html
View File

@@ -63,6 +63,18 @@
</select>
</div>
</div>
<div class="row g-3 mb-3">
<div class="col-md-6">
<label for="searchInput" class="form-label">Search</label>
<div class="input-group search-input-group">
<span class="input-group-text"><i class="bi bi-search"></i></span>
<input type="text" class="form-control" id="searchInput" placeholder="Search reservations...">
<button class="btn btn-outline-secondary" type="button" id="clearSearch" title="Clear search">
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped student-reservations-table mb-0">
<thead class="table-dark">

9
public/student.html
View File

@@ -38,6 +38,15 @@
<div class="col-auto">
<h2>Available Items</h2>
</div>
<div class="col-md-4">
<div class="input-group search-input-group">
<span class="input-group-text"><i class="bi bi-search"></i></span>
<input type="text" class="form-control" id="searchInput" placeholder="Search items...">
<button class="btn btn-outline-secondary" type="button" id="clearSearch" title="Clear search">
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>
<div class="col-auto ms-auto">
<select class="form-select me-2" id="locationFilter">
<option value="all">All Locations</option>