${isNew ? 'New Product' : 'Edit Product'}
Enter URL (http://...) or emoji. Leave empty for ๐
${isNew ? '' : ``}
`;
modal.appendChild(dialog);
document.body.appendChild(modal);
// Save button
dialog.querySelector('.save-btn').addEventListener('click', () => {
const newName = dialog.querySelector('.edit-name').value.trim();
const newImage = dialog.querySelector('.edit-image').value.trim();
const newCategory = dialog.querySelector('.edit-category').value;
if (!newName) {
alert('Product name cannot be empty');
return;
}
document.body.removeChild(modal);
resolve({ action: 'save', name: newName, category: newCategory, image: newImage });
});
// Delete button (only present in edit mode)
const deleteBtn = dialog.querySelector('.delete-btn');
if (deleteBtn) {
deleteBtn.addEventListener('click', () => {
if (confirm(`Delete "${product.name}"?`)) {
document.body.removeChild(modal);
resolve({ action: 'delete' });
}
});
}
// Cancel button
dialog.querySelector('.cancel-btn').addEventListener('click', () => {
document.body.removeChild(modal);
resolve(null);
});
// Backdrop click
modal.addEventListener('click', (e) => {
if (e.target === modal) {
document.body.removeChild(modal);
resolve(null);
}
});
});
}
/**
* Edit a product
*/
async _editProduct(productKey) {
const result = await this._showEditDialog(productKey);
if (!result) return;
try {
if (result.action === 'delete') {
// Delete product
await this._hass.connection.sendMessagePromise({
type: 'shopping_list_manager/delete_product',
key: productKey
});
// Reload data
await this._loadData();
this._hapticFeedback();
} else if (result.action === 'save') {
// Update product
await this._hass.connection.sendMessagePromise({
type: 'shopping_list_manager/add_product',
key: productKey,
name: result.name,
category: result.category,
unit: 'pcs',
image: result.image || ''
});
// Reload data
await this._loadData();
this._hapticFeedback();
}
} catch (error) {
console.error('Failed to edit product:', error);
alert('Failed to edit product: ' + error.message);
}
}
/**
* Set quantity for a product
*/
async _setQuantity(productKey, qty) {
const currentQty = this._activeList[productKey]?.qty || 0;
// Optimistic update
if (qty === 0) {
delete this._activeList[productKey];
} else {
this._activeList[productKey] = { qty };
}
this._render();
this._hapticFeedback();
try {
await this._hass.connection.sendMessagePromise({
type: 'shopping_list_manager/set_qty',
key: productKey,
qty: qty
});
} catch (error) {
console.error('Failed to set quantity:', error);
// Revert on error
if (currentQty === 0) {
delete this._activeList[productKey];
} else {
this._activeList[productKey] = { qty: currentQty };
}
this._render();
alert('Failed to update quantity');
}
}
/**
* Toggle product on/off list
*/
async _toggleProduct(productKey) {
const currentQty = this._activeList[productKey]?.qty || 0;
const newQty = currentQty > 0 ? 0 : 1;
await this._setQuantity(productKey, newQty);
}
/**
* Increment quantity
*/
async _incrementProduct(productKey) {
const currentQty = this._activeList[productKey]?.qty || 0;
await this._setQuantity(productKey, currentQty + 1);
}
/**
* Decrement quantity
*/
async _decrementProduct(productKey) {
const currentQty = this._activeList[productKey]?.qty || 0;
if (currentQty > 0) {
await this._setQuantity(productKey, currentQty - 1);
}
}
/**
* Generate product key from name
*/
_generateKey(name) {
return name.toLowerCase()
.replace(/[^a-z0-9]+/g, '_')
.replace(/^_+|_+$/g, '');
}
/**
* Haptic feedback based on settings
*/
_hapticFeedback(intensity = 'medium') {
if (this._settings.haptics === 'off') return;
if ('vibrate' in navigator) {
const patterns = {
low: 5,
medium: 10,
high: 20
};
const duration = patterns[this._settings.haptics] || patterns.medium;
navigator.vibrate(duration);
}
}
/**
* Show settings modal
*/
_showSettings() {
return new Promise((resolve) => {
const modal = document.createElement('div');
modal.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.5);
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 100000;
isolation: isolate;
`;
const dialog = document.createElement('div');
dialog.style.cssText = `
background: var(--card-background-color);
border-radius: 16px 16px 0 0;
padding: 12px 24px 32px 24px;
width: 100%;
max-width: 480px;
max-height: 70vh;
overflow-y: auto;
position: relative;
`;
dialog.innerHTML = `
Settings
${['off', 'low', 'medium', 'high'].map(level => `
`).join('')}
${['auto', '2', '3', '4', '5'].map(count => `
`).join('')}
Hide Completed
Hide products with quantity 0
Compact Headers
Show category names only (no emoji)
Loading...
';
return;
}
const activeProducts = this._getActiveProducts();
const inactiveProducts = this._getInactiveProducts();
let html = '';
// Show active products first
if (activeProducts.length > 0) {
if (this._sortBy === 'category') {
html += this._renderProductsByCategory(activeProducts, false);
} else {
const containerClass = this._settings.layout === 'list' ? 'product-list' : 'product-grid';
html += ``;
html += activeProducts.map(product => this._renderProductTile(product)).join('');
html += '
';
}
}
// Show inactive products in "Recently Used" section (unless hidden)
if (inactiveProducts.length > 0 && !this._searchQuery && !this._settings.hideCompleted) {
html += `
Recently Used
${this._sortBy === 'category' ?
this._renderProductsByCategory(inactiveProducts, true) :
`
${inactiveProducts.map(product => this._renderProductTile(product)).join('')}
`
}
${this._searchQuery ? 'No products found' : 'No products yet. Search to add your first product!'}
`;
}
contentArea.innerHTML = html;
// Stamp live grid columns onto every .product-grid so the setting
// takes effect immediately without needing a full re-render.
const gridCols = this._settings.productsPerRow === 'auto'
? 'repeat(auto-fill, minmax(120px, 1fr))'
: `repeat(${this._settings.productsPerRow}, 1fr)`;
contentArea.querySelectorAll('.product-grid').forEach(g => {
g.style.gridTemplateColumns = gridCols;
});
this._attachContentListeners();
}
/**
* Render products by category (helper for active/inactive)
*/
_renderProductsByCategory(products, isRecentlyUsed) {
const containerClass = this._settings.layout === 'list' ? 'product-list' : 'product-grid';
const productsByCategory = {};
products.forEach(product => {
const categoryId = product.category || 'other';
if (!productsByCategory[categoryId]) {
productsByCategory[categoryId] = [];
}
productsByCategory[categoryId].push(product);
});
return CATEGORIES
.filter(cat => productsByCategory[cat.id] && productsByCategory[cat.id].length > 0)
.map(cat => {
const categoryProducts = productsByCategory[cat.id];
const headerHtml = this._settings.compactHeaders
? `${cat.name}
`
: `${cat.emoji}${cat.name}
`;
return `
${headerHtml}
`;
}).join('');
}
/**
* Attach listeners that persist (search bar, sort buttons)
*/
_attachPersistentListeners() {
const searchBar = this.shadowRoot.querySelector('.search-bar');
const searchClear = this.shadowRoot.querySelector('.search-clear');
const settingsBtn = this.shadowRoot.querySelector('.settings-btn');
if (searchBar) {
searchBar.addEventListener('input', (e) => {
this._searchQuery = e.target.value;
// โ clear button: show/hide based on text
if (searchClear) {
searchClear.style.display = this._searchQuery.length > 0 ? 'block' : 'none';
}
// Settings/Add button: swap โ๏ธ โ โ based on whether "add new" applies
if (settingsBtn) {
if (this._searchQuery.length > 0 && this._shouldShowAddNew()) {
settingsBtn.textContent = 'โ';
settingsBtn.title = 'Add new product';
} else {
settingsBtn.textContent = 'โ๏ธ';
settingsBtn.title = 'Settings';
}
}
this._updateContent();
});
}
// โ clear search
if (searchClear) {
searchClear.addEventListener('click', () => {
this._searchQuery = '';
searchBar.value = '';
searchClear.style.display = 'none';
if (settingsBtn) { settingsBtn.textContent = 'โ๏ธ'; settingsBtn.title = 'Settings'; }
searchBar.focus();
this._updateContent();
this._hapticFeedback();
});
}
// Settings / Add button (toggles based on search state)
if (settingsBtn) {
settingsBtn.addEventListener('click', () => {
if (settingsBtn.textContent === 'โ') {
this._addNewProduct(this._searchQuery);
} else {
this._showSettings();
}
this._hapticFeedback();
});
}
const sortButtons = this.shadowRoot.querySelectorAll('.control-btn[data-sort]');
sortButtons.forEach(btn => {
btn.addEventListener('click', () => {
this._sortBy = btn.dataset.sort;
// Update button states
sortButtons.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
this._updateContent();
this._hapticFeedback();
});
});
}
/**
* Attach listeners for content area (products, buttons)
*/
_attachContentListeners() {
// Product tiles - add long-press for edit
const tiles = this.shadowRoot.querySelectorAll('.product-tile');
tiles.forEach(tile => {
const key = tile.dataset.key;
let longPressTimer = null;
let longPressTriggered = false;
// Touch events for mobile long-press
tile.addEventListener('touchstart', (e) => {
longPressTriggered = false;
longPressTimer = setTimeout(() => {
longPressTriggered = true;
this._hapticFeedback();
this._editProduct(key);
}, 500); // 500ms long press
}, { passive: true });
tile.addEventListener('touchend', () => {
if (longPressTimer) {
clearTimeout(longPressTimer);
}
});
tile.addEventListener('touchmove', () => {
if (longPressTimer) {
clearTimeout(longPressTimer);
}
}, { passive: true });
// Mouse events for desktop
tile.addEventListener('mousedown', (e) => {
longPressTriggered = false;
longPressTimer = setTimeout(() => {
longPressTriggered = true;
this._editProduct(key);
}, 500);
});
tile.addEventListener('mouseup', () => {
if (longPressTimer) {
clearTimeout(longPressTimer);
}
});
tile.addEventListener('mouseleave', () => {
if (longPressTimer) {
clearTimeout(longPressTimer);
}
});
// Right-click for edit
tile.addEventListener('contextmenu', (e) => {
e.preventDefault();
this._editProduct(key);
});
// Regular click
tile.addEventListener('click', (e) => {
// Don't toggle if it was a long press or clicking buttons
if (!longPressTriggered && !e.target.closest('.qty-button')) {
// Check if click is in bottom 30px area (where buttons would be)
const rect = tile.getBoundingClientRect();
const clickY = e.clientY - rect.top;
const isBottomArea = clickY > (rect.height - 35);
// Only toggle if not clicking in button area
if (!isBottomArea || !isActive) {
this._toggleProduct(key);
}
}
});
});
// Plus buttons
const plusButtons = this.shadowRoot.querySelectorAll('.plus-btn');
plusButtons.forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
this._incrementProduct(btn.dataset.key);
});
});
// Minus buttons
const minusButtons = this.shadowRoot.querySelectorAll('.minus-btn');
minusButtons.forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
this._decrementProduct(btn.dataset.key);
});
});
}
/**
* Render a single product tile
*/
_renderProductTile(product) {
const qty = this._activeList[product.key]?.qty || 0;
const isActive = qty > 0;
const hasImage = product.image && product.image.trim().length > 0;
// Determine if image is URL or emoji
const isUrl = hasImage && (product.image.startsWith('http') || product.image.startsWith('/'));
const displayImage = hasImage ? product.image : '๐';
return `
${categoryProducts.map(product => this._renderProductTile(product)).join('')}
${product.name}
${isUrl ?
`
` :
`
${isActive ? `
${displayImage}
`
}
Tap to add
`}
Hide completed items
Hides the "Recently Used" section showing products not currently on the list.
Compact headers
Show category names only (no emoji)
${this._toYaml()}
` : ''}
`;
// โโ Set values imperatively (reliable with shadow DOM + HA components) โโ
const titleEl = this.shadowRoot.querySelector('#ed-title');
const perrowEl = this.shadowRoot.querySelector('#ed-perrow');
const layoutEl = this.shadowRoot.querySelector('#ed-layout');
const hapticsEl = this.shadowRoot.querySelector('#ed-haptics');
const hideCompletedEl = this.shadowRoot.querySelector('#ed-hide-completed');
const hideHeadersEl = this.shadowRoot.querySelector('#ed-hide-headers');
titleEl.value = title;
perrowEl.value = productsPerRow;
layoutEl.value = layout;
hapticsEl.value = haptics;
hideCompletedEl.checked = hideCompleted;
hideHeadersEl.checked = compactHeaders;
// โโ Single updateConfig closure โ mirrors your working pattern โโ
const updateConfig = () => {
console.log('[Editor] updateConfig called');
this._config = {
...this._config,
title: titleEl.value || 'Shopping List',
products_per_row: perrowEl.value,
layout: layoutEl.value,
haptics: hapticsEl.value,
hide_completed: hideCompletedEl.checked,
compact_headers: hideHeadersEl.checked
};
console.log('[Editor] Dispatching config-changed:', this._config);
this.dispatchEvent(new CustomEvent('config-changed', {
detail: { config: this._config },
bubbles: true,
composed: true
}));
};
titleEl.addEventListener('input', updateConfig);
perrowEl.addEventListener('value-changed', updateConfig);
layoutEl.addEventListener('value-changed', updateConfig);
hapticsEl.addEventListener('value-changed', updateConfig);
hideCompletedEl.addEventListener('checked-changed', updateConfig);
hideHeadersEl.addEventListener('checked-changed', updateConfig);
this.shadowRoot.querySelector('#ed-code-toggle').addEventListener('click', () => {
this._showCodeEditor = !this._showCodeEditor;
this._render();
});
this._rendered = true;
}
_toYaml() {
const lines = ['type: custom:shopping-list-card'];
if (this._config.title) lines.push('title: ' + this._config.title);
if (this._config.products_per_row) lines.push('products_per_row: ' + this._config.products_per_row);
if (this._config.layout) lines.push('layout: ' + this._config.layout);
if (this._config.haptics) lines.push('haptics: ' + this._config.haptics);
if (this._config.hide_completed) lines.push('hide_completed: true');
if (this._config.compact_headers) lines.push('compact_headers: true');
return lines.join('\n');
}
}
customElements.define('shopping-list-card-editor', ShoppingListCardEditor);
customElements.define('shopping-list-card', ShoppingListCard);
window.customCards = window.customCards || [];
window.customCards.push({
type: 'shopping-list-card',
name: 'Shopping List Card',
description: 'A shopping list card with search, categories, and product images.',
preview: false
});