Compare commits
20 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
0651d517b2 | ||
|
|
c5e236e095 | ||
|
|
a5bff19796 | ||
|
|
284f3d9a32 | ||
|
|
7ce82ce82e | ||
|
|
ce12684193 | ||
|
|
6cee38e99f | ||
|
|
88758427fd | ||
|
|
23ed867ac4 | ||
|
|
f8b1334a9a | ||
|
|
6b1bd46210 | ||
|
|
a429148324 | ||
|
|
5caaf7dcad | ||
|
|
122c1078cf | ||
|
|
ff48befb8a | ||
|
|
9391dfd8d7 | ||
|
|
467e48e1da | ||
|
|
566410eea5 | ||
|
|
37afc2957b | ||
|
|
b1763135aa |
51
README.md
51
README.md
@@ -8,9 +8,14 @@ Ein intelligentes Bookmarklet für die Mitarbeiter-Kantine der Bessa App. Dieses
|
|||||||
* **Bestell-Countdown:** ⏳ Roter Alarm 1h vor Bestellschluss.
|
* **Bestell-Countdown:** ⏳ Roter Alarm 1h vor Bestellschluss.
|
||||||
* **Smart Highlights:** 🌟 Markiere deine Favoriten (z.B. "Schnitzel", "Vegetarisch").
|
* **Smart Highlights:** 🌟 Markiere deine Favoriten (z.B. "Schnitzel", "Vegetarisch").
|
||||||
* **Bestellstatus:** Farbige Indikatoren für bestellte Menüs.
|
* **Bestellstatus:** Farbige Indikatoren für bestellte Menüs.
|
||||||
* **Kostenkontrolle:** Summiert automatisch den Gesamtpreis der Woche.
|
* **Kostenkontrolle:** 💰 Summiert automatisch den Gesamtpreis der Woche.
|
||||||
* **Session Reuse:** Nutzt automatisch eine bestehende Login-Session (Loggt dich automatisch ein).
|
* **Bestellhistorie:** 📜 Gruppiert nach Monat & KW mit inkrementellem Delta-Cache.
|
||||||
* **Menu Badges:** Zeigt Menü-Codes (M1, M2+) direkt im Header.
|
* **Session Reuse:** 🔑 Nutzt automatisch eine bestehende Login-Session.
|
||||||
|
* **Menu Badges:** 🏷️ Zeigt Menü-Codes (M1, M2+) direkt im Header.
|
||||||
|
* **Menü-Flagging:** 🔔 Ausverkaufte Menüs beobachten und bei Verfügbarkeit benachrichtigt werden.
|
||||||
|
* **Version-Menü:** 📦 Versionsliste mit Installer-Links, Dev-Mode Toggle und Downgrade-Support.
|
||||||
|
* **Cache leeren:** 🗑️ Lokalen Cache mit einem Klick bereinigen (im Version-Menü).
|
||||||
|
* **Favicon:** 🍽️ Eigenes Icon für die Lesezeichenleiste.
|
||||||
* **Changelog:** Übersicht über neue Funktionen direkt im Installer.
|
* **Changelog:** Übersicht über neue Funktionen direkt im Installer.
|
||||||
|
|
||||||
## 📦 Installation
|
## 📦 Installation
|
||||||
@@ -19,7 +24,7 @@ Ein intelligentes Bookmarklet für die Mitarbeiter-Kantine der Bessa App. Dieses
|
|||||||
2. Ziehe den blauen Button **"Kantine Wrapper"** in deine Lesezeichen-Leiste.
|
2. Ziehe den blauen Button **"Kantine Wrapper"** in deine Lesezeichen-Leiste.
|
||||||
3. Fertig!
|
3. Fertig!
|
||||||
|
|
||||||
## usage
|
## 🍽️ Nutzung
|
||||||
|
|
||||||
1. Navigiere zu [https://web.bessa.app/knapp-kantine](https://web.bessa.app/knapp-kantine).
|
1. Navigiere zu [https://web.bessa.app/knapp-kantine](https://web.bessa.app/knapp-kantine).
|
||||||
2. Klicke auf das **"Kantine Wrapper"** Lesezeichen.
|
2. Klicke auf das **"Kantine Wrapper"** Lesezeichen.
|
||||||
@@ -28,24 +33,38 @@ Ein intelligentes Bookmarklet für die Mitarbeiter-Kantine der Bessa App. Dieses
|
|||||||
## 🛠️ Entwicklung
|
## 🛠️ Entwicklung
|
||||||
|
|
||||||
### Voraussetzungen
|
### Voraussetzungen
|
||||||
* Node.js (optional, nur für Build-Scripts)
|
* Node.js (für Build- und Test-Scripts)
|
||||||
|
* Python 3 (für Build-Tests)
|
||||||
* Bash (für `build-bookmarklet.sh`)
|
* Bash (für `build-bookmarklet.sh`)
|
||||||
|
|
||||||
### Projektstruktur
|
### Projektstruktur
|
||||||
|
|
||||||
#### Quelldateien
|
#### Quelldateien
|
||||||
* `kantine.js`: Der Haupt-Quellcode des Bookmarklets (UI, API-Logik, Rendering).
|
| Datei | Beschreibung |
|
||||||
* `style.css`: Das komplette Design (CSS mit Light/Dark Mode).
|
|-------|-------------|
|
||||||
* `mock-data.js`: Mock-Fetch-Interceptor mit realistischen Dummy-Menüdaten für Standalone-Tests.
|
| `kantine.js` | Haupt-Quellcode des Bookmarklets (UI, API-Logik, Rendering). |
|
||||||
* `build-bookmarklet.sh`: Build-Skript – erzeugt alle `dist/`-Artefakte.
|
| `style.css` | Komplettes Design (CSS mit Light/Dark Mode). |
|
||||||
* `test_build.py`: Automatische Build-Tests, laufen am Ende jedes Builds.
|
| `favicon.svg` | Favicon für die Installer-Seite (Dreieck + Gabel & Messer). |
|
||||||
|
| `mock-data.js` | Mock-Fetch-Interceptor mit realistischen Dummy-Menüdaten für Standalone-Tests. |
|
||||||
|
| `build-bookmarklet.sh` | Build-Skript – erzeugt alle `dist/`-Artefakte und führt alle Tests aus. |
|
||||||
|
| `release.sh` | Release-Skript – Commit, Tag, Push zu allen Remotes. |
|
||||||
|
| `version.txt` | Aktuelle Versionsnummer (SemVer). |
|
||||||
|
| `changelog.md` | Änderungshistorie aller Versionen. |
|
||||||
|
| `REQUIREMENTS.md` | System Requirements Specification (SRS). |
|
||||||
|
|
||||||
|
#### Tests
|
||||||
|
| Datei | Beschreibung |
|
||||||
|
|-------|-------------|
|
||||||
|
| `test_logic.js` | Logik-Unit-Tests (statische Analyse, Syntax-Check, Sandbox-Ausführung). |
|
||||||
|
| `tests/test_dom.js` | DOM-Interaktionstests via JSDOM (prüft Event-Listener-Bindung aller UI-Komponenten). |
|
||||||
|
| `test_build.py` | Build-Artefakt-Validierung (Existenz, Inhalt). |
|
||||||
|
|
||||||
#### `dist/` – Build-Artefakte
|
#### `dist/` – Build-Artefakte
|
||||||
| Datei | Beschreibung |
|
| Datei | Beschreibung |
|
||||||
|-------|-------------|
|
|-------|-------------|
|
||||||
| `bookmarklet.txt` | Die rohe Bookmarklet-URL (`javascript:...`). Enthält CSS + JS als selbstextrahierendes IIFE. Kann direkt als Lesezeichen-URL eingefügt werden. |
|
| `bookmarklet.txt` | Die rohe Bookmarklet-URL (`javascript:...`). Enthält CSS + JS als selbstextrahierendes IIFE. Kann direkt als Lesezeichen-URL eingefügt werden. |
|
||||||
| `bookmarklet-payload.js` | Der entpackte Bookmarklet-Payload (JS). Erstellt `<style>` + `<script>` Elemente und injiziert sie in die Seite. Nützlich zum Debuggen. |
|
| `bookmarklet-payload.js` | Der entpackte Bookmarklet-Payload (JS). Erstellt `<style>` + `<script>` Elemente und injiziert sie in die Seite. Nützlich zum Debuggen. |
|
||||||
| `install.html` | Installer-Seite mit Drag & Drop Button, Anleitung, Feature-Liste und Changelog. Kann lokal oder gehostet geöffnet werden. |
|
| `install.html` | Installer-Seite mit Drag & Drop Button, Favicon, Anleitung, Feature-Liste und Changelog. Kann lokal oder gehostet geöffnet werden. |
|
||||||
| `kantine-standalone.html` | Eigenständige HTML-Datei mit eingebettetem CSS + JS + **Mock-Daten**. Lädt automatisch Dummy-Menüs für UI-Tests ohne API-Zugriff. |
|
| `kantine-standalone.html` | Eigenständige HTML-Datei mit eingebettetem CSS + JS + **Mock-Daten**. Lädt automatisch Dummy-Menüs für UI-Tests ohne API-Zugriff. |
|
||||||
|
|
||||||
### Build
|
### Build
|
||||||
@@ -55,5 +74,15 @@ Um Änderungen an `kantine.js` oder `style.css` wirksam zu machen, führe den Bu
|
|||||||
./build-bookmarklet.sh
|
./build-bookmarklet.sh
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Release
|
||||||
|
Erstellt einen Git-Tag, committet Build-Artefakte und pusht zu allen Remotes:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
./release.sh
|
||||||
|
```
|
||||||
|
|
||||||
|
## ⚠️ Hinweis
|
||||||
|
Dieses Projekt enthält zum überwiegenden Teil **KI-generierten Code**. Der Code wurde mithilfe von KI-Assistenten erstellt, überprüft und iterativ verfeinert.
|
||||||
|
|
||||||
## 📝 Lizenz
|
## 📝 Lizenz
|
||||||
Internes Tool.
|
Internes Tool.
|
||||||
|
|||||||
@@ -60,10 +60,10 @@ Das System umfasst die Darstellung von Menüplänen in einer Wochenübersicht, d
|
|||||||
| **Header UI & Navigation** | | | |
|
| **Header UI & Navigation** | | | |
|
||||||
| FR-090 | Die Hauptnavigation (Wochen-Toggles) muss linksbündig neben dem App-Titel positioniert sein. | Niedrig | v1.5.0 |
|
| 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-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 | Sobald über den Daten-Refresh erstmals Menüdaten für die Nächste Woche geladen werden, muss der entsprechende Navigation-Button animiert und farblich (Gelb) hervorgehoben werden. Zusätzlich muss einmalig ein Hinweis eingeblendet werden. Bei Klick auf den Button muss die Hervorhebung erlöschen. | Mittel | v1.6.0 |
|
| 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) |
|
||||||
| **Benutzer-Feedback** | | | |
|
| **Benutzer-Feedback** | | | |
|
||||||
| FR-090 | Alle benutzerrelevanten Aktionen (Bestellung, Stornierung, Fehler) müssen durch nicht-blockierende Benachrichtigungen (Toasts) bestätigt werden. | Mittel | v1.0.1 |
|
| FR-095 | Alle benutzerrelevanten Aktionen (Bestellung, Stornierung, Fehler) müssen durch nicht-blockierende Benachrichtigungen (Toasts) bestätigt werden. | Mittel | v1.0.1 |
|
||||||
| FR-091 | Bei einem Verbindungsfehler muss ein Fehlerdialog mit Fallback-Link zur Originalseite angezeigt werden. | Mittel | v1.0.1 |
|
| FR-096 | Bei einem Verbindungsfehler muss ein Fehlerdialog mit Fallback-Link zur Originalseite angezeigt werden. | Mittel | v1.0.1 |
|
||||||
| **Nächste-Woche-Badge** | | | |
|
| **Nächste-Woche-Badge** | | | |
|
||||||
| FR-100 | Die Navigation zur nächsten Woche muss ein Badge anzeigen, das den Überblick über den Bestellstatus der kommenden Woche visualisiert (bestellt / bestellbar / gesamt). | Niedrig | v1.0.1 |
|
| FR-100 | Die Navigation zur nächsten Woche muss ein Badge anzeigen, das den Überblick über den Bestellstatus der kommenden Woche visualisiert (bestellt / bestellbar / gesamt). | Niedrig | v1.0.1 |
|
||||||
| **Update-Management** | | | |
|
| **Update-Management** | | | |
|
||||||
@@ -73,6 +73,8 @@ Das System umfasst die Darstellung von Menüplänen in einer Wochenübersicht, d
|
|||||||
| FR-113 | Es muss möglich sein, zu einer älteren Version zurückzukehren (Downgrade). | Niedrig | v1.3.0 |
|
| FR-113 | Es muss möglich sein, zu einer älteren Version zurückzukehren (Downgrade). | Niedrig | v1.3.0 |
|
||||||
| FR-114 | Ein Dev-Mode muss es ermöglichen, zwischen stabilen Releases und Entwicklungs-Tags umzuschalten. | Niedrig | v1.3.0 |
|
| FR-114 | Ein Dev-Mode muss es ermöglichen, zwischen stabilen Releases und Entwicklungs-Tags umzuschalten. | Niedrig | v1.3.0 |
|
||||||
| FR-115 | Das Versionsmenü muss Links zur Erstellung von Feature-Requests und Bug-Reports auf GitHub enthalten. | Niedrig | v1.4.4 |
|
| FR-115 | Das Versionsmenü muss Links zur Erstellung von Feature-Requests und Bug-Reports auf GitHub enthalten. | Niedrig | v1.4.4 |
|
||||||
|
| FR-116 | Das Versionsmenü muss eine Funktion zum Leeren des lokalen Caches bereitstellen, um bei hartnäckigen Fehlern alle gespeicherten Daten bereinigen zu können. | Niedrig | v1.4.16 |
|
||||||
|
| FR-117 | Die Installer-Seite muss ein eingebettetes Favicon bereitstellen, das beim Drag & Drop in die Lesezeichenleiste als Icon für das Bookmarklet übernommen wird. | Niedrig | v1.4.19 |
|
||||||
|
|
||||||
## 3. Nicht-funktionale Anforderungen
|
## 3. Nicht-funktionale Anforderungen
|
||||||
|
|
||||||
@@ -85,7 +87,7 @@ Das System umfasst die Darstellung von Menüplänen in einer Wochenübersicht, d
|
|||||||
| **Benutzbarkeit** | NFR-005 | Die Oberfläche muss auf mobilen Geräten fehlerfrei nutzbar sein. | Viewports ab 320px Breite |
|
| **Benutzbarkeit** | NFR-005 | Die Oberfläche muss auf mobilen Geräten fehlerfrei nutzbar sein. | Viewports ab 320px Breite |
|
||||||
| **Benutzbarkeit** | NFR-006 | Alle interaktiven Elemente müssen Tooltips oder Hilfetexte bieten. | 100% Coverage |
|
| **Benutzbarkeit** | NFR-006 | Alle interaktiven Elemente müssen Tooltips oder Hilfetexte bieten. | 100% Coverage |
|
||||||
| **Benutzbarkeit** | NFR-007 | Die Benutzeroberfläche muss vollständig in deutscher Sprache sein. | Vollständige Lokalisierung |
|
| **Benutzbarkeit** | NFR-007 | Die Benutzeroberfläche muss vollständig in deutscher Sprache sein. | Vollständige Lokalisierung |
|
||||||
| **Wartbarkeit** | NFR-008 | Die Build-Artefakte müssen durch automatisierte Tests validiert werden. | Build-Tests + Logik-Tests |
|
| **Wartbarkeit** | NFR-008 | Die Build-Artefakte müssen durch automatisierte Tests validiert werden. | Build-Tests + Logik-Tests + DOM-Tests |
|
||||||
|
|
||||||
## 4. Technische Randbedingungen
|
## 4. Technische Randbedingungen
|
||||||
* **Deployment**: Das System wird als Bookmarklet ausgeliefert, das auf der Bessa-Webseite ausgeführt wird.
|
* **Deployment**: Das System wird als Bookmarklet ausgeliefert, das auf der Bessa-Webseite ausgeführt wird.
|
||||||
@@ -93,4 +95,4 @@ Das System umfasst die Darstellung von Menüplänen in einer Wochenübersicht, d
|
|||||||
* **Datenhaltung**: Clientseitig via `localStorage` (Menü-Cache, Flags, Highlights, Theme) und `sessionStorage` (Auth-Token).
|
* **Datenhaltung**: Clientseitig via `localStorage` (Menü-Cache, Flags, Highlights, Theme) und `sessionStorage` (Auth-Token).
|
||||||
* **Build**: Bash-basiertes Build-Script, das Bookmarklet-URL, Standalone-HTML und Installer-Seite generiert.
|
* **Build**: Bash-basiertes Build-Script, das Bookmarklet-URL, Standalone-HTML und Installer-Seite generiert.
|
||||||
* **Versionierung**: SemVer, verwaltet über GitHub Releases/Tags.
|
* **Versionierung**: SemVer, verwaltet über GitHub Releases/Tags.
|
||||||
* **Tests**: Python-basierte Build-Tests (`python3`) + Node.js-basierte Logik-Tests.
|
* **Tests**: Python-basierte Build-Tests (`python3`) + Node.js-basierte Logik-Tests + Node.js-basierte DOM-Interaktionstests (JSDOM).
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
|
|||||||
DIST_DIR="$SCRIPT_DIR/dist"
|
DIST_DIR="$SCRIPT_DIR/dist"
|
||||||
CSS_FILE="$SCRIPT_DIR/style.css"
|
CSS_FILE="$SCRIPT_DIR/style.css"
|
||||||
JS_FILE="$SCRIPT_DIR/kantine.js"
|
JS_FILE="$SCRIPT_DIR/kantine.js"
|
||||||
|
FAVICON_FILE="$SCRIPT_DIR/favicon.png"
|
||||||
|
|
||||||
# === VERSION ===
|
# === VERSION ===
|
||||||
if [ -f "$SCRIPT_DIR/version.txt" ]; then
|
if [ -f "$SCRIPT_DIR/version.txt" ]; then
|
||||||
@@ -23,6 +24,10 @@ echo "=== Kantine Bookmarklet Builder ($VERSION) ==="
|
|||||||
# Check files exist
|
# Check files exist
|
||||||
if [ ! -f "$CSS_FILE" ]; then echo "ERROR: $CSS_FILE not found"; exit 1; fi
|
if [ ! -f "$CSS_FILE" ]; then echo "ERROR: $CSS_FILE not found"; exit 1; fi
|
||||||
if [ ! -f "$JS_FILE" ]; then echo "ERROR: $JS_FILE not found"; exit 1; fi
|
if [ ! -f "$JS_FILE" ]; then echo "ERROR: $JS_FILE not found"; exit 1; fi
|
||||||
|
if [ ! -f "$FAVICON_FILE" ]; then echo "ERROR: $FAVICON_FILE not found"; exit 1; fi
|
||||||
|
|
||||||
|
# Favicon URL (served from GitHub raw)
|
||||||
|
FAVICON_URL="https://raw.githubusercontent.com/TauNeutrino/kantine-overview/main/favicon.png"
|
||||||
|
|
||||||
CSS_CONTENT=$(cat "$CSS_FILE")
|
CSS_CONTENT=$(cat "$CSS_FILE")
|
||||||
|
|
||||||
@@ -101,6 +106,7 @@ cat > "$DIST_DIR/install.html" << INSTALLEOF
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Kantine Wrapper Installer ($VERSION)</title>
|
<title>Kantine Wrapper Installer ($VERSION)</title>
|
||||||
|
<link rel="icon" type="image/png" href="$FAVICON_URL">
|
||||||
<style>
|
<style>
|
||||||
body { font-family: 'Inter', sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; background: #1a1a2e; color: #eee; }
|
body { font-family: 'Inter', sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; background: #1a1a2e; color: #eee; }
|
||||||
h1 { color: #029AA8; } /* Knapp Teal */
|
h1 { color: #029AA8; } /* Knapp Teal */
|
||||||
@@ -236,6 +242,13 @@ $CHANGELOG_HTML
|
|||||||
EOF
|
EOF
|
||||||
|
|
||||||
cat >> "$DIST_DIR/install.html" << INSTALLEOF
|
cat >> "$DIST_DIR/install.html" << INSTALLEOF
|
||||||
|
// Dynamic favicon injection (overrides proxy defaults like htmlpreview.github.io)
|
||||||
|
document.querySelectorAll('link[rel*="icon"]').forEach(function(el) { el.remove(); });
|
||||||
|
var fi = document.createElement('link');
|
||||||
|
fi.rel = 'icon';
|
||||||
|
fi.type = 'image/png';
|
||||||
|
fi.href = '$FAVICON_URL';
|
||||||
|
document.head.appendChild(fi);
|
||||||
document.getElementById('bookmarklet-link').textContent = 'Kantine $VERSION';
|
document.getElementById('bookmarklet-link').textContent = 'Kantine $VERSION';
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
27
changelog.md
27
changelog.md
@@ -1,3 +1,30 @@
|
|||||||
|
## v1.4.26
|
||||||
|
- 🎨 **Favicon**: Von SVG-Base64 auf PNG-Datei (`favicon.png`) umgestellt, verlinkt via raw.githubusercontent.com. Funktioniert zuverlässig auf allen Browsern und Proxy-Diensten (htmlpreview.github.io).
|
||||||
|
|
||||||
|
## v1.4.25
|
||||||
|
- 🐛 **Bugfix**: Favicon wird in `install.html` jetzt zusätzlich per JavaScript injiziert, um Proxy-Dienste wie htmlpreview.github.io zu überschreiben. Release-Script pusht nun auch `main` Branch zu GitHub.
|
||||||
|
|
||||||
|
## v1.4.24
|
||||||
|
- 🐛 **Bugfix**: Favicon-Encoding korrigiert – `encodeURIComponent` verursachte doppeltes Encoding der Farbcodes (`%23` → `%2523`). Auf Base64 umgestellt, funktioniert nun auch unter Chrome/Windows.
|
||||||
|
|
||||||
|
## v1.4.23
|
||||||
|
- 🐛 **Bugfix**: Favicon wird jetzt beim Ausführen des Bookmarklets in die Seite injiziert (ersetzt das Bessa-Favicon im Tab). Chrome cached das Icon und übernimmt es anschließend auch in die Lesezeichenleiste.
|
||||||
|
|
||||||
|
## v1.4.22
|
||||||
|
- 📝 **Docs**: Vollständiger Dokumentations-Audit: README.md um fehlende Dateien (favicon.svg, release.sh, Tests) und Features (Bestellhistorie, Version-Menü, Cache leeren, Favicon) ergänzt. REQUIREMENTS.md: Doppelte IDs (FR-090/091) behoben, FR-092 an dynamische Glow-Logik angepasst, FR-116 (Cache leeren) und FR-117 (Favicon) hinzugefügt, NFR-008 um DOM-Tests erweitert.
|
||||||
|
|
||||||
|
## v1.4.21
|
||||||
|
- ✨ **UX**: Der Glow-Effekt des „Nächste Woche"-Buttons bleibt nun aktiv, solange Menüdaten vorhanden aber noch keine Bestellungen getätigt wurden. Verschwindet automatisch nach der ersten Bestellung.
|
||||||
|
|
||||||
|
## v1.4.20
|
||||||
|
- 🐛 **Bugfix**: Der Badge-Counter im „Nächste Woche"-Tab wird jetzt sofort nach einer Bestellung oder Stornierung aktualisiert.
|
||||||
|
|
||||||
|
## v1.4.19
|
||||||
|
- 🎨 **Feature**: Eigenes Favicon für die Installer-Seite hinzugefügt (Dreieck + Gabel & Messer). Wird beim Drag & Drop in die Lesezeichenleiste als Icon übernommen.
|
||||||
|
|
||||||
|
## v1.4.18
|
||||||
|
- 🧪 **Testing**: Die automatische DOM-Testing Suite (`test_dom.js`) wurde massiv ausgebaut. Sie prüft nun neben der Alarmglocke und den Highlights auch systematisch alle anderen UI-Komponenten (Login-Modal, History-Modal, Versionen-Modal, Theme-Toggle, und Navigation Tabs) auf korrekte Event-Listener-Bindungen, um Regressionen (tote Buttons) endgültig auszuschließen.
|
||||||
|
|
||||||
## v1.4.17
|
## v1.4.17
|
||||||
- 🐛 **Bugfix**: Regression behoben: Der "Persönliche Highlights" (Stern-Button) Dialog öffnet sich nun wieder korrekt.
|
- 🐛 **Bugfix**: Regression behoben: Der "Persönliche Highlights" (Stern-Button) Dialog öffnet sich nun wieder korrekt.
|
||||||
- 🧪 **Testing**: Es wurde ein initialer UI-Testing-Hook (`test_dom.js` mit `jsdom`) in die Build-Pipeline integriert, um kritische DOM Event-Listener Regressionen (wie den Highlights-Button und die Alarmglocke) automatisch zu preventen.
|
- 🧪 **Testing**: Es wurde ein initialer UI-Testing-Hook (`test_dom.js` mit `jsdom`) in die Build-Pipeline integriert, um kritische DOM Event-Listener Regressionen (wie den Highlights-Button und die Alarmglocke) automatisch zu preventen.
|
||||||
|
|||||||
2
dist/bookmarklet-payload.js
vendored
2
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
56
dist/install.html
vendored
56
dist/install.html
vendored
File diff suppressed because one or more lines are too long
34
dist/kantine-standalone.html
vendored
34
dist/kantine-standalone.html
vendored
@@ -2000,6 +2000,16 @@ body {
|
|||||||
// Replace entire page content
|
// Replace entire page content
|
||||||
document.title = 'Kantine Weekly Menu';
|
document.title = 'Kantine Weekly Menu';
|
||||||
|
|
||||||
|
// Inject custom favicon (triangle + fork & knife PNG)
|
||||||
|
if (document.querySelectorAll) {
|
||||||
|
document.querySelectorAll('link[rel*="icon"]').forEach(el => el.remove());
|
||||||
|
}
|
||||||
|
const favicon = document.createElement('link');
|
||||||
|
favicon.rel = 'icon';
|
||||||
|
favicon.type = 'image/png';
|
||||||
|
favicon.href = 'https://raw.githubusercontent.com/TauNeutrino/kantine-overview/main/favicon.png';
|
||||||
|
document.head.appendChild(favicon);
|
||||||
|
|
||||||
// Inject Google Fonts if not already present
|
// Inject Google Fonts if not already present
|
||||||
if (!document.querySelector('link[href*="fonts.googleapis.com/css2?family=Inter"]')) {
|
if (!document.querySelector('link[href*="fonts.googleapis.com/css2?family=Inter"]')) {
|
||||||
const fontLink = document.createElement('link');
|
const fontLink = document.createElement('link');
|
||||||
@@ -2021,7 +2031,7 @@ body {
|
|||||||
<div class="brand">
|
<div class="brand">
|
||||||
<span class="material-icons-round logo-icon">restaurant_menu</span>
|
<span class="material-icons-round logo-icon">restaurant_menu</span>
|
||||||
<div class="header-left">
|
<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.4.17</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.4.26</small></h1>
|
||||||
<div id="last-updated-subtitle" class="subtitle"></div>
|
<div id="last-updated-subtitle" class="subtitle"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-group" style="margin-left: 1rem;">
|
<div class="nav-group" style="margin-left: 1rem;">
|
||||||
@@ -2163,7 +2173,7 @@ body {
|
|||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div style="margin-bottom: 1rem;">
|
<div style="margin-bottom: 1rem;">
|
||||||
<strong>Aktuell:</strong> <span id="version-current">v1.4.17</span>
|
<strong>Aktuell:</strong> <span id="version-current">v1.4.26</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="dev-toggle">
|
<div class="dev-toggle">
|
||||||
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
|
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
|
||||||
@@ -2531,6 +2541,7 @@ body {
|
|||||||
}
|
}
|
||||||
console.log(`Fetched ${results.length} orders, mapped active ones.`);
|
console.log(`Fetched ${results.length} orders, mapped active ones.`);
|
||||||
renderVisibleWeeks();
|
renderVisibleWeeks();
|
||||||
|
updateNextWeekBadge();
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error fetching orders:', error);
|
console.error('Error fetching orders:', error);
|
||||||
@@ -3596,12 +3607,17 @@ body {
|
|||||||
badge.classList.add('has-highlights');
|
badge.classList.add('has-highlights');
|
||||||
}
|
}
|
||||||
|
|
||||||
// FR-092: Highlight Next Week Button when new data arrives
|
// FR-092: Glow Next Week button while data exists but no orders placed
|
||||||
const storageKey = `kantine_notified_nextweek_${nextYear}_${nextWeek}`;
|
if (daysWithOrders === 0) {
|
||||||
if (!localStorage.getItem(storageKey)) {
|
|
||||||
localStorage.setItem(storageKey, 'true');
|
|
||||||
btnNextWeek.classList.add('new-week-available');
|
btnNextWeek.classList.add('new-week-available');
|
||||||
showToast('Neue Menüdaten für nächste Woche verfügbar!', 'info');
|
// One-time toast notification when new data first arrives
|
||||||
|
const storageKey = `kantine_notified_nextweek_${nextYear}_${nextWeek}`;
|
||||||
|
if (!localStorage.getItem(storageKey)) {
|
||||||
|
localStorage.setItem(storageKey, 'true');
|
||||||
|
showToast('Neue Menüdaten für nächste Woche verfügbar!', 'info');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
btnNextWeek.classList.remove('new-week-available');
|
||||||
}
|
}
|
||||||
|
|
||||||
} else if (badge) {
|
} else if (badge) {
|
||||||
@@ -4010,7 +4026,7 @@ body {
|
|||||||
|
|
||||||
// Periodic update check (runs on init + every hour)
|
// Periodic update check (runs on init + every hour)
|
||||||
async function checkForUpdates() {
|
async function checkForUpdates() {
|
||||||
const currentVersion = 'v1.4.17';
|
const currentVersion = 'v1.4.26';
|
||||||
const devMode = localStorage.getItem('kantine_dev_mode') === 'true';
|
const devMode = localStorage.getItem('kantine_dev_mode') === 'true';
|
||||||
|
|
||||||
try {
|
try {
|
||||||
@@ -4051,7 +4067,7 @@ body {
|
|||||||
const modal = document.getElementById('version-modal');
|
const modal = document.getElementById('version-modal');
|
||||||
const container = document.getElementById('version-list-container');
|
const container = document.getElementById('version-list-container');
|
||||||
const devToggle = document.getElementById('dev-mode-toggle');
|
const devToggle = document.getElementById('dev-mode-toggle');
|
||||||
const currentVersion = 'v1.4.17';
|
const currentVersion = 'v1.4.26';
|
||||||
|
|
||||||
if (!modal) return;
|
if (!modal) return;
|
||||||
modal.classList.remove('hidden');
|
modal.classList.remove('hidden');
|
||||||
|
|||||||
BIN
favicon.png
Executable file
BIN
favicon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 832 B |
29
favicon.svg
Executable file
29
favicon.svg
Executable file
@@ -0,0 +1,29 @@
|
|||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
26
kantine.js
26
kantine.js
@@ -50,6 +50,16 @@
|
|||||||
// Replace entire page content
|
// Replace entire page content
|
||||||
document.title = 'Kantine Weekly Menu';
|
document.title = 'Kantine Weekly Menu';
|
||||||
|
|
||||||
|
// Inject custom favicon (triangle + fork & knife PNG)
|
||||||
|
if (document.querySelectorAll) {
|
||||||
|
document.querySelectorAll('link[rel*="icon"]').forEach(el => el.remove());
|
||||||
|
}
|
||||||
|
const favicon = document.createElement('link');
|
||||||
|
favicon.rel = 'icon';
|
||||||
|
favicon.type = 'image/png';
|
||||||
|
favicon.href = 'https://raw.githubusercontent.com/TauNeutrino/kantine-overview/main/favicon.png';
|
||||||
|
document.head.appendChild(favicon);
|
||||||
|
|
||||||
// Inject Google Fonts if not already present
|
// Inject Google Fonts if not already present
|
||||||
if (!document.querySelector('link[href*="fonts.googleapis.com/css2?family=Inter"]')) {
|
if (!document.querySelector('link[href*="fonts.googleapis.com/css2?family=Inter"]')) {
|
||||||
const fontLink = document.createElement('link');
|
const fontLink = document.createElement('link');
|
||||||
@@ -581,6 +591,7 @@
|
|||||||
}
|
}
|
||||||
console.log(`Fetched ${results.length} orders, mapped active ones.`);
|
console.log(`Fetched ${results.length} orders, mapped active ones.`);
|
||||||
renderVisibleWeeks();
|
renderVisibleWeeks();
|
||||||
|
updateNextWeekBadge();
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error fetching orders:', error);
|
console.error('Error fetching orders:', error);
|
||||||
@@ -1646,12 +1657,17 @@
|
|||||||
badge.classList.add('has-highlights');
|
badge.classList.add('has-highlights');
|
||||||
}
|
}
|
||||||
|
|
||||||
// FR-092: Highlight Next Week Button when new data arrives
|
// FR-092: Glow Next Week button while data exists but no orders placed
|
||||||
const storageKey = `kantine_notified_nextweek_${nextYear}_${nextWeek}`;
|
if (daysWithOrders === 0) {
|
||||||
if (!localStorage.getItem(storageKey)) {
|
|
||||||
localStorage.setItem(storageKey, 'true');
|
|
||||||
btnNextWeek.classList.add('new-week-available');
|
btnNextWeek.classList.add('new-week-available');
|
||||||
showToast('Neue Menüdaten für nächste Woche verfügbar!', 'info');
|
// One-time toast notification when new data first arrives
|
||||||
|
const storageKey = `kantine_notified_nextweek_${nextYear}_${nextWeek}`;
|
||||||
|
if (!localStorage.getItem(storageKey)) {
|
||||||
|
localStorage.setItem(storageKey, 'true');
|
||||||
|
showToast('Neue Menüdaten für nächste Woche verfügbar!', 'info');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
btnNextWeek.classList.remove('new-week-available');
|
||||||
}
|
}
|
||||||
|
|
||||||
} else if (badge) {
|
} else if (badge) {
|
||||||
|
|||||||
@@ -49,8 +49,9 @@ echo "=== Pushing to remotes ==="
|
|||||||
git push origin HEAD
|
git push origin HEAD
|
||||||
git push origin --force tag "$VERSION"
|
git push origin --force tag "$VERSION"
|
||||||
|
|
||||||
# If a remote named 'github' exists, push tags there too
|
# If a remote named 'github' exists, push branch and tags there too
|
||||||
if git remote | grep -q "^github$"; then
|
if git remote | grep -q "^github$"; then
|
||||||
|
git push github HEAD
|
||||||
git push github --force tag "$VERSION"
|
git push github --force tag "$VERSION"
|
||||||
fi
|
fi
|
||||||
|
|
||||||
|
|||||||
@@ -29,6 +29,43 @@ const html = `
|
|||||||
<button id="btn-add-tag">Add</button>
|
<button id="btn-add-tag">Add</button>
|
||||||
<ul id="tags-list"></ul>
|
<ul id="tags-list"></ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Mocks for Login Modal -->
|
||||||
|
<button id="btn-login-open">Login</button>
|
||||||
|
<div id="login-modal" class="modal hidden">
|
||||||
|
<button id="btn-login-close">Close</button>
|
||||||
|
<form id="login-form"></form>
|
||||||
|
<div id="login-error" class="hidden"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mocks for History Modal -->
|
||||||
|
<button id="btn-history">History</button>
|
||||||
|
<div id="history-modal" class="modal hidden">
|
||||||
|
<button id="btn-history-close">Close</button>
|
||||||
|
<div id="history-loading" class="hidden"></div>
|
||||||
|
<div id="history-content"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mocks for Version Modal -->
|
||||||
|
<span class="version-tag">v1.4.17</span>
|
||||||
|
<div id="version-modal" class="modal hidden">
|
||||||
|
<button id="btn-version-close">Close</button>
|
||||||
|
<button id="btn-clear-cache">Clear</button>
|
||||||
|
<span id="version-current"></span>
|
||||||
|
<div id="version-list-container"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mocks for Theme Toggle -->
|
||||||
|
<button id="theme-toggle"><span class="theme-icon">light_mode</span></button>
|
||||||
|
|
||||||
|
<!-- Mocks for Navigation Tabs -->
|
||||||
|
<button id="btn-this-week" class="active">This Week</button>
|
||||||
|
<button id="btn-next-week">Next Week</button>
|
||||||
|
|
||||||
|
<button id="btn-refresh">Refresh</button>
|
||||||
|
<button id="btn-logout">Logout</button>
|
||||||
|
<div class="order-history-header">Header</div>
|
||||||
|
<button id="btn-error-redirect">Error Redirect</button>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
`;
|
`;
|
||||||
@@ -37,7 +74,8 @@ log("Reading file jsCode...");
|
|||||||
const jsCode = fs.readFileSync('kantine.js', 'utf8')
|
const jsCode = fs.readFileSync('kantine.js', 'utf8')
|
||||||
.replace('(function () {', '')
|
.replace('(function () {', '')
|
||||||
.replace('})();', '')
|
.replace('})();', '')
|
||||||
.replace('if (window.__KANTINE_LOADED) return;', '');
|
.replace('if (window.__KANTINE_LOADED) return;', '')
|
||||||
|
.replace('window.location.reload();', 'window.__RELOAD_CALLED = true;');
|
||||||
|
|
||||||
log("Instantiating JSDOM...");
|
log("Instantiating JSDOM...");
|
||||||
const dom = new JSDOM(html, { runScripts: "dangerously", url: "http://localhost/" });
|
const dom = new JSDOM(html, { runScripts: "dangerously", url: "http://localhost/" });
|
||||||
@@ -74,9 +112,6 @@ const testCode = `
|
|||||||
const hlModal = document.getElementById('highlights-modal');
|
const hlModal = document.getElementById('highlights-modal');
|
||||||
if (!hlModal.classList.contains('hidden')) throw new Error("Highlights modal should be hidden initially");
|
if (!hlModal.classList.contains('hidden')) throw new Error("Highlights modal should be hidden initially");
|
||||||
|
|
||||||
// Call bindEvents manually to attach the listeners since the IIFE is stripped
|
|
||||||
bindEvents();
|
|
||||||
|
|
||||||
// Click to open
|
// Click to open
|
||||||
document.getElementById('btn-highlights').click();
|
document.getElementById('btn-highlights').click();
|
||||||
if (hlModal.classList.contains('hidden')) throw new Error("Highlights modal did not open upon clicking btn-highlights!");
|
if (hlModal.classList.contains('hidden')) throw new Error("Highlights modal did not open upon clicking btn-highlights!");
|
||||||
@@ -87,6 +122,56 @@ const testCode = `
|
|||||||
|
|
||||||
console.log("✅ Highlights Modal Test Passed");
|
console.log("✅ Highlights Modal Test Passed");
|
||||||
|
|
||||||
|
console.log("--- Testing Login Modal ---");
|
||||||
|
const loginModal = document.getElementById('login-modal');
|
||||||
|
document.getElementById('btn-login-open').click();
|
||||||
|
if (loginModal.classList.contains('hidden')) throw new Error("Login modal should open");
|
||||||
|
document.getElementById('btn-login-close').click();
|
||||||
|
if (!loginModal.classList.contains('hidden')) throw new Error("Login modal should close");
|
||||||
|
console.log("✅ Login Modal Test Passed");
|
||||||
|
|
||||||
|
console.log("--- Testing History Modal ---");
|
||||||
|
// We need authToken to be truthy to open history modal
|
||||||
|
authToken = "fake_token";
|
||||||
|
const historyModal = document.getElementById('history-modal');
|
||||||
|
document.getElementById('btn-history').click();
|
||||||
|
if (historyModal.classList.contains('hidden')) throw new Error("History modal should open");
|
||||||
|
document.getElementById('btn-history-close').click();
|
||||||
|
if (!historyModal.classList.contains('hidden')) throw new Error("History modal should close");
|
||||||
|
console.log("✅ History Modal Test Passed");
|
||||||
|
|
||||||
|
console.log("--- Testing Version Modal ---");
|
||||||
|
const versionModal = document.getElementById('version-modal');
|
||||||
|
document.querySelector('.version-tag').click();
|
||||||
|
if (versionModal.classList.contains('hidden')) throw new Error("Version modal should open");
|
||||||
|
document.getElementById('btn-version-close').click();
|
||||||
|
if (!versionModal.classList.contains('hidden')) throw new Error("Version modal should close");
|
||||||
|
console.log("✅ Version Modal Test Passed");
|
||||||
|
|
||||||
|
console.log("--- Testing Theme Toggle ---");
|
||||||
|
const themeBtn = document.getElementById('theme-toggle');
|
||||||
|
const initialTheme = document.documentElement.getAttribute('data-theme');
|
||||||
|
themeBtn.click();
|
||||||
|
const newTheme = document.documentElement.getAttribute('data-theme');
|
||||||
|
if (initialTheme === newTheme) throw new Error("Theme did not toggle");
|
||||||
|
console.log("✅ Theme Toggle Test Passed");
|
||||||
|
|
||||||
|
console.log("--- Testing Navigation Tabs ---");
|
||||||
|
const btnThis = document.getElementById('btn-this-week');
|
||||||
|
const btnNext = document.getElementById('btn-next-week');
|
||||||
|
btnNext.click();
|
||||||
|
if (!btnNext.classList.contains('active') || btnThis.classList.contains('active')) throw new Error("Next week tab not active");
|
||||||
|
btnThis.click();
|
||||||
|
if (!btnThis.classList.contains('active') || btnNext.classList.contains('active')) throw new Error("This week tab not active");
|
||||||
|
console.log("✅ Navigation Tabs Test Passed");
|
||||||
|
|
||||||
|
console.log("--- Testing Clear Cache Button ---");
|
||||||
|
// Mock confirm directly inside evaluated JSDOM context
|
||||||
|
window.confirm = () => true;
|
||||||
|
document.getElementById('btn-clear-cache').click();
|
||||||
|
if (!window.__RELOAD_CALLED) throw new Error("Clear cache did not reload the page");
|
||||||
|
console.log("✅ Clear Cache Button Test Passed");
|
||||||
|
|
||||||
window.__TEST_PASSED = true;
|
window.__TEST_PASSED = true;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
v1.4.17
|
v1.4.26
|
||||||
|
|||||||
Reference in New Issue
Block a user