me0nline/Fridger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): simplify to 3-button manage layout and remove drawer grouping
Build and Push Fridger Container / Build & Push Fridger Image (push) Successful in 1m36s
Details

Browse Source
This commit is contained in:
me0nline
2026-10-10 23:44:02 +02:00
parent 865affa202
commit 2f7d2f1f47
5 changed files with 434 additions and 532 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.js
+206 -329
View File
@@ -1,12 +1,10 @@
/**
* Fridger Frontend Application
* Handles dual view/manage modes, live barcode scanning, grams adjustment, and item management.
* Simplified UI: Fridge View (drawer-free) and 3 primary actions: Manage Grams, Add Pack, Remove Pack.
*/
// Application State
const state = {
currentMode: 'view', // 'view' or 'manage'
viewGrouping: 'shelf', // 'shelf', 'category', 'grid'
items: [],
meta: {
categories: [],
@@ -16,8 +14,7 @@ const state = {
filters: {
search: '',
category: 'All',
status: 'all',
location: 'All'
status: 'all'
},
activeGramsItem: null,
activeGramsValue: 0,
@@ -77,7 +74,6 @@ async function loadItems() {
const params = new URLSearchParams();
if (state.filters.search) params.append('search', state.filters.search);
if (state.filters.category && state.filters.category !== 'All') params.append('category', state.filters.category);
if (state.filters.location && state.filters.location !== 'All') params.append('location', state.filters.location);
if (state.filters.status && state.filters.status !== 'all') params.append('status', state.filters.status);
const res = await fetch(`/api/items?${params.toString()}`);
@@ -104,13 +100,13 @@ function switchMode(mode) {
const manageContainer = document.getElementById('manage-mode-container');
if (mode === 'view') {
viewBtn.className = 'flex items-center gap-2 px-3 sm:px-5 py-2 rounded-lg text-sm font-semibold transition-all duration-200 bg-teal-500 text-white shadow-md';
manageBtn.className = 'flex items-center gap-2 px-3 sm:px-5 py-2 rounded-lg text-sm font-semibold transition-all duration-200 text-slate-300 hover:text-white';
viewBtn.className = 'flex items-center gap-2 px-3 sm:px-5 py-2 rounded-lg text-sm font-semibold transition bg-teal-500 text-white shadow-md';
manageBtn.className = 'flex items-center gap-2 px-3 sm:px-5 py-2 rounded-lg text-sm font-semibold transition text-slate-300 hover:text-white';
viewContainer.classList.remove('hidden');
manageContainer.classList.add('hidden');
} else {
manageBtn.className = 'flex items-center gap-2 px-3 sm:px-5 py-2 rounded-lg text-sm font-semibold transition-all duration-200 bg-teal-500 text-white shadow-md';
viewBtn.className = 'flex items-center gap-2 px-3 sm:px-5 py-2 rounded-lg text-sm font-semibold transition-all duration-200 text-slate-300 hover:text-white';
manageBtn.className = 'flex items-center gap-2 px-3 sm:px-5 py-2 rounded-lg text-sm font-semibold transition bg-teal-500 text-white shadow-md';
viewBtn.className = 'flex items-center gap-2 px-3 sm:px-5 py-2 rounded-lg text-sm font-semibold transition text-slate-300 hover:text-white';
manageContainer.classList.remove('hidden');
viewContainer.classList.add('hidden');
}
@@ -118,23 +114,6 @@ function switchMode(mode) {
renderApp();
}
function setViewGrouping(grouping) {
state.viewGrouping = grouping;
const btnShelf = document.getElementById('grp-shelf-btn');
const btnCat = document.getElementById('grp-cat-btn');
const btnGrid = document.getElementById('grp-grid-btn');
const activeClass = 'px-2.5 py-1 rounded bg-teal-500/20 text-teal-300 border border-teal-500/30 font-medium';
const inactiveClass = 'px-2.5 py-1 rounded bg-slate-800 text-slate-400 border border-slate-700 font-medium';
btnShelf.className = grouping === 'shelf' ? activeClass : inactiveClass;
btnCat.className = grouping === 'category' ? activeClass : inactiveClass;
btnGrid.className = grouping === 'grid' ? activeClass : inactiveClass;
renderFridgeView();
}
let searchDebounceTimer = null;
function handleSearch(val) {
state.filters.search = val.trim();
@@ -148,7 +127,7 @@ function handleSearch(val) {
clearTimeout(searchDebounceTimer);
searchDebounceTimer = setTimeout(() => {
loadItems();
}, 250);
}, 200);
}
function clearSearch() {
@@ -162,9 +141,9 @@ function setStatusFilter(status) {
state.filters.status = status;
document.querySelectorAll('[data-status-btn]').forEach(btn => {
if (btn.getAttribute('data-status-btn') === status) {
btn.className = 'status-chip active px-3 py-2 rounded-lg bg-slate-800 border border-slate-700 text-white whitespace-nowrap transition font-semibold';
btn.className = 'status-chip active px-3 py-1.5 rounded-lg bg-slate-800 border border-slate-700 text-white font-semibold';
} else {
btn.className = 'status-chip px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-slate-400 hover:text-slate-200 whitespace-nowrap transition';
btn.className = 'status-chip px-3 py-1.5 rounded-lg bg-slate-900 border border-slate-800 text-slate-400 hover:text-slate-200';
}
});
loadItems();
@@ -181,7 +160,7 @@ function renderCategoryFilters() {
if (!container) return;
let html = `
<button onclick="setCategoryFilter('All')" class="px-3 py-1.5 rounded-lg border whitespace-nowrap transition ${
<button onclick="setCategoryFilter('All')" class="px-2.5 py-1 rounded-lg border whitespace-nowrap transition text-xs ${
state.filters.category === 'All'
? 'bg-teal-500/20 text-teal-300 border-teal-500/40 font-semibold'
: 'bg-slate-900 text-slate-400 border-slate-800 hover:text-slate-200'
@@ -193,7 +172,7 @@ function renderCategoryFilters() {
state.meta.categories.forEach(cat => {
const isSelected = state.filters.category === cat.id;
html += `
<button onclick="setCategoryFilter('${escapeHtml(cat.id)}')" class="px-3 py-1.5 rounded-lg border whitespace-nowrap transition ${
<button onclick="setCategoryFilter('${escapeHtml(cat.id)}')" class="px-2.5 py-1 rounded-lg border whitespace-nowrap transition text-xs ${
isSelected
? 'bg-teal-500/20 text-teal-300 border-teal-500/40 font-semibold'
: 'bg-slate-900 text-slate-400 border-slate-800 hover:text-slate-200'
@@ -208,32 +187,19 @@ function renderCategoryFilters() {
function populateModalSelects() {
const catSelect = document.getElementById('modal-category');
const locSelect = document.getElementById('modal-location');
if (catSelect && state.meta.categories) {
catSelect.innerHTML = state.meta.categories.map(c => `
<option value="${escapeHtml(c.id)}">${escapeHtml(c.name)}</option>
`).join('');
}
if (locSelect && state.meta.locations) {
locSelect.innerHTML = state.meta.locations.map(l => `
<option value="${escapeHtml(l)}">${escapeHtml(l)}</option>
`).join('');
}
}
// ----------------------------------------------------
// Rendering
// Rendering UI
// ----------------------------------------------------
function renderApp() {
const emptyState = document.getElementById('empty-state');
const countLabel = document.getElementById('item-count-label');
if (countLabel) {
countLabel.textContent = `Showing ${state.items.length} item${state.items.length === 1 ? '' : 's'}`;
}
if (state.items.length === 0) {
emptyState.classList.remove('hidden');
@@ -253,259 +219,218 @@ function renderApp() {
initLucide();
}
// MODE 1: Fridge View Mode (No drawers/shelves - clean grid)
function renderFridgeView() {
const container = document.getElementById('fridge-view-content');
if (!container) return;
if (state.viewGrouping === 'grid') {
container.innerHTML = `
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
${state.items.map(item => renderFridgeItemCard(item)).join('')}
</div>
`;
return;
}
// Group by Shelf or Category
const isShelf = state.viewGrouping === 'shelf';
const groups = {};
if (isShelf) {
state.meta.locations.forEach(loc => groups[loc] = []);
groups['Other Location'] = [];
} else {
state.meta.categories.forEach(cat => groups[cat.id] = []);
groups['Other'] = [];
}
state.items.forEach(item => {
const key = isShelf ? (item.location || 'Other Location') : (item.category || 'Other');
if (!groups[key]) groups[key] = [];
groups[key].push(item);
});
let html = '';
for (const [groupName, groupItems] of Object.entries(groups)) {
if (groupItems.length === 0) continue;
const iconName = isShelf ? 'refrigerator' : getCategoryIcon(groupName);
html += `
<div class="bg-slate-900/60 rounded-2xl border border-slate-800/80 p-4 sm:p-5 shadow-lg space-y-4">
<div class="flex items-center justify-between pb-2 border-b border-slate-800/60">
<div class="flex items-center gap-2.5">
<div class="w-7 h-7 rounded-lg bg-teal-500/10 text-teal-400 flex items-center justify-center">
<i data-lucide="${iconName}" class="w-4 h-4"></i>
</div>
<h3 class="font-bold text-slate-200 text-sm sm:text-base">${escapeHtml(groupName)}</h3>
</div>
<span class="text-xs text-slate-400 font-medium">${groupItems.length} item${groupItems.length === 1 ? '' : 's'}</span>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3.5">
${groupItems.map(item => renderFridgeItemCard(item)).join('')}
</div>
</div>
`;
}
container.innerHTML = html;
}
function renderFridgeItemCard(item) {
const expiryInfo = getExpiryStatus(item.expiry_date);
const percent = item.initial_quantity > 0
? Math.min(100, Math.max(0, Math.round((item.quantity / item.initial_quantity) * 100)))
: 100;
const isWeight = item.unit === 'g' || item.unit === 'ml' || item.unit === 'kg' || item.unit === 'l';
const isLow = percent <= 25;
let progressBarColor = 'bg-teal-500';
if (percent <= 20) progressBarColor = 'bg-rose-500';
else if (percent <= 50) progressBarColor = 'bg-amber-500';
return `
<div class="shelf-card rounded-2xl p-4 flex flex-col justify-between transition-all duration-200 hover:-translate-y-0.5 relative group">
<div>
<!-- Top row: Category/Location & Expiry badge -->
<div class="flex items-start justify-between gap-2 mb-2">
<span class="text-[11px] font-semibold text-teal-400/90 bg-teal-500/10 px-2 py-0.5 rounded-md truncate max-w-[130px]">
${escapeHtml(item.brand || item.category)}
</span>
<span class="text-[11px] font-semibold px-2 py-0.5 rounded-md flex items-center gap-1 shrink-0 ${expiryInfo.badgeClass}">
<i data-lucide="${expiryInfo.icon}" class="w-3 h-3"></i>
<span>${expiryInfo.label}</span>
</span>
</div>
<!-- Product Image & Name -->
<div class="flex items-start gap-3 my-2">
${item.image_url ? `
<img src="${escapeHtml(item.image_url)}" alt="${escapeHtml(item.name)}" class="w-12 h-12 object-contain rounded-xl bg-white/5 p-1 border border-slate-700/60 shrink-0">
` : `
<div class="w-12 h-12 rounded-xl bg-slate-800/80 border border-slate-700/60 text-slate-400 flex items-center justify-center shrink-0">
<i data-lucide="${getCategoryIcon(item.category)}" class="w-6 h-6 text-slate-400"></i>
</div>
`}
<div class="min-w-0 flex-1">
<h4 class="font-bold text-slate-100 text-sm leading-snug line-clamp-2">${escapeHtml(item.name)}</h4>
${item.notes ? `<p class="text-xs text-slate-400 italic mt-0.5 truncate">${escapeHtml(item.notes)}</p>` : ''}
</div>
</div>
<!-- Grams / Quantity Progress Indicator -->
<div class="mt-3 bg-slate-950/60 rounded-xl p-2.5 border border-slate-800/60">
<div class="flex items-center justify-between text-xs mb-1.5">
<span class="font-bold text-white flex items-center gap-1">
<span class="text-sm font-black text-teal-300">${item.quantity}</span>
<span class="text-slate-400 font-normal">${item.unit}</span>
</span>
<span class="text-[11px] text-slate-400">
of ${item.initial_quantity} ${item.unit} (${percent}%)
</span>
</div>
<!-- Progress Bar -->
<div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
<div class="${progressBarColor} h-full rounded-full transition-all duration-300" style="width: ${percent}%;"></div>
</div>
</div>
</div>
<!-- Quick Action Buttons -->
<div class="mt-3.5 pt-2.5 border-t border-slate-800/60 flex items-center justify-between gap-1.5">
<button onclick="openGramsModal(${item.id})" class="flex-1 flex items-center justify-center gap-1.5 py-1.5 px-2 rounded-xl bg-teal-500/10 hover:bg-teal-500/20 text-teal-300 border border-teal-500/30 text-xs font-semibold transition active:scale-95">
<i data-lucide="scale" class="w-3.5 h-3.5"></i>
<span>${isWeight ? 'Adjust Amount' : 'Adjust'}</span>
</button>
${isWeight ? `
<button onclick="quickDelta(${item.id}, -50)" class="p-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700 text-xs font-semibold" title="Use 50${item.unit}">
-50
</button>
` : `
<button onclick="quickDelta(${item.id}, -1)" class="p-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700 text-xs font-semibold" title="Use 1">
-1
</button>
`}
<button onclick="openItemModal(${item.id})" class="p-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-400 hover:text-white border border-slate-700 text-xs" title="Edit Item">
<i data-lucide="pencil" class="w-3.5 h-3.5"></i>
</button>
</div>
</div>
`;
}
function renderManageView() {
const container = document.getElementById('manage-items-list');
if (!container) return;
let html = '';
state.items.forEach(item => {
container.innerHTML = state.items.map(item => {
const expiryInfo = getExpiryStatus(item.expiry_date);
const percent = item.initial_quantity > 0
? Math.min(100, Math.max(0, Math.round((item.quantity / item.initial_quantity) * 100)))
: 100;
const isWeight = item.unit === 'g' || item.unit === 'ml' || item.unit === 'kg' || item.unit === 'l';
let progressBarColor = 'bg-teal-500';
if (percent <= 20) progressBarColor = 'bg-rose-500';
else if (percent <= 50) progressBarColor = 'bg-amber-500';
html += `
<div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 shadow-md transition hover:border-slate-700 space-y-3">
return `
<div class="shelf-card rounded-2xl p-4 flex flex-col justify-between transition hover:border-teal-500/40 space-y-3">
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
<!-- Item info & Thumbnail -->
<div class="flex items-center gap-3 min-w-0">
<div>
<!-- Header: Brand & Expiry -->
<div class="flex items-center justify-between gap-2 mb-2">
<span class="text-[11px] font-semibold text-teal-400 bg-teal-500/10 px-2 py-0.5 rounded-md truncate max-w-[130px]">
${escapeHtml(item.brand || item.category)}
</span>
<span class="text-[11px] font-semibold px-2 py-0.5 rounded-md flex items-center gap-1 shrink-0 ${expiryInfo.badgeClass}">
<i data-lucide="${expiryInfo.icon}" class="w-3 h-3"></i>
<span>${expiryInfo.label}</span>
</span>
</div>
<!-- Product Details & Image -->
<div class="flex items-start gap-3 my-1">
${item.image_url ? `
<img src="${escapeHtml(item.image_url)}" alt="${escapeHtml(item.name)}" class="w-12 h-12 object-contain rounded-xl bg-white/5 p-1 border border-slate-800 shrink-0">
<img src="${escapeHtml(item.image_url)}" alt="${escapeHtml(item.name)}" class="w-12 h-12 object-contain rounded-xl bg-white/5 p-1 border border-slate-700/60 shrink-0">
` : `
<div class="w-12 h-12 rounded-xl bg-slate-800 border border-slate-700 text-teal-400 flex items-center justify-center shrink-0">
<div class="w-12 h-12 rounded-xl bg-slate-800/80 border border-slate-700 text-teal-400 flex items-center justify-center shrink-0">
<i data-lucide="${getCategoryIcon(item.category)}" class="w-6 h-6"></i>
</div>
`}
<div class="min-w-0">
<div class="flex items-center gap-2 flex-wrap">
<h4 class="font-bold text-white text-sm sm:text-base truncate">${escapeHtml(item.name)}</h4>
${item.brand ? `<span class="text-xs px-2 py-0.5 rounded bg-slate-800 text-slate-300">${escapeHtml(item.brand)}</span>` : ''}
${item.is_opened ? `<span class="text-[10px] px-1.5 py-0.5 rounded bg-blue-500/20 text-blue-300 font-semibold">Opened</span>` : ''}
</div>
<div class="text-xs text-slate-400 flex items-center gap-2 mt-0.5 flex-wrap">
<span>📍 ${escapeHtml(item.location || 'Fridge')}</span>
<span>&bull;</span>
<span class="${expiryInfo.badgeClass} px-1.5 py-0.2 rounded font-medium">${expiryInfo.label}</span>
${item.barcode ? `<span>&bull;</span><span class="font-mono text-[11px] text-slate-500">${escapeHtml(item.barcode)}</span>` : ''}
</div>
<div class="min-w-0 flex-1">
<h4 class="font-bold text-slate-100 text-sm leading-snug">${escapeHtml(item.name)}</h4>
${item.notes ? `<p class="text-xs text-slate-400 italic mt-0.5 truncate">${escapeHtml(item.notes)}</p>` : ''}
</div>
</div>
<!-- Action buttons -->
<div class="flex items-center gap-2 self-end sm:self-center shrink-0">
<button onclick="openItemModal(${item.id})" class="px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-semibold flex items-center gap-1.5 border border-slate-700 transition">
<i data-lucide="edit-3" class="w-3.5 h-3.5"></i>
<span>Edit</span>
</button>
<button onclick="confirmDeleteItem(${item.id}, '${escapeHtml(item.name)}')" class="p-1.5 rounded-xl bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 border border-rose-500/20 text-xs transition" title="Delete Item">
<i data-lucide="trash-2" class="w-4 h-4"></i>
</button>
<!-- Grams / Quantity Progress -->
<div class="mt-2.5 bg-slate-950/70 rounded-xl p-2.5 border border-slate-800/80">
<div class="flex items-center justify-between text-xs mb-1">
<span class="font-bold text-white flex items-center gap-1">
<span class="text-base font-black text-teal-300">${item.quantity}</span>
<span class="text-slate-400 font-normal">${item.unit}</span>
</span>
<span class="text-[11px] text-slate-400">
Pack: ${item.initial_quantity} ${item.unit} (${percent}%)
</span>
</div>
<div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
<div class="${progressBarColor} h-full rounded-full transition-all duration-300" style="width: ${percent}%;"></div>
</div>
</div>
</div>
<!-- Interactive Grams / Quantity Adjuster Strip -->
<div class="bg-slate-950/70 p-3 rounded-xl border border-slate-800/80 flex flex-col md:flex-row items-center justify-between gap-3">
<!-- 3 Primary Action Buttons: Add Pack, Remove Pack, Manage Grams -->
<div class="grid grid-cols-3 gap-1.5 pt-2 border-t border-slate-800/80">
<button onclick="addWholePacket(${item.id})" class="flex items-center justify-center gap-1 py-1.5 px-2 rounded-xl bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 text-xs font-semibold transition active:scale-95" title="Add 1 whole packet (+${item.initial_quantity}${item.unit})">
<i data-lucide="plus" class="w-3.5 h-3.5"></i>
<span>Add</span>
</button>
<button onclick="removeWholePacket(${item.id})" class="flex items-center justify-center gap-1 py-1.5 px-2 rounded-xl bg-rose-500/10 hover:bg-rose-500/20 text-rose-300 border border-rose-500/30 text-xs font-semibold transition active:scale-95" title="Remove 1 whole packet (-${item.initial_quantity}${item.unit})">
<i data-lucide="minus" class="w-3.5 h-3.5"></i>
<span>Remove</span>
</button>
<button onclick="openGramsModal(${item.id})" class="flex items-center justify-center gap-1 py-1.5 px-2 rounded-xl bg-teal-500/20 hover:bg-teal-500/30 text-teal-300 border border-teal-500/40 text-xs font-semibold transition active:scale-95" title="Adjust grams when not used up">
<i data-lucide="sliders" class="w-3.5 h-3.5"></i>
<span>Manage</span>
</button>
</div>
</div>
`;
}).join('');
}
// MODE 2: Manage Mode (Simplified list with the 3 main buttons)
function renderManageView() {
const container = document.getElementById('manage-items-list');
if (!container) return;
container.innerHTML = state.items.map(item => {
const expiryInfo = getExpiryStatus(item.expiry_date);
const percent = item.initial_quantity > 0
? Math.min(100, Math.max(0, Math.round((item.quantity / item.initial_quantity) * 100)))
: 100;
return `
<div class="bg-slate-900 border border-slate-800 rounded-2xl p-3.5 shadow-md transition hover:border-slate-700 space-y-3">
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
<!-- Slider & Current remaining -->
<div class="flex-1 w-full flex items-center gap-3">
<div class="text-left shrink-0">
<div class="text-xs text-slate-400">Remaining:</div>
<div class="text-base font-black text-teal-300">
${item.quantity} <span class="text-xs font-normal text-slate-400">${item.unit} (${percent}%)</span>
<!-- Item info -->
<div class="flex items-center gap-3 min-w-0 flex-1">
${item.image_url ? `
<img src="${escapeHtml(item.image_url)}" alt="${escapeHtml(item.name)}" class="w-11 h-11 object-contain rounded-xl bg-white/5 p-1 border border-slate-800 shrink-0">
` : `
<div class="w-11 h-11 rounded-xl bg-slate-800 border border-slate-700 text-teal-400 flex items-center justify-center shrink-0">
<i data-lucide="${getCategoryIcon(item.category)}" class="w-5 h-5"></i>
</div>
`}
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2 flex-wrap">
<h4 class="font-bold text-white text-sm truncate">${escapeHtml(item.name)}</h4>
${item.brand ? `<span class="text-[11px] px-1.5 py-0.5 rounded bg-slate-800 text-slate-300">${escapeHtml(item.brand)}</span>` : ''}
</div>
<div class="text-xs text-slate-400 flex items-center gap-2 mt-0.5 flex-wrap">
<span class="font-semibold text-teal-300">${item.quantity} ${item.unit}</span>
<span>(Pack size: ${item.initial_quantity} ${item.unit})</span>
<span>&bull;</span>
<span class="${expiryInfo.badgeClass} px-1.5 py-0.2 rounded font-medium text-[11px]">${expiryInfo.label}</span>
</div>
</div>
<input
type="range"
min="0"
max="${item.initial_quantity || 100}"
step="${item.unit === 'g' || item.unit === 'ml' ? 5 : 1}"
value="${item.quantity}"
onchange="onManageSliderCommit(${item.id}, this.value)"
class="w-full accent-teal-500 cursor-pointer h-2 bg-slate-800 rounded-lg"
title="Drag to change remaining quantity"
>
</div>
<!-- Quick Delta Chips -->
<div class="flex items-center gap-1.5 flex-wrap shrink-0">
${isWeight ? `
<button onclick="quickDelta(${item.id}, -25)" class="px-2 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs text-slate-300 font-medium border border-slate-700">-25g</button>
<button onclick="quickDelta(${item.id}, -50)" class="px-2 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs text-slate-300 font-medium border border-slate-700">-50g</button>
<button onclick="quickDelta(${item.id}, -100)" class="px-2 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs text-slate-300 font-medium border border-slate-700">-100g</button>
` : `
<button onclick="quickDelta(${item.id}, -1)" class="px-2 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs text-slate-300 font-medium border border-slate-700">-1</button>
<button onclick="quickDelta(${item.id}, 1)" class="px-2 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs text-slate-300 font-medium border border-slate-700">+1</button>
`}
<button onclick="openGramsModal(${item.id})" class="px-2.5 py-1 rounded-lg bg-teal-500/20 hover:bg-teal-500/30 text-teal-300 text-xs font-semibold border border-teal-500/40">Custom</button>
<!-- The 3 Core Action Buttons: Manage, Add Pack, Remove Pack (+ Edit/Delete icons) -->
<div class="flex items-center gap-2 w-full sm:w-auto justify-end">
<!-- 1. Add Whole Packet -->
<button onclick="addWholePacket(${item.id})" class="px-3 py-1.5 rounded-xl bg-emerald-500/15 hover:bg-emerald-500/25 text-emerald-300 border border-emerald-500/30 text-xs font-semibold flex items-center gap-1 transition active:scale-95" title="Add 1 Whole Packet">
<i data-lucide="plus" class="w-3.5 h-3.5"></i>
<span>Add</span>
</button>
<!-- 2. Remove Whole Packet -->
<button onclick="removeWholePacket(${item.id})" class="px-3 py-1.5 rounded-xl bg-rose-500/15 hover:bg-rose-500/25 text-rose-300 border border-rose-500/30 text-xs font-semibold flex items-center gap-1 transition active:scale-95" title="Remove 1 Whole Packet">
<i data-lucide="minus" class="w-3.5 h-3.5"></i>
<span>Remove</span>
</button>
<!-- 3. Manage Grams / Partial Amount -->
<button onclick="openGramsModal(${item.id})" class="px-3.5 py-1.5 rounded-xl bg-teal-500 hover:bg-teal-400 text-white text-xs font-semibold flex items-center gap-1 shadow-sm transition active:scale-95" title="Adjust grams when partially used">
<i data-lucide="sliders" class="w-3.5 h-3.5"></i>
<span>Manage</span>
</button>
<!-- Secondary: Edit / Delete -->
<button onclick="openItemModal(${item.id})" class="p-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-400 hover:text-white border border-slate-700 text-xs ml-1" title="Edit Item Details">
<i data-lucide="pencil" class="w-3.5 h-3.5"></i>
</button>
<button onclick="confirmDeleteItem(${item.id}, '${escapeHtml(item.name)}')" class="p-1.5 rounded-xl bg-slate-800 hover:bg-rose-900/40 text-slate-400 hover:text-rose-300 border border-slate-700 text-xs" title="Delete">
<i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
</button>
</div>
</div>
</div>
`;
});
container.innerHTML = html;
}).join('');
}
// ----------------------------------------------------
// Grams & Quantity Adjustments
// 3 Primary Action Handlers: Add Pack, Remove Pack, Manage Grams
// ----------------------------------------------------
async function addWholePacket(itemId) {
try {
const res = await fetch(`/api/items/${itemId}/add-packet`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ count: 1 })
});
if (res.ok) {
const updated = await res.json();
showToast(`Added 1 packet of ${updated.name} (Now: ${updated.quantity} ${updated.unit})`, 'success');
await loadStats();
await loadItems();
} else {
showToast('Failed to add packet', 'error');
}
} catch (err) {
console.error(err);
showToast('Network error', 'error');
}
}
async function removeWholePacket(itemId) {
try {
const res = await fetch(`/api/items/${itemId}/remove-packet`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ count: 1 })
});
if (res.ok) {
const updated = await res.json();
showToast(`Removed 1 packet of ${updated.name} (Remaining: ${updated.quantity} ${updated.unit})`, 'info');
await loadStats();
await loadItems();
} else {
showToast('Failed to remove packet', 'error');
}
} catch (err) {
console.error(err);
showToast('Network error', 'error');
}
}
// ----------------------------------------------------
// Manage Grams Modal Logic
// ----------------------------------------------------
function openGramsModal(itemId) {
@@ -516,13 +441,13 @@ function openGramsModal(itemId) {
state.activeGramsValue = item.quantity;
document.getElementById('grams-modal-title').textContent = item.name;
document.getElementById('grams-modal-sub').textContent = `Package Size: ${item.initial_quantity} ${item.unit} • Location: ${item.location}`;
document.getElementById('grams-modal-sub').textContent = `1 Full Packet = ${item.initial_quantity} ${item.unit}`;
document.getElementById('grams-modal-unit').textContent = item.unit;
document.getElementById('grams-current-val').textContent = item.quantity;
document.getElementById('grams-exact-input').value = item.quantity;
const slider = document.getElementById('grams-slider');
slider.max = item.initial_quantity || 1000;
slider.max = Math.max(item.initial_quantity * 2, item.quantity, 100);
slider.step = (item.unit === 'g' || item.unit === 'ml') ? '5' : '1';
slider.value = item.quantity;
@@ -570,7 +495,7 @@ function updateGramsGauge() {
document.getElementById('grams-current-val').textContent = state.activeGramsValue;
if (state.activeGramsItem && state.activeGramsItem.initial_quantity > 0) {
const pct = Math.round((state.activeGramsValue / state.activeGramsItem.initial_quantity) * 100);
document.getElementById('grams-percent-text').textContent = `${pct}% remaining of original ${state.activeGramsItem.initial_quantity}${state.activeGramsItem.unit}`;
document.getElementById('grams-percent-text').textContent = `${pct}% remaining of a full ${state.activeGramsItem.initial_quantity}${state.activeGramsItem.unit} packet`;
}
}
@@ -595,7 +520,7 @@ async function saveGramsAdjustment() {
showToast('Failed to update quantity', 'error');
}
} catch (err) {
console.error('Save grams error:', err);
console.error(err);
showToast('Network error while updating quantity', 'error');
}
}
@@ -608,7 +533,7 @@ async function consumeAllAndRemove() {
try {
const res = await fetch(`/api/items/${itemId}`, { method: 'DELETE' });
if (res.ok) {
showToast('Item finished & removed', 'info');
showToast('Item removed', 'info');
closeGramsModal();
await loadStats();
await loadItems();
@@ -619,44 +544,6 @@ async function consumeAllAndRemove() {
}
}
async function quickDelta(itemId, delta) {
try {
const res = await fetch(`/api/items/${itemId}/quantity`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ delta, markOpened: true })
});
if (res.ok) {
const updated = await res.json();
showToast(`${updated.name}: ${delta > 0 ? '+' : ''}${delta} ${updated.unit} (Now: ${updated.quantity} ${updated.unit})`, 'success');
await loadStats();
await loadItems();
}
} catch (err) {
console.error(err);
showToast('Failed to adjust amount', 'error');
}
}
async function onManageSliderCommit(itemId, newQty) {
try {
const res = await fetch(`/api/items/${itemId}/quantity`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ newQuantity: parseFloat(newQty), markOpened: true })
});
if (res.ok) {
showToast(`Updated quantity`, 'success');
await loadStats();
await loadItems();
}
} catch (err) {
console.error(err);
}
}
// ----------------------------------------------------
// Item Add / Edit Modal
// ----------------------------------------------------
@@ -672,7 +559,7 @@ function openItemModal(itemId = null) {
if (!item) return;
document.getElementById('modal-item-id').value = item.id;
document.getElementById('item-modal-title').textContent = 'Edit Fridge Item';
document.getElementById('item-modal-title').textContent = 'Edit Item';
document.getElementById('modal-barcode').value = item.barcode || '';
document.getElementById('modal-name').value = item.name || '';
document.getElementById('modal-brand').value = item.brand || '';
@@ -680,9 +567,7 @@ function openItemModal(itemId = null) {
document.getElementById('modal-initial-quantity').value = item.initial_quantity || item.quantity;
document.getElementById('modal-unit').value = item.unit || 'g';
document.getElementById('modal-category').value = item.category || 'General';
document.getElementById('modal-location').value = item.location || 'Fridge - Middle Shelf';
document.getElementById('modal-expiry').value = item.expiry_date || '';
document.getElementById('modal-opened').checked = !!item.is_opened;
document.getElementById('modal-notes').value = item.notes || '';
if (item.image_url) {
@@ -693,11 +578,10 @@ function openItemModal(itemId = null) {
}
} else {
document.getElementById('modal-item-id').value = '';
document.getElementById('item-modal-title').textContent = 'Add New Fridge Item';
document.getElementById('item-modal-title').textContent = 'Add Item';
document.getElementById('modal-unit').value = 'g';
document.getElementById('modal-quantity').value = '';
document.getElementById('modal-initial-quantity').value = '';
document.getElementById('modal-location').value = 'Fridge - Middle Shelf';
}
document.getElementById('item-modal').classList.remove('hidden');
@@ -746,7 +630,6 @@ function applyProductDataToForm(data) {
}
if (data.unit) document.getElementById('modal-unit').value = data.unit;
if (data.category) document.getElementById('modal-category').value = data.category;
if (data.location) document.getElementById('modal-location').value = data.location;
if (data.barcode) document.getElementById('modal-barcode').value = data.barcode;
if (data.image_url) {
@@ -777,9 +660,7 @@ async function handleItemFormSubmit(event) {
initial_quantity: initQty,
unit: document.getElementById('modal-unit').value,
category: document.getElementById('modal-category').value,
location: document.getElementById('modal-location').value,
expiry_date: document.getElementById('modal-expiry').value || null,
is_opened: document.getElementById('modal-opened').checked ? 1 : 0,
notes: document.getElementById('modal-notes').value.trim(),
image_url: document.getElementById('modal-image-url').value || null
};
@@ -810,7 +691,7 @@ async function handleItemFormSubmit(event) {
}
async function confirmDeleteItem(itemId, name) {
if (confirm(`Are you sure you want to remove "${name}" from your fridge?`)) {
if (confirm(`Remove "${name}" from fridge?`)) {
try {
const res = await fetch(`/api/items/${itemId}`, { method: 'DELETE' });
if (res.ok) {
@@ -858,7 +739,7 @@ async function startCameraScanner() {
state.html5QrCode = new Html5Qrcode("barcode-reader");
const config = {
fps: 10,
qrbox: { width: 250, height: 160 },
qrbox: { width: 240, height: 150 },
aspectRatio: 1.333
};
@@ -870,7 +751,7 @@ async function startCameraScanner() {
);
state.isScanning = true;
document.getElementById('scanner-status').textContent = 'Camera active. Point at barcode.';
document.getElementById('scanner-status').textContent = 'Point camera at barcode.';
} catch (err) {
console.warn('Camera start error:', err);
document.getElementById('scanner-status').textContent = 'Camera unavailable. Please enter barcode number below.';
@@ -889,11 +770,9 @@ async function stopCameraScanner() {
}
async function onBarcodeScannedSuccess(decodedText) {
// Beep sound feedback
playBeepSound();
stopCameraScanner();
document.getElementById('scanner-status').textContent = `Scanned ${decodedText}! Fetching info...`;
document.getElementById('scanner-status').textContent = `Scanned ${decodedText}!`;
try {
const res = await fetch(`/api/barcode/${encodeURIComponent(decodedText)}`);
@@ -907,7 +786,7 @@ async function onBarcodeScannedSuccess(decodedText) {
} else {
openItemModal();
document.getElementById('modal-barcode').value = decodedText;
showToast(`Scanned barcode: ${decodedText}. Please enter details.`, 'info');
showToast(`Scanned barcode: ${decodedText}. Enter details.`, 'info');
}
} catch (err) {
console.error(err);
@@ -917,9 +796,7 @@ async function onBarcodeScannedSuccess(decodedText) {
}
}
function onBarcodeScanError(errorMessage) {
// Continuous scanning errors are expected until barcode is in frame
}
function onBarcodeScanError() {}
function handleManualBarcodeSubmit() {
const code = document.getElementById('scanner-manual-input').value.trim();
@@ -944,12 +821,12 @@ function playBeepSound() {
}
// ----------------------------------------------------
// Utilities & Helpers
// Helpers
// ----------------------------------------------------
function getExpiryStatus(expiryDateStr) {
if (!expiryDateStr) {
return { label: 'No Expiry Set', badgeClass: 'bg-slate-800 text-slate-400', icon: 'calendar' };
return { label: 'No Expiry', badgeClass: 'bg-slate-800 text-slate-400', icon: 'calendar' };
}
const today = new Date();
@@ -1021,7 +898,7 @@ function showToast(message, type = 'info') {
info: 'bg-slate-800 text-slate-100 border-slate-700'
};
toast.className = `p-3.5 rounded-xl border shadow-xl text-xs font-medium flex items-center gap-2 transform transition-all duration-300 translate-y-2 opacity-0 pointer-events-auto ${colors[type] || colors.info}`;
toast.className = `p-3 rounded-xl border shadow-xl text-xs font-medium flex items-center gap-2 transform transition-all duration-300 translate-y-2 opacity-0 pointer-events-auto ${colors[type] || colors.info}`;
toast.innerHTML = `<span>${escapeHtml(message)}</span>`;
container.appendChild(toast);
@@ -1033,14 +910,14 @@ function showToast(message, type = 'info') {
setTimeout(() => {
toast.classList.add('translate-y-2', 'opacity-0');
setTimeout(() => toast.remove(), 300);
}, 3500);
}, 3000);
}
async function seedDemoData() {
try {
const res = await fetch('/api/seed?force=true', { method: 'POST' });
if (res.ok) {
showToast('Loaded sample fridge items!', 'success');
showToast('Loaded sample items!', 'success');
await loadStats();
await loadItems();
}