kaufi/kantinen-wrapper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Replaced inline language selection with a dropdown menu and removed the weekly cost display.

Browse Source
This commit is contained in:
Kantine Wrapper
2026-03-12 10:32:03 +01:00
parent 38b6ad503f
commit a9ec4ff8f6
15 changed files with 235 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/events.js
View File

@@ -120,12 +120,22 @@ export function bindEvents() {
const historyModal = document.getElementById('history-modal');
const btnHistoryClose = document.getElementById('btn-history-close');
const btnLangToggle = document.getElementById('btn-lang-toggle');
const langDropdown = document.getElementById('lang-dropdown');
if (btnLangToggle && langDropdown) {
btnLangToggle.addEventListener('click', (e) => {
e.stopPropagation();
langDropdown.classList.toggle('hidden');
});
}
document.querySelectorAll('.lang-btn').forEach(btn => {
btn.addEventListener('click', () => {
setLangMode(btn.dataset.lang);
localStorage.setItem(LS.LANG, btn.dataset.lang);
document.querySelectorAll('.lang-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
if (langDropdown) langDropdown.classList.add('hidden');
updateUILanguage();
});
});
@@ -159,6 +169,9 @@ export function bindEvents() {
window.addEventListener('click', (e) => {
if (e.target === historyModal) historyModal.classList.add('hidden');
if (e.target === highlightsModal) highlightsModal.classList.add('hidden');
if (langDropdown && !langDropdown.classList.contains('hidden') && !e.target.closest('#lang-toggle')) {
langDropdown.classList.add('hidden');
}
});
const versionTag = document.querySelector('.version-tag');

2
src/i18n.js
View File

@@ -100,7 +100,6 @@ const TRANSLATIONS = {
noMenuDataHint: 'Versuchen Sie eine andere Woche oder schauen Sie später vorbei.',
// Weekly cost
costLabel: 'Gesamt',
// Countdown
orderDeadline: 'Bestellschluss',
@@ -236,7 +235,6 @@ const TRANSLATIONS = {
noMenuDataHint: 'Try another week or check back later.',
// Weekly cost
costLabel: 'Total',
// Countdown
orderDeadline: 'Order deadline',

16
src/ui.js
View File

@@ -54,13 +54,7 @@ export function injectUI() {
</button>
</div>
<div class="header-center-wrapper">
<div id="lang-toggle" class="lang-toggle" title="Sprache der Menübeschreibung">
<button class="lang-btn${langMode === 'de' ? ' active' : ''}" data-lang="de">DE</button>
<button class="lang-btn${langMode === 'en' ? ' active' : ''}" data-lang="en">EN</button>
<button class="lang-btn${langMode === 'all' ? ' active' : ''}" data-lang="all">ALL</button>
</div>
<div id="header-week-info" class="header-week-info"></div>
<div id="weekly-cost-display" class="weekly-cost hidden"></div>
</div>
<div class="controls">
<button id="btn-refresh" class="icon-btn" aria-label="Menüdaten aktualisieren" title="Menüdaten neu laden">
@@ -75,6 +69,16 @@ export function injectUI() {
<button id="theme-toggle" class="icon-btn" aria-label="Toggle Theme" title="Erscheinungsbild (Hell/Dunkel) wechseln">
<span class="material-icons-round theme-icon">light_mode</span>
</button>
<div id="lang-toggle" class="lang-toggle-dropdown" title="Sprache der Menübeschreibung">
<button id="btn-lang-toggle" class="icon-btn" aria-label="Sprache wählen" title="Sprache der Menübeschreibung">
<span class="material-icons-round">translate</span>
</button>
<div id="lang-dropdown" class="lang-dropdown-menu hidden">
<button class="lang-btn${langMode === 'de' ? ' active' : ''}" data-lang="de">🇦🇹 DE</button>
<button class="lang-btn${langMode === 'en' ? ' active' : ''}" data-lang="en">🇬🇧 EN</button>
<button class="lang-btn${langMode === 'all' ? ' active' : ''}" data-lang="all">🌐 ALL</button>
</div>
</div>
<button id="btn-login-open" class="user-badge-btn icon-btn-small" title="Mit Bessa.app Account anmelden">
<span class="material-icons-round">login</span>
<span>Anmelden</span>

25
src/ui_helpers.js
View File

@@ -90,29 +90,6 @@ export function updateNextWeekBadge() {
}
}
export function updateWeeklyCost(days) {
let totalCost = 0;
if (days && days.length > 0) {
days.forEach(day => {
if (day.items) {
day.items.forEach(item => {
const articleId = item.articleId || parseInt(item.id.split('_')[1]);
const key = `${day.date}_${articleId}`;
const orders = orderMap.get(key) || [];
if (orders.length > 0) totalCost += item.price * orders.length;
});
}
});
}
const costDisplay = document.getElementById('weekly-cost-display');
if (totalCost > 0) {
costDisplay.innerHTML = `<span class="material-icons-round">shopping_bag</span> <span>${t('costLabel')}: ${totalCost.toFixed(2).replace('.', ',')} €</span>`;
costDisplay.classList.remove('hidden');
} else {
costDisplay.classList.add('hidden');
}
}
export function renderVisibleWeeks() {
const menuContainer = document.getElementById('menu-container');
@@ -139,11 +116,9 @@ export function renderVisibleWeeks() {
<p>${t('noMenuData')} ${targetWeek} (${targetYear}).</p>
<small>${t('noMenuDataHint')}</small>
</div>`;
document.getElementById('weekly-cost-display').classList.add('hidden');
return;
}
updateWeeklyCost(daysInTargetWeek);
const headerWeekInfo = document.getElementById('header-week-info');
const weekTitle = displayMode === 'this-week' ? t('thisWeek') : t('nextWeek');