Residential Storage Dashboard
Total Items
0
Total Est. Value
$0
Locations
0
No items found. Try adjusting your search or filters.
'; return; } itemsToRender.forEach(item => { const card = document.createElement('div'); card.className = 'rsd-item-card'; card.innerHTML = `${item.name}
${item.desc}
`;
elements.itemGrid.appendChild(card);
});
}
function renderLocations() {
const optionsHTML = locations.map(loc => ``).join('');
elements.itemLocationSelect.innerHTML = optionsHTML;
elements.filterLocation.innerHTML = `${optionsHTML}`;
elements.locationsList.innerHTML = '';
locations.forEach(loc => {
const li = document.createElement('li');
li.innerHTML = `${loc}`;
elements.locationsList.appendChild(li);
});
}
function resetItemForm() {
elements.itemForm.reset();
document.getElementById('rsd-item-id').value = '';
elements.itemFormTitle.textContent = 'Add New Item';
elements.submitItemBtn.innerHTML = 'add Add Item';
elements.cancelEditBtn.style.display = 'none';
}
function populateFormForEdit(id) {
const item = storedItems.find(i => i.id === id);
if (!item) return;
document.getElementById('rsd-item-id').value = item.id;
document.getElementById('rsd-item-name').value = item.name;
document.getElementById('rsd-item-desc').value = item.desc;
document.getElementById('rsd-item-location').value = item.location;
document.getElementById('rsd-item-value').value = item.value;
elements.itemFormTitle.textContent = 'Edit Item';
elements.submitItemBtn.innerHTML = 'save Save Changes';
elements.cancelEditBtn.style.display = 'inline-flex';
}
function attachEventListeners() {
elements.addLocationForm.addEventListener('submit', e => {
e.preventDefault();
const input = document.getElementById('rsd-new-location-name');
if (input.value.trim() && !locations.includes(input.value.trim())) {
locations.push(input.value.trim());
renderAll();
}
input.value = '';
});
elements.itemForm.addEventListener('submit', e => {
e.preventDefault();
const id = parseInt(document.getElementById('rsd-item-id').value);
const itemData = {
name: document.getElementById('rsd-item-name').value,
desc: document.getElementById('rsd-item-desc').value,
location: document.getElementById('rsd-item-location').value,
value: parseFloat(document.getElementById('rsd-item-value').value) || 0,
};
if (id) {
storedItems = storedItems.map(i => i.id === id ? { ...i, ...itemData } : i);
} else {
itemData.id = Date.now();
storedItems.push(itemData);
}
resetItemForm();
renderAll();
});
elements.configTab.addEventListener('click', e => {
const button = e.target.closest('button');
if (!button) return;
if (button.dataset.action === 'delete-location') {
const locToDelete = button.dataset.location;
if (storedItems.some(item => item.location === locToDelete)) {
alert(`Cannot delete "${locToDelete}" because it still contains items.`);
return;
}
if (confirm(`Are you sure you want to delete the "${locToDelete}" location?`)) {
locations = locations.filter(l => l !== locToDelete);
renderAll();
}
} else if (button.id === 'rsd-cancel-edit-btn') {
resetItemForm();
}
});
[elements.searchInput, elements.filterLocation].forEach(el => el.addEventListener('input', renderItemCards));
elements.downloadPdfBtn.addEventListener('click', () => {
const { jsPDF } = window.jspdf;
const pdf = new jsPDF();
pdf.setFontSize(18);
pdf.text('Storage Inventory Report', 14, 22);
pdf.autoTable({
startY: 30,
head: [['ID', 'Item Name', 'Description', 'Location', 'Est. Value ($)']],
body: storedItems.map(item => [item.id, item.name, item.desc, item.location, item.value.toLocaleString()]),
});
pdf.save('Storage-Inventory.pdf');
});
}
let currentTabIndex = 0;
const updateNavButtons = () => {
elements.prevBtn.disabled = currentTabIndex === 0;
elements.nextBtn.disabled = currentTabIndex === elements.tabs.length - 1;
};
window.rsd_changeTab = (event, tabName) => {
document.querySelectorAll('.rsd-tab-button').forEach(b => b.classList.remove('active'));
document.querySelectorAll('.rsd-tab-content').forEach(c => c.classList.remove('active'));
event.currentTarget.classList.add('active');
document.getElementById(tabName).classList.add('active');
currentTabIndex = Array.from(elements.tabs).findIndex(btn => btn === event.currentTarget);
updateNavButtons();
};
window.rsd_navigateTabs = (direction) => {
const newIndex = currentTabIndex + direction;
if (newIndex >= 0 && newIndex < elements.tabs.length) {
elements.tabs[newIndex].click();
}
};
loadState();
renderAll();
attachEventListeners();
updateNavButtons();
});
})();