Compare commits
32 Commits
b7c3aac921
...
v1.6.5
| Author | SHA1 | Date | |
|---|---|---|---|
|
a5fe50bbf0 | ||
|
|
a98faec51e | ||
|
|
212bf3b015 | ||
|
|
f29ecd4b79 | ||
|
|
1be6e44d7f | ||
|
|
49b0ab17ac | ||
|
|
55e738a554 | ||
|
|
45adfa9d5d | ||
|
|
f5f6dddba3 | ||
|
|
b06f6c3551 | ||
|
|
b66030dce5 | ||
|
|
8e7ec468d4 | ||
|
|
8ce3ae4c92 | ||
|
|
6a70a5a5e8 | ||
|
|
edec109552 | ||
|
|
a7aea2ece3 | ||
|
|
49dc1cc135 | ||
|
|
90f1c0ed04 | ||
|
|
42978c6e7e | ||
|
|
6ad3498bcc | ||
|
|
b44ecb2ccf | ||
|
|
9e161e2907 | ||
|
|
8b15760463 | ||
|
|
4aa67c9cbe | ||
|
|
12c55ef883 | ||
|
|
1e9dd9a3b5 | ||
|
|
db8b2c5629 | ||
|
|
67533875bd | ||
|
|
99809dafb7 | ||
|
|
4cf3e4adc2 | ||
|
|
4fe7950697 | ||
|
|
e162a16550 |
@@ -43,6 +43,7 @@ trigger: always_on
|
||||
- **Visuals**: Generate screenshots/mockups for UI changes.
|
||||
- **Evidence**: Log outputs for verification.
|
||||
3. **Design**: Optimize code for AI readability (context efficiency).
|
||||
4. **Retry on Failure**: When an operation does not finish or does not work as expected, do not try endlessly to fix this. Try a few times and ask the user if no progress can be made.
|
||||
|
||||
## 6. Workspace Scopes
|
||||
- **Browser**: Allowed for documentation and safe browsing. No automated logins without permission.
|
||||
|
||||
@@ -61,6 +61,8 @@ Das System umfasst die Darstellung von Menüplänen in einer Wochenübersicht, d
|
||||
| FR-090 | Die Hauptnavigation (Wochen-Toggles) muss linksbündig neben dem App-Titel positioniert sein. | Niedrig | v1.5.0 |
|
||||
| FR-091 | Ein dynamisches Alarm-Icon im Header muss den Überwachungsstatus geflaggter Menüs anzeigen (Gelb=Überwachung aktiv aber kein Menü verfügbar, Grün=Mindestens ein Menü verfügbar, Versteckt=keine Flags). Der Tooltip muss den Zeitpunkt der letzten Prüfung als relativen String (z.B. "vor 4 Min.") enthalten. | Mittel | v1.5.0 (Update v1.4.10) |
|
||||
| FR-092 | Solange Menüdaten für die Nächste Woche verfügbar sind, aber noch keine Bestellungen getätigt wurden, muss der entsprechende Navigation-Button animiert und farblich (Gelb) hervorgehoben werden. Nach der ersten Bestellung muss die Hervorhebung automatisch erlöschen. Zusätzlich muss beim erstmaligen Erscheinen der Daten ein einmaliger Toast-Hinweis angezeigt werden. | Mittel | v1.6.0 (Update v1.4.21) |
|
||||
| **Sprachfilter** | | | |
|
||||
| FR-120 | Das System muss zweisprachige Menübeschreibungen (Deutsch/Englisch) erkennen und dem Benutzer erlauben, via UI-Toggle zwischen DE, EN und ALL (beide Sprachen) zu wechseln. Die Sprachpräferenz muss persistent gespeichert werden. Allergen-Codes müssen in allen Modi angezeigt werden. | Mittel | v1.6.0 |
|
||||
| **Benutzer-Feedback** | | | |
|
||||
| FR-095 | Alle benutzerrelevanten Aktionen (Bestellung, Stornierung, Fehler) müssen durch nicht-blockierende Benachrichtigungen (Toasts) bestätigt werden. | Mittel | v1.0.1 |
|
||||
| FR-096 | Bei einem Verbindungsfehler muss ein Fehlerdialog mit Fallback-Link zur Originalseite angezeigt werden. | Mittel | v1.0.1 |
|
||||
|
||||
@@ -146,6 +146,19 @@ cat > "$DIST_DIR/install.html" << INSTALLEOF
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Banner Video: plays once, collapses after ending -->
|
||||
<div id="banner-video-wrap" style="width: 100%; max-width: 600px; margin: 0 auto 20px auto; border-radius: 12px; overflow: hidden; pointer-events: none; user-select: none; max-height: 400px; opacity: 1; transition: max-height 0.8s ease-in-out, opacity 0.6s ease-in-out, margin 0.8s ease-in-out;">
|
||||
<video id="banner-video" autoplay muted playsinline disablepictureinpicture style="width: 100%; display: block;" src="https://github.com/TauNeutrino/kantine-overview/raw/main/dist/Arrow_and_fork_fly_away_bd43310bea.mp4"></video>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('banner-video').addEventListener('ended', function() {
|
||||
var w = document.getElementById('banner-video-wrap');
|
||||
w.style.maxHeight = '0';
|
||||
w.style.opacity = '0';
|
||||
w.style.marginBottom = '0';
|
||||
});
|
||||
</script>
|
||||
|
||||
<div style="text-align: center; margin-bottom: 30px;">
|
||||
<h1 style="margin-bottom: 5px; display: flex; align-items: center; justify-content: center; gap: 10px;">
|
||||
<img src="$FAVICON_URL" alt="Logo" style="width: 38px; height: 38px;">
|
||||
@@ -290,26 +303,30 @@ ls -la "$DIST_DIR/"
|
||||
# === 4. Run build-time tests ===
|
||||
echo ""
|
||||
echo "=== Running Logic Tests ==="
|
||||
node "$SCRIPT_DIR/test_logic.js"
|
||||
timeout 15s node "$SCRIPT_DIR/test_logic.js"
|
||||
LOGIC_EXIT=$?
|
||||
if [ $LOGIC_EXIT -ne 0 ]; then
|
||||
echo "❌ Logic tests FAILED! See above for details."
|
||||
echo "❌ Logic tests FAILED or TIMED OUT (Exit: $LOGIC_EXIT)! See above for details."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "=== Running DOM Interaction Tests ==="
|
||||
node "$SCRIPT_DIR/tests/test_dom.js"
|
||||
timeout 15s node "$SCRIPT_DIR/tests/test_dom.js"
|
||||
DOM_EXIT=$?
|
||||
if [ $DOM_EXIT -ne 0 ]; then
|
||||
echo "❌ DOM UI tests FAILED! Regressions detected."
|
||||
echo "❌ DOM UI tests FAILED or TIMED OUT (Exit: $DOM_EXIT)! Regressions detected."
|
||||
# Ensure playwright processes are killed if they leak
|
||||
pkill -f playwright || true
|
||||
pkill -f "node.*test_dom" || true
|
||||
exit 1
|
||||
fi
|
||||
|
||||
|
||||
echo "=== Running Build Tests ==="
|
||||
python3 "$SCRIPT_DIR/test_build.py"
|
||||
timeout 15s python3 "$SCRIPT_DIR/test_build.py"
|
||||
TEST_EXIT=$?
|
||||
if [ $TEST_EXIT -ne 0 ]; then
|
||||
echo "❌ Build tests FAILED! See above for details."
|
||||
echo "❌ Build tests FAILED or TIMED OUT (Exit: $TEST_EXIT)! See above for details."
|
||||
exit 1
|
||||
fi
|
||||
echo "✅ All build tests passed."
|
||||
|
||||
26
changelog.md
26
changelog.md
@@ -1,3 +1,29 @@
|
||||
## v1.6.5 (2026-03-06)
|
||||
- ✨ **Feature**: Das `restaurant_menu` Icon im Header wurde durch das neue `favicon_base.png` Logo ersetzt, passend zur Textgröße skaliert.
|
||||
- 🎨 **Style**: Violette Umrahmung (Bestellt-Markierung) an vergangenen Tagen entfernt, um den Fokus auf aktuelle und zukünftige Bestellungen zu lenken.
|
||||
- 🎨 **Style**: Der Glow-Effekt für am heutigen Tag bestellte Menüs wurde intensiviert.
|
||||
|
||||
## v1.6.4 (2026-03-05)
|
||||
- ✨ **Feature**: Sprach-Lexikon (DE/EN) massiv erweitert um österreichische Begriffe (Nockerl, Fleckerl, Topfen, Mohn, Most etc.) und gängige Tippfehler aus dem Bessa-System (trukey, coffe, oveb etc.).
|
||||
- 🧹 **Cleanup**: Sprach-Lexikon dedupliziert und alphabetisch sortiert für bessere Performance und Wartbarkeit.
|
||||
- 🐛 **Bugfix**: Trennung von zweisprachigen Menüs (`splitLanguage`) verbessert: Erfasst nun auch Schrägstriche ohne Leerzeichen (z.B. `Suppe/Soup`).
|
||||
- 🐛 **Bugfix**: Fehlerhafte Badge-Anzeige korrigiert (Variable `count` vs `orderCount`).
|
||||
|
||||
## v1.6.3 (2026-03-05)
|
||||
- ✨ **Chore**: Slogan im Footer aktualisiert ("Jetzt Bessa Einfach! • Knapp-Kantine Wrapper • 2026 by Kaufis-Kitchen") und Footer-Höhe für mehr Platzierung optimiert.
|
||||
|
||||
## v1.6.2 (2026-03-05)
|
||||
- ✨ **Feature**: Wochentags-Header (Montag, Dienstag etc.) scrollen nun als "Sticky Header" mit und bleiben am oberen Bildschirmrand haften.
|
||||
- Das Layout clippt scrollende Speisen ordentlich darunter weg.
|
||||
- Vollständiges Viewport-Scrolling: Das Layout nutzt nun die ganze Höhe aus (`100dvh`), wodurch Scrollbalken sauber am Rand positioniert sind.
|
||||
- 🐛 **Bugfix**: Probleme mit Bessa's default `overflow` Verhalten behoben, das `position: sticky` auf iOS/WebKit-Browsern blockierte.
|
||||
|
||||
## v1.6.0 (2026-03-04)
|
||||
- ✨ **Feature**: Sprachfilter für zweisprachige Menübeschreibungen. Neuer DE/EN/ALL Toggle im Header ermöglicht das Umschalten zwischen Deutsch, Englisch und dem vollen Originaltext. Allergen-Codes werden in allen Modi angezeigt. Einstellung wird persistent gespeichert.
|
||||
|
||||
## v1.5.1 (2026-03-04)
|
||||
- 🐛 **Bugfix**: Freitagsbestellungen schlugen fehl ("Onlinebestellung sind nicht verfügbar"). Ursache: Der Order-Payload verwendete `preorder: false` und eine falsche Uhrzeit (`T10:00:00.000Z` statt `T10:30:00Z`). Beides wurde anhand der originalen Bessa-API korrigiert.
|
||||
|
||||
## v1.5.0 (2026-02-26)
|
||||
Das große "Quality of Life"-Update! Zusammenfassung aller Features und Fixes seit v1.4.0:
|
||||
|
||||
|
||||
BIN
dist/Arrow_and_fork_fly_away_bd43310bea.mp4
vendored
Executable file
BIN
dist/Arrow_and_fork_fly_away_bd43310bea.mp4
vendored
Executable file
Binary file not shown.
4
dist/bookmarklet-payload.js
vendored
4
dist/bookmarklet-payload.js
vendored
File diff suppressed because one or more lines are too long
2
dist/bookmarklet.txt
vendored
2
dist/bookmarklet.txt
vendored
File diff suppressed because one or more lines are too long
57
dist/install.html
vendored
57
dist/install.html
vendored
File diff suppressed because one or more lines are too long
456
dist/kantine-standalone.html
vendored
456
dist/kantine-standalone.html
vendored
@@ -67,12 +67,22 @@ body {
|
||||
}
|
||||
|
||||
/* Fix scrolling bug: Reset html/body styles from host page */
|
||||
html,
|
||||
/* IMPORTANT: html must NOT have overflow set, or it creates a scroll container that breaks position: sticky */
|
||||
html {
|
||||
height: auto !important;
|
||||
min-height: 100% !important;
|
||||
overflow: visible !important;
|
||||
position: static !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
body {
|
||||
height: auto !important;
|
||||
min-height: 100% !important;
|
||||
overflow-y: auto !important;
|
||||
overflow-x: hidden !important;
|
||||
overflow-x: clip !important;
|
||||
/* clip prevents horizontal overflow without breaking sticky */
|
||||
overflow-y: visible !important;
|
||||
position: static !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
@@ -80,8 +90,7 @@ body {
|
||||
|
||||
/* Header */
|
||||
.app-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
flex-shrink: 0;
|
||||
z-index: 100;
|
||||
backdrop-filter: blur(12px);
|
||||
background-color: var(--header-bg);
|
||||
@@ -164,6 +173,38 @@ body {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Language Toggle (FR-100) */
|
||||
.lang-toggle {
|
||||
display: inline-flex;
|
||||
gap: 0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.lang-btn {
|
||||
padding: 3px 10px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.lang-btn:hover {
|
||||
color: var(--text-primary);
|
||||
background: rgba(100, 116, 139, 0.1);
|
||||
}
|
||||
|
||||
.lang-btn.active {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-group {
|
||||
display: flex;
|
||||
background-color: var(--bg-card);
|
||||
@@ -391,13 +432,21 @@ body {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Container */
|
||||
/* Container - flex column, full width so child scrollbar is at edge */
|
||||
.container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
/* Full width */
|
||||
margin: 2rem auto;
|
||||
padding: 0 2rem;
|
||||
min-height: 80vh;
|
||||
overflow: hidden;
|
||||
padding: 0 0 0 0;
|
||||
/* Only top padding, no horizontal so child fills width */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Add horizontal padding to direct children of container to maintain layout */
|
||||
.container>*:not(.menu-grid) {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
/* Banner */
|
||||
@@ -746,14 +795,17 @@ body {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Menu Grid */
|
||||
/* Menu Grid Container */
|
||||
.menu-grid {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.week-section {
|
||||
margin-bottom: 3rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.week-header {
|
||||
@@ -775,10 +827,25 @@ body {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Full-viewport layout: header + scrollable content + footer */
|
||||
#kantine-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
/* Dynamic viewport height for mobile browsers */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.days-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 0.75rem;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
/* This is the scroll container at the window edge */
|
||||
align-content: start;
|
||||
padding: 0 2rem 2rem 2rem;
|
||||
}
|
||||
|
||||
/* Card */
|
||||
@@ -787,21 +854,33 @@ body {
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: var(--card-shadow);
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
overflow: clip;
|
||||
/* Clips scrolling content behind sticky header */
|
||||
transition: box-shadow 0.2s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Past Day Styling - Target specific elements so ordered items can remain visible */
|
||||
.menu-card.past-day .card-header,
|
||||
/* Past Day Styling - Target specific elements so ordered items can remain visible AND preserve sticky context */
|
||||
/* We MUST apply filter/opacity to children, not the parent .menu-card, or else position: sticky breaks */
|
||||
|
||||
/* Header keeps fully opaque background to hide scrolling items, only grayscales */
|
||||
.menu-card.past-day .card-header {
|
||||
filter: grayscale(0.8);
|
||||
transition: filter 0.3s;
|
||||
}
|
||||
|
||||
/* Items become semi-transparent */
|
||||
.menu-card.past-day .menu-item:not(.ordered) {
|
||||
opacity: 0.6;
|
||||
filter: grayscale(0.8);
|
||||
transition: opacity 0.3s, filter 0.3s;
|
||||
}
|
||||
|
||||
.menu-card.past-day:hover .card-header,
|
||||
.menu-card.past-day:hover .card-header {
|
||||
filter: grayscale(0.4);
|
||||
}
|
||||
|
||||
.menu-card.past-day:hover .menu-item:not(.ordered) {
|
||||
opacity: 0.8;
|
||||
filter: grayscale(0.4);
|
||||
@@ -812,7 +891,6 @@ body {
|
||||
/* No opacity/filter here - fully visible */
|
||||
background: var(--bg-card);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
border: 1px solid #8b5cf6;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin: 0 -1rem 1.5rem -1rem;
|
||||
@@ -822,33 +900,32 @@ body {
|
||||
|
||||
.menu-item.today-ordered {
|
||||
border: 2px solid #8b5cf6;
|
||||
box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
|
||||
box-shadow: 0 0 30px rgba(139, 92, 246, 0.6);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin: 0 -1rem 1.5rem -1rem;
|
||||
background: var(--bg-card);
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
animation: pulse-glow 3s infinite;
|
||||
animation: pulse-glow-strong 3s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-glow {
|
||||
@keyframes pulse-glow-strong {
|
||||
0% {
|
||||
box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
|
||||
box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0 0 25px rgba(139, 92, 246, 0.6);
|
||||
box-shadow: 0 0 40px rgba(139, 92, 246, 0.8);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
|
||||
box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.menu-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
@@ -858,7 +935,23 @@ body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
background-color: rgba(100, 116, 139, 0.05);
|
||||
background-color: var(--bg-card);
|
||||
|
||||
/* Removed border-radius: 12px 12px 0 0;
|
||||
.menu-card's overflow: clip will round the corners initially.
|
||||
When sticky at the top, it will be square and perfectly hide scrolling content! */
|
||||
|
||||
/* Sticky within .container scroll area */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 90;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1.25rem;
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.day-name {
|
||||
@@ -871,13 +964,6 @@ body {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1.25rem;
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
/* Each menu item gets its own row */
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
color: var(--text-secondary);
|
||||
@@ -924,6 +1010,7 @@ body {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 0.75rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.badges {
|
||||
@@ -1005,12 +1092,12 @@ body {
|
||||
|
||||
/* Footer */
|
||||
.app-footer {
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
padding: 0.4rem 2rem;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
font-size: 0.8rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* === Order / Cancel Buttons (inline in status row) === */
|
||||
@@ -1341,17 +1428,20 @@ body {
|
||||
|
||||
/* Day Header Status Colors (User Request) */
|
||||
.card-header.header-violet {
|
||||
background-color: rgba(139, 92, 246, 0.15);
|
||||
background-color: var(--bg-card);
|
||||
background-image: linear-gradient(rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.15));
|
||||
border-bottom: 2px solid #8b5cf6;
|
||||
}
|
||||
|
||||
.card-header.header-green {
|
||||
background-color: rgba(16, 185, 129, 0.15);
|
||||
background-color: var(--bg-card);
|
||||
background-image: linear-gradient(rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.15));
|
||||
border-bottom: 2px solid var(--success-color);
|
||||
}
|
||||
|
||||
.card-header.header-red {
|
||||
background-color: rgba(239, 68, 68, 0.15);
|
||||
background-color: var(--bg-card);
|
||||
background-image: linear-gradient(rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.15));
|
||||
border-bottom: 2px solid var(--error-color);
|
||||
}
|
||||
|
||||
@@ -1984,6 +2074,7 @@ body {
|
||||
let orderMap = new Map();
|
||||
let userFlags = new Set(JSON.parse(localStorage.getItem('kantine_flags') || '[]'));
|
||||
let pollIntervalId = null;
|
||||
let langMode = localStorage.getItem('kantine_lang') || 'de';
|
||||
|
||||
// === API Helpers ===
|
||||
function apiHeaders(token) {
|
||||
@@ -2007,7 +2098,7 @@ body {
|
||||
const favicon = document.createElement('link');
|
||||
favicon.rel = 'icon';
|
||||
favicon.type = 'image/png';
|
||||
favicon.href = 'data:image/png;base64,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';
|
||||
favicon.href = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAKQUlEQVR4nKVXa3RVxRX+9sw5uY/khjwgECAJiCFUQhMSCFZKAYMWBQSDRVsUrcXLy4hg2yA0XgLKqjzEmPAIFIggahFs1YovRCh2iYXQgkQUyiNAgBBCgCQ3955zZnZ/hNRGoau0e635MXtmP8737Zl9hvB/CBGBmQkA/0vJTJg7l/41792b2hhVVrbONYqK9P8UFwClpaV1S05O/tVVnfhfHLU6u1GRRKSioqJeamhoyM/Ozv5eRUXF11eTUBnr1nVrlpJE6LJpMVwkZAQ0uxw4LotEBJGIEG4zytdsHTjkf7zSuMHgAoBOTk7uVVNTMzEhIYErKyuXGoZxl5ORIaiiQgVVaMgZ21qjLEcTswEpQUQAETQY0A7I9MIJBp8BUHmj0JFpmlxVVbVw6O1DPdu3f+xYljU8ISFhFCoqbPZnm0cmTin3KT2VXBGGA2Zt26wsix0rrHUopNkKh1VjUIXAl1u/6D/Lpk0SLYUmAaiuXbsOE1KMmhsIqN6908WkSX4+c+bMEmZ2Y1WFgt9v1kyZUdZe82TDjFAQpEEEBgQIAgwJAWmwEP85gUCgZW3cOAUixuDBxMzy+PHjiyc89BBycgbAcWz53HMLdIeEDqk+n2+6EEJj1Srm4mLXqUlPlMWCF8HjkSAoAQKhhQoCQRAzAFy7BpgJRDp99eqO58lam9TYMKXiyVknYxMS8n0+X8a8+fOVbdvStm3ExsaKuYG5etq0abMfffSBDWvXpJ0DTXd6li3rfxrOeLZsTSAB1gpEktFS+ay0c20EAgGBuXPlzWtW3NLHq5Xl2MGvvd6D499+PetSbe3P5zxTyEldk8g0TXi9XgCgqVOnck5OTvS6l994QVKRvnn54r7VUFttRjI7Dhgg9ngkiEAEJhCEkC1FdT0G2q9cWhKWxqgr7Tr2iGusKalvCI6dYXq+eDL3ztwt773HVSdOUDgURkxsDPr368dkSNw/+t5LGU89Pv7LXmmrbaW6kG07TEJKQRQlxOZGpe7TDCW8HhndHJpyftrMld9Q0AI7p61Y0e2S6cza1bnH9P4nj6R5L587tckbP3iN2zfsNZeZG7WvQkc3BsWgQT9Cu+honD17Fh9u28ZXai+Ih+fM3lWeGLdMgrqQ5TgMIun1UJxtP1UzefoLHVcWT6snKtUMJiHsb1FAQCAgkoSoDztqSL/qox/ZU568MxS29k0IXvxi4YCBSU92TuKFF6pFVv5kDL/jDnRKTMTwu+/CyuUrRGFJMXb16n6PJtGdwiHNgoTwumW8Zc08O3n6C6o433V28vRl8VpPFB432d9E/U7xceDtMm9xjXUwGAqdCQ/MnXbbof2fV1sh14yMbJ65Yxt53W6sTO6BK1WncaW+HjcP6IfnLp7H36uq4PZ6NRMJckUgxrZm1kyZuZQDAQNFRQqBgERRkZO4fGmBacgLJ/1PrLnu8Xtw+fIElCz6qt/G8mBDY4OTvXEdY0GAfSuWMhbN41ePfc3MzJdYc/r63zEWPcve0iU6omSxQsnCYOLS5wuoxZ/xbf8EIPDJJ+7rFuHgTwLGzqFFzuxlL41Y7zb+FCUNTYLEySuXIaVEY3MQW8eMw5CuKch8ZS2+qruAqEgvLNtmm4hKhwy7+Ef/lMMfHfhiGjc1/Y2ICID+9yRaO+G1LiLaObRIR3ftGvfm4qVlbw29ky0p6FD1aTSFw7jS1AQNwutHvoIhJQr63wohJWzbgaUVFab1xtQ+feNy88beimDwebfb1Xr0v5GW4HS9BISUUjdUV8+KbN++S1b3HnrNLRmUn9UPo29OxaTMbMRFelH+9wqMeWcLHknPwBsjxwChZqy/Zyx6Vp3GocNf88i777YBDOvUKfEBAAotV3mbirsW+gIA5eXlpQJoHjNmtFLMes6sAlaNjdwq208eZ2/JIsai+Tzw9fXcYIX5WH0dMzNveGUDb9v2EdfV1SkAWkhx2u/3t2v1fa2AbeA3DIO3bt26sHOXzm6fz8fETGxI1DYHAQCL9n6Gvgmd8Pbo++CKiMBfTlUh59VyCGpxFXYcuFxuXLhwQdx113DVJz29y7p16+ZKKfW1EP93hQSgEhIScpVSY15+uVzV19dLIkL7+PaoOXYMvz2wD79+/10M2bwRtyV2waYRYxBhmDhUV4cBr5bjQH0dms6eQ2paGvbv34/MzExZVlambNt+PCsrK/NaVLQmQADAzPLMmTOLJzw8AcNy74BlO9i+4xPkP+bHkqqjeHr7B2gXH4/9586i78Z1uKdHKjbcPQqCGedDIQz5/QZ4BuagY4cOePX3ryM9PZ0GDLgVI0eOMPbs2fOSyxVxTc4BQBCRiomJ+UVsbGzm/HnzlNZajn9wPHa9/wFKq09gfdUx+EwXHK0hDBOP3NIHYaUxruct2PLAeESYJhrCYTx16CBW7/sreiYmYviIEdBay5LSUhUZGTkoOrrdI0TUBoXWwuAFCxbEXr58ed7sObN1YmJnspXChAcfQv3tgzDjnT8g0uOBZo2m5mbMSc/ArKwcmEKgtq4OMQe/wozkboAQsJpD8O/8GEn+RxHXLga2UuiW0o0KC3+ja2trny8oKIhHywkQrdAbUkpHGGJx95TuTx2sPOiAyDClgcLP/oxnd/8FUS43lFawtMbvRo1ByqEjeHfHTnjcLrDWSEpJwaTH/Hjl+BE89OYmRLk9aAwFMfsHg/DcbYOhlIJmrfpm9pWHDx9excyTHMeRABQBoP79+6fu2bPnwJY3t5h59+YRAHrmsz9j/qc7EeWJhNIKzY4Df6fOeDwtHX2ys7/D5drychz8fDfifnY/Cnd/iihPJBpDQUzMzELZ7cMhhMDH27erYbm5okePHgOPHj36GQBJpmnCcZzNeWPz8ja/sdkBs1n4+ad49tOd8Hm9sGxbhVnTaw88iB9cDuLpeUUQROjYsRNcLhcu1l/EhdpaJKekwD9pEnr1TEPZPw5h8rtvIUqaaGwOitG9vof1d4xAtNvj5D+RL0pLSvcxcw4REXVJ6ZJXXVW95dezCjDizh9jd7SHCz7+kHyRkVCOYiM6iqYmJiH7YgOUaYKY8eWXX+LEieMIhcKIj49DWq9euKn7TbAsC1caG9HOFYFdMV6sPHUSZtjSV5oaRW5qT17Suy99+NZbeHr2HET7fL+sr69fQvHx8e83h0I3BZua1NifjnNX5o3sdvjUKccd4RJhZuFP7bX7/NKSuC0ffNjmFnO5XSAScBwbju18h5JHfnIf47EJ1obDh9O9zLrBkOIx03Np7cQp50yPW7hcrvpBPxw0EsXFxS5mFsxsMLOrQ9mL272vrOaoNcu48+qXCq9GNZhZXt333wx51UYklL1YGlm+gmNWvhgeuGXDrcws9jKbe/fuNQcPHvzdn+IRG5fHdt2wKr/7qpKRV/u5aOmmNyatNgJA6stlw9JXL/v+dffimybRNlLr26Dtvv92fNs3rj5w2ugNtG2LDGbCjh0StbWMceNUm7UblxabTZskKisZRLqNHsA/AQoXyB/6HdQ3AAAAAElFTkSuQmCC';
|
||||
document.head.appendChild(favicon);
|
||||
|
||||
// Inject Google Fonts if not already present
|
||||
@@ -2029,20 +2120,25 @@ body {
|
||||
<header class="app-header">
|
||||
<div class="header-content">
|
||||
<div class="brand">
|
||||
<span class="material-icons-round logo-icon">restaurant_menu</span>
|
||||
<img src="data:image/png;base64,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" alt="Logo" class="logo-img" style="height: 1.2em; width: 1.2em; object-fit: contain;">
|
||||
<div class="header-left">
|
||||
<h1>Kantinen Übersicht <small class="version-tag" style="font-size: 0.6em; opacity: 0.7; font-weight: 400; cursor: pointer;" title="Klick für Versionsmenü">v1.5.0</small></h1>
|
||||
<h1>Kantinen Übersicht <small class="version-tag" style="font-size: 0.6em; opacity: 0.7; font-weight: 400; cursor: pointer;" title="Klick für Versionsmenü">v1.6.4</small></h1>
|
||||
<div id="last-updated-subtitle" class="subtitle"></div>
|
||||
</div>
|
||||
<div class="nav-group" style="margin-left: 1rem;">
|
||||
<button id="btn-this-week" class="nav-btn active">Diese Woche</button>
|
||||
<button id="btn-next-week" class="nav-btn">Nächste Woche</button>
|
||||
<button id="btn-this-week" class="nav-btn active" title="Menü dieser Woche anzeigen">Diese Woche</button>
|
||||
<button id="btn-next-week" class="nav-btn" title="Menü nächster Woche anzeigen">Nächste Woche</button>
|
||||
</div>
|
||||
<button id="alarm-bell" class="icon-btn hidden" aria-label="Benachrichtigungen" title="Keine beobachteten Menüs" style="margin-left: -0.5rem;">
|
||||
<span class="material-icons-round" id="alarm-bell-icon" style="color:var(--text-secondary); transition: color 0.3s;">notifications</span>
|
||||
</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>
|
||||
@@ -2056,17 +2152,17 @@ body {
|
||||
<button id="btn-highlights" class="icon-btn" aria-label="Persönliche Highlights verwalten" title="Persönliche Highlights verwalten">
|
||||
<span class="material-icons-round">label</span>
|
||||
</button>
|
||||
<button id="theme-toggle" class="icon-btn" aria-label="Toggle Theme">
|
||||
<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>
|
||||
<button id="btn-login-open" class="user-badge-btn icon-btn-small">
|
||||
<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>
|
||||
</button>
|
||||
<div id="user-info" class="user-badge hidden">
|
||||
<span class="material-icons-round">person</span>
|
||||
<span id="user-id-display"></span>
|
||||
<button id="btn-logout" class="icon-btn-small" aria-label="Logout">
|
||||
<button id="btn-logout" class="icon-btn-small" aria-label="Logout" title="Von Bessa.app abmelden">
|
||||
<span class="material-icons-round">logout</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -2078,7 +2174,7 @@ body {
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>Login</h2>
|
||||
<button id="btn-login-close" class="icon-btn" aria-label="Close">
|
||||
<button id="btn-login-close" class="icon-btn" aria-label="Close" title="Schließen">
|
||||
<span class="material-icons-round">close</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -2122,7 +2218,7 @@ body {
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>Meine Highlights</h2>
|
||||
<button id="btn-highlights-close" class="icon-btn" aria-label="Close">
|
||||
<button id="btn-highlights-close" class="icon-btn" aria-label="Close" title="Schließen">
|
||||
<span class="material-icons-round">close</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -2131,8 +2227,8 @@ body {
|
||||
Markiere Menüs automatisch, wenn sie diese Schlagwörter enthalten.
|
||||
</p>
|
||||
<div class="input-group">
|
||||
<input type="text" id="tag-input" placeholder="z.B. Schnitzel, Vegetarisch...">
|
||||
<button id="btn-add-tag" class="btn-primary">Hinzufügen</button>
|
||||
<input type="text" id="tag-input" placeholder="z.B. Schnitzel, Vegetarisch..." title="Neues Schlagwort zum Hervorheben eingeben">
|
||||
<button id="btn-add-tag" class="btn-primary" title="Schlagwort zur Liste hinzufügen">Hinzufügen</button>
|
||||
</div>
|
||||
<div id="tags-list"></div>
|
||||
</div>
|
||||
@@ -2143,7 +2239,7 @@ body {
|
||||
<div class="modal-content history-modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>Bestellhistorie</h2>
|
||||
<button id="btn-history-close" class="icon-btn" aria-label="Close">
|
||||
<button id="btn-history-close" class="icon-btn" aria-label="Close" title="Schließen">
|
||||
<span class="material-icons-round">close</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -2167,13 +2263,13 @@ body {
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>📦 Versionen</h2>
|
||||
<button id="btn-version-close" class="icon-btn" aria-label="Close">
|
||||
<button id="btn-version-close" class="icon-btn" aria-label="Close" title="Schließen">
|
||||
<span class="material-icons-round">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div style="margin-bottom: 1rem;">
|
||||
<strong>Aktuell:</strong> <span id="version-current">v1.5.0</span>
|
||||
<strong>Aktuell:</strong> <span id="version-current">v1.6.4</span>
|
||||
</div>
|
||||
<div class="dev-toggle">
|
||||
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
|
||||
@@ -2212,7 +2308,7 @@ body {
|
||||
</main>
|
||||
|
||||
<footer class="app-footer">
|
||||
<p>Bessa Knapp-Kantine Wrapper • <span id="current-year">${new Date().getFullYear()}</span></p>
|
||||
<p>Jetzt Bessa Einfach! • Knapp-Kantine Wrapper • <span id="current-year">${new Date().getFullYear()}</span> by Kaufis-Kitchen</p>
|
||||
</footer>
|
||||
</div>`;
|
||||
}
|
||||
@@ -2241,6 +2337,17 @@ body {
|
||||
const historyModal = document.getElementById('history-modal');
|
||||
const btnHistoryClose = document.getElementById('btn-history-close');
|
||||
|
||||
// Language Toggle
|
||||
document.querySelectorAll('.lang-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
langMode = btn.dataset.lang;
|
||||
localStorage.setItem('kantine_lang', langMode);
|
||||
document.querySelectorAll('.lang-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
renderVisibleWeeks();
|
||||
});
|
||||
});
|
||||
|
||||
if (btnHighlights) {
|
||||
btnHighlights.addEventListener('click', () => {
|
||||
highlightsModal.classList.remove('hidden');
|
||||
@@ -2750,7 +2857,7 @@ body {
|
||||
const monthGroup = yearGroup.months[mKey];
|
||||
|
||||
html += `<div class="history-month-group">
|
||||
<div class="history-month-header" tabindex="0" role="button" aria-expanded="false">
|
||||
<div class="history-month-header" tabindex="0" role="button" aria-expanded="false" title="Klicken, um die Bestellungen für diesen Monat ein-/auszublenden">
|
||||
<div style="display:flex; flex-direction:column; gap:4px;">
|
||||
<span>${monthGroup.name}</span>
|
||||
<div class="history-month-summary">
|
||||
@@ -2861,7 +2968,7 @@ body {
|
||||
venue: VENUE_ID,
|
||||
states: [],
|
||||
order_state: 1,
|
||||
date: `${date}T10:00:00.000Z`,
|
||||
date: `${date}T10:30:00Z`,
|
||||
payment_method: 'payroll',
|
||||
customer: {
|
||||
first_name: userData.first_name,
|
||||
@@ -2869,7 +2976,7 @@ body {
|
||||
email: userData.email,
|
||||
newsletter: false
|
||||
},
|
||||
preorder: false,
|
||||
preorder: true,
|
||||
delivery_fee: 0,
|
||||
cash_box_table_name: null,
|
||||
take_away: false
|
||||
@@ -3196,7 +3303,7 @@ body {
|
||||
highlightTags.forEach(tag => {
|
||||
const badge = document.createElement('span');
|
||||
badge.className = 'tag-badge';
|
||||
badge.innerHTML = `${tag} <span class="tag-remove" data-tag="${tag}">×</span>`;
|
||||
badge.innerHTML = `${tag} <span class="tag-remove" data-tag="${tag}" title="Schlagwort entfernen">×</span>`;
|
||||
list.appendChild(badge);
|
||||
});
|
||||
|
||||
@@ -3242,6 +3349,25 @@ body {
|
||||
updateNextWeekBadge();
|
||||
updateAlarmBell();
|
||||
if (cachedTs) updateLastUpdatedTime(cachedTs);
|
||||
|
||||
// --- TEMP DEBUG LOGGER ---
|
||||
try {
|
||||
const uniqueMenus = new Set();
|
||||
allWeeks.forEach(w => {
|
||||
(w.days || []).forEach(d => {
|
||||
(d.items || []).forEach(item => {
|
||||
let text = (item.description || '').replace(/\s+/g, ' ').trim();
|
||||
if (text && text.includes(' / ')) {
|
||||
uniqueMenus.add(text);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
const res = Array.from(uniqueMenus).join('\n\n');
|
||||
console.log("=== GEFUNDENE MENÜ-TEXTE (" + uniqueMenus.size + ") ===");
|
||||
console.log(res);
|
||||
} catch (e) { }
|
||||
|
||||
console.log('Loaded menu from cache');
|
||||
return true;
|
||||
}
|
||||
@@ -3938,7 +4064,7 @@ body {
|
||||
<div class="badges">${statusBadge}</div>
|
||||
</div>
|
||||
${tagsHtml}
|
||||
<p class="item-desc">${escapeHtml(item.description)}</p>`;
|
||||
<p class="item-desc">${escapeHtml(getLocalizedText(item.description))}</p>`;
|
||||
|
||||
// Event: Order
|
||||
const orderBtn = itemEl.querySelector('.btn-order');
|
||||
@@ -4030,7 +4156,7 @@ body {
|
||||
|
||||
// Periodic update check (runs on init + every hour)
|
||||
async function checkForUpdates() {
|
||||
const currentVersion = 'v1.5.0';
|
||||
const currentVersion = 'v1.6.4';
|
||||
const devMode = localStorage.getItem('kantine_dev_mode') === 'true';
|
||||
|
||||
try {
|
||||
@@ -4071,7 +4197,7 @@ body {
|
||||
const modal = document.getElementById('version-modal');
|
||||
const container = document.getElementById('version-list-container');
|
||||
const devToggle = document.getElementById('dev-mode-toggle');
|
||||
const currentVersion = 'v1.5.0';
|
||||
const currentVersion = 'v1.6.4';
|
||||
|
||||
if (!modal) return;
|
||||
modal.classList.remove('hidden');
|
||||
@@ -4291,6 +4417,208 @@ body {
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// === Language Filter (FR-100) ===
|
||||
// DE stems for fallback language detection
|
||||
const DE_STEMS = [
|
||||
'apfel', 'aubergine', 'auflauf', 'beere', 'blumenkohl', 'bohne', 'braten', 'brokkoli', 'brot', 'brust',
|
||||
'brötchen', 'butter', 'chili', 'dessert', 'dip', 'eier', 'eintopf', 'eis', 'erbse', 'erdbeer',
|
||||
'essig', 'filet', 'fisch', 'fisole', 'fleckerl', 'fleisch', 'flügel', 'frucht', 'für', 'gebraten',
|
||||
'gemüse', 'gewürz', 'gratin', 'grieß', 'gulasch', 'gurke', 'himbeer', 'honig', 'huhn', 'hähnchen',
|
||||
'jambalaya', 'joghurt', 'karotte', 'kartoffel', 'keule', 'kirsch', 'knacker', 'knoblauch', 'knödel', 'kompott',
|
||||
'kraut', 'kräuter', 'kuchen', 'käse', 'kürbis', 'lauch', 'mandel', 'milch', 'mild', 'mit',
|
||||
'mohn', 'most', 'möhre', 'natur', 'nockerl', 'nudel', 'nuss', 'nuß', 'obst', 'oder',
|
||||
'olive', 'paprika', 'pfanne', 'pfannkuchen', 'pfeffer', 'pikant', 'pilz', 'plunder', 'püree', 'ragout',
|
||||
'rahm', 'reis', 'rind', 'sahne', 'salami', 'salat', 'salz', 'sauer', 'scharf', 'schinken',
|
||||
'schnitte', 'schnitzel', 'schoko', 'schupf', 'schwein', 'sellerie', 'senf', 'sosse', 'soße', 'spargel',
|
||||
'spätzle', 'speck', 'spieß', 'spinat', 'steak', 'suppe', 'süß', 'tofu', 'tomate', 'topfen',
|
||||
'torte', 'trüffel', 'und', 'vanille', 'vogerl', 'vom', 'wien', 'wurst', 'zucchini', 'zum',
|
||||
'zur', 'zwiebel', 'öl'
|
||||
];
|
||||
|
||||
const EN_STEMS = [
|
||||
'almond', 'and', 'apple', 'asparagus', 'bacon', 'baked', 'ball', 'bean', 'beef', 'berry',
|
||||
'bread', 'breast', 'broccoli', 'bun', 'butter', 'cabbage', 'cake', 'caper', 'carrot', 'casserole',
|
||||
'cauliflower', 'celery', 'cheese', 'cherry', 'chicken', 'chili', 'choco', 'chocolate', 'cider', 'cilantro',
|
||||
'coffee', 'compote', 'cream', 'cucumber', 'curd', 'danish', 'dessert', 'dip', 'dumpling', 'egg',
|
||||
'eggplant', 'filet', 'fish', 'for', 'fried', 'from', 'fruit', 'garlic', 'goulash', 'gratin',
|
||||
'ham', 'herb', 'honey', 'hot', 'ice', 'jambalaya', 'leek', 'leg', 'mash', 'meat',
|
||||
'mexican', 'mild', 'milk', 'mint', 'mushroom', 'mustard', 'noodle', 'nut', 'oat', 'oil',
|
||||
'olive', 'onion', 'or', 'oven', 'pan', 'pancake', 'pea', 'pepper', 'plain', 'plate',
|
||||
'poppy', 'pork', 'potato', 'pumpkin', 'radish', 'ragout', 'raspberry', 'rice', 'roast', 'roll',
|
||||
'salad', 'salami', 'salt', 'sauce', 'sausage', 'shrimp', 'skewer', 'slice', 'soup', 'sour',
|
||||
'spice', 'spicy', 'spinach', 'steak', 'stew', 'strawberr', 'strawberry', 'strudel', 'sweet', 'tart',
|
||||
'thyme', 'to', 'tofu', 'tomat', 'tomato', 'truffle', 'trukey', 'turkey', 'vanilla', 'vegan',
|
||||
'vegetable', 'vinegar', 'wedge', 'wing', 'with', 'wok', 'yogurt', 'zucchini'
|
||||
];
|
||||
|
||||
/**
|
||||
* Splits bilingual menu text into DE and EN parts.
|
||||
* Pattern per course: [DE] / [EN](ALLERGENS)
|
||||
* Max 3 courses per menu item (sanity check).
|
||||
* @param {string} text - The bilingual description text
|
||||
* @returns {{ de: string, en: string, raw: string }}
|
||||
*/
|
||||
function splitLanguage(text) {
|
||||
if (!text) return { de: '', en: '', raw: '' };
|
||||
|
||||
const raw = text;
|
||||
// Formatting: add • for new lines, using the forgiving regex
|
||||
let formattedRaw = text.replace(/(?:\(|(?:\/|\s|^))([A-Z,]+)\)\s*(?=\S)/g, '($1)\n• ');
|
||||
if (!formattedRaw.startsWith('• ')) {
|
||||
formattedRaw = '• ' + formattedRaw;
|
||||
}
|
||||
|
||||
// Utility to compute DE/EN score for a subset of words
|
||||
function scoreBlock(wordArray) {
|
||||
let de = 0, en = 0;
|
||||
wordArray.forEach(word => {
|
||||
const w = word.toLowerCase().replace(/[^a-zäöüß]/g, '');
|
||||
if (w) {
|
||||
let bestDeMatch = 0;
|
||||
let bestEnMatch = 0;
|
||||
// Full match is better than partial string match
|
||||
if (DE_STEMS.includes(w)) bestDeMatch = w.length;
|
||||
else DE_STEMS.forEach(s => { if (w.includes(s) && s.length > bestDeMatch) bestDeMatch = s.length; });
|
||||
|
||||
if (EN_STEMS.includes(w)) bestEnMatch = w.length;
|
||||
else EN_STEMS.forEach(s => { if (w.includes(s) && s.length > bestEnMatch) bestEnMatch = s.length; });
|
||||
|
||||
if (bestDeMatch > 0) de += (bestDeMatch / w.length);
|
||||
if (bestEnMatch > 0) en += (bestEnMatch / w.length);
|
||||
|
||||
// Capitalized noun heuristic matches German text styles typically
|
||||
if (/^[A-ZÄÖÜ]/.test(word)) {
|
||||
de += 0.5;
|
||||
}
|
||||
}
|
||||
});
|
||||
return { de, en };
|
||||
}
|
||||
|
||||
// Heuristic sliding window to split a fragment containing "EN DE"
|
||||
function heuristicSplitEnDe(fragment) {
|
||||
const words = fragment.trim().split(/\s+/);
|
||||
if (words.length < 2) return { enPart: fragment, nextDe: '' };
|
||||
|
||||
let bestK = -1;
|
||||
let maxScore = -9999;
|
||||
|
||||
for (let k = 1; k < words.length; k++) {
|
||||
const left = words.slice(0, k);
|
||||
const right = words.slice(k);
|
||||
|
||||
const leftScore = scoreBlock(left);
|
||||
const rightScore = scoreBlock(right);
|
||||
|
||||
const rightFirstWord = right[0];
|
||||
let capitalBonus = 0;
|
||||
// Nouns are capitalized in German
|
||||
if (/^[A-ZÄÖÜ]/.test(rightFirstWord)) {
|
||||
capitalBonus = 1.0;
|
||||
}
|
||||
|
||||
const score = (leftScore.en - leftScore.de) + (rightScore.de - rightScore.en) + capitalBonus;
|
||||
|
||||
// Strict condition! The assumed German part must actually look German
|
||||
const rightLooksGerman = (rightScore.de + capitalBonus) > rightScore.en;
|
||||
|
||||
if (rightLooksGerman && score > maxScore) {
|
||||
maxScore = score;
|
||||
bestK = k;
|
||||
}
|
||||
}
|
||||
|
||||
if (bestK !== -1) {
|
||||
return {
|
||||
enPart: words.slice(0, bestK).join(' '),
|
||||
nextDe: words.slice(bestK).join(' ')
|
||||
};
|
||||
}
|
||||
return { enPart: fragment, nextDe: '' };
|
||||
}
|
||||
|
||||
// NEW LOGIC: We no longer split by slash if the slash is part of a missing-parenthesis allergen like /ACGL)
|
||||
const parts = text.split(/\s*\/\s*(?![A-Z,]+\))/);
|
||||
|
||||
// Sanity check: max 3 courses means max 3 slashes → max 4 parts
|
||||
if (parts.length > 4) {
|
||||
return { de: formattedRaw, en: '', raw: formattedRaw };
|
||||
}
|
||||
|
||||
const deParts = [];
|
||||
const enParts = [];
|
||||
|
||||
// Part 0 is ALWAYS German (beginning of the menu item)
|
||||
deParts.push(parts[0].trim());
|
||||
|
||||
// Matches e.g., "(GLM)" OR "/GLM)" OR " GLM)" with trailing spaces
|
||||
const allergenRegex = /(?:\(|(?:\/|\s|^))([A-Z,]+)\)\s*/;
|
||||
|
||||
for (let i = 1; i < parts.length; i++) {
|
||||
const fragment = parts[i].trim();
|
||||
const match = fragment.match(allergenRegex);
|
||||
|
||||
if (match) {
|
||||
const allergenEnd = match.index + match[0].length;
|
||||
const enPart = fragment.substring(0, match.index).trim();
|
||||
const allergenCode = match[1];
|
||||
const nextDe = fragment.substring(allergenEnd).trim();
|
||||
|
||||
enParts.push(enPart + '(' + allergenCode + ')');
|
||||
if (deParts.length > 0) {
|
||||
deParts[deParts.length - 1] = deParts[deParts.length - 1] + '(' + allergenCode + ')';
|
||||
}
|
||||
|
||||
if (nextDe) {
|
||||
deParts.push(nextDe);
|
||||
}
|
||||
} else {
|
||||
// No allergen code found! Need to heuristically split "EN DE"
|
||||
const split = heuristicSplitEnDe(fragment);
|
||||
enParts.push(split.enPart);
|
||||
if (split.nextDe) {
|
||||
deParts.push(split.nextDe);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// FIX FOR SINGLE-LANGUAGE COURSES OR MISSING EN
|
||||
if (parts.length === 1 && enParts.length === 0) {
|
||||
enParts.push(deParts[0]);
|
||||
}
|
||||
|
||||
// Mirror untranslated DE courses to EN (e.g. Dessert)
|
||||
if (deParts.length > enParts.length) {
|
||||
for (let i = enParts.length; i < deParts.length; i++) {
|
||||
enParts.push(deParts[i]);
|
||||
}
|
||||
}
|
||||
|
||||
let deJoined = deParts.join('\n• ');
|
||||
if (deParts.length > 0 && !deJoined.startsWith('• ')) deJoined = '• ' + deJoined;
|
||||
|
||||
let enJoined = enParts.join('\n• ');
|
||||
if (enParts.length > 0 && !enJoined.startsWith('• ')) enJoined = '• ' + enJoined;
|
||||
|
||||
return {
|
||||
de: deJoined,
|
||||
en: enJoined,
|
||||
raw: formattedRaw
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns text filtered by the current language mode.
|
||||
* @param {string} text - The bilingual text
|
||||
* @returns {string}
|
||||
*/
|
||||
function getLocalizedText(text) {
|
||||
if (langMode === 'all') return text || '';
|
||||
const split = splitLanguage(text);
|
||||
if (langMode === 'en') return split.en || split.raw;
|
||||
return split.de || split.raw; // 'de' is default
|
||||
}
|
||||
|
||||
// === Bootstrap ===
|
||||
injectUI();
|
||||
bindEvents();
|
||||
|
||||
BIN
favicon.png
BIN
favicon.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
29
favicon.svg
29
favicon.svg
@@ -1,29 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
|
||||
<!-- Fork (left, with gap to triangle) -->
|
||||
<g transform="translate(2, 10)">
|
||||
<!-- Tines -->
|
||||
<rect x="1" y="0" width="1.8" height="16" rx="0.9" fill="#333"/>
|
||||
<rect x="4.6" y="0" width="1.8" height="16" rx="0.9" fill="#333"/>
|
||||
<rect x="8.2" y="0" width="1.8" height="16" rx="0.9" fill="#333"/>
|
||||
<!-- Connector -->
|
||||
<rect x="1" y="14" width="9" height="3.5" rx="1.5" fill="#333"/>
|
||||
<!-- Handle -->
|
||||
<rect x="3.5" y="16.5" width="4" height="24" rx="2" fill="#333"/>
|
||||
</g>
|
||||
|
||||
<!-- Triangle (center, equilateral aspect ratio ~1:0.866) -->
|
||||
<!-- Equilateral: base=28, height=24.25 => keeps proper ratio -->
|
||||
<polygon points="32,8 47,48 17,48" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
|
||||
|
||||
<!-- Knife (right, with gap to triangle) -->
|
||||
<g transform="translate(50, 10)">
|
||||
<!-- Blade (slight curve) -->
|
||||
<path d="M3,0 C3,0 3,0 3,0 L3,17 L10,14 C10,6 7,0 3,0 Z" fill="#333"/>
|
||||
<!-- Spine -->
|
||||
<rect x="1.5" y="0" width="2" height="18" rx="1" fill="#333"/>
|
||||
<!-- Bolster -->
|
||||
<rect x="1.5" y="16.5" width="8.5" height="3.5" rx="1.2" fill="#333"/>
|
||||
<!-- Handle -->
|
||||
<rect x="3.5" y="19" width="4" height="22" rx="2" fill="#333"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB |
BIN
favicon_base.png
BIN
favicon_base.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 MiB After Width: | Height: | Size: 2.0 MiB |
274
kantine.js
274
kantine.js
@@ -34,6 +34,7 @@
|
||||
let orderMap = new Map();
|
||||
let userFlags = new Set(JSON.parse(localStorage.getItem('kantine_flags') || '[]'));
|
||||
let pollIntervalId = null;
|
||||
let langMode = localStorage.getItem('kantine_lang') || 'de';
|
||||
|
||||
// === API Helpers ===
|
||||
function apiHeaders(token) {
|
||||
@@ -79,20 +80,25 @@
|
||||
<header class="app-header">
|
||||
<div class="header-content">
|
||||
<div class="brand">
|
||||
<span class="material-icons-round logo-icon">restaurant_menu</span>
|
||||
<img src="{{FAVICON_DATA_URI}}" alt="Logo" class="logo-img" style="height: 1.2em; width: 1.2em; object-fit: contain;">
|
||||
<div class="header-left">
|
||||
<h1>Kantinen Übersicht <small class="version-tag" style="font-size: 0.6em; opacity: 0.7; font-weight: 400; cursor: pointer;" title="Klick für Versionsmenü">{{VERSION}}</small></h1>
|
||||
<div id="last-updated-subtitle" class="subtitle"></div>
|
||||
</div>
|
||||
<div class="nav-group" style="margin-left: 1rem;">
|
||||
<button id="btn-this-week" class="nav-btn active">Diese Woche</button>
|
||||
<button id="btn-next-week" class="nav-btn">Nächste Woche</button>
|
||||
<button id="btn-this-week" class="nav-btn active" title="Menü dieser Woche anzeigen">Diese Woche</button>
|
||||
<button id="btn-next-week" class="nav-btn" title="Menü nächster Woche anzeigen">Nächste Woche</button>
|
||||
</div>
|
||||
<button id="alarm-bell" class="icon-btn hidden" aria-label="Benachrichtigungen" title="Keine beobachteten Menüs" style="margin-left: -0.5rem;">
|
||||
<span class="material-icons-round" id="alarm-bell-icon" style="color:var(--text-secondary); transition: color 0.3s;">notifications</span>
|
||||
</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>
|
||||
@@ -106,17 +112,17 @@
|
||||
<button id="btn-highlights" class="icon-btn" aria-label="Persönliche Highlights verwalten" title="Persönliche Highlights verwalten">
|
||||
<span class="material-icons-round">label</span>
|
||||
</button>
|
||||
<button id="theme-toggle" class="icon-btn" aria-label="Toggle Theme">
|
||||
<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>
|
||||
<button id="btn-login-open" class="user-badge-btn icon-btn-small">
|
||||
<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>
|
||||
</button>
|
||||
<div id="user-info" class="user-badge hidden">
|
||||
<span class="material-icons-round">person</span>
|
||||
<span id="user-id-display"></span>
|
||||
<button id="btn-logout" class="icon-btn-small" aria-label="Logout">
|
||||
<button id="btn-logout" class="icon-btn-small" aria-label="Logout" title="Von Bessa.app abmelden">
|
||||
<span class="material-icons-round">logout</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -128,7 +134,7 @@
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>Login</h2>
|
||||
<button id="btn-login-close" class="icon-btn" aria-label="Close">
|
||||
<button id="btn-login-close" class="icon-btn" aria-label="Close" title="Schließen">
|
||||
<span class="material-icons-round">close</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -172,7 +178,7 @@
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>Meine Highlights</h2>
|
||||
<button id="btn-highlights-close" class="icon-btn" aria-label="Close">
|
||||
<button id="btn-highlights-close" class="icon-btn" aria-label="Close" title="Schließen">
|
||||
<span class="material-icons-round">close</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -181,8 +187,8 @@
|
||||
Markiere Menüs automatisch, wenn sie diese Schlagwörter enthalten.
|
||||
</p>
|
||||
<div class="input-group">
|
||||
<input type="text" id="tag-input" placeholder="z.B. Schnitzel, Vegetarisch...">
|
||||
<button id="btn-add-tag" class="btn-primary">Hinzufügen</button>
|
||||
<input type="text" id="tag-input" placeholder="z.B. Schnitzel, Vegetarisch..." title="Neues Schlagwort zum Hervorheben eingeben">
|
||||
<button id="btn-add-tag" class="btn-primary" title="Schlagwort zur Liste hinzufügen">Hinzufügen</button>
|
||||
</div>
|
||||
<div id="tags-list"></div>
|
||||
</div>
|
||||
@@ -193,7 +199,7 @@
|
||||
<div class="modal-content history-modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>Bestellhistorie</h2>
|
||||
<button id="btn-history-close" class="icon-btn" aria-label="Close">
|
||||
<button id="btn-history-close" class="icon-btn" aria-label="Close" title="Schließen">
|
||||
<span class="material-icons-round">close</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -217,7 +223,7 @@
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>📦 Versionen</h2>
|
||||
<button id="btn-version-close" class="icon-btn" aria-label="Close">
|
||||
<button id="btn-version-close" class="icon-btn" aria-label="Close" title="Schließen">
|
||||
<span class="material-icons-round">close</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -262,7 +268,7 @@
|
||||
</main>
|
||||
|
||||
<footer class="app-footer">
|
||||
<p>Bessa Knapp-Kantine Wrapper • <span id="current-year">${new Date().getFullYear()}</span></p>
|
||||
<p>Jetzt Bessa Einfach! • Knapp-Kantine Wrapper • <span id="current-year">${new Date().getFullYear()}</span> by Kaufis-Kitchen</p>
|
||||
</footer>
|
||||
</div>`;
|
||||
}
|
||||
@@ -291,6 +297,17 @@
|
||||
const historyModal = document.getElementById('history-modal');
|
||||
const btnHistoryClose = document.getElementById('btn-history-close');
|
||||
|
||||
// Language Toggle
|
||||
document.querySelectorAll('.lang-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
langMode = btn.dataset.lang;
|
||||
localStorage.setItem('kantine_lang', langMode);
|
||||
document.querySelectorAll('.lang-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
renderVisibleWeeks();
|
||||
});
|
||||
});
|
||||
|
||||
if (btnHighlights) {
|
||||
btnHighlights.addEventListener('click', () => {
|
||||
highlightsModal.classList.remove('hidden');
|
||||
@@ -800,7 +817,7 @@
|
||||
const monthGroup = yearGroup.months[mKey];
|
||||
|
||||
html += `<div class="history-month-group">
|
||||
<div class="history-month-header" tabindex="0" role="button" aria-expanded="false">
|
||||
<div class="history-month-header" tabindex="0" role="button" aria-expanded="false" title="Klicken, um die Bestellungen für diesen Monat ein-/auszublenden">
|
||||
<div style="display:flex; flex-direction:column; gap:4px;">
|
||||
<span>${monthGroup.name}</span>
|
||||
<div class="history-month-summary">
|
||||
@@ -911,7 +928,7 @@
|
||||
venue: VENUE_ID,
|
||||
states: [],
|
||||
order_state: 1,
|
||||
date: `${date}T10:00:00.000Z`,
|
||||
date: `${date}T10:30:00Z`,
|
||||
payment_method: 'payroll',
|
||||
customer: {
|
||||
first_name: userData.first_name,
|
||||
@@ -919,7 +936,7 @@
|
||||
email: userData.email,
|
||||
newsletter: false
|
||||
},
|
||||
preorder: false,
|
||||
preorder: true,
|
||||
delivery_fee: 0,
|
||||
cash_box_table_name: null,
|
||||
take_away: false
|
||||
@@ -1246,7 +1263,7 @@
|
||||
highlightTags.forEach(tag => {
|
||||
const badge = document.createElement('span');
|
||||
badge.className = 'tag-badge';
|
||||
badge.innerHTML = `${tag} <span class="tag-remove" data-tag="${tag}">×</span>`;
|
||||
badge.innerHTML = `${tag} <span class="tag-remove" data-tag="${tag}" title="Schlagwort entfernen">×</span>`;
|
||||
list.appendChild(badge);
|
||||
});
|
||||
|
||||
@@ -1292,6 +1309,25 @@
|
||||
updateNextWeekBadge();
|
||||
updateAlarmBell();
|
||||
if (cachedTs) updateLastUpdatedTime(cachedTs);
|
||||
|
||||
// --- TEMP DEBUG LOGGER ---
|
||||
try {
|
||||
const uniqueMenus = new Set();
|
||||
allWeeks.forEach(w => {
|
||||
(w.days || []).forEach(d => {
|
||||
(d.items || []).forEach(item => {
|
||||
let text = (item.description || '').replace(/\s+/g, ' ').trim();
|
||||
if (text && text.includes(' / ')) {
|
||||
uniqueMenus.add(text);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
const res = Array.from(uniqueMenus).join('\n\n');
|
||||
console.log("=== GEFUNDENE MENÜ-TEXTE (" + uniqueMenus.size + ") ===");
|
||||
console.log(res);
|
||||
} catch (e) { }
|
||||
|
||||
console.log('Loaded menu from cache');
|
||||
return true;
|
||||
}
|
||||
@@ -1988,7 +2024,7 @@
|
||||
<div class="badges">${statusBadge}</div>
|
||||
</div>
|
||||
${tagsHtml}
|
||||
<p class="item-desc">${escapeHtml(item.description)}</p>`;
|
||||
<p class="item-desc">${escapeHtml(getLocalizedText(item.description))}</p>`;
|
||||
|
||||
// Event: Order
|
||||
const orderBtn = itemEl.querySelector('.btn-order');
|
||||
@@ -2341,6 +2377,208 @@
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// === Language Filter (FR-100) ===
|
||||
// DE stems for fallback language detection
|
||||
const DE_STEMS = [
|
||||
'apfel', 'aubergine', 'auflauf', 'beere', 'blumenkohl', 'bohne', 'braten', 'brokkoli', 'brot', 'brust',
|
||||
'brötchen', 'butter', 'chili', 'dessert', 'dip', 'eier', 'eintopf', 'eis', 'erbse', 'erdbeer',
|
||||
'essig', 'filet', 'fisch', 'fisole', 'fleckerl', 'fleisch', 'flügel', 'frucht', 'für', 'gebraten',
|
||||
'gemüse', 'gewürz', 'gratin', 'grieß', 'gulasch', 'gurke', 'himbeer', 'honig', 'huhn', 'hähnchen',
|
||||
'jambalaya', 'joghurt', 'karotte', 'kartoffel', 'keule', 'kirsch', 'knacker', 'knoblauch', 'knödel', 'kompott',
|
||||
'kraut', 'kräuter', 'kuchen', 'käse', 'kürbis', 'lauch', 'mandel', 'milch', 'mild', 'mit',
|
||||
'mohn', 'most', 'möhre', 'natur', 'nockerl', 'nudel', 'nuss', 'nuß', 'obst', 'oder',
|
||||
'olive', 'paprika', 'pfanne', 'pfannkuchen', 'pfeffer', 'pikant', 'pilz', 'plunder', 'püree', 'ragout',
|
||||
'rahm', 'reis', 'rind', 'sahne', 'salami', 'salat', 'salz', 'sauer', 'scharf', 'schinken',
|
||||
'schnitte', 'schnitzel', 'schoko', 'schupf', 'schwein', 'sellerie', 'senf', 'sosse', 'soße', 'spargel',
|
||||
'spätzle', 'speck', 'spieß', 'spinat', 'steak', 'suppe', 'süß', 'tofu', 'tomate', 'topfen',
|
||||
'torte', 'trüffel', 'und', 'vanille', 'vogerl', 'vom', 'wien', 'wurst', 'zucchini', 'zum',
|
||||
'zur', 'zwiebel', 'öl'
|
||||
];
|
||||
|
||||
const EN_STEMS = [
|
||||
'almond', 'and', 'apple', 'asparagus', 'bacon', 'baked', 'ball', 'bean', 'beef', 'berry',
|
||||
'bread', 'breast', 'broccoli', 'bun', 'butter', 'cabbage', 'cake', 'caper', 'carrot', 'casserole',
|
||||
'cauliflower', 'celery', 'cheese', 'cherry', 'chicken', 'chili', 'choco', 'chocolate', 'cider', 'cilantro',
|
||||
'coffee', 'compote', 'cream', 'cucumber', 'curd', 'danish', 'dessert', 'dip', 'dumpling', 'egg',
|
||||
'eggplant', 'filet', 'fish', 'for', 'fried', 'from', 'fruit', 'garlic', 'goulash', 'gratin',
|
||||
'ham', 'herb', 'honey', 'hot', 'ice', 'jambalaya', 'leek', 'leg', 'mash', 'meat',
|
||||
'mexican', 'mild', 'milk', 'mint', 'mushroom', 'mustard', 'noodle', 'nut', 'oat', 'oil',
|
||||
'olive', 'onion', 'or', 'oven', 'pan', 'pancake', 'pea', 'pepper', 'plain', 'plate',
|
||||
'poppy', 'pork', 'potato', 'pumpkin', 'radish', 'ragout', 'raspberry', 'rice', 'roast', 'roll',
|
||||
'salad', 'salami', 'salt', 'sauce', 'sausage', 'shrimp', 'skewer', 'slice', 'soup', 'sour',
|
||||
'spice', 'spicy', 'spinach', 'steak', 'stew', 'strawberr', 'strawberry', 'strudel', 'sweet', 'tart',
|
||||
'thyme', 'to', 'tofu', 'tomat', 'tomato', 'truffle', 'trukey', 'turkey', 'vanilla', 'vegan',
|
||||
'vegetable', 'vinegar', 'wedge', 'wing', 'with', 'wok', 'yogurt', 'zucchini'
|
||||
];
|
||||
|
||||
/**
|
||||
* Splits bilingual menu text into DE and EN parts.
|
||||
* Pattern per course: [DE] / [EN](ALLERGENS)
|
||||
* Max 3 courses per menu item (sanity check).
|
||||
* @param {string} text - The bilingual description text
|
||||
* @returns {{ de: string, en: string, raw: string }}
|
||||
*/
|
||||
function splitLanguage(text) {
|
||||
if (!text) return { de: '', en: '', raw: '' };
|
||||
|
||||
const raw = text;
|
||||
// Formatting: add • for new lines, using the forgiving regex
|
||||
let formattedRaw = text.replace(/(?:\(|(?:\/|\s|^))([A-Z,]+)\)\s*(?=\S)/g, '($1)\n• ');
|
||||
if (!formattedRaw.startsWith('• ')) {
|
||||
formattedRaw = '• ' + formattedRaw;
|
||||
}
|
||||
|
||||
// Utility to compute DE/EN score for a subset of words
|
||||
function scoreBlock(wordArray) {
|
||||
let de = 0, en = 0;
|
||||
wordArray.forEach(word => {
|
||||
const w = word.toLowerCase().replace(/[^a-zäöüß]/g, '');
|
||||
if (w) {
|
||||
let bestDeMatch = 0;
|
||||
let bestEnMatch = 0;
|
||||
// Full match is better than partial string match
|
||||
if (DE_STEMS.includes(w)) bestDeMatch = w.length;
|
||||
else DE_STEMS.forEach(s => { if (w.includes(s) && s.length > bestDeMatch) bestDeMatch = s.length; });
|
||||
|
||||
if (EN_STEMS.includes(w)) bestEnMatch = w.length;
|
||||
else EN_STEMS.forEach(s => { if (w.includes(s) && s.length > bestEnMatch) bestEnMatch = s.length; });
|
||||
|
||||
if (bestDeMatch > 0) de += (bestDeMatch / w.length);
|
||||
if (bestEnMatch > 0) en += (bestEnMatch / w.length);
|
||||
|
||||
// Capitalized noun heuristic matches German text styles typically
|
||||
if (/^[A-ZÄÖÜ]/.test(word)) {
|
||||
de += 0.5;
|
||||
}
|
||||
}
|
||||
});
|
||||
return { de, en };
|
||||
}
|
||||
|
||||
// Heuristic sliding window to split a fragment containing "EN DE"
|
||||
function heuristicSplitEnDe(fragment) {
|
||||
const words = fragment.trim().split(/\s+/);
|
||||
if (words.length < 2) return { enPart: fragment, nextDe: '' };
|
||||
|
||||
let bestK = -1;
|
||||
let maxScore = -9999;
|
||||
|
||||
for (let k = 1; k < words.length; k++) {
|
||||
const left = words.slice(0, k);
|
||||
const right = words.slice(k);
|
||||
|
||||
const leftScore = scoreBlock(left);
|
||||
const rightScore = scoreBlock(right);
|
||||
|
||||
const rightFirstWord = right[0];
|
||||
let capitalBonus = 0;
|
||||
// Nouns are capitalized in German
|
||||
if (/^[A-ZÄÖÜ]/.test(rightFirstWord)) {
|
||||
capitalBonus = 1.0;
|
||||
}
|
||||
|
||||
const score = (leftScore.en - leftScore.de) + (rightScore.de - rightScore.en) + capitalBonus;
|
||||
|
||||
// Strict condition! The assumed German part must actually look German
|
||||
const rightLooksGerman = (rightScore.de + capitalBonus) > rightScore.en;
|
||||
|
||||
if (rightLooksGerman && score > maxScore) {
|
||||
maxScore = score;
|
||||
bestK = k;
|
||||
}
|
||||
}
|
||||
|
||||
if (bestK !== -1) {
|
||||
return {
|
||||
enPart: words.slice(0, bestK).join(' '),
|
||||
nextDe: words.slice(bestK).join(' ')
|
||||
};
|
||||
}
|
||||
return { enPart: fragment, nextDe: '' };
|
||||
}
|
||||
|
||||
// NEW LOGIC: We no longer split by slash if the slash is part of a missing-parenthesis allergen like /ACGL)
|
||||
const parts = text.split(/\s*\/\s*(?![A-Z,]+\))/);
|
||||
|
||||
// Sanity check: max 3 courses means max 3 slashes → max 4 parts
|
||||
if (parts.length > 4) {
|
||||
return { de: formattedRaw, en: '', raw: formattedRaw };
|
||||
}
|
||||
|
||||
const deParts = [];
|
||||
const enParts = [];
|
||||
|
||||
// Part 0 is ALWAYS German (beginning of the menu item)
|
||||
deParts.push(parts[0].trim());
|
||||
|
||||
// Matches e.g., "(GLM)" OR "/GLM)" OR " GLM)" with trailing spaces
|
||||
const allergenRegex = /(?:\(|(?:\/|\s|^))([A-Z,]+)\)\s*/;
|
||||
|
||||
for (let i = 1; i < parts.length; i++) {
|
||||
const fragment = parts[i].trim();
|
||||
const match = fragment.match(allergenRegex);
|
||||
|
||||
if (match) {
|
||||
const allergenEnd = match.index + match[0].length;
|
||||
const enPart = fragment.substring(0, match.index).trim();
|
||||
const allergenCode = match[1];
|
||||
const nextDe = fragment.substring(allergenEnd).trim();
|
||||
|
||||
enParts.push(enPart + '(' + allergenCode + ')');
|
||||
if (deParts.length > 0) {
|
||||
deParts[deParts.length - 1] = deParts[deParts.length - 1] + '(' + allergenCode + ')';
|
||||
}
|
||||
|
||||
if (nextDe) {
|
||||
deParts.push(nextDe);
|
||||
}
|
||||
} else {
|
||||
// No allergen code found! Need to heuristically split "EN DE"
|
||||
const split = heuristicSplitEnDe(fragment);
|
||||
enParts.push(split.enPart);
|
||||
if (split.nextDe) {
|
||||
deParts.push(split.nextDe);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// FIX FOR SINGLE-LANGUAGE COURSES OR MISSING EN
|
||||
if (parts.length === 1 && enParts.length === 0) {
|
||||
enParts.push(deParts[0]);
|
||||
}
|
||||
|
||||
// Mirror untranslated DE courses to EN (e.g. Dessert)
|
||||
if (deParts.length > enParts.length) {
|
||||
for (let i = enParts.length; i < deParts.length; i++) {
|
||||
enParts.push(deParts[i]);
|
||||
}
|
||||
}
|
||||
|
||||
let deJoined = deParts.join('\n• ');
|
||||
if (deParts.length > 0 && !deJoined.startsWith('• ')) deJoined = '• ' + deJoined;
|
||||
|
||||
let enJoined = enParts.join('\n• ');
|
||||
if (enParts.length > 0 && !enJoined.startsWith('• ')) enJoined = '• ' + enJoined;
|
||||
|
||||
return {
|
||||
de: deJoined,
|
||||
en: enJoined,
|
||||
raw: formattedRaw
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns text filtered by the current language mode.
|
||||
* @param {string} text - The bilingual text
|
||||
* @returns {string}
|
||||
*/
|
||||
function getLocalizedText(text) {
|
||||
if (langMode === 'all') return text || '';
|
||||
const split = splitLanguage(text);
|
||||
if (langMode === 'en') return split.en || split.raw;
|
||||
return split.de || split.raw; // 'de' is default
|
||||
}
|
||||
|
||||
// === Bootstrap ===
|
||||
injectUI();
|
||||
bindEvents();
|
||||
|
||||
172
style.css
172
style.css
@@ -56,12 +56,22 @@ body {
|
||||
}
|
||||
|
||||
/* Fix scrolling bug: Reset html/body styles from host page */
|
||||
html,
|
||||
/* IMPORTANT: html must NOT have overflow set, or it creates a scroll container that breaks position: sticky */
|
||||
html {
|
||||
height: auto !important;
|
||||
min-height: 100% !important;
|
||||
overflow: visible !important;
|
||||
position: static !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
body {
|
||||
height: auto !important;
|
||||
min-height: 100% !important;
|
||||
overflow-y: auto !important;
|
||||
overflow-x: hidden !important;
|
||||
overflow-x: clip !important;
|
||||
/* clip prevents horizontal overflow without breaking sticky */
|
||||
overflow-y: visible !important;
|
||||
position: static !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
@@ -69,8 +79,7 @@ body {
|
||||
|
||||
/* Header */
|
||||
.app-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
flex-shrink: 0;
|
||||
z-index: 100;
|
||||
backdrop-filter: blur(12px);
|
||||
background-color: var(--header-bg);
|
||||
@@ -153,6 +162,38 @@ body {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Language Toggle (FR-100) */
|
||||
.lang-toggle {
|
||||
display: inline-flex;
|
||||
gap: 0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.lang-btn {
|
||||
padding: 3px 10px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.lang-btn:hover {
|
||||
color: var(--text-primary);
|
||||
background: rgba(100, 116, 139, 0.1);
|
||||
}
|
||||
|
||||
.lang-btn.active {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-group {
|
||||
display: flex;
|
||||
background-color: var(--bg-card);
|
||||
@@ -380,13 +421,21 @@ body {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Container */
|
||||
/* Container - flex column, full width so child scrollbar is at edge */
|
||||
.container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
/* Full width */
|
||||
margin: 2rem auto;
|
||||
padding: 0 2rem;
|
||||
min-height: 80vh;
|
||||
overflow: hidden;
|
||||
padding: 0 0 0 0;
|
||||
/* Only top padding, no horizontal so child fills width */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Add horizontal padding to direct children of container to maintain layout */
|
||||
.container>*:not(.menu-grid) {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
/* Banner */
|
||||
@@ -735,14 +784,17 @@ body {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Menu Grid */
|
||||
/* Menu Grid Container */
|
||||
.menu-grid {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.week-section {
|
||||
margin-bottom: 3rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.week-header {
|
||||
@@ -764,10 +816,25 @@ body {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Full-viewport layout: header + scrollable content + footer */
|
||||
#kantine-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
/* Dynamic viewport height for mobile browsers */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.days-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 0.75rem;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
/* This is the scroll container at the window edge */
|
||||
align-content: start;
|
||||
padding: 0 2rem 2rem 2rem;
|
||||
}
|
||||
|
||||
/* Card */
|
||||
@@ -776,21 +843,33 @@ body {
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: var(--card-shadow);
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
overflow: clip;
|
||||
/* Clips scrolling content behind sticky header */
|
||||
transition: box-shadow 0.2s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Past Day Styling - Target specific elements so ordered items can remain visible */
|
||||
.menu-card.past-day .card-header,
|
||||
/* Past Day Styling - Target specific elements so ordered items can remain visible AND preserve sticky context */
|
||||
/* We MUST apply filter/opacity to children, not the parent .menu-card, or else position: sticky breaks */
|
||||
|
||||
/* Header keeps fully opaque background to hide scrolling items, only grayscales */
|
||||
.menu-card.past-day .card-header {
|
||||
filter: grayscale(0.8);
|
||||
transition: filter 0.3s;
|
||||
}
|
||||
|
||||
/* Items become semi-transparent */
|
||||
.menu-card.past-day .menu-item:not(.ordered) {
|
||||
opacity: 0.6;
|
||||
filter: grayscale(0.8);
|
||||
transition: opacity 0.3s, filter 0.3s;
|
||||
}
|
||||
|
||||
.menu-card.past-day:hover .card-header,
|
||||
.menu-card.past-day:hover .card-header {
|
||||
filter: grayscale(0.4);
|
||||
}
|
||||
|
||||
.menu-card.past-day:hover .menu-item:not(.ordered) {
|
||||
opacity: 0.8;
|
||||
filter: grayscale(0.4);
|
||||
@@ -801,7 +880,6 @@ body {
|
||||
/* No opacity/filter here - fully visible */
|
||||
background: var(--bg-card);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
border: 1px solid #8b5cf6;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin: 0 -1rem 1.5rem -1rem;
|
||||
@@ -811,33 +889,32 @@ body {
|
||||
|
||||
.menu-item.today-ordered {
|
||||
border: 2px solid #8b5cf6;
|
||||
box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
|
||||
box-shadow: 0 0 30px rgba(139, 92, 246, 0.6);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin: 0 -1rem 1.5rem -1rem;
|
||||
background: var(--bg-card);
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
animation: pulse-glow 3s infinite;
|
||||
animation: pulse-glow-strong 3s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-glow {
|
||||
@keyframes pulse-glow-strong {
|
||||
0% {
|
||||
box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
|
||||
box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0 0 25px rgba(139, 92, 246, 0.6);
|
||||
box-shadow: 0 0 40px rgba(139, 92, 246, 0.8);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
|
||||
box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.menu-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
@@ -847,7 +924,23 @@ body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
background-color: rgba(100, 116, 139, 0.05);
|
||||
background-color: var(--bg-card);
|
||||
|
||||
/* Removed border-radius: 12px 12px 0 0;
|
||||
.menu-card's overflow: clip will round the corners initially.
|
||||
When sticky at the top, it will be square and perfectly hide scrolling content! */
|
||||
|
||||
/* Sticky within .container scroll area */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 90;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1.25rem;
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.day-name {
|
||||
@@ -860,13 +953,6 @@ body {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1.25rem;
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
/* Each menu item gets its own row */
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
color: var(--text-secondary);
|
||||
@@ -913,6 +999,7 @@ body {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 0.75rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.badges {
|
||||
@@ -994,12 +1081,12 @@ body {
|
||||
|
||||
/* Footer */
|
||||
.app-footer {
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
padding: 0.4rem 2rem;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
font-size: 0.8rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* === Order / Cancel Buttons (inline in status row) === */
|
||||
@@ -1330,17 +1417,20 @@ body {
|
||||
|
||||
/* Day Header Status Colors (User Request) */
|
||||
.card-header.header-violet {
|
||||
background-color: rgba(139, 92, 246, 0.15);
|
||||
background-color: var(--bg-card);
|
||||
background-image: linear-gradient(rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.15));
|
||||
border-bottom: 2px solid #8b5cf6;
|
||||
}
|
||||
|
||||
.card-header.header-green {
|
||||
background-color: rgba(16, 185, 129, 0.15);
|
||||
background-color: var(--bg-card);
|
||||
background-image: linear-gradient(rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.15));
|
||||
border-bottom: 2px solid var(--success-color);
|
||||
}
|
||||
|
||||
.card-header.header-red {
|
||||
background-color: rgba(239, 68, 68, 0.15);
|
||||
background-color: var(--bg-card);
|
||||
background-image: linear-gradient(rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.15));
|
||||
border-bottom: 2px solid var(--error-color);
|
||||
}
|
||||
|
||||
|
||||
@@ -41,20 +41,32 @@ const sandbox = {
|
||||
fetch: async (url) => {
|
||||
// Mock Version Check
|
||||
if (url.includes('version.txt')) {
|
||||
return { ok: true, text: async () => 'v9.9.9' }; // Simulate new version
|
||||
return { ok: true, text: async () => 'v9.9.9', json: async () => ({}) };
|
||||
}
|
||||
// Mock Changelog
|
||||
if (url.includes('changelog.md')) {
|
||||
return { ok: true, text: async () => '## v9.9.9\n- Feature: Cool Stuff' };
|
||||
return { ok: true, text: async () => '## v9.9.9\n- Feature: Cool Stuff', json: async () => ({}) };
|
||||
}
|
||||
return { ok: false }; // Fail others to prevent huge cascades
|
||||
// Mock GitHub Tags API
|
||||
if (url.includes('api.github.com/') || url.includes('/tags')) {
|
||||
return { ok: true, json: async () => [{ name: 'v9.9.9' }] };
|
||||
}
|
||||
// Mock Menu API
|
||||
if (url.includes('/food-menu/menu/')) {
|
||||
return { ok: true, json: async () => ({ dates: [], menu: {} }) };
|
||||
}
|
||||
// Mock Orders API
|
||||
if (url.includes('/user/orders')) {
|
||||
return { ok: true, json: async () => ({ results: [], count: 0 }) };
|
||||
}
|
||||
return { ok: false, status: 404, text: async () => '', json: async () => ({}) };
|
||||
},
|
||||
document: {
|
||||
body: createMockElement('body'),
|
||||
head: createMockElement('head'),
|
||||
createElement: (tag) => createMockElement(tag),
|
||||
querySelector: (sel) => {
|
||||
if (sel === '.material-icons-round.logo-icon') {
|
||||
if (sel === '.logo-img' || sel === '.material-icons-round.logo-icon') {
|
||||
const el = createMockElement('last-updated-icon-mock');
|
||||
// Mock legacy prop for specific test check if needed,
|
||||
// but our generic mock handles replaceWith hook
|
||||
@@ -62,6 +74,7 @@ const sandbox = {
|
||||
}
|
||||
return createMockElement('query-result');
|
||||
},
|
||||
querySelectorAll: () => [createMockElement()],
|
||||
getElementById: (id) => createMockElement(id),
|
||||
documentElement: {
|
||||
setAttribute: () => { },
|
||||
|
||||
@@ -62,6 +62,11 @@ const html = `
|
||||
<button id="btn-this-week" class="active">This Week</button>
|
||||
<button id="btn-next-week">Next Week</button>
|
||||
|
||||
<!-- Mocks for Language Toggle -->
|
||||
<button class="lang-btn" data-lang="de">DE</button>
|
||||
<button class="lang-btn" data-lang="en">EN</button>
|
||||
<button class="lang-btn" data-lang="all">ALL</button>
|
||||
|
||||
<button id="btn-refresh">Refresh</button>
|
||||
<button id="btn-logout">Logout</button>
|
||||
<div class="order-history-header">Header</div>
|
||||
|
||||
@@ -1 +1 @@
|
||||
v1.5.0
|
||||
v1.6.5
|
||||
|
||||
Reference in New Issue
Block a user