Banner: adapt expired icon/color/title to safety level (non-alarmist)

- ok level (long-life/freezer safe): green banner,  icon, 'Scaduto (ancora ok)'
- warning level: amber banner, 👀 icon, 'Scaduto (controlla)'
- danger level: unchanged red 🚫 banner
- Added banner-expired-ok / banner-expired-warning CSS variants
- Added expiry.expired_suffix_ok / expired_suffix_warning i18n keys (IT/EN/DE)
- Updated README and CHANGELOG
This commit is contained in:
dadaloop82
2026-04-30 05:21:50 +00:00
parent 9249a2f936
commit 8359b14931
7 changed files with 57 additions and 7 deletions
+16 -5
View File
@@ -2840,11 +2840,22 @@ function renderBannerItem() {
? t('expiry.expired_today_long')
: t('expiry.expired_ago_long').replace('{n}', item.days_expired);
const safety = getExpiredSafety(item, item.days_expired);
banner.className = safety.level === 'danger'
? 'alert-banner banner-expired banner-expired-danger'
: 'alert-banner banner-expired';
iconEl.textContent = '🚫';
titleEl.textContent = `${item.name}${item.brand ? ' (' + item.brand + ')' : ''} ${t('expiry.expired_suffix')}`;
if (safety.level === 'danger') {
banner.className = 'alert-banner banner-expired banner-expired-danger';
iconEl.textContent = '🚫';
} else if (safety.level === 'warning') {
banner.className = 'alert-banner banner-expired banner-expired-warning';
iconEl.textContent = '👀';
} else {
banner.className = 'alert-banner banner-expired banner-expired-ok';
iconEl.textContent = '✅';
}
const expiredSuffix = safety.level === 'ok'
? t('expiry.expired_suffix_ok')
: safety.level === 'warning'
? t('expiry.expired_suffix_warning')
: t('expiry.expired_suffix');
titleEl.textContent = `${item.name}${item.brand ? ' (' + item.brand + ')' : ''} ${expiredSuffix}`;
const baseDetail = t('dashboard.banner_expired_detail').replace('{when}', daysText).replace('{qty}', qtyDisplay);
detailEl.innerHTML = `${baseDetail} <span class="banner-safety-tip banner-safety-${safety.level}">${safety.icon} ${safety.tip}</span>`;
let btns = '';