feat: surface meal taxonomy chips

This commit is contained in:
OpenClaw Bot
2026-05-12 23:27:01 +02:00
parent 7b1bf5f249
commit 7d4bb7b4bd
5 changed files with 237 additions and 36 deletions
+21 -5
View File
@@ -94,6 +94,24 @@ function optionHtml(options, selected) {
return options.map(([value, label]) => `<option value="${esc(value)}" ${value === selected ? 'selected' : ''}>${esc(label)}</option>`).join('');
}
function optionLabel(options, value) {
return options.find(([optionValue]) => optionValue === value)?.[1] || value || '';
}
function renderTaxonomyChip(kind, value, label) {
if (!value || !label) return '';
return `<span class="meal-taxonomy-chip meal-taxonomy-chip--${esc(kind)}" data-meal-taxonomy="${esc(kind)}" data-taxonomy-value="${esc(value)}">${esc(label)}</span>`;
}
function renderMealTaxonomyChips(meal) {
return [
meal.meal_category ? renderTaxonomyChip('category', meal.meal_category, optionLabel(MEAL_CATEGORY_OPTIONS, meal.meal_category)) : '',
meal.protein ? renderTaxonomyChip('protein', meal.protein, optionLabel(PROTEIN_OPTIONS, meal.protein)) : '',
meal.style ? renderTaxonomyChip('style', meal.style, optionLabel(STYLE_OPTIONS, meal.style)) : '',
meal.leftover_from_meal_id ? renderTaxonomyChip('leftovers', 'linked', '↻ Rester') : '',
].filter(Boolean).join('');
}
// --------------------------------------------------------
// API-Wrapper
// --------------------------------------------------------
@@ -305,8 +323,7 @@ function renderSlot(date, type, mealsForDay) {
const ingDoneLabel = ingCount > 0 && ingDone === ingCount ? ' ✓' : '';
const canTransfer = ingCount > 0 && ingDone < ingCount;
const cookName = meal.cook_assignment?.cook_name;
const mealCategoryLabel = meal.meal_category ? MEAL_CATEGORY_OPTIONS.find(([value]) => value === meal.meal_category)?.[1] : '';
const leftoverLabel = meal.leftover_from_meal_id ? 'Rester' : '';
const taxonomyChips = renderMealTaxonomyChips(meal);
return `
<div class="meal-slot meal-slot--has-meal" data-meal-id="${meal.id}" data-date="${meal.date}" data-type="${type.key}">
@@ -316,9 +333,8 @@ function renderSlot(date, type, mealsForDay) {
data-meal-id="${meal.id}"
role="button" tabindex="0">
<div class="meal-card__title">${esc(meal.title)}</div>
${(ingLabel || cookName || mealCategoryLabel || leftoverLabel) ? `<div class="meal-card__meta">
${mealCategoryLabel ? `<span class="meal-card__ingredients-count">${esc(mealCategoryLabel)}</span>` : ''}
${leftoverLabel ? `<span class="meal-card__ingredients-count">↻ ${esc(leftoverLabel)}</span>` : ''}
${taxonomyChips ? `<div class="meal-card__taxonomy" aria-label="Meal classification">${taxonomyChips}</div>` : ''}
${(ingLabel || cookName) ? `<div class="meal-card__meta">
${ingLabel ? `<span class="meal-card__ingredients-count">${ingLabel}${esc(ingDoneLabel)}</span>` : ''}
${cookName ? `<span class="meal-card__cook"><i data-lucide="chef-hat" style="width:13px;height:13px;" aria-hidden="true"></i>${esc(cookName)}</span>` : ''}
</div>` : ''}