openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Unify shopping category localization and limit meal ingredient categories to food-relevant options

Browse Source
This commit is contained in:
Serhiy Bobrov
2026-04-19 19:14:46 +03:00
parent ccb41a056e
commit 819d9e8b1d
3 changed files with 41 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/pages/meals.js
+17 -6
View File
@@ -9,6 +9,7 @@ import { openModal as openSharedModal, closeModal as closeSharedModal, selectMod
import { stagger } from '/utils/ux.js';
import { t, formatDate } from '/i18n.js';
import { esc } from '/utils/html.js';
import { DEFAULT_CATEGORY_NAME, categoryLabel } from '/utils/shopping-categories.js';
// --------------------------------------------------------
// Konstanten
@@ -26,6 +27,8 @@ const DAY_NAMES = () => [
t('meals.dayFr'), t('meals.daySa'), t('meals.daySo'),
];
const EXCLUDED_MEAL_CATEGORY_NAMES = new Set(['Haushalt', 'Drogerie', 'Sonstiges']);
// --------------------------------------------------------
// State
// --------------------------------------------------------
@@ -73,6 +76,10 @@ function formatDayDate(dateStr) {
return formatDate(dateStr);
}
function mealCategories() {
return state.categories.filter((c) => !EXCLUDED_MEAL_CATEGORY_NAMES.has(c.name));
}
// --------------------------------------------------------
// API-Wrapper
// --------------------------------------------------------
@@ -564,7 +571,7 @@ function buildModalContent({ mode, date, mealType, meal }) {
: `<option value="" disabled>${t('meals.noShoppingLists')}</option>`;
const ingRows = isEdit && meal.ingredients?.length
? meal.ingredients.map((ing) => ingredientRowHTML(ing.name, ing.quantity ?? '', ing.id, ing.category ?? 'Sonstiges')).join('')
? meal.ingredients.map((ing) => ingredientRowHTML(ing.name, ing.quantity ?? '', ing.id, ing.category ?? DEFAULT_CATEGORY_NAME)).join('')
: '';
const hasIngOpen = isEdit && meal.ingredients?.some((i) => !i.on_shopping_list);
@@ -630,10 +637,14 @@ function buildModalContent({ mode, date, mealType, meal }) {
</div>`;
}
function ingredientRowHTML(name, qty, id, category = 'Sonstiges') {
const catOptions = state.categories.length
? state.categories.map((c) => `<option value="${esc(c.name)}" ${c.name === category ? 'selected' : ''}>${esc(c.name)}</option>`).join('')
: `<option value="Sonstiges" selected>${t('meals.ingredientCategoryDefault')}</option>`;
function ingredientRowHTML(name, qty, id, category = DEFAULT_CATEGORY_NAME) {
const availableCategories = mealCategories();
const resolvedCategory = availableCategories.some((c) => c.name === category)
? category
: (availableCategories[0]?.name ?? DEFAULT_CATEGORY_NAME);
const catOptions = availableCategories.length
? availableCategories.map((c) => `<option value="${esc(c.name)}" ${c.name === resolvedCategory ? 'selected' : ''}>${esc(categoryLabel(c.name))}</option>`).join('')
: `<option value="${DEFAULT_CATEGORY_NAME}" selected>${t('meals.ingredientCategoryDefault')}</option>`;
return `
<div class="ingredient-row" data-ing-id="${id ?? ''}">
@@ -669,7 +680,7 @@ async function saveModal(overlay) {
overlay.querySelectorAll('.ingredient-row').forEach((row) => {
const name = row.querySelector('.ingredient-row__name').value.trim();
const qty = row.querySelector('.ingredient-row__qty').value.trim() || null;
const category = row.querySelector('.ingredient-row__cat')?.value || 'Sonstiges';
const category = row.querySelector('.ingredient-row__cat')?.value || DEFAULT_CATEGORY_NAME;
if (name) ingredients.push({ name, quantity: qty, category, id: row.dataset.ingId || null });
});
public/pages/shopping.js
+4 -22
View File
@@ -9,6 +9,7 @@ import { stagger, vibrate } from '/utils/ux.js';
import { t } from '/i18n.js';
import { esc } from '/utils/html.js';
import { promptModal, confirmModal } from '/components/modal.js';
import { DEFAULT_CATEGORY_NAME, categoryLabel } from '/utils/shopping-categories.js';
// --------------------------------------------------------
// Konstanten
@@ -19,25 +20,6 @@ const SWIPE_THRESHOLD = 80; // px - Mindestweg für Aktion
const SWIPE_MAX_VERT = 12; // px - vertikaler Toleranzbereich
const SWIPE_LOCK_VERT = 30; // px - ab diesem Weg gilt es als Scroll
// Übersetzungs-Map für die Standard-Kategorien (DB-Name → i18n-Key)
const DEFAULT_CATEGORY_I18N = {
'Obst & Gemüse': 'shopping.catFruitVeg',
'Backwaren': 'shopping.catBakery',
'Milchprodukte': 'shopping.catDairy',
'Fleisch & Fisch': 'shopping.catMeatFish',
'Tiefkühl': 'shopping.catFrozen',
'Getränke': 'shopping.catDrinks',
'Haushalt': 'shopping.catHousehold',
'Drogerie': 'shopping.catDrugstore',
'Sonstiges': 'shopping.catMisc',
};
/** Übersetzten Label für eine Kategorie zurückgeben. */
function catLabel(name) {
const key = DEFAULT_CATEGORY_I18N[name];
return key ? t(key) : name;
}
/** Icon für eine Kategorie (aus state.categories, Fallback 'tag'). */
function catIcon(name) {
return state.categories.find((c) => c.name === name)?.icon ?? 'tag';
@@ -67,7 +49,7 @@ const state = {
function groupItemsByCategory(items) {
const grouped = {};
for (const item of items) {
const cat = item.category || (state.categories[0]?.name ?? 'Sonstiges');
const cat = item.category || (state.categories[0]?.name ?? DEFAULT_CATEGORY_NAME);
(grouped[cat] = grouped[cat] || []).push(item);
}
// In DB-Reihenfolge zurückgeben; unbekannte Kategorien ans Ende
@@ -157,7 +139,7 @@ function renderListContent(container) {
<div class="autocomplete-dropdown" id="autocomplete-dropdown" hidden></div>
</div>
<select class="quick-add__cat" id="item-cat-select" aria-label="${t('shopping.categoryLabel')}">
${state.categories.map((c) => `<option value="${esc(c.name)}">${esc(catLabel(c.name))}</option>`).join('')}
${state.categories.map((c) => `<option value="${esc(c.name)}">${esc(categoryLabel(c.name))}</option>`).join('')}
</select>
<button class="quick-add__btn" type="submit" aria-label="${t('shopping.addItemLabel')}">
<i data-lucide="plus" style="width:20px;height:20px" aria-hidden="true"></i>
@@ -196,7 +178,7 @@ function renderItems() {
<div class="item-category">
<div class="item-category__header">
<i data-lucide="${catIcon(cat)}" class="item-category__icon" aria-hidden="true"></i>
${esc(catLabel(cat))}
${esc(categoryLabel(cat))}
</div>
${items.map(renderItem).join('')}
</div>`).join('');
public/utils/shopping-categories.js
+20
View File
@@ -0,0 +1,20 @@
import { t } from '/i18n.js';
export const DEFAULT_CATEGORY_NAME = 'Sonstiges';
export const DEFAULT_CATEGORY_I18N = {
'Obst & Gemüse': 'shopping.catFruitVeg',
'Backwaren': 'shopping.catBakery',
'Milchprodukte': 'shopping.catDairy',
'Fleisch & Fisch': 'shopping.catMeatFish',
'Tiefkühl': 'shopping.catFrozen',
'Getränke': 'shopping.catDrinks',
'Haushalt': 'shopping.catHousehold',
'Drogerie': 'shopping.catDrugstore',
'Sonstiges': 'shopping.catMisc',
};
export function categoryLabel(name) {
const key = DEFAULT_CATEGORY_I18N[name];
return key ? t(key) : name;
}