ldbetteridge/pantry-management-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added expiry date to the search page

Browse Source
This commit is contained in:
Luke Betteridge
2026-03-08 16:36:36 +00:00
parent ec1def4d78
commit 6f0662271f
3 changed files with 205 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
search.html
View File

@@ -46,13 +46,15 @@
box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}
.quantity-range {
.quantity-range,
.date-range {
display: flex;
gap: 15px;
align-items: flex-end;
}
.quantity-range .form-group {
.quantity-range .form-group,
.date-range .form-group {
flex: 1;
}
@@ -102,6 +104,30 @@
color: #999;
font-size: 18px;
}
.item-expiry-badge {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
margin-top: 4px;
}
.expiry-fresh {
background-color: #e8f5e9;
color: #2e7d32;
}
.expiry-soon {
background-color: #fff3e0;
color: #e65100;
}
.expiry-expired {
background-color: #ffebee;
color: #c62828;
}
</style>
</head>
<body>
@@ -155,6 +181,28 @@
</div>
</div>
<div class="form-group">
<label>Expiry Date Range:</label>
<div class="date-range">
<div class="form-group">
<label for="min-expiry-date" style="font-size: 12px;">Start Date:</label>
<input
type="date"
id="min-expiry-date"
placeholder="Start date"
>
</div>
<div class="form-group">
<label for="max-expiry-date" style="font-size: 12px;">End Date:</label>
<input
type="date"
id="max-expiry-date"
placeholder="End date"
>
</div>
</div>
</div>
<div class="search-buttons">
<button type="button" class="btn btn-primary" id="search-btn">Search</button>
<button type="button" class="btn btn-secondary" id="reset-btn">Reset</button>
@@ -170,7 +218,7 @@
<script src="navbar.js"></script>
<script type="module">
import { searchInventory, getLocations } from './search.js';
import { searchInventory, getLocations, formatDate, getExpiryStatus } from './search.js';
import createItemComponent from './item-component.js';
const searchForm = document.getElementById('search-form');
@@ -178,6 +226,8 @@
const locationSelect = document.getElementById('search-location');
const minQuantityInput = document.getElementById('min-quantity');
const maxQuantityInput = document.getElementById('max-quantity');
const minExpiryDateInput = document.getElementById('min-expiry-date');
const maxExpiryDateInput = document.getElementById('max-expiry-date');
const searchBtn = document.getElementById('search-btn');
const resetBtn = document.getElementById('reset-btn');
const resultsGrid = document.getElementById('results-grid');
@@ -192,6 +242,14 @@
locationSelect.value = 'All';
}
// Get expiry status badge HTML
function getExpiryBadgeHtml(expiryDate) {
const status = getExpiryStatus(expiryDate);
const badgeClass = status.status === 'Expired' ? 'expiry-expired' :
status.status === 'Soon' || status.status === 'Today' ? 'expiry-soon' : 'expiry-fresh';
return `<div class="item-expiry-badge ${badgeClass}">${formatDate(expiryDate)}</div>`;
}
// Display search results
function displayResults(results) {
resultsGrid.innerHTML = '';
@@ -207,9 +265,15 @@
imgAlt: item.name,
text1: item.name,
text2: `${item.location} — ${item.quantity} ${item.unit}`,
text3: `Total: ${item.quantity} ${item.unit}`,
text3: `Expires: ${formatDate(item.expiryDate)}`,
editable: false
});
// Add expiry badge
const badge = document.createElement('div');
badge.innerHTML = getExpiryBadgeHtml(item.expiryDate);
comp.appendChild(badge.firstChild);
resultsGrid.appendChild(comp);
});
resultsInfo.textContent = `Found ${results.length} item${results.length !== 1 ? 's' : ''}`;
@@ -222,8 +286,16 @@
const location = locationSelect.value;
const minQty = parseInt(minQuantityInput.value) || 0;
const maxQty = parseInt(maxQuantityInput.value) || Infinity;
const minExpiry = minExpiryDateInput.value;
const maxExpiry = maxExpiryDateInput.value;
const results = searchInventory(searchName, location, minQty, maxQty);
// Validate date range
if (minExpiry && maxExpiry && minExpiry > maxExpiry) {
alert('Start date cannot be after end date');
return;
}
const results = searchInventory(searchName, location, minQty, maxQty, minExpiry, maxExpiry);
displayResults(results);
}
@@ -233,6 +305,8 @@
minQuantityInput.value = '0';
maxQuantityInput.value = '999';
locationSelect.value = 'All';
minExpiryDateInput.value = '';
maxExpiryDateInput.value = '';
resultsGrid.innerHTML = '';
resultsInfo.textContent = '';
}